From bba14d0445743768568ca501e6579723283e9eb1 Mon Sep 17 00:00:00 2001 From: Lukas Tyla Date: Thu, 29 Aug 2024 11:57:38 +0300 Subject: [PATCH] [core] Use `useRtl` instead of `useTheme` to access direction (#14359) --- .../ChartsLegend/ContinuousColorLegend.tsx | 6 +-- .../src/ChartsLegend/LegendPerItem.tsx | 9 ++-- .../x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 5 +- packages/x-charts/src/PieChart/PieChart.tsx | 8 +-- packages/x-charts/src/internals/useIsRTL.ts | 6 --- .../components/GridColumnMenuPinningItem.tsx | 6 +-- .../columnReorder/useGridColumnReorder.tsx | 14 ++--- .../src/components/cell/GridActionsCell.tsx | 6 +-- .../src/hooks/core/gridCoreSelector.ts | 2 +- .../src/hooks/core/useGridInitialization.ts | 4 +- .../src/hooks/core/useGridIsRtl.tsx | 20 ++++++++ .../src/hooks/core/useGridTheme.tsx | 20 -------- .../columnHeaders/useGridColumnHeaders.tsx | 7 +-- .../columnResize/useGridColumnResize.tsx | 10 ++-- .../features/columns/gridColumnsSelector.ts | 12 ++--- .../useGridKeyboardNavigation.ts | 51 ++++++++----------- .../hooks/features/scroll/useGridScroll.ts | 8 +-- .../virtualization/useGridVirtualScroller.tsx | 26 +++++----- .../src/models/gridStateCommunity.ts | 3 +- 19 files changed, 101 insertions(+), 122 deletions(-) delete mode 100644 packages/x-charts/src/internals/useIsRTL.ts create mode 100644 packages/x-data-grid/src/hooks/core/useGridIsRtl.tsx delete mode 100644 packages/x-data-grid/src/hooks/core/useGridTheme.tsx diff --git a/packages/x-charts/src/ChartsLegend/ContinuousColorLegend.tsx b/packages/x-charts/src/ChartsLegend/ContinuousColorLegend.tsx index d331e317f945..00880553da64 100644 --- a/packages/x-charts/src/ChartsLegend/ContinuousColorLegend.tsx +++ b/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 }; diff --git a/packages/x-charts/src/ChartsLegend/LegendPerItem.tsx b/packages/x-charts/src/ChartsLegend/LegendPerItem.tsx index dd61aeb4e9f8..da5ef97569b5 100644 --- a/packages/x-charts/src/ChartsLegend/LegendPerItem.tsx +++ b/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) { diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx index 281ce8d1b3d2..a26a6b4f67d8 100644 --- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx +++ b/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, diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index dca99305017f..51fe9e0d87a3 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/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, }; diff --git a/packages/x-charts/src/internals/useIsRTL.ts b/packages/x-charts/src/internals/useIsRTL.ts deleted file mode 100644 index 21e7f0fe692d..000000000000 --- a/packages/x-charts/src/internals/useIsRTL.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { useTheme } from '@mui/material/styles'; - -export const useIsRTL = () => { - const theme = useTheme(); - return theme.direction === 'rtl'; -}; diff --git a/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx b/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx index 743fcb3fc341..0a07624dc306 100644 --- a/packages/x-data-grid-pro/src/components/GridColumnMenuPinningItem.tsx +++ b/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) => { @@ -76,7 +76,7 @@ function GridColumnMenuPinningItem(props: GridColumnMenuItemProps) { ); } - if (theme.direction === 'rtl') { + if (isRtl) { return ( {pinToRightMenuItem} diff --git a/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx b/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx index e882e42ea10a..9f47e47ab497 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx +++ b/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>(); 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>( diff --git a/packages/x-data-grid/src/components/cell/GridActionsCell.tsx b/packages/x-data-grid/src/components/cell/GridActionsCell.tsx index 2abc7adc0e45..39c20b5c639e 100644 --- a/packages/x-data-grid/src/components/cell/GridActionsCell.tsx +++ b/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(null); const ignoreCallToFocus = React.useRef(false); const touchRippleRefs = React.useRef>({}); - 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 diff --git a/packages/x-data-grid/src/hooks/core/gridCoreSelector.ts b/packages/x-data-grid/src/hooks/core/gridCoreSelector.ts index b48fbbb0d2a0..3ec68fdafab0 100644 --- a/packages/x-data-grid/src/hooks/core/gridCoreSelector.ts +++ b/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; diff --git a/packages/x-data-grid/src/hooks/core/useGridInitialization.ts b/packages/x-data-grid/src/hooks/core/useGridInitialization.ts index 104363f8ba80..d59852b43a54 100644 --- a/packages/x-data-grid/src/hooks/core/useGridInitialization.ts +++ b/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(inputApiRef, props); useGridRefs(privateApiRef); - useGridTheme(privateApiRef); + useGridIsRtl(privateApiRef); useGridLoggerFactory(privateApiRef, props); useGridStateInitialization(privateApiRef); useGridPipeProcessing(privateApiRef); diff --git a/packages/x-data-grid/src/hooks/core/useGridIsRtl.tsx b/packages/x-data-grid/src/hooks/core/useGridIsRtl.tsx new file mode 100644 index 000000000000..576952df12ca --- /dev/null +++ b/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): 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]); +}; diff --git a/packages/x-data-grid/src/hooks/core/useGridTheme.tsx b/packages/x-data-grid/src/hooks/core/useGridTheme.tsx deleted file mode 100644 index 9647f596bd28..000000000000 --- a/packages/x-data-grid/src/hooks/core/useGridTheme.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; -import { GridPrivateApiCommon } from '../../models/api/gridApiCommon'; - -export const useGridTheme = (apiRef: React.MutableRefObject): void => { - const theme = useTheme(); - - if (!apiRef.current.state.theme) { - apiRef.current.state.theme = theme; - } - - const isFirstEffect = React.useRef(true); - React.useEffect(() => { - if (isFirstEffect.current) { - isFirstEffect.current = false; - } else { - apiRef.current.setState((state) => ({ ...state, theme })); - } - }, [apiRef, theme]); -}; diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index de3a72f4a844..6653bc4367ff 100644 --- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/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; diff --git a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx index 6e4b3cc9573e..b087e8243b9e 100644 --- a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/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, diff --git a/packages/x-data-grid/src/hooks/features/columns/gridColumnsSelector.ts b/packages/x-data-grid/src/hooks/features/columns/gridColumnsSelector.ts index c06920307eb8..f252388bc18f 100644 --- a/packages/x-data-grid/src/hooks/features/columns/gridColumnsSelector.ts +++ b/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]), diff --git a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts index 1854e8a134b0..d11ecf537ce0 100644 --- a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts +++ b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; +import { useRtl } from '@mui/system/RtlProvider'; import { GridEventListener } from '../../../models/events'; import { GridApiCommunity, GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; import { GridCellParams } from '../../../models/params/gridCellParams'; @@ -38,18 +38,18 @@ const getLeftColumnIndex = ({ currentColIndex, firstColIndex, lastColIndex, - direction, + isRtl, }: { currentColIndex: number; firstColIndex: number; lastColIndex: number; - direction: 'rtl' | 'ltr'; + isRtl: boolean; }) => { - if (direction === 'rtl') { + if (isRtl) { if (currentColIndex < lastColIndex) { return currentColIndex + 1; } - } else if (direction === 'ltr') { + } else if (!isRtl) { if (currentColIndex > firstColIndex) { return currentColIndex - 1; } @@ -61,18 +61,18 @@ const getRightColumnIndex = ({ currentColIndex, firstColIndex, lastColIndex, - direction, + isRtl, }: { currentColIndex: number; firstColIndex: number; lastColIndex: number; - direction: 'rtl' | 'ltr'; + isRtl: boolean; }) => { - if (direction === 'rtl') { + if (isRtl) { if (currentColIndex > firstColIndex) { return currentColIndex - 1; } - } else if (direction === 'ltr') { + } else if (!isRtl) { if (currentColIndex < lastColIndex) { return currentColIndex + 1; } @@ -103,7 +103,7 @@ export const useGridKeyboardNavigation = ( ): void => { const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation'); const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows; - const theme = useTheme(); + const isRtl = useRtl(); const currentPageRows = React.useMemo( () => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), @@ -220,7 +220,7 @@ export const useGridKeyboardNavigation = ( currentColIndex: colIndexBefore, firstColIndex, lastColIndex, - direction: theme.direction, + isRtl, }); if (rightColIndex !== null) { @@ -235,7 +235,7 @@ export const useGridKeyboardNavigation = ( currentColIndex: colIndexBefore, firstColIndex, lastColIndex, - direction: theme.direction, + isRtl, }); if (leftColIndex !== null) { goToHeader(leftColIndex, event); @@ -300,7 +300,7 @@ export const useGridKeyboardNavigation = ( goToHeaderFilter, goToCell, getRowIdFromIndex, - theme.direction, + isRtl, goToHeader, goToGroupHeader, ], @@ -337,7 +337,7 @@ export const useGridKeyboardNavigation = ( currentColIndex: colIndexBefore, firstColIndex, lastColIndex, - direction: theme.direction, + isRtl, }); if (rightColIndex !== null) { @@ -352,7 +352,7 @@ export const useGridKeyboardNavigation = ( currentColIndex: colIndexBefore, firstColIndex, lastColIndex, - direction: theme.direction, + isRtl, }); if (leftColIndex !== null) { goToHeaderFilter(leftColIndex, event); @@ -407,7 +407,7 @@ export const useGridKeyboardNavigation = ( apiRef, currentPageRows.length, goToHeaderFilter, - theme.direction, + isRtl, goToHeader, goToCell, getRowIdFromIndex, @@ -535,7 +535,6 @@ export const useGridKeyboardNavigation = ( return; } - const direction = theme.direction; const viewportPageSize = apiRef.current.getViewportPageSize(); const colIndexBefore = (params as GridCellParams).field @@ -573,14 +572,10 @@ export const useGridKeyboardNavigation = ( 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; } @@ -590,14 +585,10 @@ export const useGridKeyboardNavigation = ( 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; } @@ -685,7 +676,7 @@ export const useGridKeyboardNavigation = ( [ apiRef, currentPageRows, - theme.direction, + isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, diff --git a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts index 0c5543e0d12e..798ffd854c01 100644 --- a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts +++ b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; +import { useRtl } from '@mui/system/RtlProvider'; import { GridCellIndexCoordinates } from '../../../models/gridCell'; import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; import { useGridLogger } from '../../utils/useGridLogger'; @@ -55,7 +55,7 @@ export const useGridScroll = ( apiRef: React.MutableRefObject, props: Pick, ): void => { - const theme = useTheme(); + const isRtl = useRtl(); const logger = useGridLogger(apiRef, 'useGridScroll'); const colRef = apiRef.current.columnHeadersContainerRef; const virtualScrollerRef = apiRef.current.virtualScrollerRef!; @@ -145,7 +145,7 @@ export const useGridScroll = ( const scroll = React.useCallback( (params: Partial) => { 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}`); @@ -156,7 +156,7 @@ export const useGridScroll = ( } logger.debug(`Scrolling, updating container, and viewport`); }, - [virtualScrollerRef, theme.direction, colRef, logger], + [virtualScrollerRef, isRtl, colRef, logger], ); const getScrollPosition = React.useCallback(() => { diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 4c12b9b87a56..614af3bf0847 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -7,7 +7,7 @@ import { import useLazyRef from '@mui/utils/useLazyRef'; import useTimeout from '@mui/utils/useTimeout'; import { useResizeObserver } from '@mui/x-internals/useResizeObserver'; -import { useTheme, Theme } from '@mui/material/styles'; +import { useRtl } from '@mui/system/RtlProvider'; import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext'; import { useGridRootProps } from '../../utils/useGridRootProps'; @@ -68,7 +68,7 @@ const EMPTY_SCROLL_POSITION = { top: 0, left: 0 }; export const EMPTY_DETAIL_PANELS = Object.freeze(new Map()); const createScrollCache = ( - mode: 'ltr' | 'rtl', + isRtl: boolean, rowBufferPx: number, columnBufferPx: number, verticalBuffer: number, @@ -76,7 +76,7 @@ const createScrollCache = ( ) => ({ direction: ScrollDirection.NONE, buffer: bufferForDirection( - mode, + isRtl, ScrollDirection.NONE, rowBufferPx, columnBufferPx, @@ -109,7 +109,7 @@ export const useGridVirtualScroller = () => { 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); @@ -149,7 +149,7 @@ export const useGridVirtualScroller = () => { const frozenContext = React.useRef(undefined); const scrollCache = useLazyRef(() => createScrollCache( - theme.direction, + isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, @@ -254,7 +254,7 @@ export const useGridVirtualScroller = () => { scrollCache.direction = direction; scrollCache.buffer = bufferForDirection( - theme.direction, + isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, @@ -290,12 +290,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; } @@ -466,7 +466,7 @@ export const useGridVirtualScroller = () => { const offsetLeft = computeOffsetLeft( columnPositions, currentRenderContext, - theme.direction, + isRtl, pinnedColumns.left.length, ); const showBottomBorder = isLastVisibleInSection && params.position === 'top'; @@ -943,10 +943,10 @@ export function areRenderContextsEqual(context1: GridRenderContext, context2: Gr export function computeOffsetLeft( columnPositions: number[], renderContext: GridColumnsRenderContext, - direction: Theme['direction'], + isRtl: boolean, pinnedLeftLength: number, ) { - const factor = direction === 'ltr' ? 1 : -1; + const factor = isRtl ? -1 : 1; const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0); @@ -976,14 +976,14 @@ function directionForDelta(dx: number, dy: number) { } function bufferForDirection( - mode: 'ltr' | 'rtl', + isRtl: boolean, direction: ScrollDirection, rowBufferPx: number, columnBufferPx: number, verticalBuffer: number, horizontalBuffer: number, ) { - if (mode === 'rtl') { + if (isRtl) { switch (direction) { case ScrollDirection.LEFT: direction = ScrollDirection.RIGHT; diff --git a/packages/x-data-grid/src/models/gridStateCommunity.ts b/packages/x-data-grid/src/models/gridStateCommunity.ts index 7e00992692bf..ee737b4b8a51 100644 --- a/packages/x-data-grid/src/models/gridStateCommunity.ts +++ b/packages/x-data-grid/src/models/gridStateCommunity.ts @@ -1,4 +1,3 @@ -import type { Theme } from '@mui/material/styles'; import type { GridColumnMenuState, GridColumnsInitialState, @@ -31,7 +30,7 @@ import type { GridColumnResizeState } from '../hooks/features/columnResize'; * The state of `DataGrid`. */ export interface GridStateCommunity { - theme: Theme; + isRtl: boolean; dimensions: GridDimensionsState; rows: GridRowsState; visibleRowsLookup: GridVisibleRowsLookupState;