[pickers] Use useRtl instead of useTheme to access direction

docs/pages/x/api/date-pickers/pickers-layout.json

@@ -1,5 +1,6 @@
 {
  "props": {
+ "isRtl": { "type": { "name": "bool" }, "required": true },
  "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
  "orientation": {
  "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }

docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json

@@ -2,6 +2,9 @@
  "componentDescription": "",
  "propDescriptions": {
  "classes": { "description": "Override or extend the styles applied to the component." },
+ "isRtl": {
+ "description": "<code>true</code> if the application is in right-to-left direction."
+ },
  "orientation": { "description": "Force rendering in particular orientation." },
  "slotProps": { "description": "The props used for each component slot." },
  "slots": { "description": "Overridable component slots." },

packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts

@@ -144,12 +144,12 @@ export const getRangeFieldValueManager = <TDate extends PickerValidDate>({
  ...dateRangeSections.endDate,
  ]);
  },
- getV6InputValueFromSections: (sections, localizedDigits, isRTL) => {
+ getV6InputValueFromSections: (sections, localizedDigits, isRtl) => {
  const dateRangeSections = splitDateRangeSections(sections);
  return createDateStrForV6InputFromSections(
  [...dateRangeSections.startDate, ...dateRangeSections.endDate],
  localizedDigits,
- isRTL,
+ isRtl,
  );
  },
  parseValueStr: (valueStr, referenceValue, parseDate) => {

packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import Typography from '@mui/material/Typography';
 import { useSlotProps, SlotComponentProps } from '@mui/base/utils';
-import { styled, useTheme, useThemeProps } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
+import { styled, useThemeProps } from '@mui/material/styles';
 import {
  unstable_composeClasses as composeClasses,
  unstable_useControlled as useControlled,
@@ -371,8 +372,7 @@ export function DayCalendar<TDate extends PickerValidDate>(inProps: DayCalendarP
 
  const now = useNow<TDate>(timezone);
  const classes = useUtilityClasses(props);
- const theme = useTheme();
- const isRTL = theme.direction === 'rtl';
+ const isRtl = useRtl();
 
  const isDateDisabled = useIsDateDisabled({
  shouldDisableDate,
@@ -428,14 +428,14 @@ export function DayCalendar<TDate extends PickerValidDate>(inProps: DayCalendarP
  event.preventDefault();
  break;
  case 'ArrowLeft': {
- const newFocusedDayDefault = utils.addDays(day, isRTL ? 1 : -1);
- const nextAvailableMonth = utils.addMonths(day, isRTL ? 1 : -1);
+ const newFocusedDayDefault = utils.addDays(day, isRtl ? 1 : -1);
+ const nextAvailableMonth = utils.addMonths(day, isRtl ? 1 : -1);
 
  const closestDayToFocus = findClosestEnabledDate({
  utils,
  date: newFocusedDayDefault,
- minDate: isRTL ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
- maxDate: isRTL ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+ minDate: isRtl ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
+ maxDate: isRtl ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
  isDateDisabled,
  timezone,
  });
@@ -444,14 +444,14 @@ export function DayCalendar<TDate extends PickerValidDate>(inProps: DayCalendarP
  break;
  }
  case 'ArrowRight': {
- const newFocusedDayDefault = utils.addDays(day, isRTL ? -1 : 1);
- const nextAvailableMonth = utils.addMonths(day, isRTL ? -1 : 1);
+ const newFocusedDayDefault = utils.addDays(day, isRtl ? -1 : 1);
+ const nextAvailableMonth = utils.addMonths(day, isRtl ? -1 : 1);
 
  const closestDayToFocus = findClosestEnabledDate({
  utils,
  date: newFocusedDayDefault,
- minDate: isRTL ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
- maxDate: isRTL ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
+ minDate: isRtl ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+ maxDate: isRtl ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
  isDateDisabled,
  timezone,
  });

packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled, useThemeProps, useTheme, Theme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
+import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
@@ -41,13 +42,19 @@ export interface DateTimePickerToolbarProps<TDate extends PickerValidDate>
  ampmInClock?: boolean;
 }
 
-const useUtilityClasses = (ownerState: DateTimePickerToolbarProps<any> & { theme: Theme }) => {
- const { classes, theme, isLandscape } = ownerState;
+interface DateTimePickerToolbarOwnerState<TDate extends PickerValidDate>
+ extends DateTimePickerToolbarProps<TDate> {
+ isRtl: boolean;
+}
+
+const useUtilityClasses = (ownerState: DateTimePickerToolbarOwnerState<any>) => {
+ const { classes, isLandscape, isRtl } = ownerState;
+
  const slots = {
  root: ['root'],
  dateContainer: ['dateContainer'],
- timeContainer: ['timeContainer', theme.direction === 'rtl' && 'timeLabelReverse'],
- timeDigitsContainer: ['timeDigitsContainer', theme.direction === 'rtl' && 'timeLabelReverse'],
+ timeContainer: ['timeContainer', isRtl && 'timeLabelReverse'],
+ timeDigitsContainer: ['timeDigitsContainer', isRtl && 'timeLabelReverse'],
  separator: ['separator'],
  ampmSelection: ['ampmSelection', isLandscape && 'ampmLandscape'],
  ampmLabel: ['ampmLabel'],
@@ -60,7 +67,7 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
  name: 'MuiDateTimePickerToolbar',
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: DateTimePickerToolbarProps<any> }>(({ theme }) => ({
+})<{ ownerState: DateTimePickerToolbarOwnerState<any> }>(({ theme }) => ({
  paddingLeft: 16,
  paddingRight: 16,
  justifyContent: 'space-around',
@@ -96,7 +103,7 @@ const DateTimePickerToolbarDateContainer = styled('div', {
  name: 'MuiDateTimePickerToolbar',
  slot: 'DateContainer',
  overridesResolver: (props, styles) => styles.dateContainer,
-})<{ ownerState: DateTimePickerToolbarProps<any> }>({
+})<{ ownerState: DateTimePickerToolbarOwnerState<any> }>({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-start',
@@ -106,59 +113,67 @@ const DateTimePickerToolbarTimeContainer = styled('div', {
  name: 'MuiDateTimePickerToolbar',
  slot: 'TimeContainer',
  overridesResolver: (props, styles) => styles.timeContainer,
-})<{ ownerState: DateTimePickerToolbarProps<any> }>(({ theme }) => {
- return {
- display: 'flex',
- flexDirection: 'row',
- ...(theme.direction === 'rtl' && {
- flexDirection: 'row-reverse',
- }),
- variants: [
- {
- props: ({ isLandscape, toolbarVariant }: DateTimePickerToolbarProps<any>) =>
- isLandscape && toolbarVariant !== 'desktop',
- style: {
- flexDirection: 'column',
- ...(theme.direction === 'rtl' && {
- flexDirection: 'column-reverse',
- }),
- },
+})<{ ownerState: DateTimePickerToolbarOwnerState<any> }>({
+ display: 'flex',
+ flexDirection: 'row',
+ variants: [
+ {
+ props: { isRtl: true },
+ style: {
+ flexDirection: 'row-reverse',
  },
-  {
-  props: { toolbarVariant: 'desktop', isLandscape: false },
-  style: {
-  gap: 9,
-  marginRight: 4,
-  alignSelf: 'flex-end',
- },
+ },
+ {
+ props: { toolbarVariant: 'desktop', isLandscape: false },
+ style: {
+ gap: 9,
+ marginRight: 4,
+ alignSelf: 'flex-end',
  },
- ],
- };
+ },
+ {
+ props: ({ isLandscape, toolbarVariant }: DateTimePickerToolbarOwnerState<any>) =>
+ isLandscape && toolbarVariant !== 'desktop',
+ style: {
+ flexDirection: 'column',
+ },
+ },
+ {
+ props: ({ isLandscape, toolbarVariant, isRtl }: DateTimePickerToolbarOwnerState<any>) =>
+ isLandscape && toolbarVariant !== 'desktop' && isRtl,
+ style: {
+ flexDirection: 'column-reverse',
+ },
+ },
+ ],
 });
 
 const DateTimePickerToolbarTimeDigitsContainer = styled('div', {
  name: 'MuiDateTimePickerToolbar',
  slot: 'TimeDigitsContainer',
  overridesResolver: (props, styles) => styles.timeDigitsContainer,
-})<{ ownerState: DateTimePickerToolbarProps<any> }>(({ theme }) => ({
+})<{ ownerState: DateTimePickerToolbarOwnerState<any> }>({
  display: 'flex',
- ...(theme.direction === 'rtl' && {
- flexDirection: 'row-reverse',
- }),
  variants: [
+ {
+ props: { isRtl: true },
+ style: {
+ flexDirection: 'row-reverse',
+ },
+ },
  {
  props: { toolbarVariant: 'desktop' },
  style: { gap: 1.5 },
  },
  ],
-}));
+});
 
 const DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
  name: 'MuiDateTimePickerToolbar',
  slot: 'Separator',
  overridesResolver: (props, styles) => styles.separator,
 })<{
- ownerState: DateTimePickerToolbarProps<any>;
+ ownerState: DateTimePickerToolbarOwnerState<any>;
 }>({
  margin: '0 4px 0 2px',
  cursor: 'default',
@@ -236,16 +251,17 @@ function DateTimePickerToolbar<TDate extends PickerValidDate>(
  className,
  ...other
  } = props;
- const ownerState = props;
+
+ const isRtl = useRtl();
+ const ownerState: DateTimePickerToolbarOwnerState<TDate> = { ...props, isRtl };
  const utils = useUtils<TDate>();
  const { meridiemMode, handleMeridiemChange } = useMeridiemMode(value, ampm, onChange);
 
  const showAmPmControl = Boolean(ampm && !ampmInClock);
  const isDesktop = toolbarVariant === 'desktop';
 
  const localeText = useLocaleText<TDate>();
- const theme = useTheme();
- const classes = useUtilityClasses({ ...ownerState, theme });
+ const classes = useUtilityClasses(ownerState);
  const toolbarTitle = inToolbarTitle ?? localeText.dateTimePickerToolbarTitle;
 
  const formatHours = (time: TDate) =>

packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { useRtl } from '@mui/system/RtlProvider';
 import Divider from '@mui/material/Divider';
 import {
  PickersLayoutContentWrapper,
@@ -20,9 +21,11 @@ function DesktopDateTimePickerLayout<
  TDate extends PickerValidDate,
  TView extends DateOrTimeViewWithMeridiem,
 >(props: PickersLayoutProps<TValue, TDate, TView>) {
+ const isRtl = useRtl();
  const { toolbar, tabs, content, actionBar, shortcuts } = usePickerLayout(props);
  const { sx, className, isLandscape, ref, classes } = props;
  const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
+ const ownerState = { ...props, isRtl };
 
  return (
  <PickersLayoutRoot
@@ -35,7 +38,7 @@ function DesktopDateTimePickerLayout<
  },
  ...(Array.isArray(sx) ? sx : [sx]),
  ]}
- ownerState={props}
+ ownerState={ownerState}
  >
  {isLandscape ? shortcuts : toolbar}
  {isLandscape ? toolbar : shortcuts}
@@ -65,6 +68,10 @@ DesktopDateTimePickerLayout.propTypes = {
  className: PropTypes.string,
  disabled: PropTypes.bool,
  isLandscape: PropTypes.bool.isRequired,
+ /**
+ * `true` if the application is in right-to-left direction.
+ */
+ isRtl: PropTypes.bool.isRequired,
  isValid: PropTypes.func.isRequired,
  onAccept: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired,

packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useTheme } from '@mui/system';
+import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import {
  unstable_useControlled as useControlled,
@@ -119,7 +119,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar<TDate exten
  });
 
  const now = useNow<TDate>(timezone);
- const theme = useTheme();
+ const isRtl = useRtl();
  const utils = useUtils<TDate>();
 
  const referenceDate = React.useMemo(
@@ -236,12 +236,12 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar<TDate exten
  event.preventDefault();
  break;
  case 'ArrowLeft':
- focusMonth((monthsInYear + month + (theme.direction === 'ltr' ? -1 : 1)) % monthsInYear);
+ focusMonth((monthsInYear + month + (isRtl ? 1 : -1)) % monthsInYear);
 
  event.preventDefault();
  break;
  case 'ArrowRight':
- focusMonth((monthsInYear + month + (theme.direction === 'ltr' ? 1 : -1)) % monthsInYear);
+ focusMonth((monthsInYear + month + (isRtl ? -1 : 1)) % monthsInYear);
 
  event.preventDefault();
  break;