Fix demo

Author: flaviendelangle

docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.js

@@ -7,6 +7,8 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 
+import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro';
+
 function CustomInputAdornment(props) {
   const { hasError, children, sx, ...other } = props;
   return (
@@ -39,6 +41,7 @@ export default function AddWarningIconWhenInvalidRange() {
           maxDate={dayjs('2022-04-19')}
           defaultValue={[dayjs('2022-04-18'), dayjs('2022-04-21')]}
           onError={setError}
+          slots={{ field: MultiInputDateRangeField }}
           slotProps={{
             textField: (ownerState) => ({
               InputProps: {

docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.tsx

@@ -7,6 +7,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { DateRangeValidationError } from '@mui/x-date-pickers-pro/models';
+import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro';
 
 function CustomInputAdornment(props: InputAdornmentProps & { hasError?: boolean }) {
   const { hasError, children, sx, ...other } = props;
@@ -40,6 +41,7 @@ export default function AddWarningIconWhenInvalidRange() {
           maxDate={dayjs('2022-04-19')}
           defaultValue={[dayjs('2022-04-18'), dayjs('2022-04-21')]}
           onError={setError}
+          slots={{ field: MultiInputDateRangeField }}
           slotProps={{
             textField: (ownerState) => ({
               InputProps: {

docs/data/date-pickers/custom-opening-button/custom-opening-button.md

@@ -52,7 +52,7 @@ In the example below, the warning icon will be visible anytime the current value
 
 {{"demo": "AddWarningIconWhenInvalid.js"}}
 
-To add the same behavior to a picker that do not have an input adornment (for example Date Range Picker),
+To add the same behavior to a picker that do not have an input adornment (for example Date Range Picker when used with a multi input field),
 you need to use the `textField` slot to add one:
 
 {{"demo": "AddWarningIconWhenInvalidRange.js"}}

packages/x-date-pickers/src/internals/demo/DemoContainer.tsx

@@ -169,7 +169,7 @@ export function DemoContainer(props: DemoGridProps) {
           minWidth: {
             xs: 300,
             // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
-            md: childrenTypes.has('multi-input-range-field') ? 460 : 400,
+            md: childrenTypes.has('multi-input-range-field') ? 460 : 440,
           },
         },
       };