@mui/x-date-pickers 6.10.2 → 6.11.1

package/AdapterDayjs/AdapterDayjs.d.ts

@@ -45,13 +45,20 @@ export declare class AdapterDayjs implements MuiPickersAdapter<Dayjs, string> {
     private hasTimezonePlugin;
     private isSame;
     /**
-     * Replace "default" by undefined before passing it to `dayjs
+     * Replaces "default" by undefined and "system" by the system timezone before passing it to `dayjs`.
      */
     private cleanTimezone;
     private createSystemDate;
     private createUTCDate;
     private createTZDate;
     private getLocaleFormats;
+    /**
+     * 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
+     */
+    private adjustOffset;
     date: (value?: any) => defaultDayjs.Dayjs | null;
     dateWithTimezone: (value: string | null | undefined, timezone: PickersTimezone) => Dayjs | null;
     getTimezone: (value: Dayjs) => string;

package/AdapterDayjs/AdapterDayjs.js

@@ -185,9 +185,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 */
@@ -236,6 +251,28 @@ 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') {
+        var _fixedValue$$offset, _value$$offset;
+        const 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 = value => {
       if (value === null) {
         return null;
@@ -404,49 +441,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();
@@ -470,34 +507,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');
@@ -513,10 +550,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');
@@ -527,15 +563,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;
@@ -550,7 +578,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/CHANGELOG.md

@@ -3,6 +3,160 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.11.1
+
+_Aug 11, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Add theme augmentation to `@mui/x-tree-view`
+- 📈 Enable charts customization using `slot` and `slotProps` props
+- 🌍 Improve Finnish (fi-FI) and Icelandic (is-IS) locales on the pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.11.1`
+
+- [DataGrid] `getCellAggregationResult`: Handle `null` `rowNode` case (#9915) @romgrk
+
+#### `@mui/x-data-grid-pro@6.11.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@6.11.1`.
+
+#### `@mui/x-data-grid-premium@6.11.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@6.11.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.11.1`
+
+- [fields] Use `numeric` `inputmode` instead of `tel` (#9918) @LukasTy
+- [pickers] Always respect locale when formatting meridiem (#9979) @flaviendelangle
+- [pickers] Call `onChange` when selecting a shortcut with `changeImportance="set"` (#9974) @flaviendelangle
+- [pickers] Refactor `themeAugmentation` `styleOverrides` (#9978) @LukasTy
+- [l10n] Improve Finnish (fi-FI) locale (#9795) @kurkle
+- [l10n] Improve Icelandic (is-IS) locale (#9639) @magnimarels
+
+#### `@mui/x-date-pickers-pro@6.11.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@6.11.1`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.7`
+
+- [charts] Fix label and tick alignment (#9952) @LukasTy
+- [charts] Remove not functional component `styleOverrides` (#9996) @LukasTy
+- [charts] Set custom ticks number (#9922) @alexfauquette
+- [charts] Use `slot`/`slotProps` for customization (#9744) @alexfauquette
+- [charts] Extend cheerful fiesta palette (#9980) @noraleonte
+
+### Tree View / `@mui/x-tree-view@v6.0.0-alpha.1`
+
+- [TreeView] Add theme augmentation (#9967) @flaviendelangle
+
+### Docs
+
+- [docs] Clarify the `shouldDisableClock` migration code options (#9920) @LukasTy
+
+### Core
+
+- [core] Port GitHub workflow for ensuring triage label is present (#9924) @DanailH
+- [docs-infra] Fix the import samples in Api pages (#9898) @alexfauquette
+
+## 6.11.0
+
+_Aug 4, 2023_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ⌚️ Move the tree view component from `@mui/lab` package
+
+  The `<TreeView />` component has been moved to the MUI X repository.
+  It is now accessible from its own package: `@mui/x-tree-view`.
+
+- 🌍 Improve Hebrew (he-IL), Finnish (fi-FI), and Italian (it-IT) locales on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.11.0`
+
+- [DataGrid] Add `ariaV7` experimental flag (#9496) @cherniavskii
+- [DataGrid] Fix cell size when column width is set to `undefined` (#9871) @gitstart
+- [l10n] Improve Hebrew (he-IL) locale (#9820) @itayG98
+- [l10n] Improve Finnish (fi-FI) locale (#9848) @sambbaahh
+- [l10n] Improve Italian (it-IT) locale (#9627) @fabio-rizzello-omnia
+
+#### `@mui/x-data-grid-pro@v6.11.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@v6.11.0`.
+
+#### `@mui/x-data-grid-premium@v6.11.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@v6.11.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.11.0`
+
+- [fields] Correctly handle events with a complete value insertion (#9896) @LukasTy
+- [fields] Fix hours editing on dayjs with timezone and DST (#9901) @flaviendelangle
+- [fields] Fix section clearing with timezone (#9819) @flaviendelangle
+- [pickers] Add `CalendarHeader` slot (#7784) @flaviendelangle
+- [pickers] Allow to override the `InputProps` of the `TextField` using the `slotProps` (#9849) @flaviendelangle
+- [pickers] Allow to override the opening aria text using the `localeText` prop on the pickers (#9870) @flaviendelangle
+- [pickers] Fix `sx` and `className` props on `MobileDateRangePicker` (#9853) @flaviendelangle
+- [pickers] Fix default descriptions (#9887) @LukasTy
+- [pickers] Fix offset management on dayjs adapter (#9884) @flaviendelangle
+- [pickers] Use device motion reduction preference (#9823) @LukasTy
+
+#### `@mui/x-date-pickers-pro@v6.11.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@v6.11.0`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.6`
+
+- [charts] Add TS definition to the exported elements (#9885) @alexfauquette
+- [charts] Add sparkline (#9662) @alexfauquette
+- [charts] Fix missing configuration types (#9886) @alexfauquette
+- [charts] Introduce dataset to simplify plot of data from API (#9774) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@v6.0.0-alpha.0`
+
+- [TreeView] Add missing exported types (#9862) @flaviendelangle
+- [TreeView] Add tree view to changelog generator script (#9903) @MBilalShafi
+- [TreeView] Create the package on the X repository (#9798) @flaviendelangle
+- [TreeView] Improve props typing (#9855) @flaviendelangle
+
+### Docs
+
+- [docs] Add Tree View doc (#9825) @flaviendelangle
+- [docs] Add charts nav item (#9821) @LukasTy
+- [docs] Add charts to MUI X introduction pages (#9704) @joserodolfofreitas
+- [docs] Add example for avoiding picker views layout shift (#9781) @noraleonte
+- [docs] Consistency of Next.js App Router @oliviertassinari
+- [docs] Fix API page regression: bring back slots section (#9866) @alexfauquette
+- [docs] Fix demo using Pro while it's MIT (#9842) @oliviertassinari
+- [docs] Get ready for next docs-infra change @oliviertassinari
+- [docs] Improve the slots documentation `Recommended usage` section (#9892) @flaviendelangle
+
+### Core
+
+- [core] Fix font loading issue dev-mode (#9843) @oliviertassinari
+- [core] Fix pipeline (#9894) @LukasTy
+- [core] Fix the link-check script on Windows (#9888) @alexfauquette
+- [core] Fix v7 capitalization (#9878) @oliviertassinari
+- [core] Regen doc (#9902) @flaviendelangle
+- [core] Remove benchmark package (#9413) @LukasTy
+- [core] Stop using the deprecated `JSX` global namespace (#9854) @flaviendelangle
+- [core] Update monorepo (#9846) @flaviendelangle
+- [core] Update tree data API docs (#9827) @cherniavskii
+- [test] Add pickers e2e tests (#9747) @LukasTy
+- [test] Data grid e2e tests follow-up (#9822) @cherniavskii
+
 ## 6.10.2
 
 _Jul 27, 2023_

package/DateCalendar/DateCalendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DateCalendarProps } from './DateCalendar.types';
-type DateCalendarComponent = (<TDate>(props: DateCalendarProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type DateCalendarComponent = (<TDate>(props: DateCalendarProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/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';
@@ -33,23 +34,24 @@ const 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;
   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 = 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 : () => /*#__PURE__*/_jsx("span", {
       children: "..."
-    })
-  }, themeProps, {
+    }),
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -78,6 +80,7 @@ const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
  * - [DateCalendar API](https://mui.com/x/api/date-pickers/date-calendar/)
  */
 export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps, ref) {
+  var _ref, _slots$calendarHeader, _slotProps$calendarHe;
   const utils = useUtils();
   const id = useId();
   const props = useDateCalendarDefaultizedProps(inProps, 'MuiDateCalendar');
@@ -173,6 +176,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 = (_ref = (_slots$calendarHeader = slots == null ? void 0 : slots.calendarHeader) != null ? _slots$calendarHeader : components == null ? void 0 : components.CalendarHeader) != null ? _ref : PickersCalendarHeader;
+  const calendarHeaderProps = useSlotProps({
+    elementType: CalendarHeader,
+    externalSlotProps: (_slotProps$calendarHe = slotProps == null ? void 0 : slotProps.calendarHeader) != null ? _slotProps$calendarHe : componentsProps == null ? void 0 : 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 +273,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 +297,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/DateCalendar/DateCalendar.types.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
-import { PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps } from './PickersCalendarHeader';
+import { SlotComponentProps } from '@mui/base/utils';
+import { PickersCalendarHeader, PickersCalendarHeaderProps, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps } from '../PickersCalendarHeader';
 import { DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, ExportedDayCalendarProps } from './DayCalendar';
 import { DateCalendarClasses } from './dateCalendarClasses';
 import { BaseDateValidationProps, YearValidationProps, MonthValidationProps, DayValidationProps } from '../internals/models/validation';
@@ -13,8 +14,15 @@ import { SlotsAndSlotProps } from '../internals/utils/slots-migration';
 import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
 import { ExportedMonthCalendarProps } from '../MonthCalendar/MonthCalendar.types';
 export interface DateCalendarSlotsComponent<TDate> extends PickersCalendarHeaderSlotsComponent, DayCalendarSlotsComponent<TDate> {
+    /**
+     * Custom component for calendar header.
+     * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+     * @default PickersCalendarHeader
+     */
+    CalendarHeader?: React.ElementType<PickersCalendarHeaderProps<TDate>>;
 }
 export interface DateCalendarSlotsComponentsProps<TDate> extends PickersCalendarHeaderSlotsComponentsProps<TDate>, DayCalendarSlotsComponentsProps<TDate> {
+    calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateCalendarProps<TDate>>;
 }
 export interface ExportedDateCalendarProps<TDate> extends ExportedDayCalendarProps, ExportedMonthCalendarProps, ExportedYearCalendarProps, BaseDateValidationProps<TDate>, DayValidationProps<TDate>, YearValidationProps<TDate>, MonthValidationProps<TDate>, TimezoneProps {
     /**

package/DateCalendar/index.d.ts

@@ -4,11 +4,10 @@ export { getDateCalendarUtilityClass, dateCalendarClasses } from './dateCalendar
 export type { DateCalendarClassKey, DateCalendarClasses } from './dateCalendarClasses';
 export { dayPickerClasses } from './dayCalendarClasses';
 export type { DayCalendarClassKey, DayCalendarClasses } from './dayCalendarClasses';
-export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
-export type { PickersCalendarHeaderClassKey, PickersCalendarHeaderClasses, } from './pickersCalendarHeaderClasses';
 export type { PickersFadeTransitionGroupProps } from './PickersFadeTransitionGroup';
 export { pickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
 export type { PickersFadeTransitionGroupClassKey, PickersFadeTransitionGroupClasses, } from './pickersFadeTransitionGroupClasses';
 export { pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
 export type { PickersSlideTransitionClassKey, PickersSlideTransitionClasses, } from './pickersSlideTransitionClasses';
 export type { ExportedSlideTransitionProps } from './PickersSlideTransition';
+export * from '../PickersCalendarHeader';

package/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/DateCalendar/useCalendarState.d.ts

@@ -33,7 +33,7 @@ export declare const useCalendarState: <TDate extends unknown>(params: UseCalend
     referenceDate: any;
     calendarState: CalendarState<TDate>;
     changeMonth: (newDate: TDate) => void;
-    changeFocusedDay: (newFocusedDate: TDate | null, withoutMonthSwitchingAnimation?: boolean | undefined) => void;
+    changeFocusedDay: (newFocusedDate: TDate | null, withoutMonthSwitchingAnimation?: boolean) => void;
     isDateDisabled: (day: TDate | null) => boolean;
     onMonthSwitchingAnimationEnd: () => void;
     handleChangeMonth: (payload: ChangeMonthPayload<TDate>) => void;

package/DateField/DateField.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DateFieldProps } from './DateField.types';
-type DateFieldComponent = (<TDate>(props: DateFieldProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type DateFieldComponent = (<TDate>(props: DateFieldProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 declare const DateField: DateFieldComponent;

package/DateField/DateField.js

@@ -39,8 +39,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
@@ -85,6 +85,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/DatePicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DatePickerProps } from './DatePicker.types';
-type DatePickerComponent = (<TDate>(props: DatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type DatePickerComponent = (<TDate>(props: DatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 declare const DatePicker: DatePickerComponent;

package/DatePicker/DatePickerToolbar.d.ts

@@ -9,7 +9,7 @@ export interface DatePickerToolbarProps<TDate> extends BaseToolbarProps<TDate |
 }
 export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {
 }
-type DatePickerToolbarComponent = (<TDate>(props: DatePickerToolbarProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type DatePickerToolbarComponent = (<TDate>(props: DatePickerToolbarProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 declare const DatePickerToolbar: DatePickerToolbarComponent;