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

package/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "timeSteps", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled", "timezone"];
+const _excluded = ["ampm", "timeSteps", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -72,7 +72,6 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       disableFuture,
       disablePast,
       minutesStep = 1,
-      shouldDisableClock,
       shouldDisableTime,
       onChange,
       view: inView,
@@ -166,9 +165,6 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       if (timeValue % step !== 0) {
         return false;
       }
-      if (shouldDisableClock != null && shouldDisableClock(timeValue, viewType)) {
-        return false;
-      }
       if (shouldDisableTime) {
         switch (viewType) {
           case 'hours':
@@ -218,7 +214,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       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]);
   const handleSectionChange = useEventCallback((sectionView, newValue) => {
     const viewIndex = views.indexOf(sectionView);
     const nextView = views[viewIndex + 1];
@@ -434,14 +430,6 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.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
@@ -483,7 +471,7 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.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/PickersCalendarHeader/PickersCalendarHeader.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone"],
+const _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';
@@ -127,7 +127,8 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
       views,
       labelId,
       className,
-      timezone
+      timezone,
+      format = `${utils.formats.month} ${utils.formats.year}`
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
@@ -181,6 +182,7 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
   if (views.length === 1 && views[0] === 'year') {
     return null;
   }
+  const label = utils.formatByString(month, format);
   return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, _extends({}, other, {
     ownerState: ownerState,
     className: clsx(className, classes.root),
@@ -195,12 +197,12 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
       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))
@@ -237,6 +239,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/PickersDay/PickersDay.js

@@ -156,7 +156,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
     }
   }, [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
   const handleMouseDown = event => {
     onMouseDown(event);

package/StaticDatePicker/StaticDatePicker.js

@@ -66,16 +66,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.
@@ -268,7 +263,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/StaticDateTimePicker/StaticDateTimePicker.js

@@ -86,16 +86,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.
@@ -263,14 +258,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.
    *
@@ -332,7 +319,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/StaticTimePicker/StaticTimePicker.js

@@ -183,14 +183,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
@@ -217,7 +209,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/TimeClock/Clock.js

@@ -256,7 +256,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/TimeClock/TimeClock.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _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"];
+const _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';
@@ -81,7 +81,6 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       disableFuture,
       disablePast,
       minutesStep = 1,
-      shouldDisableClock,
       shouldDisableTime,
       showViewSwitcher,
       onChange,
@@ -162,9 +161,6 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       if (timeValue % step !== 0) {
         return false;
       }
-      if (shouldDisableClock != null && shouldDisableClock(timeValue, viewType)) {
-        return false;
-      }
       if (shouldDisableTime) {
         switch (viewType) {
           case 'hours':
@@ -214,7 +210,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       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]);
   const selectedId = useId();
   const viewProps = React.useMemo(() => {
     switch (view) {
@@ -422,14 +418,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
@@ -457,7 +445,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/TimeField/TimeField.js

@@ -287,14 +287,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
@@ -341,7 +333,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/TimePicker/TimePicker.js

@@ -233,14 +233,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
@@ -288,7 +280,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/TimePicker/shared.d.ts

@@ -43,6 +43,6 @@ export interface BaseTimePickerProps<TDate, TView extends TimeViewWithMeridiem>
      */
     viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, TView, TimeViewRendererProps<TView, BaseClockProps<TDate, TView>>, {}>>;
 }
-type UseTimePickerDefaultizedProps<TDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>> = LocalizedComponent<TDate, Omit<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>, 'components' | 'componentsProps'>>;
+type UseTimePickerDefaultizedProps<TDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>>;
 export declare function useTimePickerDefaultizedProps<TDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TDate, TView, Props>;
 export {};

package/YearCalendar/YearCalendar.js

@@ -235,7 +235,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     role: "radiogroup",
     "aria-labelledby": gridLabelId
   }, other, {
-    children: utils.getYearRange(minDate, maxDate).map(year => {
+    children: utils.getYearRange([minDate, maxDate]).map(year => {
       const yearNumber = utils.getYear(year);
       const isSelected = yearNumber === selectedYear;
       const isDisabled = disabled || isYearDisabled(year);
@@ -336,7 +336,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/dateTimeViewRenderers/dateTimeViewRenderers.d.ts

@@ -3,7 +3,7 @@ import { DateCalendarProps } from '../DateCalendar';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { MultiSectionDigitalClockProps } from '../MultiSectionDigitalClock';
 import type { DateTimePickerProps } from '../DateTimePicker/DateTimePicker.types';
-export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps<TDate> & MultiSectionDigitalClockProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView' | 'components' | 'componentsProps' | 'slots' | 'slotProps'>, Pick<DateTimePickerProps<TDate>, 'slots' | 'slotProps'> {
+export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps<TDate> & MultiSectionDigitalClockProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView' | 'slots' | 'slotProps'>, Pick<DateTimePickerProps<TDate>, 'slots' | 'slotProps'> {
     view: DateOrTimeViewWithMeridiem;
     onViewChange?: (view: DateOrTimeViewWithMeridiem) => void;
     views: readonly DateOrTimeViewWithMeridiem[];
@@ -11,4 +11,4 @@ export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps
     timeViewsCount: number;
     shouldRenderTimeInASingleColumn: boolean;
 }
-export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, shouldDisableClock, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, shouldRenderTimeInASingleColumn, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;
+export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, shouldRenderTimeInASingleColumn, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;

package/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -34,7 +34,6 @@ export const renderDesktopDateTimeView = ({
   shouldDisableMonth,
   shouldDisableYear,
   shouldDisableTime,
-  shouldDisableClock,
   reduceAnimations,
   minutesStep,
   ampm,
@@ -42,7 +41,6 @@ export const renderDesktopDateTimeView = ({
   monthsPerRow,
   onYearChange,
   yearsPerRow,
-  defaultCalendarMonth,
   slots,
   slotProps,
   loading,
@@ -82,7 +80,6 @@ export const renderDesktopDateTimeView = ({
     minTime,
     maxTime,
     shouldDisableTime,
-    shouldDisableClock,
     minutesStep,
     ampm,
     slots,
@@ -121,7 +118,6 @@ export const renderDesktopDateTimeView = ({
         monthsPerRow: monthsPerRow,
         onYearChange: onYearChange,
         yearsPerRow: yearsPerRow,
-        defaultCalendarMonth: defaultCalendarMonth,
         slots: slots,
         slotProps: slotProps,
         loading: loading,

package/dateViewRenderers/dateViewRenderers.d.ts

@@ -8,4 +8,4 @@ export interface DateViewRendererProps<TDate, TView extends DateOrTimeViewWithMe
     views: readonly TView[];
     focusedView: TView | null;
 }
-export declare const renderDateViewCalendar: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
+export declare const renderDateViewCalendar: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;

package/dateViewRenderers/dateViewRenderers.js

@@ -26,7 +26,6 @@ export const renderDateViewCalendar = ({
   monthsPerRow,
   onYearChange,
   yearsPerRow,
-  defaultCalendarMonth,
   slots,
   slotProps,
   loading,
@@ -65,7 +64,6 @@ export const renderDateViewCalendar = ({
   monthsPerRow: monthsPerRow,
   onYearChange: onYearChange,
   yearsPerRow: yearsPerRow,
-  defaultCalendarMonth: defaultCalendarMonth,
   slots: slots,
   slotProps: slotProps,
   loading: loading,

package/index.d.ts

@@ -28,6 +28,7 @@ export * from './timeViewRenderers';
 export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
+export * from './PickersCalendarHeader';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';
 export * from './icons';

package/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/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.ts

@@ -15,6 +15,11 @@ export interface ExportedPickersArrowSwitcherProps {
      */
     slotProps?: PickersArrowSwitcherSlotsComponentsProps;
     classes?: Partial<PickersArrowSwitcherClasses>;
+    /**
+     * Format used to display the date.
+     * @default `${adapter.formats.month} ${adapter.formats.year}`
+     */
+    format?: string;
 }
 export interface PickersArrowSwitcherProps extends ExportedPickersArrowSwitcherProps, Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'as'> {
     children?: React.ReactNode;

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

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

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

@@ -34,7 +34,7 @@ const getDeltaFromKeyCode = keyCode => {
 };
 export const getDaysInWeekStr = (utils, timezone, format) => {
   const elements = [];
-  const now = utils.dateWithTimezone(undefined, timezone);
+  const now = utils.date(undefined, timezone);
   const startDate = utils.startOfWeek(now);
   const endDate = utils.endOfWeek(now);
   let current = startDate;
@@ -48,7 +48,7 @@ export const getLetterEditingOptions = (utils, timezone, sectionType, format) =>
   switch (sectionType) {
     case 'month':
       {
-        return getMonthsInYear(utils, utils.dateWithTimezone(undefined, timezone)).map(month => utils.formatByString(month, format));
+        return getMonthsInYear(utils, utils.date(undefined, timezone)).map(month => utils.formatByString(month, format));
       }
     case 'weekDay':
       {
@@ -56,7 +56,7 @@ export const getLetterEditingOptions = (utils, timezone, sectionType, format) =>
       }
     case 'meridiem':
       {
-        const now = utils.dateWithTimezone(undefined, timezone);
+        const now = utils.date(undefined, timezone);
         return [utils.startOfDay(now), utils.endOfDay(now)].map(date => utils.formatByString(date, format));
       }
     default:
@@ -113,7 +113,7 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
     let 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;
@@ -212,7 +212,7 @@ const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, curre
     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':
@@ -261,12 +261,12 @@ export const changeSectionValueFormat = (utils, valueStr, currentFormat, newForm
   }
   return utils.formatByString(utils.parse(valueStr, currentFormat), newFormat);
 };
-const isFourDigitYearFormat = (utils, timezone, format) => utils.formatByString(utils.dateWithTimezone(undefined, timezone), format).length === 4;
+const isFourDigitYearFormat = (utils, timezone, format) => utils.formatByString(utils.date(undefined, timezone), format).length === 4;
 export const doesSectionFormatHaveLeadingZeros = (utils, timezone, contentType, sectionType, format) => {
   if (contentType !== 'digit') {
     return false;
   }
-  const now = utils.dateWithTimezone(undefined, timezone);
+  const now = utils.date(undefined, timezone);
   switch (sectionType) {
     // We can't use `changeSectionValueFormat`, because  `utils.parse('1', 'YYYY')` returns `1971` instead of `1`.
     case 'year':
@@ -357,7 +357,6 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
       maxLength,
       value: sectionValue,
       placeholder: getSectionPlaceholder(utils, timezone, localeText, sectionConfig, token),
-      hasLeadingZeros: hasLeadingZerosInFormat,
       hasLeadingZerosInFormat,
       hasLeadingZerosInInput,
       startSeparator: sections.length === 0 ? startSeparator : '',
@@ -473,7 +472,7 @@ export const createDateStrForInputFromSections = (sections, isRTL) => {
   return `\u2066${dateStr}\u2069`;
 };
 export const getSectionsBoundaries = (utils, timezone) => {
-  const today = utils.dateWithTimezone(undefined, timezone);
+  const today = utils.date(undefined, timezone);
   const endOfYear = utils.endOfYear(today);
   const endOfDay = utils.endOfDay(today);
   const {

package/internals/hooks/useField/useFieldState.js

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

package/internals/hooks/usePicker/usePickerValue.types.d.ts

@@ -132,7 +132,7 @@ export interface UsePickerValueState<TValue> {
      * Then we might want to apply some custom logic.
      *
      * For example, when the component is not controlled and `defaultValue` is defined.
-     * Then clicking on "Accept", "Today" or "Clear" should fire `onAccept` with `defaultValue`, but clicking on "Cancel" or dimissing the picker should not.
+     * Then clicking on "Accept", "Today" or "Clear" should fire `onAccept` with `defaultValue`, but clicking on "Cancel" or dismissing the picker should not.
      */
     hasBeenModifiedSinceMount: boolean;
 }

package/internals/hooks/useUtils.js

@@ -22,7 +22,7 @@ export const useNow = timezone => {
   const utils = useUtils();
   const now = React.useRef();
   if (now.current === undefined) {
-    now.current = utils.dateWithTimezone(undefined, timezone);
+    now.current = utils.date(undefined, timezone);
   }
   return now.current;
 };

package/internals/hooks/useViews.js

@@ -84,7 +84,7 @@ export function useViews({
     const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
     const hasMoreViews = selectedView ?
     // handles case like `DateTimePicker`, where a view might return a `finish` selection state
-    // but we it's not the final view given all `views` -> overall selection state should be `partial`.
+    // but when it's not the final view given all `views` -> overall selection state should be `partial`.
     views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
     const globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
     onChange(value, globalSelectionState);
@@ -106,7 +106,7 @@ export function useViews({
     setFocusedView: handleFocusedViewChange,
     nextView,
     previousView,
-    // Always return up to date default view instead of the initial one (i.e. defaultView.current)
+    // Always return up-to-date default view instead of the initial one (i.e. defaultView.current)
     defaultView: views.includes(openTo) ? openTo : views[0],
     goToNextView,
     setValueAndGoToNextView,