[pickers] Use useRtl instead of useTheme to access direction (mui…

…#13363)
DungTiger · Jul 23, 2024 · d4b980b · d4b980b
1 parent a0b5081
commit d4b980b
Show file tree

Hide file tree

Showing 20 changed files with 195 additions and 127 deletions.
diff --git a/docs/pages/x/api/date-pickers/pickers-layout.json b/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'" }

diff --git a/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json b/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." },

diff --git a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts b/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) => {

diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/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,
           });

diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/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) =>

diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/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,

diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx b/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;