[pickers] Rename layout ownerState property from isRtl to layoutDirection (mui#15803)

Author: flaviendelangle

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,

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<

packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx

@@ -69,7 +69,10 @@ const usePickerLayout = <TValue extends PickerValidValue, TView extends DateOrTi
     // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props;
 
-  const ownerState: PickerLayoutOwnerState = { ...pickerOwnerState, isRtl };
+  const ownerState = React.useMemo<PickerLayoutOwnerState>(
+    () => ({ ...pickerOwnerState, layoutDirection: isRtl ? 'rtl' : 'ltr' }),
+    [pickerOwnerState, isRtl],
+  );
   const classes = useUtilityClasses(classesProp, ownerState);
 
   // Action bar