diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md index e05e9c6e808ab..ab573ddf7a56f 100644 --- a/docs/data/date-pickers/custom-components/custom-components.md +++ b/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'], }), }} /> diff --git a/docs/data/date-pickers/custom-layout/AddComponent.js b/docs/data/date-pickers/custom-layout/AddComponent.js index d6e0d1db8b6fe..0e904ef3d2889 100644 --- a/docs/data/date-pickers/custom-layout/AddComponent.js +++ b/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 ( {toolbar} {actionBar} - + {tabs} {content} diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx b/docs/data/date-pickers/custom-layout/AddComponent.tsx index 2584a13756edf..9fc41c2b0666b 100644 --- a/docs/data/date-pickers/custom-layout/AddComponent.tsx +++ b/docs/data/date-pickers/custom-layout/AddComponent.tsx @@ -59,11 +59,11 @@ function RestaurantHeader() { } function CustomLayout(props: PickersLayoutProps) { - const { toolbar, tabs, content, actionBar } = usePickerLayout(props); + const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props); return ( ) { {toolbar} {actionBar} - + {tabs} {content} diff --git a/docs/data/date-pickers/custom-layout/custom-layout.md b/docs/data/date-pickers/custom-layout/custom-layout.md index ca327aaa57b69..0125630db5b10 100644 --- a/docs/data/date-pickers/custom-layout/custom-layout.md +++ b/docs/data/date-pickers/custom-layout/custom-layout.md @@ -86,14 +86,17 @@ 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 ( - + {toolbar} {actionBar} - + {tabs} {content} diff --git a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js index 95819b45ed99f..c2810ae4c1e2f 100644 --- a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js +++ b/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 ( - - {toolbar} - {actionBar} - - {tabs} - {showKeyboardView ? ( - - - - ) : ( - content - )} - - - ); -} - -function ToolbarWithKeyboardViewSwitch(props) { - const { showKeyboardViewSwitch, showKeyboardView, setShowKeyboardView, ...other } = - props; - - if (showKeyboardViewSwitch) { - return ( - - - setShowKeyboardView((prev) => !prev)} - > - {showKeyboardView ? : } - - - ); - } - - return ; -} export default function MobileKeyboardView() { return ( - - - +