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

package/legacy/PickersCalendarHeader/PickersCalendarHeader.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone"],
+var _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone", "format"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -137,6 +137,8 @@ var PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalend
     labelId = props.labelId,
     className = props.className,
     timezone = props.timezone,
+    _props$format = props.format,
+    format = _props$format === void 0 ? "".concat(utils.formats.month, " ").concat(utils.formats.year) : _props$format,
     other = _objectWithoutProperties(props, _excluded);
   var ownerState = props;
   var classes = useUtilityClasses(props);
@@ -196,6 +198,7 @@ var PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalend
   if (views.length === 1 && views[0] === 'year') {
     return null;
   }
+  var label = utils.formatByString(month, format);
   return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, _extends({}, other, {
     ownerState: ownerState,
     className: clsx(className, classes.root),
@@ -210,12 +213,12 @@ var PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalend
       className: classes.labelContainer,
       children: [/*#__PURE__*/_jsx(PickersFadeTransitionGroup, {
         reduceAnimations: reduceAnimations,
-        transKey: utils.format(month, 'monthAndYear'),
+        transKey: label,
         children: /*#__PURE__*/_jsx(PickersCalendarHeaderLabel, {
           id: labelId,
           ownerState: ownerState,
           className: classes.label,
-          children: utils.format(month, 'monthAndYear')
+          children: label
         })
       }), views.length > 1 && !disabled && /*#__PURE__*/_jsx(SwitchViewButton, _extends({}, switchViewButtonProps, {
         children: /*#__PURE__*/_jsx(SwitchViewIcon, _extends({}, switchViewIconProps))
@@ -252,6 +255,11 @@ process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
   disabled: PropTypes.bool,
   disableFuture: PropTypes.bool,
   disablePast: PropTypes.bool,
+  /**
+   * Format used to display the date.
+   * @default `${adapter.formats.month} ${adapter.formats.year}`
+   */
+  format: PropTypes.string,
   labelId: PropTypes.string,
   maxDate: PropTypes.any.isRequired,
   minDate: PropTypes.any.isRequired,

package/legacy/PickersDay/PickersDay.js

@@ -29,10 +29,9 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getPickersDayUtilityClass, classes);
 };
 var styleArg = function styleArg(_ref) {
-  var _extends2;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
-  return _extends({}, theme.typography.caption, (_extends2 = {
+  return _extends({}, theme.typography.caption, _defineProperty(_defineProperty(_defineProperty({
     width: DAY_SIZE,
     height: DAY_SIZE,
     borderRadius: '50%',
@@ -54,7 +53,7 @@ var styleArg = function styleArg(_ref) {
       willChange: 'background-color',
       backgroundColor: (theme.vars || theme).palette.primary.dark
     })
-  }, _defineProperty(_extends2, "&.".concat(pickersDayClasses.selected), {
+  }, "&.".concat(pickersDayClasses.selected), {
     color: (theme.vars || theme).palette.primary.contrastText,
     backgroundColor: (theme.vars || theme).palette.primary.main,
     fontWeight: theme.typography.fontWeightMedium,
@@ -62,11 +61,11 @@ var styleArg = function styleArg(_ref) {
       willChange: 'background-color',
       backgroundColor: (theme.vars || theme).palette.primary.dark
     }
-  }), _defineProperty(_extends2, "&.".concat(pickersDayClasses.disabled, ":not(.").concat(pickersDayClasses.selected, ")"), {
+  }), "&.".concat(pickersDayClasses.disabled, ":not(.").concat(pickersDayClasses.selected, ")"), {
     color: (theme.vars || theme).palette.text.disabled
-  }), _defineProperty(_extends2, "&.".concat(pickersDayClasses.disabled, "&.").concat(pickersDayClasses.selected), {
+  }), "&.".concat(pickersDayClasses.disabled, "&.").concat(pickersDayClasses.selected), {
     opacity: 0.6
-  }), _extends2), !ownerState.disableMargin && {
+  }), !ownerState.disableMargin && {
     margin: "0 ".concat(DAY_MARGIN, "px")
   }, ownerState.outsideCurrentMonth && ownerState.showDaysOutsideCurrentMonth && {
     color: (theme.vars || theme).palette.text.secondary
@@ -163,7 +162,7 @@ var PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps, f
     }
   }, [autoFocus, disabled, isAnimating, outsideCurrentMonth]);
 
-  // For day outside of current month, move focus from mouseDown to mouseUp
+  // For a day outside the current month, move the focus from mouseDown to mouseUp
   // Goal: have the onClick ends before sliding to the new month
   var handleMouseDown = function handleMouseDown(event) {
     onMouseDown(event);

package/legacy/PickersLayout/PickersLayout.js

@@ -24,29 +24,28 @@ var PickersLayoutRoot = styled('div', {
     return styles.root;
   }
 })(function (_ref) {
-  var _ref2;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
-  return _ref2 = {
+  return _defineProperty(_defineProperty(_defineProperty({
     display: 'grid',
     gridAutoColumns: 'max-content auto max-content',
     gridAutoRows: 'max-content auto max-content'
-  }, _defineProperty(_ref2, "& .".concat(pickersLayoutClasses.toolbar), ownerState.isLandscape ? {
+  }, "& .".concat(pickersLayoutClasses.toolbar), ownerState.isLandscape ? {
     gridColumn: theme.direction === 'rtl' ? 3 : 1,
     gridRow: '2 / 3'
   } : {
     gridColumn: '2 / 4',
     gridRow: 1
-  }), _defineProperty(_ref2, ".".concat(pickersLayoutClasses.shortcuts), ownerState.isLandscape ? {
+  }), ".".concat(pickersLayoutClasses.shortcuts), ownerState.isLandscape ? {
     gridColumn: '2 / 4',
     gridRow: 1
   } : {
     gridColumn: theme.direction === 'rtl' ? 3 : 1,
     gridRow: '2 / 3'
-  }), _defineProperty(_ref2, "& .".concat(pickersLayoutClasses.actionBar), {
+  }), "& .".concat(pickersLayoutClasses.actionBar), {
     gridColumn: '1 / 4',
     gridRow: 3
-  }), _ref2;
+  });
 });
 PickersLayoutRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/legacy/StaticDatePicker/StaticDatePicker.js

@@ -65,16 +65,11 @@ StaticDatePicker.propTypes = {
   className: PropTypes.string,
   /**
    * 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` and `defaultValue` are empty.
-   */
-  defaultCalendarMonth: PropTypes.any,
   /**
    * The default value.
    * Used when the component is not controlled.
@@ -267,7 +262,7 @@ StaticDatePicker.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/StaticDateTimePicker/StaticDateTimePicker.js

@@ -85,16 +85,11 @@ StaticDateTimePicker.propTypes = {
   className: PropTypes.string,
   /**
    * 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` and `defaultValue` are empty.
-   */
-  defaultCalendarMonth: PropTypes.any,
   /**
    * The default value.
    * Used when the component is not controlled.
@@ -262,14 +257,6 @@ StaticDateTimePicker.propTypes = {
    * @default () => <span data-mui-test="loading-progress">...</span>
    */
   renderLoading: PropTypes.func,
-  /**
-   * 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.
    *
@@ -331,7 +318,7 @@ StaticDateTimePicker.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/StaticTimePicker/StaticTimePicker.js

@@ -182,14 +182,6 @@ StaticTimePicker.propTypes = {
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
   referenceDate: PropTypes.any,
-  /**
-   * 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
@@ -216,7 +208,7 @@ StaticTimePicker.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/TimeClock/Clock.js

@@ -273,7 +273,7 @@ export function Clock(inProps) {
     }
     switch (event.key) {
       case 'Home':
-        // annulate both hours and minutes
+        // reset both hours and minutes
         handleValueChange(0, 'partial');
         event.preventDefault();
         break;

package/legacy/TimeClock/ClockNumber.js

@@ -25,10 +25,9 @@ var ClockNumberRoot = styled('span', {
     return [styles.root, _defineProperty({}, "&.".concat(clockNumberClasses.disabled), styles.disabled), _defineProperty({}, "&.".concat(clockNumberClasses.selected), styles.selected)];
   }
 })(function (_ref3) {
-  var _extends2;
   var theme = _ref3.theme,
     ownerState = _ref3.ownerState;
-  return _extends((_extends2 = {
+  return _extends(_defineProperty(_defineProperty({
     height: CLOCK_HOUR_WIDTH,
     width: CLOCK_HOUR_WIDTH,
     position: 'absolute',
@@ -42,12 +41,12 @@ var ClockNumberRoot = styled('span', {
     '&:focused': {
       backgroundColor: (theme.vars || theme).palette.background.paper
     }
-  }, _defineProperty(_extends2, "&.".concat(clockNumberClasses.selected), {
+  }, "&.".concat(clockNumberClasses.selected), {
     color: (theme.vars || theme).palette.primary.contrastText
-  }), _defineProperty(_extends2, "&.".concat(clockNumberClasses.disabled), {
+  }), "&.".concat(clockNumberClasses.disabled), {
     pointerEvents: 'none',
     color: (theme.vars || theme).palette.text.disabled
-  }), _extends2), ownerState.inner && _extends({}, theme.typography.body2, {
+  }), ownerState.inner && _extends({}, theme.typography.body2, {
     color: (theme.vars || theme).palette.text.secondary
   }));
 });

package/legacy/TimeClock/TimeClock.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
+var _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -86,7 +86,6 @@ export var TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps,
     disablePast = props.disablePast,
     _props$minutesStep = props.minutesStep,
     minutesStep = _props$minutesStep === void 0 ? 1 : _props$minutesStep,
-    shouldDisableClock = props.shouldDisableClock,
     shouldDisableTime = props.shouldDisableTime,
     showViewSwitcher = props.showViewSwitcher,
     onChange = props.onChange,
@@ -164,9 +163,6 @@ export var TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps,
       if (timeValue % step !== 0) {
         return false;
       }
-      if (shouldDisableClock != null && shouldDisableClock(timeValue, viewType)) {
-        return false;
-      }
       if (shouldDisableTime) {
         switch (viewType) {
           case 'hours':
@@ -216,7 +212,7 @@ export var TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps,
       default:
         throw new Error('not supported');
     }
-  }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableClock, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
+  }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
   var selectedId = useId();
   var viewProps = React.useMemo(function () {
     switch (view) {
@@ -434,14 +430,6 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.
    */
   referenceDate: PropTypes.any,
-  /**
-   * 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
@@ -469,7 +457,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.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/TimeField/TimeField.js

@@ -280,14 +280,6 @@ process.env.NODE_ENV !== "production" ? TimeField.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
@@ -334,7 +326,7 @@ process.env.NODE_ENV !== "production" ? TimeField.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/TimePicker/TimePicker.js

@@ -232,14 +232,6 @@ process.env.NODE_ENV !== "production" ? TimePicker.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
@@ -287,7 +279,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.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/TimePicker/TimePickerToolbar.js

@@ -51,8 +51,7 @@ var TimePickerToolbarHourMinuteLabel = styled('div', {
   name: 'MuiTimePickerToolbar',
   slot: 'HourMinuteLabel',
   overridesResolver: function overridesResolver(props, styles) {
-    var _ref;
-    return [(_ref = {}, _defineProperty(_ref, "&.".concat(timePickerToolbarClasses.hourMinuteLabelLandscape), styles.hourMinuteLabelLandscape), _defineProperty(_ref, "&.".concat(timePickerToolbarClasses.hourMinuteLabelReverse), styles.hourMinuteLabelReverse), _ref), styles.hourMinuteLabel];
+    return [_defineProperty(_defineProperty({}, "&.".concat(timePickerToolbarClasses.hourMinuteLabelLandscape), styles.hourMinuteLabelLandscape), "&.".concat(timePickerToolbarClasses.hourMinuteLabelReverse), styles.hourMinuteLabelReverse), styles.hourMinuteLabel];
   }
 })(function (_ref2) {
   var theme = _ref2.theme,

package/legacy/YearCalendar/PickersYear.js

@@ -40,14 +40,13 @@ var PickersYearButton = styled('button', {
     return [styles.yearButton, _defineProperty({}, "&.".concat(pickersYearClasses.disabled), styles.disabled), _defineProperty({}, "&.".concat(pickersYearClasses.selected), styles.selected)];
   }
 })(function (_ref4) {
-  var _extends2;
   var theme = _ref4.theme;
   return _extends({
     color: 'unset',
     backgroundColor: 'transparent',
     border: 0,
     outline: 0
-  }, theme.typography.subtitle1, (_extends2 = {
+  }, theme.typography.subtitle1, _defineProperty(_defineProperty({
     margin: '6px 0',
     height: 36,
     width: 72,
@@ -63,15 +62,15 @@ var PickersYearButton = styled('button', {
       cursor: 'auto',
       pointerEvents: 'none'
     }
-  }, _defineProperty(_extends2, "&.".concat(pickersYearClasses.disabled), {
+  }, "&.".concat(pickersYearClasses.disabled), {
     color: (theme.vars || theme).palette.text.secondary
-  }), _defineProperty(_extends2, "&.".concat(pickersYearClasses.selected), {
+  }), "&.".concat(pickersYearClasses.selected), {
     color: (theme.vars || theme).palette.primary.contrastText,
     backgroundColor: (theme.vars || theme).palette.primary.main,
     '&:focus, &:hover': {
       backgroundColor: (theme.vars || theme).palette.primary.dark
     }
-  }), _extends2));
+  }));
 });
 
 /**

package/legacy/YearCalendar/YearCalendar.js

@@ -248,7 +248,7 @@ export var YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(in
     role: "radiogroup",
     "aria-labelledby": gridLabelId
   }, other, {
-    children: utils.getYearRange(minDate, maxDate).map(function (year) {
+    children: utils.getYearRange([minDate, maxDate]).map(function (year) {
       var yearNumber = utils.getYear(year);
       var isSelected = yearNumber === selectedYear;
       var isDisabled = disabled || isYearDisabled(year);
@@ -349,7 +349,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.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/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -36,7 +36,6 @@ export var renderDesktopDateTimeView = function renderDesktopDateTimeView(_ref)
     shouldDisableMonth = _ref.shouldDisableMonth,
     shouldDisableYear = _ref.shouldDisableYear,
     shouldDisableTime = _ref.shouldDisableTime,
-    shouldDisableClock = _ref.shouldDisableClock,
     reduceAnimations = _ref.reduceAnimations,
     minutesStep = _ref.minutesStep,
     ampm = _ref.ampm,
@@ -44,7 +43,6 @@ export var renderDesktopDateTimeView = function renderDesktopDateTimeView(_ref)
     monthsPerRow = _ref.monthsPerRow,
     onYearChange = _ref.onYearChange,
     yearsPerRow = _ref.yearsPerRow,
-    defaultCalendarMonth = _ref.defaultCalendarMonth,
     slots = _ref.slots,
     slotProps = _ref.slotProps,
     loading = _ref.loading,
@@ -82,7 +80,6 @@ export var renderDesktopDateTimeView = function renderDesktopDateTimeView(_ref)
     minTime: minTime,
     maxTime: maxTime,
     shouldDisableTime: shouldDisableTime,
-    shouldDisableClock: shouldDisableClock,
     minutesStep: minutesStep,
     ampm: ampm,
     slots: slots,
@@ -121,7 +118,6 @@ export var renderDesktopDateTimeView = function renderDesktopDateTimeView(_ref)
         monthsPerRow: monthsPerRow,
         onYearChange: onYearChange,
         yearsPerRow: yearsPerRow,
-        defaultCalendarMonth: defaultCalendarMonth,
         slots: slots,
         slotProps: slotProps,
         loading: loading,

package/legacy/dateViewRenderers/dateViewRenderers.js

@@ -26,7 +26,6 @@ export var renderDateViewCalendar = function renderDateViewCalendar(_ref) {
     monthsPerRow = _ref.monthsPerRow,
     onYearChange = _ref.onYearChange,
     yearsPerRow = _ref.yearsPerRow,
-    defaultCalendarMonth = _ref.defaultCalendarMonth,
     slots = _ref.slots,
     slotProps = _ref.slotProps,
     loading = _ref.loading,
@@ -65,7 +64,6 @@ export var renderDateViewCalendar = function renderDateViewCalendar(_ref) {
     monthsPerRow: monthsPerRow,
     onYearChange: onYearChange,
     yearsPerRow: yearsPerRow,
-    defaultCalendarMonth: defaultCalendarMonth,
     slots: slots,
     slotProps: slotProps,
     loading: loading,

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.0
+ * @mui/x-date-pickers v7.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -46,6 +46,9 @@ export * from './timeViewRenderers';
 export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
+
+// Other slots
+export * from './PickersCalendarHeader';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';
 export * from './icons';

package/legacy/internals/components/PickersModalDialog.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _styled;
 import * as React from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import Fade from '@mui/material/Fade';
@@ -8,12 +7,12 @@ import MuiDialog, { dialogClasses } from '@mui/material/Dialog';
 import { styled } from '@mui/material/styles';
 import { DIALOG_WIDTH } from '../constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
-var PickersModalDialogRoot = styled(MuiDialog)((_styled = {}, _defineProperty(_styled, "& .".concat(dialogClasses.container), {
+var PickersModalDialogRoot = styled(MuiDialog)(_defineProperty(_defineProperty({}, "& .".concat(dialogClasses.container), {
   outline: 0
-}), _defineProperty(_styled, "& .".concat(dialogClasses.paper), {
+}), "& .".concat(dialogClasses.paper), {
   outline: 0,
   minWidth: DIALOG_WIDTH
-}), _styled));
+}));
 var PickersModalDialogContent = styled(DialogContent)({
   '&:first-of-type': {
     padding: 0

package/legacy/internals/hooks/date-helpers-hooks.js

@@ -7,7 +7,7 @@ export function useNextMonthDisabled(month, _ref) {
     timezone = _ref.timezone;
   var utils = useUtils();
   return React.useMemo(function () {
-    var now = utils.dateWithTimezone(undefined, timezone);
+    var now = utils.date(undefined, timezone);
     var lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
     return !utils.isAfter(lastEnabledMonth, month);
   }, [disableFuture, maxDate, month, utils, timezone]);
@@ -18,7 +18,7 @@ export function usePreviousMonthDisabled(month, _ref2) {
     timezone = _ref2.timezone;
   var utils = useUtils();
   return React.useMemo(function () {
-    var now = utils.dateWithTimezone(undefined, timezone);
+    var now = utils.date(undefined, timezone);
     var firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     return !utils.isBefore(firstEnabledMonth, month);
   }, [disablePast, minDate, month, utils, timezone]);

package/legacy/internals/hooks/useField/useField.utils.js

@@ -35,7 +35,7 @@ var getDeltaFromKeyCode = function getDeltaFromKeyCode(keyCode) {
 };
 export var getDaysInWeekStr = function getDaysInWeekStr(utils, timezone, format) {
   var elements = [];
-  var now = utils.dateWithTimezone(undefined, timezone);
+  var now = utils.date(undefined, timezone);
   var startDate = utils.startOfWeek(now);
   var endDate = utils.endOfWeek(now);
   var current = startDate;
@@ -51,7 +51,7 @@ export var getLetterEditingOptions = function getLetterEditingOptions(utils, tim
   switch (sectionType) {
     case 'month':
       {
-        return getMonthsInYear(utils, utils.dateWithTimezone(undefined, timezone)).map(function (month) {
+        return getMonthsInYear(utils, utils.date(undefined, timezone)).map(function (month) {
           return utils.formatByString(month, format);
         });
       }
@@ -61,7 +61,7 @@ export var getLetterEditingOptions = function getLetterEditingOptions(utils, tim
       }
     case 'meridiem':
       {
-        var now = utils.dateWithTimezone(undefined, timezone);
+        var now = utils.date(undefined, timezone);
         return [utils.startOfDay(now), utils.endOfDay(now)].map(function (date) {
           return utils.formatByString(date, format);
         });
@@ -121,7 +121,7 @@ export var adjustSectionValue = function adjustSectionValue(utils, timezone, sec
     var newSectionValueNumber = currentSectionValue + delta * step;
     if (shouldSetAbsolute) {
       if (section.type === 'year' && !isEnd && !isStart) {
-        return utils.formatByString(utils.dateWithTimezone(undefined, timezone), section.format);
+        return utils.formatByString(utils.date(undefined, timezone), section.format);
       }
       if (delta > 0 || isStart) {
         newSectionValueNumber = sectionBoundaries.minimum;
@@ -222,7 +222,7 @@ var getSectionPlaceholder = function getSectionPlaceholder(utils, timezone, loca
     case 'year':
       {
         return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.dateWithTimezone(undefined, timezone), currentTokenValue).length
+          digitAmount: utils.formatByString(utils.date(undefined, timezone), currentTokenValue).length
         });
       }
     case 'month':
@@ -272,13 +272,13 @@ export var changeSectionValueFormat = function changeSectionValueFormat(utils, v
   return utils.formatByString(utils.parse(valueStr, currentFormat), newFormat);
 };
 var isFourDigitYearFormat = function isFourDigitYearFormat(utils, timezone, format) {
-  return utils.formatByString(utils.dateWithTimezone(undefined, timezone), format).length === 4;
+  return utils.formatByString(utils.date(undefined, timezone), format).length === 4;
 };
 export var doesSectionFormatHaveLeadingZeros = function doesSectionFormatHaveLeadingZeros(utils, timezone, contentType, sectionType, format) {
   if (contentType !== 'digit') {
     return false;
   }
-  var now = utils.dateWithTimezone(undefined, timezone);
+  var now = utils.date(undefined, timezone);
   switch (sectionType) {
     // We can't use `changeSectionValueFormat`, because  `utils.parse('1', 'YYYY')` returns `1971` instead of `1`.
     case 'year':
@@ -368,7 +368,6 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, tim
       maxLength: maxLength,
       value: sectionValue,
       placeholder: getSectionPlaceholder(utils, timezone, localeText, sectionConfig, token),
-      hasLeadingZeros: hasLeadingZerosInFormat,
       hasLeadingZerosInFormat: hasLeadingZerosInFormat,
       hasLeadingZerosInInput: hasLeadingZerosInInput,
       startSeparator: sections.length === 0 ? startSeparator : '',
@@ -494,7 +493,7 @@ export var createDateStrForInputFromSections = function createDateStrForInputFro
   return "\u2066".concat(dateStr, "\u2069");
 };
 export var getSectionsBoundaries = function getSectionsBoundaries(utils, timezone) {
-  var today = utils.dateWithTimezone(undefined, timezone);
+  var today = utils.date(undefined, timezone);
   var endOfYear = utils.endOfYear(today);
   var endOfDay = utils.endOfDay(today);
   var _getMonthsInYear$redu = getMonthsInYear(utils, today).reduce(function (acc, month) {

package/legacy/internals/hooks/useField/useFieldState.js

@@ -178,7 +178,7 @@ export var useFieldState = function useFieldState(params) {
     }).length;
     var hasNoOtherNonEmptySections = nonEmptySectionCountBefore === (activeSection.value === '' ? 0 : 1);
     var newSections = setSectionValue(selectedSectionIndexes.startIndex, '');
-    var newActiveDate = hasNoOtherNonEmptySections ? null : utils.date(new Date(''));
+    var newActiveDate = hasNoOtherNonEmptySections ? null : utils.getInvalidDate();
     var newValues = activeDateManager.getNewValuesFromNewActiveDate(newActiveDate);
     if ((newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date))) {
       publishValue(_extends({}, newValues, {
@@ -280,7 +280,7 @@ export var useFieldState = function useFieldState(params) {
   }, [format, utils.locale]); // eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(function () {
-    var shouldUpdate = false;
+    var shouldUpdate;
     if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) {
       shouldUpdate = true;
     } else {