@mui/x-date-pickers-pro 7.0.0-alpha.0 → 7.0.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,413 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-alpha.1
+
+_Nov 17, 2023_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-alpha.1` / `@mui/x-date-pickers-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+#### Breaking changes
+
+- The string argument of the `dayOfWeekFormatter` prop has been replaced in favor of the date object to allow more flexibility.
+
+  ```diff
+   <DateCalendar
+     // If you were still using the day string, you can get it back with your date library.
+  -   dayOfWeekFormatter={dayStr => `${dayStr}.`}
+  +   dayOfWeekFormatter={day => `${day.format('dd')}.`}
+
+     // If you were already using the day object, just remove the first argument.
+  -   dayOfWeekFormatter={(_dayStr, day) => `${day.format('dd')}.`}
+  +   dayOfWeekFormatter={day => `${day.format('dd')}.`}
+   />
+  ```
+
+- The imports related to the `calendarHeader` slot have been moved from `@mui/x-date-pickers/DateCalendar` to `@mui/x-date-pickers/PIckersCalendarHeader`:
+
+  ```diff
+    export {
+      pickersCalendarHeaderClasses,
+      PickersCalendarHeaderClassKey,
+      PickersCalendarHeaderClasses,
+      PickersCalendarHeader,
+      PickersCalendarHeaderProps,
+      PickersCalendarHeaderSlotsComponent,
+      PickersCalendarHeaderSlotsComponentsProps,
+      ExportedPickersCalendarHeaderProps,
+  - } from '@mui/x-date-pickers/DateCalendar';
+  + } from '@mui/x-date-pickers/PickersCalendarHeader';
+
+  ```
+
+- The `monthAndYear` format has been removed.
+  It was used in the header of the calendar views, you can replace it with the new `format` prop of the `calendarHeader` slot:
+
+  ```diff
+    <LocalizationProvider
+      adapter={AdapterDayJS}
+  -   formats={{ monthAndYear: 'MM/YYYY' }}
+    />
+      <DatePicker
+  +     slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
+      />
+       <DateRangePicker
+  +     slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
+      />
+    <LocalizationProvider />
+  ```
+
+- The `adapter.getDiff` method have been removed, you can directly use your date library:
+
+  ```diff
+    // For Day.js
+  - const diff = adapter.getDiff(value, comparing, unit);
+  + const diff = value.diff(comparing, unit);
+
+    // For Luxon
+  - const diff = adapter.getDiff(value, comparing, unit);
+  + const getDiff = (value: DateTime, comparing: DateTime | string, unit?: AdapterUnits) => {
+  +   const parsedComparing = typeof comparing === 'string'
+  +     ? DateTime.fromJSDate(new Date(comparing))
+  +     : comparing;
+  +   if (unit) {
+  +     return Math.floor(value.diff(comparing).as(unit));
+  +   }
+  +   return value.diff(comparing).as('millisecond');
+  + };
+  +
+  + const diff = getDiff(value, comparing, unit);
+
+    // For DateFns
+  - const diff = adapter.getDiff(value, comparing, unit);
+  + const getDiff = (value: Date, comparing: Date | string, unit?: AdapterUnits) => {
+  +   const parsedComparing = typeof comparing === 'string' ? new Date(comparing) : comparing;
+  +   switch (unit) {
+  +     case 'years':
+  +       return dateFns.differenceInYears(value, parsedComparing);
+  +     case 'quarters':
+  +       return dateFns.differenceInQuarters(value, parsedComparing);
+  +     case 'months':
+  +       return dateFns.differenceInMonths(value, parsedComparing);
+  +     case 'weeks':
+  +       return dateFns.differenceInWeeks(value, parsedComparing);
+  +     case 'days':
+  +       return dateFns.differenceInDays(value, parsedComparing);
+  +     case 'hours':
+  +       return dateFns.differenceInHours(value, parsedComparing);
+  +     case 'minutes':
+  +       return dateFns.differenceInMinutes(value, parsedComparing);
+  +     case 'seconds':
+  +       return dateFns.differenceInSeconds(value, parsedComparing);
+  +     default: {
+  +       return dateFns.differenceInMilliseconds(value, parsedComparing);
+  +     }
+  +   }
+  + };
+  +
+  + const diff = getDiff(value, comparing, unit);
+
+    // For Moment
+  - const diff = adapter.getDiff(value, comparing, unit);
+  + const diff = value.diff(comparing, unit);
+  ```
+
+- The `adapter.getFormatHelperText` method have been removed, you can use the `adapter.expandFormat` instead:
+
+```diff
+- const expandedFormat = adapter.getFormatHelperText(format);
++ const expandedFormat = adapter.expandFormat(format);
+```
+
+And if you need the exact same output you can apply the following transformation:
+
+```diff
+  // For Day.js
+- const expandedFormat = adapter.getFormatHelperText(format);
++ const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
+
+  // For Luxon
+- const expandedFormat = adapter.getFormatHelperText(format);
++ const expandedFormat = adapter.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase();
+
+  // For DateFns
+- const expandedFormat = adapter.getFormatHelperText(format);
++ const expandedFormat = adapter.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
+
+  // For Moment
+- const expandedFormat = adapter.getFormatHelperText(format);
++ const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
+```
+
+- The `adapter.getMeridiemText` method have been removed, you can use the `adapter.setHours`, `adapter.date` and `adapter.format` methods to recreate its behavior:
+
+  ```diff
+  - const meridiem = adapter.getMeridiemText('am');
+  + const getMeridiemText = (meridiem: 'am' | 'pm') => {
+  +   const date = adapter.setHours(adapter.date()!, meridiem === 'am' ? 2 : 14);
+  +   return utils.format(date, 'meridiem');
+  + };
+  +
+  + const meridiem = getMeridiemText('am');
+  ```
+
+- The `adapter.getMonthArray` method have been removed, you can use the `adapter.startOfYear` and `adapter.addMonths` methods to recreate its behavior:
+
+  ```diff
+  - const monthArray = adapter.getMonthArray(value);
+  + const getMonthArray = (year) => {
+  +   const firstMonth = utils.startOfYear(year);
+  +   const months = [firstMonth];
+  +
+  +   while (months.length < 12) {
+  +     const prevMonth = months[months.length - 1];
+  +     months.push(utils.addMonths(prevMonth, 1));
+  +   }
+  +
+  +   return months;
+  + }
+  +
+  + const monthArray = getMonthArray(value);
+  ```
+
+- The `adapter.getNextMonth` method have been removed, you can use the `adapter.addMonths` method instead:
+
+  ```diff
+  - const nextMonth = adapter.getNextMonth(value);
+  + const nextMonth = adapter.addMonths(value, 1);
+  ```
+
+- The `adapter.getPreviousMonth` method have been removed, you can use the `adapter.addMonths` method instead:
+
+  ```diff
+  - const previousMonth = adapter.getPreviousMonth(value);
+  + const previousMonth = adapter.addMonths(value, -1);
+  ```
+
+- The `adapter.getWeekdays` method have been removed, you can use the `adapter.startOfWeek` and `adapter.addDays` methods instead:
+
+  ```diff
+  - const weekDays = adapter.getWeekdays(value);
+  + const getWeekdays = (value) => {
+  +   const start = adapter.startOfWeek(value);
+  +   return [0, 1, 2, 3, 4, 5, 6].map((diff) => utils.addDays(start, diff));
+  + };
+  +
+  + const weekDays = getWeekdays(value);
+  ```
+
+- The `isNull` method have been removed, you can replace it with a very basic check:
+
+  ```diff
+  - const isNull = adapter.isNull(value);
+  + const isNull = value === null;
+  ```
+
+- The `adapter.mergeDateAndTime` method have been removed, you can use the `adapter.setHours`, `adapter.setMinutes`, and `adapter.setSeconds` methods to recreate its behavior:
+
+  ```diff
+  - const result = adapter.mergeDateAndTime(valueWithDate, valueWithTime);
+  + const mergeDateAndTime = <TDate>(
+  +   dateParam,
+  +   timeParam,
+  + ) => {
+  +   let mergedDate = dateParam;
+  +   mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));
+  +   mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
+  +   mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
+  +
+  +   return mergedDate;
+  + };
+  +
+  + const result = mergeDateAndTime(valueWithDate, valueWithTime);
+  ```
+
+- The `adapter.parseISO` method have been removed, you can directly use your date library:
+
+  ```diff
+    // For Day.js
+  - const value = adapter.parseISO(isoString);
+  + const value = dayjs(isoString);
+
+    // For Luxon
+  - const value = adapter.parseISO(isoString);
+  + const value = DateTime.fromISO(isoString);
+
+    // For DateFns
+  - const value = adapter.parseISO(isoString);
+  + const value = dateFns.parseISO(isoString);
+
+    // For Moment
+  - const value = adapter.parseISO(isoString);
+  + const value = moment(isoString, true);
+  ```
+
+- The `adapter.toISO` method have been removed, you can directly use your date library:
+
+  ```diff
+  - const isoString = adapter.toISO(value);
+  + const isoString = value.toISOString();
+  + const isoString = value.toUTC().toISO({ format: 'extended' });
+  + const isoString = dateFns.formatISO(value, { format: 'extended' });
+  + const isoString = value.toISOString();
+  ```
+
+- The `adapter.isEqual` method used to accept any type of value for its two input and tried to parse them before checking if they were equal.
+  The method has been simplified and now only accepts an already-parsed date or `null` (ie: the same formats used by the `value` prop in the pickers)
+
+  ```diff
+   const adapterDayjs = new AdapterDayjs();
+   const adapterLuxon = new AdapterLuxon();
+   const adapterDateFns = new AdapterDateFns();
+   const adapterMoment = new AdatperMoment();
+
+   // Supported formats
+   const isEqual = adapterDayjs.isEqual(null, null); // Same for the other adapters
+   const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
+   const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
+   const isEqual = adapterDateFns.isEqual(new Date(), new Date('2022-04-17'));
+
+   // Non-supported formats (JS Date)
+  - const isEqual = adapterDayjs.isEqual(new Date(), new Date('2022-04-17'));
+  + const isEqual = adapterDayjs.isEqual(dayjs(), dayjs('2022-04-17'));
+
+  - const isEqual = adapterLuxon.isEqual(new Date(), new Date('2022-04-17'));
+  + const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
+
+  - const isEqual = adapterMoment.isEqual(new Date(), new Date('2022-04-17'));
+  + const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
+
+   // Non-supported formats (string)
+  - const isEqual = adapterDayjs.isEqual('2022-04-16', '2022-04-17');
+  + const isEqual = adapterDayjs.isEqual(dayjs('2022-04-17'), dayjs('2022-04-17'));
+
+  - const isEqual = adapterLuxon.isEqual('2022-04-16', '2022-04-17');
+  + const isEqual = adapterLuxon.isEqual(DateTime.fromISO('2022-04-17'), DateTime.fromISO('2022-04-17'));
+
+  - const isEqual = adapterMoment.isEqual('2022-04-16', '2022-04-17');
+  + const isEqual = adapterMoment.isEqual(moment('2022-04-17'), moment('2022-04-17'));
+
+  - const isEqual = adapterDateFns.isEqual('2022-04-16', '2022-04-17');
+  + const isEqual = adapterDateFns.isEqual(new Date('2022-04-17'), new Date('2022-04-17'));
+  ```
+
+- The `dateLibInstance` prop of `LocalizationProvider` does not work with `AdapterDayjs` anymore (#11023). This prop was used to set the pickers in UTC mode before the implementation of a proper timezone support in the components.
+  You can learn more about the new approach on the [dedicated doc page](https://mui.com/x/react-date-pickers/timezone/).
+
+  ```diff
+    // When a `value` or a `defaultValue` is provided
+    <LocalizationProvider
+      adapter={AdapterDayjs}
+  -   dateLibInstance={dayjs.utc}
+    >
+      <DatePicker value={dayjs.utc('2022-04-17')} />
+    </LocalizationProvider>
+
+    // When no `value` or `defaultValue` is provided
+    <LocalizationProvider
+      adapter={AdapterDayjs}
+  -   dateLibInstance={dayjs.utc}
+    >
+  -   <DatePicker />
+  +   <DatePicker timezone="UTC" />
+    </LocalizationProvider>
+  ```
+
+- The property `hasLeadingZeros` has been removed from the sections in favor of the more precise `hasLeadingZerosInFormat` and `hasLeadingZerosInInput` properties (#10994). To keep the same behavior, you can replace it by `hasLeadingZerosInFormat`:
+
+  ```diff
+   const fieldRef = React.useRef<FieldRef<FieldSection>>(null);
+
+   React.useEffect(() => {
+       const firstSection = fieldRef.current!.getSections()[0]
+  -    console.log(firstSection.hasLeadingZeros)
+  +    console.log(firstSection.hasLeadingZerosInFormat)
+   }, [])
+
+   return (
+     <DateField unstableFieldRef={fieldRef} />
+   );
+  ```
+
+- The `adapter.getYearRange` method used to accept two params and now accepts a tuple to be consistent with the `adapter.isWithinRange` method (#10978):
+
+  ```diff
+  - adapter.getYearRange(start, end);
+  + adapter.getYearRange([start, end])
+  ```
+
+- The `adapter.isValid` method used to accept any type of value and tried to parse them before checking their validity (#10971).
+  The method has been simplified and now only accepts an already-parsed date or `null`.
+  Which is the same type as the one accepted by the components `value` prop.
+
+  ```diff
+   const adapterDayjs = new AdapterDayjs();
+   const adapterLuxon = new AdapterLuxon();
+   const adapterDateFns = new AdapterDateFns();
+   const adapterMoment = new AdatperMoment();
+
+   // Supported formats
+   const isValid = adapterDayjs.isValid(null); // Same for the other adapters
+   const isValid = adapterLuxon.isValid(DateTime.now());
+   const isValid = adapterMoment.isValid(moment());
+   const isValid = adapterDateFns.isValid(new Date());
+
+   // Non-supported formats (JS Date)
+  - const isValid = adapterDayjs.isValid(new Date('2022-04-17'));
+  + const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
+
+  - const isValid = adapterLuxon.isValid(new Date('2022-04-17'));
+  + const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
+
+  - const isValid = adapterMoment.isValid(new Date('2022-04-17'));
+  + const isValid = adapterMoment.isValid(moment('2022-04-17'));
+
+   // Non-supported formats (string)
+  - const isValid = adapterDayjs.isValid('2022-04-17');
+  + const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
+
+  - const isValid = adapterLuxon.isValid('2022-04-17');
+  + const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
+
+  - const isValid = adapterMoment.isValid('2022-04-17');
+  + const isValid = adapterMoment.isValid(moment('2022-04-17'));
+
+  - const isValid = adapterDateFns.isValid('2022-04-17');
+  + const isValid = adapterDateFns.isValid(new Date('2022-04-17'));
+  ```
+
+#### Changes
+
+- [pickers] Change the input format of `adapter.getYearRange` to be consistent with `adapter.isWithinRange` (#10978) @flaviendelangle
+- [pickers] Clean remaining `components` / `componentsProps` typings (#11040) @flaviendelangle
+- [pickers] Modify `adapter.isEqual` method to accept `TDate | null` instead of `any` (#10976) @flaviendelangle
+- [pickers] Modify `adapter.isValid` method to accept `TDate | null` instead of `any` (#10971) @flaviendelangle
+- [pickers] Remove the `hasLeadingZeros` property from `FieldSection` (#10994) @flaviendelangle
+- [pickers] Remove the deprecated methods and formats from the adapters (#10776) @flaviendelangle
+- [pickers] Remove the legacy UTC implementation for `dayjs` (#11023) @flaviendelangle
+- [pickers] Remove unused code (#11048) @flaviendelangle
+- [pickers] Move the exports of the `calendarHeader` slot to `@mui/x-date-pickers/PickersCalendarHeader` (#11020) @flaviendelangle
+- [DateCalendar] Allow to override the format of the header with a prop (#10990) @flaviendelangle
+- [DateCalendar] Remove the string argument of the `dayOfWeekFormatter` prop (#10992) @flaviendelangle
+
+### Docs
+
+- [docs] Fix incorrect component name in the "Custom slots and subcomponents" page (#11024) @flaviendelangle
+- [docs] Fix typos in pickers migration guide (#11057) @flaviendelangle
+
+### Core
+
+- [core] Clean the component slots doc generation (#11021) @flaviendelangle
+- [core] Fix script to release with `next` tag (#10996) @LukasTy
+- [test] Wait for images to load (#11004) @cherniavskii
+
 ## 7.0.0-alpha.0
 
 _Nov 10, 2023_
@@ -384,7 +791,7 @@ Same changes as in `@mui/x-date-pickers@6.16.3`, plus:
 
 - [charts] Add reference links to area + bar chart components (#10652) @michelengelen
 - [charts] Add reference links to line chart + sparkline components (#10650) @michelengelen
-- [charts] Add reference links to pie + scatter chart components  (#10653) @michelengelen
+- [charts] Add reference links to pie + scatter chart components (#10653) @michelengelen
 - [charts] Render only when `width` and `height` are resolved (#10714) @alexfauquette
 - [charts] Support animation on `BarChart` (#9926) @alexfauquette
 - [charts] Use new text component to avoid tick label overflow on x-axis (#10648) @alexfauquette
@@ -460,6 +867,7 @@ It adds line break support and avoids overlapping text in the legend.
 This comes with some breaking changes.
 
 - The DOM structure is modified. An intermediary `<tspan />` element has been added. This can impact how your style is applied.
+
   ```diff
   - <text>The label</text>
   + <text><tspan>The label</tspan></text>

package/DateRangeCalendar/DateRangeCalendar.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { resolveComponentProps } from '@mui/base/utils';
+import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
@@ -120,6 +120,7 @@ const useUtilityClasses = ownerState => {
  * - [DateRangeCalendar API](https://mui.com/x/api/date-pickers/date-range-calendar/)
  */
 const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
+  var _slots$calendarHeader;
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   const shouldHavePreview = useMediaQuery(DEFAULT_DESKTOP_MODE_MEDIA_QUERY, {
     defaultMatches: false
@@ -268,6 +269,34 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     shouldDisableDate: wrappedShouldDisableDate,
     timezone
   });
+
+  // When disabled, limit the view to the selected date
+  const minDateWithDisabled = disabled && value[0] || minDate;
+  const maxDateWithDisabled = disabled && value[1] || maxDate;
+  const CalendarHeader = (_slots$calendarHeader = slots == null ? void 0 : slots.calendarHeader) != null ? _slots$calendarHeader : PickersCalendarHeader;
+  const calendarHeaderProps = useSlotProps({
+    elementType: CalendarHeader,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.calendarHeader,
+    additionalProps: {
+      views: ['day'],
+      view: 'day',
+      currentMonth: calendarState.currentMonth,
+      onMonthChange: (newMonth, direction) => handleChangeMonth({
+        newMonth,
+        direction
+      }),
+      minDate: minDateWithDisabled,
+      maxDate: maxDateWithDisabled,
+      disabled,
+      disablePast,
+      disableFuture,
+      reduceAnimations,
+      slots,
+      slotProps,
+      timezone
+    },
+    ownerState: props
+  });
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     var _prevValue$current, _prevValue$current2;
@@ -321,10 +350,6 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     readOnly,
     disabled
   };
-
-  // When disabled, limit the view to the selected date
-  const minDateWithDisabled = disabled && value[0] || minDate;
-  const maxDateWithDisabled = disabled && value[1] || maxDate;
   const [rangePreviewDay, setRangePreviewDay] = React.useState(null);
   const CalendarTransitionProps = React.useMemo(() => ({
     onMouseLeave: () => setRangePreviewDay(null)
@@ -421,60 +446,46 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     children: [/*#__PURE__*/_jsx(Watermark, {
       packageName: "x-date-pickers-pro",
       releaseInfo: releaseInfo
-    }), calendarMonths.map((month, index) => /*#__PURE__*/_jsxs(DateRangeCalendarMonthContainer, {
-      className: classes.monthContainer,
-      children: [calendars === 1 ? /*#__PURE__*/_jsx(PickersCalendarHeader, {
-        views: ['day'],
-        view: 'day',
-        currentMonth: calendarState.currentMonth,
-        onMonthChange: (newMonth, direction) => handleChangeMonth({
-          newMonth,
-          direction
-        }),
-        minDate: minDateWithDisabled,
-        maxDate: maxDateWithDisabled,
-        disabled: disabled,
-        disablePast: disablePast,
-        disableFuture: disableFuture,
-        reduceAnimations: reduceAnimations,
-        slots: slots,
-        slotProps: slotProps,
-        timezone: timezone
-      }) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
-        onGoToPrevious: selectPreviousMonth,
-        onGoToNext: selectNextMonth,
-        isPreviousHidden: index !== 0,
-        isPreviousDisabled: isPreviousMonthDisabled,
-        previousLabel: localeText.previousMonth,
-        isNextHidden: index !== calendars - 1,
-        isNextDisabled: isNextMonthDisabled,
-        nextLabel: localeText.nextMonth,
-        slots: slots,
-        slotProps: slotProps,
-        children: utils.format(visibleMonths[month], 'monthAndYear')
-      }), /*#__PURE__*/_jsx(DayCalendarForRange, _extends({
-        className: classes.dayCalendar
-      }, calendarState, baseDateValidationProps, commonViewProps, {
-        onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-        onFocusedDayChange: changeFocusedDay,
-        reduceAnimations: reduceAnimations,
-        selectedDays: value,
-        onSelectedDaysChange: handleSelectedDayChange,
-        currentMonth: visibleMonths[month],
-        TransitionProps: CalendarTransitionProps,
-        shouldDisableDate: wrappedShouldDisableDate,
-        showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
-        dayOfWeekFormatter: dayOfWeekFormatter,
-        loading: loading,
-        renderLoading: renderLoading,
-        slots: slotsForDayCalendar,
-        slotProps: slotPropsForDayCalendar,
-        autoFocus: month === focusedMonth,
-        fixedWeekNumber: fixedWeekNumber,
-        displayWeekNumber: displayWeekNumber,
-        timezone: timezone
-      }), index)]
-    }, month))]
+    }), calendarMonths.map((month, index) => {
+      var _calendarHeaderProps$;
+      return /*#__PURE__*/_jsxs(DateRangeCalendarMonthContainer, {
+        className: classes.monthContainer,
+        children: [calendars === 1 ? /*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps)) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
+          onGoToPrevious: selectPreviousMonth,
+          onGoToNext: selectNextMonth,
+          isPreviousHidden: index !== 0,
+          isPreviousDisabled: isPreviousMonthDisabled,
+          previousLabel: localeText.previousMonth,
+          isNextHidden: index !== calendars - 1,
+          isNextDisabled: isNextMonthDisabled,
+          nextLabel: localeText.nextMonth,
+          slots: slots,
+          slotProps: slotProps,
+          children: utils.formatByString(visibleMonths[month], (_calendarHeaderProps$ = calendarHeaderProps.format) != null ? _calendarHeaderProps$ : `${utils.formats.month} ${utils.formats.year}`)
+        }), /*#__PURE__*/_jsx(DayCalendarForRange, _extends({
+          className: classes.dayCalendar
+        }, calendarState, baseDateValidationProps, commonViewProps, {
+          onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
+          onFocusedDayChange: changeFocusedDay,
+          reduceAnimations: reduceAnimations,
+          selectedDays: value,
+          onSelectedDaysChange: handleSelectedDayChange,
+          currentMonth: visibleMonths[month],
+          TransitionProps: CalendarTransitionProps,
+          shouldDisableDate: wrappedShouldDisableDate,
+          showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
+          dayOfWeekFormatter: dayOfWeekFormatter,
+          loading: loading,
+          renderLoading: renderLoading,
+          slots: slotsForDayCalendar,
+          slotProps: slotPropsForDayCalendar,
+          autoFocus: month === focusedMonth,
+          fixedWeekNumber: fixedWeekNumber,
+          displayWeekNumber: displayWeekNumber,
+          timezone: timezone
+        }), index)]
+      }, month);
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
@@ -503,7 +514,6 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -3,7 +3,7 @@ import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base/utils';
 import { Theme } from '@mui/material/styles';
 import { TimezoneProps } from '@mui/x-date-pickers/models';
-import { PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { PickersCalendarHeader, PickersCalendarHeaderProps, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps } from '@mui/x-date-pickers/PickersCalendarHeader';
 import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, PickerSelectionState, DayCalendarProps, ExportedUseViewsOptions } from '@mui/x-date-pickers/internals';
 import { DateRange, DayRangeValidationProps } from '../internals/models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
@@ -11,6 +11,12 @@ import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerD
 import { UseRangePositionProps } from '../internals/hooks/useRangePosition';
 export type DateRangePosition = 'start' | 'end';
 export interface DateRangeCalendarSlotsComponent<TDate> extends PickersArrowSwitcherSlotsComponent, Omit<DayCalendarSlotsComponent<TDate>, 'day'>, PickersCalendarHeaderSlotsComponent {
+    /**
+     * Custom component for calendar header.
+     * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+     * @default PickersCalendarHeader
+     */
+    calendarHeader?: React.ElementType<PickersCalendarHeaderProps<TDate>>;
     /**
      * Custom component for day in range pickers.
      * Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
@@ -19,6 +25,7 @@ export interface DateRangeCalendarSlotsComponent<TDate> extends PickersArrowSwit
     day?: React.ElementType<DateRangePickerDayProps<TDate>>;
 }
 export interface DateRangeCalendarSlotsComponentsProps<TDate> extends PickersArrowSwitcherSlotsComponentsProps, Omit<DayCalendarSlotsComponentsProps<TDate>, 'day'>, PickersCalendarHeaderSlotsComponentsProps<TDate> {
+    calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateRangeCalendarProps<TDate>>;
     day?: SlotComponentProps<typeof DateRangePickerDay, {}, DayCalendarProps<TDate> & {
         day: TDate;
         selected: boolean;

package/DateRangePicker/DateRangePicker.js

@@ -75,7 +75,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/DateRangePicker/shared.d.ts

@@ -35,5 +35,5 @@ export interface BaseDateRangePickerProps<TDate> extends Omit<BasePickerInputPro
     viewRenderers?: Partial<PickerViewRendererLookup<DateRange<TDate>, 'day', DateRangeViewRendererProps<TDate, 'day'>, {}>>;
 }
 type UseDateRangePickerDefaultizedProps<TDate, Props extends BaseDateRangePickerProps<TDate>> = LocalizedComponent<TDate, DefaultizedProps<Props, keyof BaseDateValidationProps<TDate>>>;
-export declare function useDateRangePickerDefaultizedProps<TDate, Props extends BaseDateRangePickerProps<TDate>>(props: Props, name: string): UseDateRangePickerDefaultizedProps<TDate, Omit<Props, 'components' | 'componentsProps'>>;
+export declare function useDateRangePickerDefaultizedProps<TDate, Props extends BaseDateRangePickerProps<TDate>>(props: Props, name: string): UseDateRangePickerDefaultizedProps<TDate, Props>;
 export {};

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -90,7 +90,6 @@ DesktopDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -90,7 +90,6 @@ MobileDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/StaticDateRangePicker/StaticDateRangePicker.js

@@ -76,7 +76,6 @@ StaticDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.0.0-alpha.0
+ * @mui/x-date-pickers-pro v7.0.0-alpha.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/utils/date-fields-utils.d.ts

@@ -12,7 +12,6 @@ export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) =>
     placeholder: string;
     type: import("@mui/x-date-pickers").FieldSectionType;
     contentType: import("@mui/x-date-pickers").FieldSectionContentType;
-    hasLeadingZeros: boolean;
     hasLeadingZerosInFormat: boolean;
     hasLeadingZerosInInput: boolean;
     modified: boolean;

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY5OTU3MDgwMDAwMA==";
+  const releaseInfo = "MTcwMDE3MjAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/legacy/DateRangeCalendar/DateRangeCalendar.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { resolveComponentProps } from '@mui/base/utils';
+import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
@@ -124,6 +124,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
  * - [DateRangeCalendar API](https://mui.com/x/api/date-pickers/date-range-calendar/)
  */
 var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
+  var _slots$calendarHeader;
   var props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   var shouldHavePreview = useMediaQuery(DEFAULT_DESKTOP_MODE_MEDIA_QUERY, {
     defaultMatches: false
@@ -270,6 +271,36 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
     changeMonth = _useCalendarState.changeMonth,
     handleChangeMonth = _useCalendarState.handleChangeMonth,
     onMonthSwitchingAnimationEnd = _useCalendarState.onMonthSwitchingAnimationEnd;
+
+  // When disabled, limit the view to the selected date
+  var minDateWithDisabled = disabled && value[0] || minDate;
+  var maxDateWithDisabled = disabled && value[1] || maxDate;
+  var CalendarHeader = (_slots$calendarHeader = slots == null ? void 0 : slots.calendarHeader) != null ? _slots$calendarHeader : PickersCalendarHeader;
+  var calendarHeaderProps = useSlotProps({
+    elementType: CalendarHeader,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.calendarHeader,
+    additionalProps: {
+      views: ['day'],
+      view: 'day',
+      currentMonth: calendarState.currentMonth,
+      onMonthChange: function onMonthChange(newMonth, direction) {
+        return handleChangeMonth({
+          newMonth: newMonth,
+          direction: direction
+        });
+      },
+      minDate: minDateWithDisabled,
+      maxDate: maxDateWithDisabled,
+      disabled: disabled,
+      disablePast: disablePast,
+      disableFuture: disableFuture,
+      reduceAnimations: reduceAnimations,
+      slots: slots,
+      slotProps: slotProps,
+      timezone: timezone
+    },
+    ownerState: props
+  });
   var prevValue = React.useRef(null);
   React.useEffect(function () {
     var _prevValue$current, _prevValue$current2;
@@ -323,10 +354,6 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
     readOnly: readOnly,
     disabled: disabled
   };
-
-  // When disabled, limit the view to the selected date
-  var minDateWithDisabled = disabled && value[0] || minDate;
-  var maxDateWithDisabled = disabled && value[1] || maxDate;
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     rangePreviewDay = _React$useState2[0],
@@ -441,28 +468,10 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
       packageName: "x-date-pickers-pro",
       releaseInfo: releaseInfo
     }), calendarMonths.map(function (month, index) {
+      var _calendarHeaderProps$;
       return /*#__PURE__*/_jsxs(DateRangeCalendarMonthContainer, {
         className: classes.monthContainer,
-        children: [calendars === 1 ? /*#__PURE__*/_jsx(PickersCalendarHeader, {
-          views: ['day'],
-          view: 'day',
-          currentMonth: calendarState.currentMonth,
-          onMonthChange: function onMonthChange(newMonth, direction) {
-            return handleChangeMonth({
-              newMonth: newMonth,
-              direction: direction
-            });
-          },
-          minDate: minDateWithDisabled,
-          maxDate: maxDateWithDisabled,
-          disabled: disabled,
-          disablePast: disablePast,
-          disableFuture: disableFuture,
-          reduceAnimations: reduceAnimations,
-          slots: slots,
-          slotProps: slotProps,
-          timezone: timezone
-        }) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
+        children: [calendars === 1 ? /*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps)) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
           onGoToPrevious: selectPreviousMonth,
           onGoToNext: selectNextMonth,
           isPreviousHidden: index !== 0,
@@ -473,7 +482,7 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
           nextLabel: localeText.nextMonth,
           slots: slots,
           slotProps: slotProps,
-          children: utils.format(visibleMonths[month], 'monthAndYear')
+          children: utils.formatByString(visibleMonths[month], (_calendarHeaderProps$ = calendarHeaderProps.format) != null ? _calendarHeaderProps$ : "".concat(utils.formats.month, " ").concat(utils.formats.year))
         }), /*#__PURE__*/_jsx(DayCalendarForRange, _extends({
           className: classes.dayCalendar
         }, calendarState, baseDateValidationProps, commonViewProps, {
@@ -526,7 +535,6 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/legacy/DateRangePicker/DateRangePicker.js

@@ -74,7 +74,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -89,7 +89,6 @@ DesktopDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -89,7 +89,6 @@ MobileDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/legacy/StaticDateRangePicker/StaticDateRangePicker.js

@@ -75,7 +75,6 @@ StaticDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.0.0-alpha.0
+ * @mui/x-date-pickers-pro v7.0.0-alpha.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY5OTU3MDgwMDAwMA==";
+  var releaseInfo = "MTcwMDE3MjAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { resolveComponentProps } from '@mui/base/utils';
+import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
@@ -267,6 +267,34 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     shouldDisableDate: wrappedShouldDisableDate,
     timezone
   });
+
+  // When disabled, limit the view to the selected date
+  const minDateWithDisabled = disabled && value[0] || minDate;
+  const maxDateWithDisabled = disabled && value[1] || maxDate;
+  const CalendarHeader = slots?.calendarHeader ?? PickersCalendarHeader;
+  const calendarHeaderProps = useSlotProps({
+    elementType: CalendarHeader,
+    externalSlotProps: slotProps?.calendarHeader,
+    additionalProps: {
+      views: ['day'],
+      view: 'day',
+      currentMonth: calendarState.currentMonth,
+      onMonthChange: (newMonth, direction) => handleChangeMonth({
+        newMonth,
+        direction
+      }),
+      minDate: minDateWithDisabled,
+      maxDate: maxDateWithDisabled,
+      disabled,
+      disablePast,
+      disableFuture,
+      reduceAnimations,
+      slots,
+      slotProps,
+      timezone
+    },
+    ownerState: props
+  });
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
@@ -319,10 +347,6 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     readOnly,
     disabled
   };
-
-  // When disabled, limit the view to the selected date
-  const minDateWithDisabled = disabled && value[0] || minDate;
-  const maxDateWithDisabled = disabled && value[1] || maxDate;
   const [rangePreviewDay, setRangePreviewDay] = React.useState(null);
   const CalendarTransitionProps = React.useMemo(() => ({
     onMouseLeave: () => setRangePreviewDay(null)
@@ -419,24 +443,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       releaseInfo: releaseInfo
     }), calendarMonths.map((month, index) => /*#__PURE__*/_jsxs(DateRangeCalendarMonthContainer, {
       className: classes.monthContainer,
-      children: [calendars === 1 ? /*#__PURE__*/_jsx(PickersCalendarHeader, {
-        views: ['day'],
-        view: 'day',
-        currentMonth: calendarState.currentMonth,
-        onMonthChange: (newMonth, direction) => handleChangeMonth({
-          newMonth,
-          direction
-        }),
-        minDate: minDateWithDisabled,
-        maxDate: maxDateWithDisabled,
-        disabled: disabled,
-        disablePast: disablePast,
-        disableFuture: disableFuture,
-        reduceAnimations: reduceAnimations,
-        slots: slots,
-        slotProps: slotProps,
-        timezone: timezone
-      }) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
+      children: [calendars === 1 ? /*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps)) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
         onGoToPrevious: selectPreviousMonth,
         onGoToNext: selectNextMonth,
         isPreviousHidden: index !== 0,
@@ -447,7 +454,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         nextLabel: localeText.nextMonth,
         slots: slots,
         slotProps: slotProps,
-        children: utils.format(visibleMonths[month], 'monthAndYear')
+        children: utils.formatByString(visibleMonths[month], calendarHeaderProps.format ?? `${utils.formats.month} ${utils.formats.year}`)
       }), /*#__PURE__*/_jsx(DayCalendarForRange, _extends({
         className: classes.dayCalendar
       }, calendarState, baseDateValidationProps, commonViewProps, {
@@ -499,7 +506,6 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/modern/DateRangePicker/DateRangePicker.js

@@ -75,7 +75,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -86,7 +86,6 @@ DesktopDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -86,7 +86,6 @@ MobileDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/modern/StaticDateRangePicker/StaticDateRangePicker.js

@@ -75,7 +75,6 @@ StaticDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.0.0-alpha.0
+ * @mui/x-date-pickers-pro v7.0.0-alpha.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY5OTU3MDgwMDAwMA==";
+  const releaseInfo = "MTcwMDE3MjAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -275,6 +275,34 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     shouldDisableDate: wrappedShouldDisableDate,
     timezone
   });
+
+  // When disabled, limit the view to the selected date
+  const minDateWithDisabled = disabled && value[0] || minDate;
+  const maxDateWithDisabled = disabled && value[1] || maxDate;
+  const CalendarHeader = slots?.calendarHeader ?? _PickersCalendarHeader.PickersCalendarHeader;
+  const calendarHeaderProps = (0, _utils.useSlotProps)({
+    elementType: CalendarHeader,
+    externalSlotProps: slotProps?.calendarHeader,
+    additionalProps: {
+      views: ['day'],
+      view: 'day',
+      currentMonth: calendarState.currentMonth,
+      onMonthChange: (newMonth, direction) => handleChangeMonth({
+        newMonth,
+        direction
+      }),
+      minDate: minDateWithDisabled,
+      maxDate: maxDateWithDisabled,
+      disabled,
+      disablePast,
+      disableFuture,
+      reduceAnimations,
+      slots,
+      slotProps,
+      timezone
+    },
+    ownerState: props
+  });
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
@@ -327,10 +355,6 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     readOnly,
     disabled
   };
-
-  // When disabled, limit the view to the selected date
-  const minDateWithDisabled = disabled && value[0] || minDate;
-  const maxDateWithDisabled = disabled && value[1] || maxDate;
   const [rangePreviewDay, setRangePreviewDay] = React.useState(null);
   const CalendarTransitionProps = React.useMemo(() => ({
     onMouseLeave: () => setRangePreviewDay(null)
@@ -427,24 +451,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       releaseInfo: releaseInfo
     }), calendarMonths.map((month, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangeCalendarMonthContainer, {
       className: classes.monthContainer,
-      children: [calendars === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersCalendarHeader.PickersCalendarHeader, {
-        views: ['day'],
-        view: 'day',
-        currentMonth: calendarState.currentMonth,
-        onMonthChange: (newMonth, direction) => handleChangeMonth({
-          newMonth,
-          direction
-        }),
-        minDate: minDateWithDisabled,
-        maxDate: maxDateWithDisabled,
-        disabled: disabled,
-        disablePast: disablePast,
-        disableFuture: disableFuture,
-        reduceAnimations: reduceAnimations,
-        slots: slots,
-        slotProps: slotProps,
-        timezone: timezone
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeCalendarArrowSwitcher, {
+      children: [calendars === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, (0, _extends2.default)({}, calendarHeaderProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeCalendarArrowSwitcher, {
         onGoToPrevious: selectPreviousMonth,
         onGoToNext: selectNextMonth,
         isPreviousHidden: index !== 0,
@@ -455,7 +462,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
         nextLabel: localeText.nextMonth,
         slots: slots,
         slotProps: slotProps,
-        children: utils.format(visibleMonths[month], 'monthAndYear')
+        children: utils.formatByString(visibleMonths[month], calendarHeaderProps.format ?? `${utils.formats.month} ${utils.formats.year}`)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DayCalendarForRange, (0, _extends2.default)({
         className: classes.dayCalendar
       }, calendarState, baseDateValidationProps, commonViewProps, {
@@ -507,7 +514,6 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   currentMonthCalendarPosition: _propTypes.default.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/node/DateRangePicker/DateRangePicker.js

@@ -84,7 +84,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   currentMonthCalendarPosition: _propTypes.default.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -95,7 +95,6 @@ DesktopDateRangePicker.propTypes = {
   currentMonthCalendarPosition: _propTypes.default.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/node/MobileDateRangePicker/MobileDateRangePicker.js

@@ -95,7 +95,6 @@ MobileDateRangePicker.propTypes = {
   currentMonthCalendarPosition: _propTypes.default.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/node/StaticDateRangePicker/StaticDateRangePicker.js

@@ -84,7 +84,6 @@ StaticDateRangePicker.propTypes = {
   currentMonthCalendarPosition: _propTypes.default.oneOf([1, 2, 3]),
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.0.0-alpha.0
+ * @mui/x-date-pickers-pro v7.0.0-alpha.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY5OTU3MDgwMDAwMA==";
+  const releaseInfo = "MTcwMDE3MjAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "7.0.0-alpha.0",
+  "version": "7.0.0-alpha.1",
   "description": "The commercial edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,8 +33,8 @@
     "@babel/runtime": "^7.23.2",
     "@mui/base": "^5.0.0-beta.22",
     "@mui/utils": "^5.14.16",
-    "@mui/x-date-pickers": "7.0.0-alpha.0",
-    "@mui/x-license-pro": "7.0.0-alpha.0",
+    "@mui/x-date-pickers": "7.0.0-alpha.1",
+    "@mui/x-license-pro": "7.0.0-alpha.1",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5"