@mui/x-date-pickers 6.10.2 → 6.11.1

package/modern/AdapterDayjs/AdapterDayjs.js

@@ -184,9 +184,24 @@ export class AdapterDayjs {
       return value.format(comparisonTemplate) === comparingInValueTimezone.format(comparisonTemplate);
     };
     /**
-     * Replace "default" by undefined before passing it to `dayjs
+     * Replaces "default" by undefined and "system" by the system timezone before passing it to `dayjs`.
      */
-    this.cleanTimezone = timezone => timezone === 'default' ? undefined : timezone;
+    this.cleanTimezone = timezone => {
+      switch (timezone) {
+        case 'default':
+          {
+            return undefined;
+          }
+        case 'system':
+          {
+            return defaultDayjs.tz.guess();
+          }
+        default:
+          {
+            return timezone;
+          }
+      }
+    };
     this.createSystemDate = value => {
       // TODO v7: Stop using `this.rawDayJsInstance` (drop the `instance` param on the adapters)
       /* istanbul ignore next */
@@ -235,6 +250,27 @@ export class AdapterDayjs {
       }
       return localeObject.formats;
     };
+    /**
+     * If the new day does not have the same offset as the old one (when switching to summer day time for example),
+     * Then dayjs will not automatically adjust the offset (moment does).
+     * We have to parse again the value to make sure the `fixOffset` method is applied.
+     * See https://github.com/iamkun/dayjs/blob/b3624de619d6e734cd0ffdbbd3502185041c1b60/src/plugin/timezone/index.js#L72
+     */
+    this.adjustOffset = value => {
+      if (!this.hasTimezonePlugin()) {
+        return value;
+      }
+      const timezone = this.getTimezone(value);
+      if (timezone !== 'UTC') {
+        const fixedValue = value.tz(this.cleanTimezone(timezone), true);
+        // @ts-ignore
+        if ((fixedValue.$offset ?? 0) === (value.$offset ?? 0)) {
+          return value;
+        }
+        return fixedValue;
+      }
+      return value;
+    };
     this.date = value => {
       if (value === null) {
         return null;
@@ -402,49 +438,49 @@ export class AdapterDayjs {
       return value >= start && value <= end;
     };
     this.startOfYear = value => {
-      return value.startOf('year');
+      return this.adjustOffset(value.startOf('year'));
     };
     this.startOfMonth = value => {
-      return value.startOf('month');
+      return this.adjustOffset(value.startOf('month'));
     };
     this.startOfWeek = value => {
-      return value.startOf('week');
+      return this.adjustOffset(value.startOf('week'));
     };
     this.startOfDay = value => {
-      return value.startOf('day');
+      return this.adjustOffset(value.startOf('day'));
     };
     this.endOfYear = value => {
-      return value.endOf('year');
+      return this.adjustOffset(value.endOf('year'));
     };
     this.endOfMonth = value => {
-      return value.endOf('month');
+      return this.adjustOffset(value.endOf('month'));
     };
     this.endOfWeek = value => {
-      return value.endOf('week');
+      return this.adjustOffset(value.endOf('week'));
     };
     this.endOfDay = value => {
-      return value.endOf('day');
+      return this.adjustOffset(value.endOf('day'));
     };
     this.addYears = (value, amount) => {
-      return amount < 0 ? value.subtract(Math.abs(amount), 'year') : value.add(amount, 'year');
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'year') : value.add(amount, 'year'));
     };
     this.addMonths = (value, amount) => {
-      return amount < 0 ? value.subtract(Math.abs(amount), 'month') : value.add(amount, 'month');
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'month') : value.add(amount, 'month'));
     };
     this.addWeeks = (value, amount) => {
-      return amount < 0 ? value.subtract(Math.abs(amount), 'week') : value.add(amount, 'week');
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'week') : value.add(amount, 'week'));
     };
     this.addDays = (value, amount) => {
-      return amount < 0 ? value.subtract(Math.abs(amount), 'day') : value.add(amount, 'day');
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'day') : value.add(amount, 'day'));
     };
     this.addHours = (value, amount) => {
-      return amount < 0 ? value.subtract(Math.abs(amount), 'hour') : value.add(amount, 'hour');
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'hour') : value.add(amount, 'hour'));
     };
     this.addMinutes = (value, amount) => {
-      return amount < 0 ? value.subtract(Math.abs(amount), 'minute') : value.add(amount, 'minute');
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'minute') : value.add(amount, 'minute'));
     };
     this.addSeconds = (value, amount) => {
-      return amount < 0 ? value.subtract(Math.abs(amount), 'second') : value.add(amount, 'second');
+      return this.adjustOffset(amount < 0 ? value.subtract(Math.abs(amount), 'second') : value.add(amount, 'second'));
     };
     this.getYear = value => {
       return value.year();
@@ -468,34 +504,34 @@ export class AdapterDayjs {
       return value.millisecond();
     };
     this.setYear = (value, year) => {
-      return value.set('year', year);
+      return this.adjustOffset(value.set('year', year));
     };
     this.setMonth = (value, month) => {
-      return value.set('month', month);
+      return this.adjustOffset(value.set('month', month));
     };
     this.setDate = (value, date) => {
-      return value.set('date', date);
+      return this.adjustOffset(value.set('date', date));
     };
     this.setHours = (value, hours) => {
-      return value.set('hour', hours);
+      return this.adjustOffset(value.set('hour', hours));
     };
     this.setMinutes = (value, minutes) => {
-      return value.set('minute', minutes);
+      return this.adjustOffset(value.set('minute', minutes));
     };
     this.setSeconds = (value, seconds) => {
-      return value.set('second', seconds);
+      return this.adjustOffset(value.set('second', seconds));
     };
     this.setMilliseconds = (value, milliseconds) => {
-      return value.set('millisecond', milliseconds);
+      return this.adjustOffset(value.set('millisecond', milliseconds));
     };
     this.getDaysInMonth = value => {
       return value.daysInMonth();
     };
     this.getNextMonth = value => {
-      return value.add(1, 'month');
+      return this.addMonths(value, 1);
     };
     this.getPreviousMonth = value => {
-      return value.subtract(1, 'month');
+      return this.addMonths(value, -1);
     };
     this.getMonthArray = value => {
       const firstMonth = value.startOf('year');
@@ -511,10 +547,9 @@ export class AdapterDayjs {
     };
     this.getWeekdays = () => {
       const start = this.dayjs().startOf('week');
-      return [0, 1, 2, 3, 4, 5, 6].map(diff => this.formatByString(start.add(diff, 'day'), 'dd'));
+      return [0, 1, 2, 3, 4, 5, 6].map(diff => this.formatByString(this.addDays(start, diff), 'dd'));
     };
     this.getWeekArray = value => {
-      const timezone = this.getTimezone(value);
       const cleanValue = this.setLocaleToValue(value);
       const start = cleanValue.startOf('month').startOf('week');
       const end = cleanValue.endOf('month').endOf('week');
@@ -525,15 +560,7 @@ export class AdapterDayjs {
         const weekNumber = Math.floor(count / 7);
         nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
         nestedWeeks[weekNumber].push(current);
-        current = current.add(1, 'day');
-
-        // If the new day does not have the same offset as the old one (when switching to summer day time for example),
-        // Then dayjs will not automatically adjust the offset (moment does)
-        // We have to parse again the value to make sure the `fixOffset` method is applied
-        // See https://github.com/iamkun/dayjs/blob/b3624de619d6e734cd0ffdbbd3502185041c1b60/src/plugin/timezone/index.js#L72
-        if (this.hasTimezonePlugin() && timezone !== 'UTC' && timezone !== 'system') {
-          current = current.tz(this.cleanTimezone(timezone), true);
-        }
+        current = this.addDays(current, 1);
         count += 1;
       }
       return nestedWeeks;
@@ -548,7 +575,7 @@ export class AdapterDayjs {
       let current = startDate;
       while (current < endDate) {
         years.push(current);
-        current = current.add(1, 'year');
+        current = this.addYears(current, 1);
       }
       return years;
     };

package/modern/DateCalendar/DateCalendar.js

@@ -4,6 +4,7 @@ const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "refere
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { useSlotProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useCalendarState } from './useCalendarState';
@@ -13,10 +14,10 @@ import { DayCalendar } from './DayCalendar';
 import { MonthCalendar } from '../MonthCalendar';
 import { YearCalendar } from '../YearCalendar';
 import { useViews } from '../internals/hooks/useViews';
-import { PickersCalendarHeader } from './PickersCalendarHeader';
+import { PickersCalendarHeader } from '../PickersCalendarHeader';
 import { findClosestEnabledDate, applyDefaultDate, mergeDateAndTime } from '../internals/utils/date-utils';
 import { PickerViewRoot } from '../internals/components/PickerViewRoot';
-import { defaultReduceAnimations } from '../internals/utils/defaultReduceAnimations';
+import { useDefaultReduceAnimations } from '../internals/hooks/useDefaultReduceAnimations';
 import { getDateCalendarUtilityClass } from './dateCalendarClasses';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
@@ -35,21 +36,21 @@ const useUtilityClasses = ownerState => {
 function useDateCalendarDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
+  const defaultReduceAnimations = useDefaultReduceAnimations();
   const themeProps = useThemeProps({
     props,
     name
   });
-  return _extends({
-    loading: false,
-    disablePast: false,
-    disableFuture: false,
-    openTo: 'day',
-    views: ['year', 'day'],
-    reduceAnimations: defaultReduceAnimations,
-    renderLoading: () => /*#__PURE__*/_jsx("span", {
+  return _extends({}, themeProps, {
+    loading: themeProps.loading ?? false,
+    disablePast: themeProps.disablePast ?? false,
+    disableFuture: themeProps.disableFuture ?? false,
+    openTo: themeProps.openTo ?? 'day',
+    views: themeProps.views ?? ['year', 'day'],
+    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/_jsx("span", {
       children: "..."
-    })
-  }, themeProps, {
+    })),
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -173,6 +174,38 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     disableFuture,
     timezone
   });
+
+  // When disabled, limit the view to the selected date
+  const minDateWithDisabled = disabled && value || minDate;
+  const maxDateWithDisabled = disabled && value || maxDate;
+  const gridLabelId = `${id}-grid-label`;
+  const hasFocus = focusedView !== null;
+  const CalendarHeader = slots?.calendarHeader ?? components?.CalendarHeader ?? PickersCalendarHeader;
+  const calendarHeaderProps = useSlotProps({
+    elementType: CalendarHeader,
+    externalSlotProps: slotProps?.calendarHeader ?? componentsProps?.calendarHeader,
+    additionalProps: {
+      views,
+      view,
+      currentMonth: calendarState.currentMonth,
+      onViewChange: setView,
+      onMonthChange: (newMonth, direction) => handleChangeMonth({
+        newMonth,
+        direction
+      }),
+      minDate: minDateWithDisabled,
+      maxDate: maxDateWithDisabled,
+      disabled,
+      disablePast,
+      disableFuture,
+      reduceAnimations,
+      timezone,
+      labelId: gridLabelId,
+      slots,
+      slotProps
+    },
+    ownerState: props
+  });
   const handleDateMonthChange = useEventCallback(newDate => {
     const startOfMonth = utils.startOfMonth(newDate);
     const endOfMonth = utils.endOfMonth(newDate);
@@ -238,18 +271,12 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     maxDate,
     minDate
   };
-
-  // When disabled, limit the view to the selected date
-  const minDateWithDisabled = disabled && value || minDate;
-  const maxDateWithDisabled = disabled && value || maxDate;
   const commonViewProps = {
     disableHighlightToday,
     readOnly,
     disabled,
     timezone
   };
-  const gridLabelId = `${id}-grid-label`;
-  const hasFocus = focusedView !== null;
   const prevOpenViewRef = React.useRef(view);
   React.useEffect(() => {
     // If the view change and the focus was on the previous view
@@ -268,26 +295,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: [/*#__PURE__*/_jsx(PickersCalendarHeader, {
-      views: views,
-      view: view,
-      currentMonth: calendarState.currentMonth,
-      onViewChange: setView,
-      onMonthChange: (newMonth, direction) => handleChangeMonth({
-        newMonth,
-        direction
-      }),
-      minDate: minDateWithDisabled,
-      maxDate: maxDateWithDisabled,
-      disabled: disabled,
-      disablePast: disablePast,
-      disableFuture: disableFuture,
-      reduceAnimations: reduceAnimations,
-      labelId: gridLabelId,
-      slots: slots,
-      slotProps: slotProps,
-      timezone: timezone
-    }), /*#__PURE__*/_jsx(DateCalendarViewTransitionContainer, {
+    children: [/*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps)), /*#__PURE__*/_jsx(DateCalendarViewTransitionContainer, {
       reduceAnimations: reduceAnimations,
       className: classes.viewTransitionContainer,
       transKey: view,

package/modern/DateCalendar/index.js

@@ -1,6 +1,7 @@
 export { DateCalendar } from './DateCalendar';
 export { getDateCalendarUtilityClass, dateCalendarClasses } from './dateCalendarClasses';
 export { dayPickerClasses } from './dayCalendarClasses';
-export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
 export { pickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
-export { pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
+export { pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
+// TODO v7: Remove and export the `PickersCalendarHeader` folder from the root instead.
+export * from '../PickersCalendarHeader';

package/modern/DateField/DateField.js

@@ -38,8 +38,8 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref)
     textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
 
   // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
-  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
+  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
+  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   const _useDateField = useDateField({
       props: textFieldProps,
       inputRef: externalInputRef
@@ -84,6 +84,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/modern/DateTimeField/DateTimeField.js

@@ -38,8 +38,8 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
     textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
 
   // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
-  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
+  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
+  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   const _useDateTimeField = useDateTimeField({
       props: textFieldProps,
       inputRef: externalInputRef
@@ -89,6 +89,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -12,6 +12,7 @@ import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { dateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass } from './dateTimePickerToolbarClasses';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -264,14 +265,14 @@ function DateTimePickerToolbar(inProps) {
           variant: "subtitle2",
           selected: meridiemMode === 'am',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('am'),
+          value: formatMeridiem(utils, 'am'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
           disabled: disabled
         }), /*#__PURE__*/_jsx(PickersToolbarButton, {
           variant: "subtitle2",
           selected: meridiemMode === 'pm',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('pm'),
+          value: formatMeridiem(utils, 'pm'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
           disabled: disabled
         })]
@@ -279,7 +280,7 @@ function DateTimePickerToolbar(inProps) {
         variant: "h5",
         onClick: () => onViewChange('meridiem'),
         selected: view === 'meridiem',
-        value: value && meridiemMode ? utils.getMeridiemText(meridiemMode) : '--',
+        value: value && meridiemMode ? formatMeridiem(utils, meridiemMode) : '--',
         width: MULTI_SECTION_CLOCK_SECTION_WIDTH
       })]
     })]

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -47,7 +47,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
     validator: validateDate
   });
   return renderPicker();

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -83,7 +83,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
     validator: validateDateTime
   });
   return renderPicker();

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -70,7 +70,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: localeText.openTimePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? localeText.openTimePickerDialogue,
     validator: validateTime
   });
   return renderPicker();

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -44,7 +44,7 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
     validator: validateDate
   });
   return renderPicker();

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -55,7 +55,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
     validator: validateDateTime
   });
   return renderPicker();

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -48,7 +48,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: localeText.openTimePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? localeText.openTimePickerDialogue,
     validator: validateTime
   });
   return renderPicker();

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -18,6 +18,7 @@ import { getHourSectionOptions, getTimeSectionOptions } from './MultiSectionDigi
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -269,8 +270,8 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         }
       case 'meridiem':
         {
-          const amLabel = utils.getMeridiemText('am');
-          const pmLabel = utils.getMeridiemText('pm');
+          const amLabel = formatMeridiem(utils, 'am');
+          const pmLabel = formatMeridiem(utils, 'pm');
           return {
             onChange: handleMeridiemChange,
             items: [{

package/modern/{DateCalendar → PickersCalendarHeader}/PickersCalendarHeader.js

@@ -1,14 +1,17 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["ownerState"];
+const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone"],
+  _excluded2 = ["ownerState"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import Fade from '@mui/material/Fade';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
-import { PickersFadeTransitionGroup } from './PickersFadeTransitionGroup';
+import { PickersFadeTransitionGroup } from '../DateCalendar/PickersFadeTransitionGroup';
 import { ArrowDropDownIcon } from '../icons';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
 import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internals/hooks/date-helpers-hooks';
@@ -91,11 +94,7 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
   transition: theme.transitions.create('transform'),
   transform: 'rotate(0deg)'
 }));
-
-/**
- * @ignore - do not document.
- */
-export function PickersCalendarHeader(inProps) {
+const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
   const localeText = useLocaleText();
   const utils = useUtils();
   const props = useThemeProps({
@@ -103,22 +102,24 @@ export function PickersCalendarHeader(inProps) {
     name: 'MuiPickersCalendarHeader'
   });
   const {
-    slots,
-    slotProps,
-    currentMonth: month,
-    disabled,
-    disableFuture,
-    disablePast,
-    maxDate,
-    minDate,
-    onMonthChange,
-    onViewChange,
-    view,
-    reduceAnimations,
-    views,
-    labelId,
-    timezone
-  } = props;
+      slots,
+      slotProps,
+      currentMonth: month,
+      disabled,
+      disableFuture,
+      disablePast,
+      maxDate,
+      minDate,
+      onMonthChange,
+      onViewChange,
+      view,
+      reduceAnimations,
+      views,
+      labelId,
+      className,
+      timezone
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(props);
   const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
@@ -140,7 +141,7 @@ export function PickersCalendarHeader(inProps) {
       ownerState: undefined,
       className: classes.switchViewIcon
     }),
-    switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+    switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1), 'left');
   const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1), 'right');
   const isNextMonthDisabled = useNextMonthDisabled(month, {
@@ -170,9 +171,10 @@ export function PickersCalendarHeader(inProps) {
   if (views.length === 1 && views[0] === 'year') {
     return null;
   }
-  return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, {
+  return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, _extends({}, other, {
     ownerState: ownerState,
-    className: classes.root,
+    className: clsx(className, classes.root),
+    ref: ref,
     children: [/*#__PURE__*/_jsxs(PickersCalendarHeaderLabelContainer, {
       role: "presentation",
       onClick: handleToggleView,
@@ -206,5 +208,47 @@ export function PickersCalendarHeader(inProps) {
         nextLabel: localeText.nextMonth
       })
     })]
-  });
-}
+  }));
+});
+process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * className applied to the root element.
+   */
+  className: PropTypes.string,
+  currentMonth: PropTypes.any.isRequired,
+  disabled: PropTypes.bool,
+  disableFuture: PropTypes.bool,
+  disablePast: PropTypes.bool,
+  labelId: PropTypes.string,
+  maxDate: PropTypes.any.isRequired,
+  minDate: PropTypes.any.isRequired,
+  onMonthChange: PropTypes.func.isRequired,
+  onViewChange: PropTypes.func,
+  reduceAnimations: PropTypes.bool.isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  timezone: PropTypes.string.isRequired,
+  view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
+} : void 0;
+export { PickersCalendarHeader };

package/modern/PickersCalendarHeader/index.js

@@ -0,0 +1,2 @@
+export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
+export { PickersCalendarHeader } from './PickersCalendarHeader';