[pickers] ON HOLD - Use the new ownerState in all the toolbars and stop passing variant and isLandscape to any component

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/AddComponent.js

@@ -58,11 +58,11 @@ function RestaurantHeader() {
 }
 
 function CustomLayout(props) {
-  const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+  const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
 
   return (
     <PickersLayoutRoot
-      ownerState={props}
+      ownerState={ownerState}
       sx={{
         overflow: 'auto',
         [`.${pickersLayoutClasses.actionBar}`]: {

docs/data/date-pickers/custom-layout/AddComponent.tsx

@@ -59,11 +59,11 @@ function RestaurantHeader() {
 }
 
 function CustomLayout(props: PickersLayoutProps<Dayjs | null, DateView>) {
-  const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+  const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
 
   return (
     <PickersLayoutRoot
-      ownerState={props}
+      ownerState={ownerState}
       sx={{
         overflow: 'auto',
         [`.${pickersLayoutClasses.actionBar}`]: {

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

@@ -1,100 +1,16 @@
 import * as React from 'react';
 
-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 {
-  pickersLayoutClasses,
-  PickersLayoutContentWrapper,
-  PickersLayoutRoot,
-  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 } from '@mui/x-date-pickers/DatePicker';
-
-function LayoutWithKeyboardView(props) {
-  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) {
-  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>
+    <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,7 +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.
 
-{{"demo": "MobileKeyboardView.js", "defaultCodeOpen": false}}
+{{"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.