Merge

Author: flaviendelangle

docs/data/date-pickers/custom-components/custom-components.md

@@ -34,8 +34,8 @@ You can override the actions displayed by passing the `actions` prop to the `act
       actions: ['clear'],
     },
     // The actions will be different between desktop and mobile
-    actionBar: ({ wrapperVariant }) => ({
-      actions: wrapperVariant === 'desktop' ? [] : ['clear'],
+    actionBar: ({ variant }) => ({
+      actions: variant === 'desktop' ? [] : ['clear'],
     }),
   }}
 />

docs/data/date-pickers/custom-layout/custom-layout.md

@@ -86,11 +86,11 @@ import {
 } from '@mui/x-date-pickers/PickersLayout';
 
 function MyCustomLayout(props) {
-  const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+  const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
 
   // Put the action bar before the content
   return (
-    <PickersLayoutRoot className={pickersLayoutClasses.root} ownerState={props}>
+    <PickersLayoutRoot className={pickersLayoutClasses.root} ownerState={ownerState}>
       {toolbar}
       {actionBar}
       <PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>

docs/data/migration/migration-pickers-v5/MobileKeyboardView.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export default function MobileKeyboardView() {
+  return (
+    <iframe
+      title="codesandbox"
+      src="https://codesandbox.io/embed/https-mui-com-x-migration-migration-pickers-v7-forked-9fz6f6?hidenavigation=1&fontsize=14&view=preview"
+      style={{
+        width: '100%',
+        height: 520,
+        border: 0,
+      }}
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+    />
+  );
+}

docs/data/migration/migration-pickers-v5/migration-pickers-v5.md

@@ -171,118 +171,7 @@ The picker components no longer have a keyboard view to render the input inside
 
 - If you want to keep the old keyboard view, you can pass a custom `Layout` component slot to re-introduce the keyboard view.
 
-```tsx
-import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import IconButton from '@mui/material/IconButton';
-import ModeEditIcon from '@mui/icons-material/ModeEdit';
-import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DateView } from '@mui/x-date-pickers/models';
-import {
-  pickersLayoutClasses,
-  PickersLayoutContentWrapper,
-  PickersLayoutRoot,
-  PickersLayoutProps,
-  usePickerLayout,
-} from '@mui/x-date-pickers/PickersLayout';
-import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
-import { DateField } from '@mui/x-date-pickers/DateField';
-import {
-  DatePickerToolbar,
-  DatePickerToolbarProps,
-} from '@mui/x-date-pickers/DatePicker';
-
-function LayoutWithKeyboardView(props: PickersLayoutProps<Dayjs | null, DateView>) {
-  const { value, onChange } = props;
-  const [showKeyboardView, setShowKeyboardView] = React.useState(false);
-
-  const { toolbar, tabs, content, actionBar } = usePickerLayout({
-    ...props,
-    slotProps: {
-      ...props.slotProps,
-      toolbar: {
-        ...props.slotProps?.toolbar,
-        // @ts-ignore
-        showKeyboardViewSwitch: props.wrapperVariant === 'mobile',
-        showKeyboardView,
-        setShowKeyboardView,
-      },
-    },
-  });
-
-  return (
-    <PickersLayoutRoot ownerState={props}>
-      {toolbar}
-      {actionBar}
-      <PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
-        {tabs}
-        {showKeyboardView ? (
-          <Box sx={{ mx: 3, my: 2, width: 272 }}>
-            <DateField value={value} onChange={onChange} sx={{ width: '100%' }} />
-          </Box>
-        ) : (
-          content
-        )}
-      </PickersLayoutContentWrapper>
-    </PickersLayoutRoot>
-  );
-}
-
-function ToolbarWithKeyboardViewSwitch(
-  props: DatePickerToolbarProps & {
-    showKeyboardViewSwitch?: boolean;
-    showKeyboardView?: boolean;
-    setShowKeyboardView?: React.Dispatch<React.SetStateAction<boolean>>;
-  },
-) {
-  const { showKeyboardViewSwitch, showKeyboardView, setShowKeyboardView, ...other } =
-    props;
-
-  if (showKeyboardViewSwitch) {
-    return (
-      <Stack
-        spacing={2}
-        direction={other.isLandscape ? 'column' : 'row'}
-        alignItems="center"
-        sx={
-          other.isLandscape
-            ? {
-                gridColumn: 1,
-                gridRow: '1 / 3',
-              }
-            : { gridColumn: '1 / 4', gridRow: 1, mr: 1 }
-        }
-      >
-        <DatePickerToolbar {...other} sx={{ flex: '1 1 100%' }} />
-        <IconButton
-          color="inherit"
-          onClick={() => setShowKeyboardView!((prev) => !prev)}
-        >
-          {showKeyboardView ? <CalendarMonthIcon /> : <ModeEditIcon />}
-        </IconButton>
-      </Stack>
-    );
-  }
-
-  return <DatePickerToolbar {...other} />;
-}
-export default function MobileKeyboardView() {
-  return (
-    <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <MobileDatePicker
-        slots={{
-          layout: LayoutWithKeyboardView,
-          toolbar: ToolbarWithKeyboardViewSwitch,
-        }}
-      />
-    </LocalizationProvider>
-  );
-}
-```
+{{"demo": "MobileKeyboardView.js", "hideToolbar": true, "bg": true}}
 
 :::info
 At some point, the mobile pickers should have a prop allowing to have an editable field without opening the modal.

docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

@@ -262,7 +262,6 @@ const theme = createTheme({
   ```diff
   -const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
   +const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
