[docs] Add example for avoiding picker views layout shift (#9781)

Signed-off-by: noraleonte <[email protected]>
Co-authored-by: Olivier Tassinari <[email protected]>
Co-authored-by: Lukas <[email protected]>

docs/data/date-pickers/custom-components/PopperComponent.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function PopperComponent() {
+ return (
+ <LocalizationProvider dateAdapter={AdapterDayjs}>
+ <DatePicker
+ label="Basic date picker"
+ views={['month', 'year']}
+ minDate={dayjs(new Date(2022, 0, 1))}
+ maxDate={dayjs(new Date(2024, 12, 31))}
+ reduceAnimations
+ slotProps={{
+ popper: {
+ modifiers: [
+ {
+ name: 'viewHeightModifier',
+ enabled: true,
+ phase: 'beforeWrite',
+ fn: ({ state }) => {
+ state.styles.popper.height = '320px';
+ if (state.placement.includes('top-start')) {
+ state.styles.popper = {
+ ...state.styles.popper,
+ display: 'flex',
+ alignItems: 'flex-end',
+ };
+ }
+ if (state.placement.includes('bottom')) {
+ state.styles.popper = {
+ ...state.styles.popper,
+ display: 'block',
+ };
+ }
+ },
+ },
+ ],
+ },
+ }}
+ />
+ </LocalizationProvider>
+ );
+}

docs/data/date-pickers/custom-components/PopperComponent.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function PopperComponent() {
+ return (
+ <LocalizationProvider dateAdapter={AdapterDayjs}>
+ <DatePicker
+ label="Basic date picker"
+ views={['month', 'year']}
+ minDate={dayjs(new Date(2022, 0, 1))}
+ maxDate={dayjs(new Date(2024, 12, 31))}
+ reduceAnimations
+ slotProps={{
+ popper: {
+ modifiers: [
+ {
+ name: 'viewHeightModifier',
+ enabled: true,
+ phase: 'beforeWrite',
+ fn: ({ state }: { state: Partial<any> }) => {
+ state.styles.popper.height = '320px';
+ if (state.placement.includes('top-start')) {
+ state.styles.popper = {
+ ...state.styles.popper,
+ display: 'flex',
+ alignItems: 'flex-end',
+ };
+ }
+ if (state.placement.includes('bottom')) {
+ state.styles.popper = {
+ ...state.styles.popper,
+ display: 'block',
+ };
+ }
+ },
+ },
+ ],
+ },
+ }}
+ />
+ </LocalizationProvider>
+ );
+}

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

@@ -231,6 +231,18 @@ You can pass custom components—to replace the icons, for example—as shown be
 
 {{"demo": "ArrowSwitcherComponent.js", "defaultCodeOpen": false}}
 
+## Popper
+
+You can customize the popper that wraps the desktop picker views the same way you would customize the [Material UI Popper](/material-ui/react-popper/).
+
+:::info
+When the picker views have different heights, there might be a layout shift if there is not enough space in the viewport for one of the views **below** the input field. This is particularly noticeable if the selection of allowed years is very limited and there is a significant height difference between the views. You can refer to issues [#5490](https://github.com/mui/mui-x/issues/5490) and [#9288](https://github.com/mui/mui-x/issues/9288) for more examples.
+
+You can avoid this by customizing the popper height. This will not produce any visual changes, as the popper that wraps the pickers is transparent.
+:::
+
+{{"demo": "PopperComponent.js", "defaultCodeOpen": true}}
+
 ## Shortcuts
 
 You can add shortcuts to every pickers.