@mui/x-date-pickers 6.3.0 → 6.4.0

package/models/adapters.d.ts

@@ -1,59 +1,59 @@
 import { FieldSectionContentType, FieldSectionType } from './fields';
-export interface AdapterFormats<TLibFormatToken = string> {
+export interface AdapterFormats {
     /** Localized full date @example "Jan 1, 2019" */
-    fullDate: TLibFormatToken;
+    fullDate: string;
     /** Partially localized full date with weekday, useful for text-to-speech accessibility @example "Tuesday, January 1, 2019" */
-    fullDateWithWeekday: TLibFormatToken;
+    fullDateWithWeekday: string;
     /** Date format string with month and day of month @example "1 January" */
-    normalDate: TLibFormatToken;
+    normalDate: string;
     /** Date format string with weekday, month and day of month @example "Wed, Jan 1" */
-    normalDateWithWeekday: TLibFormatToken;
+    normalDateWithWeekday: string;
     /** Shorter day format @example "Jan 1" */
-    shortDate: TLibFormatToken;
+    shortDate: string;
     /** Year format string @example "2019" */
-    year: TLibFormatToken;
+    year: string;
     /** Month format string @example "January" */
-    month: TLibFormatToken;
+    month: string;
     /** Short month format string @example "Jan" */
-    monthShort: TLibFormatToken;
+    monthShort: string;
     /** Month with year format string @example "January 2018" */
-    monthAndYear: TLibFormatToken;
+    monthAndYear: string;
     /** Month with date format string @example "January 1" */
-    monthAndDate: TLibFormatToken;
+    monthAndDate: string;
     /** Weekday format string @example "Wednesday" */
-    weekday: TLibFormatToken;
+    weekday: string;
     /** Short weekday format string @example "Wed" */
-    weekdayShort: TLibFormatToken;
+    weekdayShort: string;
     /** Day format string @example "1" */
-    dayOfMonth: TLibFormatToken;
+    dayOfMonth: string;
     /** Hours format string @example "11" */
-    hours12h: TLibFormatToken;
+    hours12h: string;
     /** Hours format string @example "23" */
-    hours24h: TLibFormatToken;
+    hours24h: string;
     /** Minutes format string @example "44" */
-    minutes: TLibFormatToken;
+    minutes: string;
     /** Seconds format string @example "00" */
-    seconds: TLibFormatToken;
+    seconds: string;
     /** Full time localized format string @example "11:44 PM" for US, "23:44" for Europe */
-    fullTime: TLibFormatToken;
+    fullTime: string;
     /** Not localized full time format string @example "11:44 PM" */
-    fullTime12h: TLibFormatToken;
+    fullTime12h: string;
     /** Not localized full time format string @example "23:44" */
-    fullTime24h: TLibFormatToken;
+    fullTime24h: string;
     /** Date & time format string with localized time @example "Jan 1, 2018 11:44 PM" */
-    fullDateTime: TLibFormatToken;
+    fullDateTime: string;
     /** Not localized date & Time format 12h @example "Jan 1, 2018 11:44 PM" */
-    fullDateTime12h: TLibFormatToken;
+    fullDateTime12h: string;
     /** Not localized date & Time format 24h @example "Jan 1, 2018 23:44" */
-    fullDateTime24h: TLibFormatToken;
+    fullDateTime24h: string;
     /** Localized keyboard input friendly date format @example "02/13/2020 */
-    keyboardDate: TLibFormatToken;
+    keyboardDate: string;
     /** Localized keyboard input friendly date/time format @example "02/13/2020 23:44" */
-    keyboardDateTime: TLibFormatToken;
+    keyboardDateTime: string;
     /** Partially localized keyboard input friendly date/time 12h format @example "02/13/2020 11:44 PM" */
-    keyboardDateTime12h: TLibFormatToken;
+    keyboardDateTime12h: string;
     /** Partially localized keyboard input friendly date/time 24h format @example "02/13/2020 23:44" */
-    keyboardDateTime24h: TLibFormatToken;
+    keyboardDateTime24h: string;
 }
 export type AdapterUnits = 'years' | 'quarters' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds' | 'milliseconds';
 export type FieldFormatTokenMap = {
@@ -63,16 +63,23 @@ export type FieldFormatTokenMap = {
         maxLength?: number;
     };
 };
-export interface MuiPickersAdapter<TDate> {
+type PropertyIfNotNever<PName extends string, PType> = [PType] extends [never] ? {} : {
+    [P in PName]?: PType;
+};
+export type AdapterOptions<TLocale, TInstance> = {
+    formats?: Partial<AdapterFormats>;
+    locale?: TLocale;
+} & PropertyIfNotNever<'instance', TInstance>;
+export interface MuiPickersAdapter<TDate, TLocale = any> {
     /**
      * A boolean confirming that the adapter used is an MUI adapter.
      */
     isMUIAdapter: boolean;
-    formats: AdapterFormats<any>;
-    locale?: any;
-    moment?: any;
-    dayjs?: any;
-    /** Name of the library that is used right now */
+    formats: AdapterFormats;
+    locale?: TLocale;
+    /**
+     * Name of the library that is used right now
+     */
     lib: string;
     /**
      * The characters used to escape a string inside a format.
@@ -96,7 +103,6 @@ export interface MuiPickersAdapter<TDate> {
     date(value?: any): TDate | null;
     /**
      * Convert a date in the library format into a JavaScript `Date` object.
-     * @deprecate Will be removed in v7.
      * @template TDate
      * @param {TDate} value The value to convert.
      * @returns {Date} the JavaScript date.
@@ -527,6 +533,7 @@ export interface MuiPickersAdapter<TDate> {
     getMonthArray(value: TDate): TDate[];
     /**
      * Create a date with the date of the first param and the time of the second param.
+     * @deprecated Use `adapter.setHours`, `adapter.setMinutes` and `adapter.setSeconds`.
      * @template TDate
      * @param {TDate} dateParam Param from which we want to get the date.
      * @param {TDate} timeParam Param from which we want to get the time.
@@ -567,3 +574,4 @@ export interface MuiPickersAdapter<TDate> {
      */
     getMeridiemText(meridiem: 'am' | 'pm'): string;
 }
+export {};

package/modern/AdapterDateFns/AdapterDateFns.js

@@ -22,7 +22,6 @@ import endOfWeek from 'date-fns/endOfWeek';
 import endOfYear from 'date-fns/endOfYear';
 import dateFnsFormat from 'date-fns/format';
 import getDate from 'date-fns/getDate';
-import getDay from 'date-fns/getDay';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
 import getHours from 'date-fns/getHours';
 import getMinutes from 'date-fns/getMinutes';
@@ -558,17 +557,12 @@ export class AdapterDateFns {
       let count = 0;
       let current = start;
       const nestedWeeks = [];
-      let lastDay = null;
       while (isBefore(current, end)) {
         const weekNumber = Math.floor(count / 7);
         nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
-        const day = getDay(current);
-        if (lastDay !== day) {
-          lastDay = day;
-          nestedWeeks[weekNumber].push(current);
-          count += 1;
-        }
+        nestedWeeks[weekNumber].push(current);
         current = addDays(current, 1);
+        count += 1;
       }
       return nestedWeeks;
     };

package/modern/AdapterDateFnsJalali/AdapterDateFnsJalali.js

@@ -28,7 +28,6 @@ import getWeek from 'date-fns-jalali/getWeek';
 import getYear from 'date-fns-jalali/getYear';
 import getMonth from 'date-fns-jalali/getMonth';
 import getDate from 'date-fns-jalali/getDate';
-import getDay from 'date-fns-jalali/getDay';
 import getDaysInMonth from 'date-fns-jalali/getDaysInMonth';
 import getMinutes from 'date-fns-jalali/getMinutes';
 import isAfter from 'date-fns-jalali/isAfter';
@@ -569,17 +568,12 @@ export class AdapterDateFnsJalali {
       let count = 0;
       let current = start;
       const nestedWeeks = [];
-      let lastDay = null;
       while (isBefore(current, end)) {
         const weekNumber = Math.floor(count / 7);
         nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
-        const day = getDay(current);
-        if (lastDay !== day) {
-          lastDay = day;
-          nestedWeeks[weekNumber].push(current);
-          count += 1;
-        }
+        nestedWeeks[weekNumber].push(current);
         current = addDays(current, 1);
+        count += 1;
       }
       return nestedWeeks;
     };

package/modern/AdapterDayjs/AdapterDayjs.js

@@ -167,7 +167,7 @@ export class AdapterDayjs {
     };
     this.formatTokenMap = formatTokenMap;
     this.getLocaleFormats = () => {
-      const locales = this.rawDayJsInstance.Ls ?? defaultDayjs.Ls;
+      const locales = defaultDayjs.Ls;
       const locale = this.locale || 'en';
       let localeObject = locales[locale];
       if (localeObject === undefined) {
@@ -369,7 +369,7 @@ export class AdapterDayjs {
       const monthArray = [firstMonth];
       while (monthArray.length < 12) {
         const prevMonth = monthArray[monthArray.length - 1];
-        monthArray.push(this.getNextMonth(prevMonth));
+        monthArray.push(this.addMonths(prevMonth, 1));
       }
       return monthArray;
     };

package/modern/AdapterLuxon/AdapterLuxon.js

@@ -9,7 +9,11 @@ const formatTokenMap = {
     maxLength: 4
   },
   yy: 'year',
-  yyyy: 'year',
+  yyyy: {
+    sectionType: 'year',
+    contentType: 'digit',
+    maxLength: 4
+  },
   // Month
   L: {
     sectionType: 'month',
@@ -227,9 +231,6 @@ export class AdapterLuxon {
       })?.resolvedOptions()?.hour12);
     };
     this.expandFormat = format => {
-      if (!DateTime.expandFormat) {
-        throw Error('Your luxon version does not support `expandFormat`. Consider upgrading it to v3.0.2');
-      }
       // Extract escaped section to avoid extending them
       const longFormatRegexp = /''|'(''|[^'])+('|$)|[^']*/g;
       return format.match(longFormatRegexp).map(token => {
@@ -453,7 +454,7 @@ export class AdapterLuxon {
       const monthArray = [firstMonth];
       while (monthArray.length < 12) {
         const prevMonth = monthArray[monthArray.length - 1];
-        monthArray.push(this.getNextMonth(prevMonth));
+        monthArray.push(this.addMonths(prevMonth, 1));
       }
       return monthArray;
     };

package/modern/AdapterMoment/AdapterMoment.js

@@ -359,7 +359,7 @@ export class AdapterMoment {
       return value.clone().subtract(1, 'month');
     };
     this.getMonthArray = value => {
-      const firstMonth = value.clone().startOf('year');
+      const firstMonth = this.startOfYear(value);
       const monthArray = [firstMonth];
       while (monthArray.length < 12) {
         const prevMonth = monthArray[monthArray.length - 1];
@@ -405,7 +405,7 @@ export class AdapterMoment {
     this.getMeridiemText = ampm => {
       if (this.is12HourCycleInCurrentLocale()) {
         // AM/PM translation only possible in those who have 12 hour cycle in locale.
-        return this.moment.localeData(this.getCurrentLocaleCode()).meridiem(ampm === 'am' ? 0 : 13, 0, false);
+        return defaultMoment.localeData(this.getCurrentLocaleCode()).meridiem(ampm === 'am' ? 0 : 13, 0, false);
       }
       return ampm === 'am' ? 'AM' : 'PM'; // fallback for de, ru, ...etc
     };

package/modern/AdapterMomentHijri/AdapterMomentHijri.js

@@ -142,15 +142,9 @@ export class AdapterMomentHijri extends AdapterMoment {
       locale: 'ar-SA',
       instance
     });
-    this.isMUIAdapter = true;
+    this.lib = 'moment-hijri';
+    this.moment = void 0;
     this.formatTokenMap = formatTokenMap;
-    this.escapedCharacters = {
-      start: '[',
-      end: ']'
-    };
-    this.toIMoment = value => {
-      return this.moment(value ? value.clone() : undefined).locale('ar-SA');
-    };
     this.date = value => {
       if (value === null) {
         return null;
@@ -219,7 +213,7 @@ export class AdapterMomentHijri extends AdapterMoment {
     };
     this.getWeekdays = () => {
       return [0, 1, 2, 3, 4, 5, 6].map(dayOfWeek => {
-        return this.toIMoment().weekday(dayOfWeek).format('dd');
+        return this.date().weekday(dayOfWeek).format('dd');
       });
     };
     this.getWeekArray = value => {
@@ -260,7 +254,7 @@ export class AdapterMomentHijri extends AdapterMoment {
       return years;
     };
     this.getMeridiemText = ampm => {
-      return ampm === 'am' ? this.toIMoment().hours(2).format('A') : this.toIMoment().hours(14).format('A');
+      return ampm === 'am' ? this.date().hours(2).format('A') : this.date().hours(14).format('A');
     };
     this.moment = instance || defaultHMoment;
     this.locale = 'ar-SA';

package/modern/AdapterMomentJalaali/AdapterMomentJalaali.js

@@ -140,25 +140,18 @@ export class AdapterMomentJalaali extends AdapterMoment {
       locale: 'fa',
       instance
     });
-    this.isMUIAdapter = true;
     this.lib = 'moment-jalaali';
     this.moment = void 0;
-    this.locale = void 0;
-    this.formats = void 0;
     this.formatTokenMap = formatTokenMap;
-    this.escapedCharacters = {
-      start: '[',
-      end: ']'
-    };
-    this.toJMoment = value => {
-      return this.moment(value ? value.clone() : undefined).locale('fa');
-    };
     this.date = value => {
       if (value === null) {
         return null;
       }
       return this.moment(value).locale('fa');
     };
+    this.parseISO = isoString => {
+      return this.moment(isoString).locale('fa');
+    };
     this.parse = (value, format) => {
       if (value === '') {
         return null;
@@ -184,6 +177,16 @@ export class AdapterMomentJalaali extends AdapterMoment {
       }
       return this.moment(value).isSame(comparing);
     };
+    this.isSameYear = (value, comparing) => {
+      // `isSame` seems to mutate the date on `moment-jalaali`
+      // @ts-ignore
+      return value.clone().isSame(comparing, 'jYear');
+    };
+    this.isSameMonth = (value, comparing) => {
+      // `isSame` seems to mutate the date on `moment-jalaali`
+      // @ts-ignore
+      return value.clone().isSame(comparing, 'jMonth');
+    };
     this.isAfterYear = (value, comparing) => {
       return value.jYear() > comparing.jYear();
     };
@@ -234,7 +237,7 @@ export class AdapterMomentJalaali extends AdapterMoment {
     };
     this.getWeekdays = () => {
       return [0, 1, 2, 3, 4, 5, 6].map(dayOfWeek => {
-        return this.toJMoment().weekday(dayOfWeek).format('dd');
+        return this.date().weekday(dayOfWeek).format('dd');
       });
     };
     this.getWeekArray = value => {
@@ -267,7 +270,7 @@ export class AdapterMomentJalaali extends AdapterMoment {
       return years;
     };
     this.getMeridiemText = ampm => {
-      return ampm === 'am' ? this.toJMoment().hours(2).format('A') : this.toJMoment().hours(14).format('A');
+      return ampm === 'am' ? this.date().hours(2).format('A') : this.date().hours(14).format('A');
     };
     this.moment = instance || defaultJMoment;
     this.locale = 'fa';

package/modern/DateCalendar/DateCalendar.js

@@ -14,7 +14,7 @@ import { MonthCalendar } from '../MonthCalendar';
 import { YearCalendar } from '../YearCalendar';
 import { useViews } from '../internals/hooks/useViews';
 import { PickersCalendarHeader } from './PickersCalendarHeader';
-import { findClosestEnabledDate, applyDefaultDate } from '../internals/utils/date-utils';
+import { findClosestEnabledDate, applyDefaultDate, mergeDateAndTime } from '../internals/utils/date-utils';
 import { PickerViewRoot } from '../internals/components/PickerViewRoot';
 import { defaultReduceAnimations } from '../internals/utils/defaultReduceAnimations';
 import { getDateCalendarUtilityClass } from './dateCalendarClasses';
@@ -209,7 +209,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   const handleSelectedDayChange = useEventCallback(day => {
     if (value && day) {
       // If there is a date already selected, then we want to keep its time
-      return setValueAndGoToNextView(utils.mergeDateAndTime(day, value), 'finish');
+      return setValueAndGoToNextView(mergeDateAndTime(utils, day, value), 'finish');
     }
     return setValueAndGoToNextView(day, 'finish');
   });

package/modern/DateCalendar/DayCalendar.js

@@ -215,6 +215,7 @@ export function DayCalendar(inProps) {
   });
   const classes = useUtilityClasses(props);
   const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
   const {
     onFocusedDayChange,
     className,
@@ -289,13 +290,13 @@ export function DayCalendar(inProps) {
         break;
       case 'ArrowLeft':
         {
-          const newFocusedDayDefault = utils.addDays(day, theme.direction === 'ltr' ? -1 : 1);
-          const nextAvailableMonth = theme.direction === 'ltr' ? utils.getPreviousMonth(day) : utils.getNextMonth(day);
+          const newFocusedDayDefault = utils.addDays(day, isRTL ? 1 : -1);
+          const nextAvailableMonth = utils.addMonths(day, isRTL ? 1 : -1);
           const closestDayToFocus = findClosestEnabledDate({
             utils,
             date: newFocusedDayDefault,
-            minDate: theme.direction === 'ltr' ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
-            maxDate: theme.direction === 'ltr' ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
+            minDate: isRTL ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
+            maxDate: isRTL ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
             isDateDisabled
           });
           focusDay(closestDayToFocus || newFocusedDayDefault);
@@ -304,13 +305,13 @@ export function DayCalendar(inProps) {
         }
       case 'ArrowRight':
         {
-          const newFocusedDayDefault = utils.addDays(day, theme.direction === 'ltr' ? 1 : -1);
-          const nextAvailableMonth = theme.direction === 'ltr' ? utils.getNextMonth(day) : utils.getPreviousMonth(day);
+          const newFocusedDayDefault = utils.addDays(day, isRTL ? -1 : 1);
+          const nextAvailableMonth = utils.addMonths(day, isRTL ? -1 : 1);
           const closestDayToFocus = findClosestEnabledDate({
             utils,
             date: newFocusedDayDefault,
-            minDate: theme.direction === 'ltr' ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
-            maxDate: theme.direction === 'ltr' ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            minDate: isRTL ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            maxDate: isRTL ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
             isDateDisabled
           });
           focusDay(closestDayToFocus || newFocusedDayDefault);
@@ -326,11 +327,11 @@ export function DayCalendar(inProps) {
         event.preventDefault();
         break;
       case 'PageUp':
-        focusDay(utils.getNextMonth(day));
+        focusDay(utils.addMonths(day, 1));
         event.preventDefault();
         break;
       case 'PageDown':
-        focusDay(utils.getPreviousMonth(day));
+        focusDay(utils.addMonths(day, -1));
         event.preventDefault();
         break;
       default:

package/modern/DateCalendar/PickersCalendarHeader.js

@@ -140,8 +140,8 @@ export function PickersCalendarHeader(inProps) {
       className: classes.switchViewIcon
     }),
     switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
-  const selectNextMonth = () => onMonthChange(utils.getNextMonth(month), 'left');
-  const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(month), 'right');
+  const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1), 'left');
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1), 'right');
   const isNextMonthDisabled = useNextMonthDisabled(month, {
     disableFuture,
     maxDate

package/modern/DateField/DateField.js

@@ -204,6 +204,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/DateTimeField/DateTimeField.js

@@ -237,6 +237,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -31,7 +31,9 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? true;
   const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
-  const views = defaultizedProps.ampm ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views;
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
+  const views = defaultizedProps.ampm && shouldHoursRendererContainMeridiemView ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views;
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {

package/modern/LocalizationProvider/LocalizationProvider.js

@@ -12,7 +12,7 @@ if (process.env.NODE_ENV !== 'production') {
 /**
  * @ignore - do not document.
  */
-export function LocalizationProvider(inProps) {
+export const LocalizationProvider = function LocalizationProvider(inProps) {
   const {
       localeText: inLocaleText
     } = inProps,
@@ -76,7 +76,7 @@ export function LocalizationProvider(inProps) {
     value: contextValue,
     children: children
   });
-}
+};
 process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -85,7 +85,7 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
   /**
    * Locale for the date library you are using
    */
-  adapterLocale: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  adapterLocale: PropTypes.any,
   children: PropTypes.node,
   /**
    * Date library adapter class function.

package/modern/MonthCalendar/MonthCalendar.js

@@ -10,7 +10,7 @@ import { unstable_useControlled as useControlled, unstable_composeClasses as com
 import { PickersMonth } from './PickersMonth';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
 import { getMonthCalendarUtilityClass } from './monthCalendarClasses';
-import { applyDefaultDate } from '../internals/utils/date-utils';
+import { applyDefaultDate, getMonthsInYear } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -175,7 +175,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: utils.getMonthArray(selectedDateOrStartOfMonth).map(month => {
+    children: getMonthsInYear(utils, selectedDateOrStartOfMonth).map(month => {
       const monthNumber = utils.getMonth(month);
       const monthText = utils.format(month, 'monthShort');
       const isSelected = monthNumber === selectedMonth;

package/modern/TimeField/TimeField.js

@@ -221,6 +221,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.3.0
+ * @mui/x-date-pickers v6.4.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { getMonthsInYear } from '../../utils/date-utils';
 export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
   if (config == null) {
@@ -47,7 +48,7 @@ export const getLetterEditingOptions = (utils, sectionType, format) => {
   switch (sectionType) {
     case 'month':
       {
-        return utils.getMonthArray(utils.date()).map(month => utils.formatByString(month, format));
+        return getMonthsInYear(utils, utils.date()).map(month => utils.formatByString(month, format));
       }
     case 'weekDay':
       {
@@ -312,7 +313,7 @@ const getEscapedPartsFromFormat = (utils, format) => {
   }
   return escapedParts;
 };
-export const splitFormatIntoSections = (utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros) => {
+export const splitFormatIntoSections = (utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
   let startSeparator = '';
   const sections = [];
   const now = utils.date();
@@ -400,7 +401,7 @@ export const splitFormatIntoSections = (utils, localeText, format, date, formatD
   return sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;
-      if (cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
+      if (isRTL && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
         cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
       }
       if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {
@@ -460,7 +461,7 @@ export const getSectionsBoundaries = utils => {
   const {
     maxDaysInMonth,
     longestMonth
-  } = utils.getMonthArray(today).reduce((acc, month) => {
+  } = getMonthsInYear(utils, today).reduce((acc, month) => {
     const daysInMonth = utils.getDaysInMonth(month);
     if (daysInMonth > acc.maxDaysInMonth) {
       return {

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

@@ -30,7 +30,7 @@ export const useFieldState = params => {
   const firstDefaultValue = React.useRef(defaultValue);
   const valueFromTheOutside = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
   const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils), [utils]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros)), [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity]);
+  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL)), [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity]);
   const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
@@ -154,7 +154,7 @@ export const useFieldState = params => {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      const sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros);
+      const sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
       return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);

package/modern/internals/utils/date-utils.js

@@ -69,4 +69,20 @@ export const areDatesEqual = (utils, a, b) => {
     return true;
   }
   return utils.isEqual(a, b);
+};
+export const getMonthsInYear = (utils, year) => {
+  const firstMonth = utils.startOfYear(year);
+  const months = [firstMonth];
+  while (months.length < 12) {
+    const prevMonth = months[months.length - 1];
+    months.push(utils.addMonths(prevMonth, 1));
+  }
+  return months;
+};
+export const mergeDateAndTime = (utils, dateParam, timeParam) => {
+  let mergedDate = dateParam;
+  mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));
+  mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
+  mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
+  return mergedDate;
 };

package/modern/internals/utils/validation/extractValidationProps.js

@@ -1,4 +1,4 @@
-const VALIDATION_PROP_NAMES = ['disablePast', 'disableFuture', 'minDate', 'maxDate', 'minTime', 'maxTime', 'minDateTime', 'maxDateTime', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'shouldDisableClock', 'shouldDisableTime', 'minuteStep'];
+const VALIDATION_PROP_NAMES = ['disablePast', 'disableFuture', 'minDate', 'maxDate', 'minTime', 'maxTime', 'minDateTime', 'maxDateTime', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'shouldDisableClock', 'shouldDisableTime', 'minutesStep'];
 /**
  * Extract the validation props for the props received by a component.
  * Limit the risk of forgetting some of them and reduce the bundle size.