-
    return (
   -  <PickersLayoutRoot ownerState={props}>
   +  <PickersLayoutRoot ownerState={ownerState}>
@@ -295,7 +294,6 @@ const theme = createTheme({
 
   ```diff
   +import { useRtl } from '@mui/system/RtlProvider';
-
    function CustomLayout(props) {
   -  console.log(props.isRtl);
   +  const isRtl = useRtl();
@@ -310,7 +308,6 @@ const theme = createTheme({
   +import { usePickersContext } from '@mui/x-date-pickers/hooks';
   +const { orientation } = usePickersContext();
   +console.log(orientation);
-
   -console.log(props.isLandscape);
   +import { usePickersContext } from '@mui/x-date-pickers/hooks';
   +const { orientation } = usePickersContext();
@@ -321,7 +318,6 @@ const theme = createTheme({
 
   ```diff
   -console.log(props.wrapperVariant);
-
   +import { usePickersContext } from '@mui/x-date-pickers/hooks';
   +const { variant } = usePickersContext();
   +console.log(variant);

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

@@ -4,20 +4,19 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { PickersLayoutProps } from './PickersLayout.types';
+import { PickerLayoutOwnerState, PickersLayoutProps } from './PickersLayout.types';
 import {
   pickersLayoutClasses,
   getPickersLayoutUtilityClass,
   PickersLayoutClasses,
 } from './pickersLayoutClasses';
 import usePickerLayout from './usePickerLayout';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-import { PickerOwnerState } from '../models/pickers';
 import { usePickerContext } from '../hooks/usePickerContext';
 
 const useUtilityClasses = (
   classes: Partial<PickersLayoutClasses> | undefined,
-  ownerState: PickerOwnerState,
+  ownerState: PickerLayoutOwnerState,
 ) => {
   const { pickerOrientation } = ownerState;
   const slots = {
@@ -32,7 +31,7 @@ export const PickersLayoutRoot = styled('div', {
   name: 'MuiPickersLayout',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: PickerOwnerState }>({
+})<{ ownerState: PickerLayoutOwnerState }>({
   display: 'grid',
   gridAutoColumns: 'max-content auto max-content',
   gridAutoRows: 'max-content auto max-content',

packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts

@@ -36,6 +36,10 @@ export interface ExportedPickersLayoutSlots<TValue, TView extends DateOrTimeView
 }
 
 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.
+  /**
+   * `true` if the application is in right-to-left direction.
+   */
   isRtl: boolean;
 }
 

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

@@ -2,15 +2,14 @@
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import { PickersActionBar, PickersActionBarAction } from '../PickersActionBar';
-import { PickersLayoutProps, SubComponents } from './PickersLayout.types';
+import { PickerLayoutOwnerState, PickersLayoutProps, SubComponents } from './PickersLayout.types';
 import { getPickersLayoutUtilityClass, PickersLayoutClasses } from './pickersLayoutClasses';
 import { PickersShortcuts } from '../PickersShortcuts';
 import { BaseToolbarProps } from '../internals/models/props/toolbar';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
-import { PickerPrivateContextValue } from '../internals/components/PickerProvider';
-import { PickerOwnerState } from '../models/pickers';
 import { usePickerContext } from '../hooks';
 
 function toolbarHasView<TValue, TView extends DateOrTimeViewWithMeridiem>(
@@ -21,7 +20,7 @@ function toolbarHasView<TValue, TView extends DateOrTimeViewWithMeridiem>(
 
 const useUtilityClasses = (
   classes: Partial<PickersLayoutClasses> | undefined,
-  ownerState: PickerOwnerState,
+  ownerState: PickerLayoutOwnerState,
 ) => {
   const { pickerOrientation } = ownerState;
   const slots = {
@@ -41,15 +40,17 @@ interface PickersLayoutPropsWithValueRequired<TValue, TView extends DateOrTimeVi
   extends PickersLayoutProps<TValue, TView> {
   value: TValue;
 }
-interface UsePickerLayoutResponse<TValue>
-  extends SubComponents<TValue>,
-    Pick<PickerPrivateContextValue, 'ownerState'> {}
+
+interface UsePickerLayoutResponse<TValue> extends SubComponents<TValue> {
+  ownerState: PickerLayoutOwnerState;
+}
 
 const usePickerLayout = <TValue, TView extends DateOrTimeViewWithMeridiem>(
   props: PickersLayoutProps<TValue, TView>,
 ): UsePickerLayoutResponse<TValue> => {
-  const { ownerState } = usePickerPrivateContext();
-  const { variant } = usePickerContext();
+  const { ownerState: pickerOwnerState } = usePickerPrivateContext();
+  const { variant, orientation } = usePickerContext();
+  const isRtl = useRtl();
 
   const {
     onAccept,
@@ -73,6 +74,7 @@ const usePickerLayout = <TValue, TView extends DateOrTimeViewWithMeridiem>(
     // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props as PickersLayoutPropsWithValueRequired<TValue, TView>;
 
+  const ownerState: PickerLayoutOwnerState = { ...pickerOwnerState, isRtl };
   const classes = useUtilityClasses(classesProp, ownerState);
 
   // Action bar

packages/x-date-pickers/src/internals/hooks/useIsLandscape.tsx

@@ -82,7 +82,10 @@ export const usePicker = <
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
 
     // Picker layout
-    layoutProps: { ...pickerValueResponse.layoutProps, ...pickerViewsResponse.layoutProps },
+    layoutProps: {
+      ...pickerViewsResponse.layoutProps,
+      ...pickerValueResponse.layoutProps,
+    },
 
     // Picker provider
     providerProps,