[pickers] Remove orientation, isLandscape, isRtl, wrapperVariant and …

…disabled props from PickersLayout
mui · Nov 19, 2024 · e5d2772 · e5d2772
1 parent c73f6af
commit e5d2772
Show file tree

Hide file tree

Showing 22 changed files with 137 additions and 434 deletions.
diff --git 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
@@ -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}`]: {

diff --git 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<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}`]: {

diff --git a/docs/data/date-pickers/custom-layout/custom-layout.md b/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}>

diff --git 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 (
-    <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"
+    />
   );
 }
diff --git a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx
diff --git a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx.preview b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx.preview
diff --git a/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md b/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.

diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -258,6 +258,19 @@ const theme = createTheme({
 
 ### Slot: `layout`
 
+- The `PickersLayoutRoot` must now receive the `ownerState` returned by `usePickerLayout` instead of its props:
+
+  ```diff
+  -const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+  +const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
+   return (
+  -  <PickersLayoutRoot ownerState={props}>
+  +  <PickersLayoutRoot ownerState={ownerState}>
+       Layout content
+     </PickersLayoutRoot>
+   );
+  ```
+
 - The component passed to the `layout` slot no longer receives a `disabled` prop, instead you can use the `usePickersContext` hook:
 
   ```diff
@@ -276,6 +289,39 @@ const theme = createTheme({
   +console.log(readOnly);
   ```
 
+- The component passed to the `layout` slot no longer receives a `isRtl` prop. If you need to access this information, you can use the `useRtl` hook from `@mui/system`:
+
+  ```diff
+  +import { useRtl } from '@mui/system/RtlProvider';
+   function CustomLayout(props) {
+  -  console.log(props.isRtl);
+  +  const isRtl = useRtl();
+  +  console.log(isRtl);
+   }
+  ```
+
+- The component passed to the `layout` slot no longer receives an `orientation` and the `isLandscape` props, instead you can use the `usePickersContext` hook:
+
+  ```diff
+  -console.log(props.orientation);
+  +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();
+  +console.log(orientation === 'landscape');
+  ```
+
+- The component passed to the `layout` slot no longer receives a `wrapperVariant` prop, instead you can use the `usePickersContext` hook:
+
+  ```diff
+  -console.log(props.wrapperVariant);
+  +import { usePickersContext } from '@mui/x-date-pickers/hooks';
+  +const { variant } = usePickersContext();
+  +console.log(variant);
+  ```
+
 ### Slot: `toolbar`
 
 - The component passed to the `toolbar` slot no longer receives a `disabled` prop, instead you can use the `usePickersContext` hook:

diff --git a/docs/pages/x/api/date-pickers/pickers-layout.json b/docs/pages/x/api/date-pickers/pickers-layout.json
@@ -1,10 +1,6 @@
 {
   "props": {
-    "isRtl": { "type": { "name": "bool" }, "required": true },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "orientation": {
-      "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
-    },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },

diff --git a/docs/src/modules/components/overview/mainDemo/Clock.tsx b/docs/src/modules/components/overview/mainDemo/Clock.tsx
@@ -32,9 +32,9 @@ const StyledLayout = styled(PickersLayoutRoot)({
 });
 
 function CustomLayout(props: PickersLayoutProps<Dayjs | null, TimeView>) {
-  const { actionBar, content, toolbar } = usePickerLayout(props);
+  const { actionBar, content, toolbar, ownerState } = usePickerLayout(props);
   return (
-    <StyledLayout ownerState={props}>
+    <StyledLayout ownerState={ownerState}>
       {toolbar}
       <PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
         {content}

diff --git a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx
@@ -60,11 +60,11 @@ interface CustomLayoutProps extends PickersLayoutProps<DateRange<Dayjs>, 'day'>
 }
 function CustomLayout(props: CustomLayoutProps) {
   const { isHorizontal, ...other } = props;
-  const { tabs, content, shortcuts } = usePickerLayout(other);
+  const { tabs, content, shortcuts, ownerState } = usePickerLayout(other);
 
   return (
     <PickersLayoutRoot
-      ownerState={props}
+      ownerState={ownerState}
       sx={{
         overflow: 'auto',
         [`.${pickersLayoutClasses.shortcuts}`]: isHorizontal