diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx index bb241e230453b..db7d88b6f2a71 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx @@ -48,7 +48,7 @@ export const PickersLayoutRoot = styled('div', { }, }, { - props: { pickerOrientation: 'landscape', isRtl: true }, + props: { pickerOrientation: 'landscape', layoutDirection: 'rtl' }, style: { [`& .${pickersLayoutClasses.toolbar}`]: { gridColumn: 3, @@ -66,7 +66,7 @@ export const PickersLayoutRoot = styled('div', { }, }, { - props: { pickerOrientation: 'portrait', isRtl: true }, + props: { pickerOrientation: 'portrait', layoutDirection: 'rtl' }, style: { [`& .${pickersLayoutClasses.shortcuts}`]: { gridColumn: 3, diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts index d06b38e2044aa..b6382d370840c 100644 --- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts +++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts @@ -40,11 +40,13 @@ export interface ExportedPickersLayoutSlots< } export interface PickerLayoutOwnerState extends PickerOwnerState { - // isRTL cannot be part of PickerOwnerState because we need to have the correct isRTL value even when there is not picker above for some components. + // The direction cannot be part of PickerOwnerState because we need to have the correct direction value even when there is no picker above for standalone components. /** - * `true` if the application is in right-to-left direction. + * The direction of the layout. + * Is equal to "ltr" when the layout is in left-to-right direction. + * Is equal to "rtl" when the layout is in right-to-left direction. */ - isRtl: boolean; + layoutDirection: 'ltr' | 'rtl'; } export interface ExportedPickersLayoutSlotProps< diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx index 460520f4837ab..be4f6e3b5e95d 100644 --- a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx +++ b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx @@ -69,7 +69,10 @@ const usePickerLayout = ( + () => ({ ...pickerOwnerState, layoutDirection: isRtl ? 'rtl' : 'ltr' }), + [pickerOwnerState, isRtl], + ); const classes = useUtilityClasses(classesProp, ownerState); // Action bar