@mui/x-date-pickers 6.10.1 → 6.11.0

package/internals/components/PickersToolbar.d.ts

@@ -8,7 +8,7 @@ export interface PickersToolbarProps<TValue, TView extends DateOrTimeViewWithMer
     toolbarTitle: React.ReactNode;
     classes?: Partial<PickersToolbarClasses>;
 }
-type PickersToolbarComponent = (<TValue, TView extends DateOrTimeViewWithMeridiem>(props: React.PropsWithChildren<PickersToolbarProps<TValue, TView>> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type PickersToolbarComponent = (<TValue, TView extends DateOrTimeViewWithMeridiem>(props: React.PropsWithChildren<PickersToolbarProps<TValue, TView>> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 export declare const PickersToolbar: PickersToolbarComponent;

package/internals/hooks/date-helpers-hooks.d.ts

@@ -1,7 +1,7 @@
 import { PickerOnChangeFn } from './useViews';
 import { PickerSelectionState } from './usePicker';
 import { PickersTimezone } from '../../models';
-interface MonthValidationOptions<TDate> {
+export interface MonthValidationOptions<TDate> {
     disablePast?: boolean;
     disableFuture?: boolean;
     minDate: TDate;
@@ -14,4 +14,3 @@ export declare function useMeridiemMode<TDate>(date: TDate | null, ampm: boolean
     meridiemMode: import("../utils/time-utils").Meridiem | null;
     handleMeridiemChange: (mode: 'am' | 'pm') => void;
 };
-export {};

package/internals/hooks/useDefaultReduceAnimations.d.ts

@@ -0,0 +1,2 @@
+export declare const defaultReduceAnimations: boolean;
+export declare const useDefaultReduceAnimations: () => boolean;

package/internals/hooks/useDefaultReduceAnimations.js

@@ -0,0 +1,9 @@
+import useMediaQuery from '@mui/material/useMediaQuery';
+const PREFERS_REDUCED_MOTION = '@media (prefers-reduced-motion: reduce)';
+export const defaultReduceAnimations = typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent);
+export const useDefaultReduceAnimations = () => {
+  const prefersReduced = useMediaQuery(PREFERS_REDUCED_MOTION, {
+    defaultMatches: false
+  });
+  return prefersReduced || defaultReduceAnimations;
+};

package/internals/hooks/useField/useField.js

@@ -153,13 +153,18 @@ export const useField = params => {
     if (readOnly) {
       return;
     }
-    const valueStr = event.target.value;
+    const targetValue = event.target.value;
+    const eventData = event.nativeEvent.data;
+    // Calling `.fill(04/11/2022)` in playwright will trigger a change event with the requested content to insert in `event.nativeEvent.data`
+    // usual changes have only the currently typed character in the `event.nativeEvent.data`
+    const shouldUseEventData = eventData && eventData.length > 1;
+    const valueStr = shouldUseEventData ? eventData : targetValue;
     const cleanValueStr = cleanString(valueStr);
 
-    // If no section is selected, we just try to parse the new value
+    // If no section is selected or eventData should be used, we just try to parse the new value
     // This line is mostly triggered by imperative code / application tests.
-    if (selectedSectionIndexes == null) {
-      updateValueFromValueStr(cleanValueStr);
+    if (selectedSectionIndexes == null || shouldUseEventData) {
+      updateValueFromValueStr(shouldUseEventData ? eventData : cleanValueStr);
       return;
     }
     let keyPressed;

package/internals/hooks/useField/useField.utils.d.ts

@@ -8,7 +8,7 @@ export declare const getDaysInWeekStr: <TDate>(utils: MuiPickersAdapter<TDate, a
 export declare const getLetterEditingOptions: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, sectionType: FieldSectionType, format: string) => string[];
 export declare const cleanLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueStr: string, size: number) => string;
 export declare const cleanDigitSectionValue: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, section: Pick<FieldSection, 'format' | 'type' | 'contentType' | 'hasLeadingZerosInFormat' | 'hasLeadingZerosInInput' | 'maxLength'>) => string;
-export declare const adjustSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, activeDate: TDate | null, stepsAttribues?: {
+export declare const adjustSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, activeDate: TDate | null, stepsAttributes?: {
     minutesStep?: number;
 }) => string;
 export declare const getSectionVisibleValue: (section: FieldSectionWithoutPosition, target: 'input-rtl' | 'input-ltr' | 'non-input') => string;

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

@@ -96,7 +96,7 @@ export const cleanDigitSectionValue = (utils, timezone, value, sectionBoundaries
   }
   return valueStr;
 };
-export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, activeDate, stepsAttribues) => {
+export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, activeDate, stepsAttributes) => {
   const delta = getDeltaFromKeyCode(keyCode);
   const isStart = keyCode === 'Home';
   const isEnd = keyCode === 'End';
@@ -108,7 +108,7 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
       contentType: section.contentType
     });
     const getCleanValue = value => cleanDigitSectionValue(utils, timezone, value, sectionBoundaries, section);
-    const step = section.type === 'minutes' && stepsAttribues != null && stepsAttribues.minutesStep ? stepsAttribues.minutesStep : 1;
+    const step = section.type === 'minutes' && stepsAttributes != null && stepsAttributes.minutesStep ? stepsAttributes.minutesStep : 1;
     const currentSectionValue = parseInt(section.value, 10);
     let newSectionValueNumber = currentSectionValue + delta * step;
     if (shouldSetAbsolute) {
@@ -470,6 +470,7 @@ export const createDateStrForInputFromSections = (sections, isRTL) => {
 export const getSectionsBoundaries = (utils, timezone) => {
   const today = utils.dateWithTimezone(undefined, timezone);
   const endOfYear = utils.endOfYear(today);
+  const endOfDay = utils.endOfDay(today);
   const {
     maxDaysInMonth,
     longestMonth
@@ -524,7 +525,7 @@ export const getSectionsBoundaries = (utils, timezone) => {
     hours: ({
       format
     }) => {
-      const lastHourInDay = utils.getHours(endOfYear);
+      const lastHourInDay = utils.getHours(endOfDay);
       const hasMeridiem = utils.formatByString(utils.endOfDay(today), format) !== lastHourInDay.toString();
       if (hasMeridiem) {
         return {
@@ -540,12 +541,12 @@ export const getSectionsBoundaries = (utils, timezone) => {
     minutes: () => ({
       minimum: 0,
       // Assumption: All years have the same amount of minutes
-      maximum: utils.getMinutes(endOfYear)
+      maximum: utils.getMinutes(endOfDay)
     }),
     seconds: () => ({
       minimum: 0,
       // Assumption: All years have the same amount of seconds
-      maximum: utils.getSeconds(endOfYear)
+      maximum: utils.getSeconds(endOfDay)
     }),
     meridiem: () => ({
       minimum: 0,

package/internals/index.d.ts

@@ -47,7 +47,7 @@ export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, } from './utils/utils';
-export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
+export { useDefaultReduceAnimations } from './hooks/useDefaultReduceAnimations';
 export { extractValidationProps } from './utils/validation/extractValidationProps';
 export { validateDate } from './utils/validation/validateDate';
 export { validateDateTime } from './utils/validation/validateDateTime';
@@ -55,8 +55,6 @@ export { validateTime } from './utils/validation/validateTime';
 export { buildDeprecatedPropsWarning, buildWarning } from './utils/warning';
 export { uncapitalizeObjectKeys } from './utils/slots-migration';
 export type { UncapitalizeObjectKeys, SlotsAndSlotProps } from './utils/slots-migration';
-export { PickersCalendarHeader } from '../DateCalendar/PickersCalendarHeader';
-export type { ExportedCalendarHeaderProps, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, } from '../DateCalendar/PickersCalendarHeader';
 export { DayCalendar } from '../DateCalendar/DayCalendar';
 export type { DayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, ExportedDayCalendarProps, } from '../DateCalendar/DayCalendar';
 export type { ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';

package/internals/index.js

@@ -20,13 +20,12 @@ export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
-export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
+export { useDefaultReduceAnimations } from './hooks/useDefaultReduceAnimations';
 export { extractValidationProps } from './utils/validation/extractValidationProps';
 export { validateDate } from './utils/validation/validateDate';
 export { validateDateTime } from './utils/validation/validateDateTime';
 export { validateTime } from './utils/validation/validateTime';
 export { buildDeprecatedPropsWarning, buildWarning } from './utils/warning';
 export { uncapitalizeObjectKeys } from './utils/slots-migration';
-export { PickersCalendarHeader } from '../DateCalendar/PickersCalendarHeader';
 export { DayCalendar } from '../DateCalendar/DayCalendar';
 export { useCalendarState } from '../DateCalendar/useCalendarState';

package/internals/utils/valueManagers.js

@@ -25,7 +25,7 @@ export const singleItemValueManager = {
   isSameError: (a, b) => a === b,
   hasError: error => error != null,
   defaultErrorState: null,
-  getTimezone: (utils, value) => value == null ? null : utils.getTimezone(value),
+  getTimezone: (utils, value) => value == null || !utils.isValid(value) ? null : utils.getTimezone(value),
   setTimezone: (utils, timezone, value) => value == null ? null : utils.setTimezone(value, timezone)
 };
 export const singleItemFieldValueManager = {

package/legacy/AdapterDayjs/AdapterDayjs.js

@@ -197,10 +197,23 @@ export var AdapterDayjs = /*#__PURE__*/_createClass(function 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 = function (timezone) {
-    return timezone === 'default' ? undefined : timezone;
+    switch (timezone) {
+      case 'default':
+        {
+          return undefined;
+        }
+      case 'system':
+        {
+          return defaultDayjs.tz.guess();
+        }
+      default:
+        {
+          return timezone;
+        }
+    }
   };
   this.createSystemDate = function (value) {
     // TODO v7: Stop using `this.rawDayJsInstance` (drop the `instance` param on the adapters)
@@ -250,6 +263,28 @@ export var AdapterDayjs = /*#__PURE__*/_createClass(function 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 = function (value) {
+    if (!_this.hasTimezonePlugin()) {
+      return value;
+    }
+    var timezone = _this.getTimezone(value);
+    if (timezone !== 'UTC') {
+      var _fixedValue$$offset, _value$$offset;
+      var fixedValue = value.tz(_this.cleanTimezone(timezone), true);
+      // @ts-ignore
+      if (((_fixedValue$$offset = fixedValue.$offset) != null ? _fixedValue$$offset : 0) === ((_value$$offset = value.$offset) != null ? _value$$offset : 0)) {
+        return value;
+      }
+      return fixedValue;
+    }
+    return value;
+  };
   this.date = function (value) {
     if (value === null) {
       return null;
@@ -425,49 +460,49 @@ export var AdapterDayjs = /*#__PURE__*/_createClass(function AdapterDayjs() {
     return value >= start && value <= end;
   };
   this.startOfYear = function (value) {
-    return value.startOf('year');
+    return _this.adjustOffset(value.startOf('year'));
   };
   this.startOfMonth = function (value) {
-    return value.startOf('month');
+    return _this.adjustOffset(value.startOf('month'));
   };
   this.startOfWeek = function (value) {
-    return value.startOf('week');
+    return _this.adjustOffset(value.startOf('week'));
   };
   this.startOfDay = function (value) {
-    return value.startOf('day');
+    return _this.adjustOffset(value.startOf('day'));
   };
   this.endOfYear = function (value) {
-    return value.endOf('year');
+    return _this.adjustOffset(value.endOf('year'));
   };
   this.endOfMonth = function (value) {
-    return value.endOf('month');
+    return _this.adjustOffset(value.endOf('month'));
   };
   this.endOfWeek = function (value) {
-    return value.endOf('week');
+    return _this.adjustOffset(value.endOf('week'));
   };
   this.endOfDay = function (value) {
-    return value.endOf('day');
+    return _this.adjustOffset(value.endOf('day'));
   };
   this.addYears = function (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 = function (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 = function (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 = function (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 = function (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 = function (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 = function (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 = function (value) {
     return value.year();
@@ -491,34 +526,34 @@ export var AdapterDayjs = /*#__PURE__*/_createClass(function AdapterDayjs() {
     return value.millisecond();
   };
   this.setYear = function (value, year) {
-    return value.set('year', year);
+    return _this.adjustOffset(value.set('year', year));
   };
   this.setMonth = function (value, month) {
-    return value.set('month', month);
+    return _this.adjustOffset(value.set('month', month));
   };
   this.setDate = function (value, date) {
-    return value.set('date', date);
+    return _this.adjustOffset(value.set('date', date));
   };
   this.setHours = function (value, hours) {
-    return value.set('hour', hours);
+    return _this.adjustOffset(value.set('hour', hours));
   };
   this.setMinutes = function (value, minutes) {
-    return value.set('minute', minutes);
+    return _this.adjustOffset(value.set('minute', minutes));
   };
   this.setSeconds = function (value, seconds) {
-    return value.set('second', seconds);
+    return _this.adjustOffset(value.set('second', seconds));
   };
   this.setMilliseconds = function (value, milliseconds) {
-    return value.set('millisecond', milliseconds);
+    return _this.adjustOffset(value.set('millisecond', milliseconds));
   };
   this.getDaysInMonth = function (value) {
     return value.daysInMonth();
   };
   this.getNextMonth = function (value) {
-    return value.add(1, 'month');
+    return _this.addMonths(value, 1);
   };
   this.getPreviousMonth = function (value) {
-    return value.subtract(1, 'month');
+    return _this.addMonths(value, -1);
   };
   this.getMonthArray = function (value) {
     var firstMonth = value.startOf('year');
@@ -535,11 +570,10 @@ export var AdapterDayjs = /*#__PURE__*/_createClass(function AdapterDayjs() {
   this.getWeekdays = function () {
     var start = _this.dayjs().startOf('week');
     return [0, 1, 2, 3, 4, 5, 6].map(function (diff) {
-      return _this.formatByString(start.add(diff, 'day'), 'dd');
+      return _this.formatByString(_this.addDays(start, diff), 'dd');
     });
   };
   this.getWeekArray = function (value) {
-    var timezone = _this.getTimezone(value);
     var cleanValue = _this.setLocaleToValue(value);
     var start = cleanValue.startOf('month').startOf('week');
     var end = cleanValue.endOf('month').endOf('week');
@@ -550,15 +584,7 @@ export var AdapterDayjs = /*#__PURE__*/_createClass(function AdapterDayjs() {
       var 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;
@@ -573,7 +599,7 @@ export var AdapterDayjs = /*#__PURE__*/_createClass(function AdapterDayjs() {
     var current = startDate;
     while (current < endDate) {
       years.push(current);
-      current = current.add(1, 'year');
+      current = _this.addYears(current, 1);
     }
     return years;
   };

package/legacy/DateCalendar/DateCalendar.js

@@ -4,6 +4,7 @@ var _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenc
 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';
@@ -31,25 +32,26 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDateCalendarUtilityClass, classes);
 };
 function useDateCalendarDefaultizedProps(props, name) {
+  var _themeProps$loading, _themeProps$disablePa, _themeProps$disableFu, _themeProps$openTo, _themeProps$views, _themeProps$reduceAni, _themeProps$renderLoa;
   var utils = useUtils();
   var defaultDates = useDefaultDates();
+  var defaultReduceAnimations = useDefaultReduceAnimations();
   var themeProps = useThemeProps({
     props: props,
     name: name
   });
-  return _extends({
-    loading: false,
-    disablePast: false,
-    disableFuture: false,
-    openTo: 'day',
-    views: ['year', 'day'],
-    reduceAnimations: defaultReduceAnimations,
-    renderLoading: function renderLoading() {
+  return _extends({}, themeProps, {
+    loading: (_themeProps$loading = themeProps.loading) != null ? _themeProps$loading : false,
+    disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
+    disableFuture: (_themeProps$disableFu = themeProps.disableFuture) != null ? _themeProps$disableFu : false,
+    openTo: (_themeProps$openTo = themeProps.openTo) != null ? _themeProps$openTo : 'day',
+    views: (_themeProps$views = themeProps.views) != null ? _themeProps$views : ['year', 'day'],
+    reduceAnimations: (_themeProps$reduceAni = themeProps.reduceAnimations) != null ? _themeProps$reduceAni : defaultReduceAnimations,
+    renderLoading: (_themeProps$renderLoa = themeProps.renderLoading) != null ? _themeProps$renderLoa : function () {
       return /*#__PURE__*/_jsx("span", {
         children: "..."
       });
-    }
-  }, themeProps, {
+    },
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -82,6 +84,7 @@ var DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
  * - [DateCalendar API](https://mui.com/x/api/date-pickers/date-calendar/)
  */
 export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps, ref) {
+  var _ref, _slots$calendarHeader, _slotProps$calendarHe;
   var utils = useUtils();
   var id = useId();
   var props = useDateCalendarDefaultizedProps(inProps, 'MuiDateCalendar');
@@ -172,6 +175,40 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
     handleChangeMonth = _useCalendarState.handleChangeMonth,
     isDateDisabled = _useCalendarState.isDateDisabled,
     onMonthSwitchingAnimationEnd = _useCalendarState.onMonthSwitchingAnimationEnd;
+
+  // When disabled, limit the view to the selected date
+  var minDateWithDisabled = disabled && value || minDate;
+  var maxDateWithDisabled = disabled && value || maxDate;
+  var gridLabelId = "".concat(id, "-grid-label");
+  var hasFocus = focusedView !== null;
+  var CalendarHeader = (_ref = (_slots$calendarHeader = slots == null ? void 0 : slots.calendarHeader) != null ? _slots$calendarHeader : components == null ? void 0 : components.CalendarHeader) != null ? _ref : PickersCalendarHeader;
+  var calendarHeaderProps = useSlotProps({
+    elementType: CalendarHeader,
+    externalSlotProps: (_slotProps$calendarHe = slotProps == null ? void 0 : slotProps.calendarHeader) != null ? _slotProps$calendarHe : componentsProps == null ? void 0 : componentsProps.calendarHeader,
+    additionalProps: {
+      views: views,
+      view: view,
+      currentMonth: calendarState.currentMonth,
+      onViewChange: setView,
+      onMonthChange: function onMonthChange(newMonth, direction) {
+        return handleChangeMonth({
+          newMonth: newMonth,
+          direction: direction
+        });
+      },
+      minDate: minDateWithDisabled,
+      maxDate: maxDateWithDisabled,
+      disabled: disabled,
+      disablePast: disablePast,
+      disableFuture: disableFuture,
+      reduceAnimations: reduceAnimations,
+      timezone: timezone,
+      labelId: gridLabelId,
+      slots: slots,
+      slotProps: slotProps
+    },
+    ownerState: props
+  });
   var handleDateMonthChange = useEventCallback(function (newDate) {
     var startOfMonth = utils.startOfMonth(newDate);
     var endOfMonth = utils.endOfMonth(newDate);
@@ -237,18 +274,12 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
     maxDate: maxDate,
     minDate: minDate
   };
-
-  // When disabled, limit the view to the selected date
-  var minDateWithDisabled = disabled && value || minDate;
-  var maxDateWithDisabled = disabled && value || maxDate;
   var commonViewProps = {
     disableHighlightToday: disableHighlightToday,
     readOnly: readOnly,
     disabled: disabled,
     timezone: timezone
   };
-  var gridLabelId = "".concat(id, "-grid-label");
-  var hasFocus = focusedView !== null;
   var prevOpenViewRef = React.useRef(view);
   React.useEffect(function () {
     // If the view change and the focus was on the previous view
@@ -269,28 +300,7 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: [/*#__PURE__*/_jsx(PickersCalendarHeader, {
-      views: views,
-      view: view,
-      currentMonth: calendarState.currentMonth,
-      onViewChange: setView,
-      onMonthChange: function onMonthChange(newMonth, direction) {
-        return handleChangeMonth({
-          newMonth: newMonth,
-          direction: 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/legacy/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/legacy/DateField/DateField.js

@@ -35,8 +35,8 @@ var DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
     textFieldProps = _objectWithoutProperties(_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);
   var _useDateField = useDateField({
       props: textFieldProps,
       inputRef: externalInputRef

package/legacy/DateTimeField/DateTimeField.js

@@ -35,8 +35,8 @@ var DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps
     textFieldProps = _objectWithoutProperties(_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);
   var _useDateTimeField = useDateTimeField({
       props: textFieldProps,
       inputRef: externalInputRef

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -12,7 +12,7 @@ import { extractValidationProps } from '../internals/utils/validation/extractVal
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { resolveDateFormat } from '../internals/utils/date-utils';
 var DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
-  var _defaultizedProps$yea, _defaultizedProps$slo2;
+  var _defaultizedProps$yea, _defaultizedProps$slo2, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();
   var utils = useUtils();
 
@@ -49,7 +49,7 @@ var DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker
       props: props,
       valueManager: singleItemValueManager,
       valueType: 'date',
-      getOpenDialogAriaText: localeText.openDatePickerDialogue,
+      getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openDatePickerDialogue) != null ? _props$localeText$ope : localeText.openDatePickerDialogue,
       validator: validateDate
     }),
     renderPicker = _useDesktopPicker.renderPicker;

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -15,7 +15,7 @@ import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
 var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
-  var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3, _defaultizedProps$slo4;
+  var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3, _defaultizedProps$slo4, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();
   var utils = useUtils();
 
@@ -86,7 +86,7 @@ var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTi
       props: props,
       valueManager: singleItemValueManager,
       valueType: 'date-time',
-      getOpenDialogAriaText: localeText.openDatePickerDialogue,
+      getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openDatePickerDialogue) != null ? _props$localeText$ope : localeText.openDatePickerDialogue,
       validator: validateDateTime
     }),
     renderPicker = _useDesktopPicker.renderPicker;

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -14,7 +14,7 @@ import { extractValidationProps } from '../internals/utils/validation/extractVal
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
 import { resolveTimeFormat } from '../internals/utils/time-utils';
 var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  var _defaultizedProps$thr, _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3;
+  var _defaultizedProps$thr, _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();
   var utils = useUtils();
 
@@ -73,7 +73,7 @@ var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker
       props: props,
       valueManager: singleItemValueManager,
       valueType: 'time',
-      getOpenDialogAriaText: localeText.openTimePickerDialogue,
+      getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openTimePickerDialogue) != null ? _props$localeText$ope : localeText.openTimePickerDialogue,
       validator: validateTime
     }),
     renderPicker = _useDesktopPicker.renderPicker;

package/legacy/DigitalClock/DigitalClock.js

@@ -229,7 +229,7 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
       length: Math.ceil(24 * 60 / timeStep) - 1
     }, function (_, index) {
       return utils.addMinutes(startOfDay, timeStep * (index + 1));
-    })), [utils.endOfDay(valueOrReferenceDate)]);
+    })));
   }, [valueOrReferenceDate, timeStep, utils]);
   return /*#__PURE__*/_jsx(DigitalClockRoot, _extends({
     ref: handleRef,