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

package/legacy/DateRangeCalendar/DateRangeCalendar.js

@@ -2,14 +2,14 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone"],
+var _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 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';
@@ -60,23 +60,22 @@ var DAY_RANGE_SIZE = 40;
 var weeksContainerHeight = (DAY_RANGE_SIZE + DAY_MARGIN * 2) * 6;
 var warnInvalidCurrentMonthCalendarPosition = buildWarning(['The `currentMonthCalendarPosition` prop must be an integer between `1` and the amount of calendars rendered.', 'For example if you have 2 calendars rendered, it should be equal to either 1 or 2.']);
 var DayCalendarForRange = styled(DayCalendar)(function (_ref2) {
-  var _$concat, _ref3;
   var theme = _ref2.theme;
-  return _ref3 = {
+  return _defineProperty(_defineProperty({
     minWidth: 312,
     minHeight: weeksContainerHeight
-  }, _defineProperty(_ref3, "&.".concat(dateRangeCalendarClasses.dayDragging), (_$concat = {}, _defineProperty(_$concat, "& .".concat(dayClasses.day), {
+  }, "&.".concat(dateRangeCalendarClasses.dayDragging), _defineProperty(_defineProperty({}, "& .".concat(dayClasses.day), {
     cursor: 'grabbing'
-  }), _defineProperty(_$concat, "& .".concat(dayClasses.root, ":not(.").concat(dayClasses.rangeIntervalDayHighlightStart, "):not(.").concat(dayClasses.rangeIntervalDayHighlightEnd, ") .").concat(dayClasses.day, ":not(.").concat(dayClasses.notSelectedDate, ")"), {
+  }), "& .".concat(dayClasses.root, ":not(.").concat(dayClasses.rangeIntervalDayHighlightStart, "):not(.").concat(dayClasses.rangeIntervalDayHighlightEnd, ") .").concat(dayClasses.day, ":not(.").concat(dayClasses.notSelectedDate, ")"), {
     // we can't override `PickersDay` background color here, because it's styles take precedence
     opacity: 0.6
-  }), _$concat)), _defineProperty(_ref3, "&:not(.".concat(dateRangeCalendarClasses.dayDragging, ") .").concat(dayClasses.dayOutsideRangeInterval), {
+  })), "&:not(.".concat(dateRangeCalendarClasses.dayDragging, ") .").concat(dayClasses.dayOutsideRangeInterval), {
     '@media (pointer: fine)': {
       '&:hover': {
         border: "1px solid ".concat((theme.vars || theme).palette.grey[500])
       }
     }
-  }), _ref3;
+  });
 });
 function useDateRangeCalendarDefaultizedProps(props, name) {
   var _themeProps$renderLoa, _themeProps$reduceAni, _props$loading, _props$disablePast, _props$disableFuture, _themeProps$calendars, _themeProps$disableDr;
@@ -124,6 +123,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
@@ -140,7 +140,6 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
     shouldDisableDate = props.shouldDisableDate,
     reduceAnimations = props.reduceAnimations,
     onMonthChange = props.onMonthChange,
-    defaultCalendarMonth = props.defaultCalendarMonth,
     rangePositionProp = props.rangePosition,
     inDefaultRangePosition = props.defaultRangePosition,
     inOnRangePositionChange = props.onRangePositionChange,
@@ -254,7 +253,6 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
   var _useCalendarState = useCalendarState({
       value: value[0] || value[1],
       referenceDate: referenceDate,
-      defaultCalendarMonth: defaultCalendarMonth,
       disableFuture: disableFuture,
       disablePast: disablePast,
       disableSwitchToMonthOnDayFocus: true,
@@ -270,6 +268,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 +351,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 +465,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 +479,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,16 +532,11 @@ 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()
    */
   dayOfWeekFormatter: PropTypes.func,
-  /**
-   * Default calendar month displayed when `value={[null, null]}`.
-   */
-  defaultCalendarMonth: PropTypes.any,
   /**
    * The initial position in the edited date range.
    * Used when the component is not controlled.
@@ -685,7 +686,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/legacy/DateRangeCalendar/useDragRange.js

@@ -9,7 +9,7 @@ var resolveDateFromTarget = function resolveDateFromTarget(target, utils, timezo
     return null;
   }
   var timestamp = +timestampString;
-  return utils.dateWithTimezone(new Date(timestamp).toISOString(), timezone);
+  return utils.date(new Date(timestamp).toISOString(), timezone);
 };
 var isSameAsDraggingDate = function isSameAsDraggingDate(event) {
   var timestampString = event.target.dataset.timestamp;

package/legacy/DateRangePicker/DateRangePicker.js

@@ -74,16 +74,11 @@ 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()
    */
   dayOfWeekFormatter: PropTypes.func,
-  /**
-   * Default calendar month displayed when `value={[null, null]}`.
-   */
-  defaultCalendarMonth: PropTypes.any,
   /**
    * The initial position in the edited date range.
    * Used when the component is not controlled.
@@ -316,7 +311,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/legacy/DateRangePickerDay/DateRangePickerDay.js

@@ -51,14 +51,13 @@ var DateRangePickerDayRoot = styled('div', {
     return [_defineProperty({}, "&.".concat(dateRangePickerDayClasses.rangeIntervalDayHighlight), styles.rangeIntervalDayHighlight), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.rangeIntervalDayHighlightStart), styles.rangeIntervalDayHighlightStart), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.rangeIntervalDayHighlightEnd), styles.rangeIntervalDayHighlightEnd), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.firstVisibleCell), styles.firstVisibleCell), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.lastVisibleCell), styles.lastVisibleCell), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.startOfMonth), styles.startOfMonth), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.endOfMonth), styles.endOfMonth), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.outsideCurrentMonth), styles.outsideCurrentMonth), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.hiddenDayFiller), styles.hiddenDayFiller), styles.root];
   }
 })(function (_ref10) {
-  var _extends2;
   var theme = _ref10.theme,
     ownerState = _ref10.ownerState;
-  return ownerState.isHiddenDayFiller ? {} : _extends((_extends2 = {}, _defineProperty(_extends2, "&:first-of-type .".concat(dateRangePickerDayClasses.rangeIntervalDayPreview), _extends({}, startBorderStyle, {
+  return ownerState.isHiddenDayFiller ? {} : _extends(_defineProperty(_defineProperty({}, "&:first-of-type .".concat(dateRangePickerDayClasses.rangeIntervalDayPreview), _extends({}, startBorderStyle, {
     borderLeftColor: (theme.vars || theme).palette.divider
-  })), _defineProperty(_extends2, "&:last-of-type .".concat(dateRangePickerDayClasses.rangeIntervalDayPreview), _extends({}, endBorderStyle, {
+  })), "&:last-of-type .".concat(dateRangePickerDayClasses.rangeIntervalDayPreview), _extends({}, endBorderStyle, {
     borderRightColor: (theme.vars || theme).palette.divider
-  })), _extends2), ownerState.isHighlighting && {
+  })), ownerState.isHighlighting && {
     borderRadius: 0,
     color: (theme.vars || theme).palette.primary.contrastText,
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.focusOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -89,16 +89,11 @@ 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()
    */
   dayOfWeekFormatter: PropTypes.func,
-  /**
-   * Default calendar month displayed when `value={[null, null]}`.
-   */
-  defaultCalendarMonth: PropTypes.any,
   /**
    * The initial position in the edited date range.
    * Used when the component is not controlled.
@@ -325,7 +320,7 @@ DesktopDateRangePicker.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -89,16 +89,11 @@ 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()
    */
   dayOfWeekFormatter: PropTypes.func,
-  /**
-   * Default calendar month displayed when `value={[null, null]}`.
-   */
-  defaultCalendarMonth: PropTypes.any,
   /**
    * The initial position in the edited date range.
    * Used when the component is not controlled.
@@ -325,7 +320,7 @@ MobileDateRangePicker.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/legacy/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -324,7 +324,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/legacy/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -307,14 +307,6 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
-  /**
-   * Disable specific clock time.
-   * @param {number} clockValue The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   * @deprecated Consider using `shouldDisableTime`.
-   */
-  shouldDisableClock: PropTypes.func,
   /**
    * Disable specific date.
    *
@@ -373,7 +365,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/legacy/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -291,14 +291,6 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
-  /**
-   * Disable specific clock time.
-   * @param {number} clockValue The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   * @deprecated Consider using `shouldDisableTime`.
-   */
-  shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
    * @template TDate
@@ -346,7 +338,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/legacy/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -313,7 +313,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/legacy/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -297,14 +297,6 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
-  /**
-   * Disable specific clock time.
-   * @param {number} clockValue The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   * @deprecated Consider using `shouldDisableTime`.
-   */
-  shouldDisableClock: PropTypes.func,
   /**
    * Disable specific date.
    *
@@ -362,7 +354,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/legacy/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -281,14 +281,6 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
-  /**
-   * Disable specific clock time.
-   * @param {number} clockValue The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   * @deprecated Consider using `shouldDisableTime`.
-   */
-  shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
    * @template TDate
@@ -335,7 +327,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/legacy/StaticDateRangePicker/StaticDateRangePicker.js

@@ -75,16 +75,11 @@ 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()
    */
   dayOfWeekFormatter: PropTypes.func,
-  /**
-   * Default calendar month displayed when `value={[null, null]}`.
-   */
-  defaultCalendarMonth: PropTypes.any,
   /**
    * The initial position in the edited date range.
    * Used when the component is not controlled.
@@ -263,7 +258,7 @@ StaticDateRangePicker.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/legacy/dateRangeViewRenderers/dateRangeViewRenderers.js

@@ -19,7 +19,6 @@ export var renderDateRangeViewCalendar = function renderDateRangeViewCalendar(_r
     shouldDisableDate = _ref.shouldDisableDate,
     reduceAnimations = _ref.reduceAnimations,
     onMonthChange = _ref.onMonthChange,
-    defaultCalendarMonth = _ref.defaultCalendarMonth,
     rangePosition = _ref.rangePosition,
     defaultRangePosition = _ref.defaultRangePosition,
     onRangePositionChange = _ref.onRangePositionChange,
@@ -55,7 +54,6 @@ export var renderDateRangeViewCalendar = function renderDateRangeViewCalendar(_r
     shouldDisableDate: shouldDisableDate,
     reduceAnimations: reduceAnimations,
     onMonthChange: onMonthChange,
-    defaultCalendarMonth: defaultCalendarMonth,
     rangePosition: rangePosition,
     defaultRangePosition: defaultRangePosition,
     onRangePositionChange: onRangePositionChange,

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.2
  *
  * @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 = "MTcwMDY5MDQwMDAwMA==";
   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

@@ -1,13 +1,13 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone"],
+const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 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';
@@ -136,7 +136,6 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       shouldDisableDate,
       reduceAnimations,
       onMonthChange,
-      defaultCalendarMonth,
       rangePosition: rangePositionProp,
       defaultRangePosition: inDefaultRangePosition,
       onRangePositionChange: inOnRangePositionChange,
@@ -256,7 +255,6 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   } = useCalendarState({
     value: value[0] || value[1],
     referenceDate,
-    defaultCalendarMonth,
     disableFuture,
     disablePast,
     disableSwitchToMonthOnDayFocus: true,
@@ -267,6 +265,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 +345,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 +441,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 +452,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,16 +504,11 @@ 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()
    */
   dayOfWeekFormatter: PropTypes.func,
-  /**
-   * Default calendar month displayed when `value={[null, null]}`.
-   */
-  defaultCalendarMonth: PropTypes.any,
   /**
    * The initial position in the edited date range.
    * Used when the component is not controlled.
@@ -658,7 +658,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
    * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,

package/modern/DateRangeCalendar/useDragRange.js

@@ -8,7 +8,7 @@ const resolveDateFromTarget = (target, utils, timezone) => {
     return null;
   }
   const timestamp = +timestampString;
-  return utils.dateWithTimezone(new Date(timestamp).toISOString(), timezone);
+  return utils.date(new Date(timestamp).toISOString(), timezone);
 };
 const isSameAsDraggingDate = event => {
   const timestampString = event.target.dataset.timestamp;