@mui/x-date-pickers 7.15.0 → 7.17.0

package/locales/zhCN.d.ts

@@ -23,13 +23,13 @@ export declare const zhCN: {
                     clearButtonLabel?: string | undefined;
                     okButtonLabel?: string | undefined;
                     todayButtonLabel?: string | undefined;
-                    clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, time: any, adapter: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>) => string) | undefined;
+                    clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, time: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedTime?: string | null) => string) | undefined;
                     hoursClockNumberText?: ((hours: string) => string) | undefined;
                     minutesClockNumberText?: ((minutes: string) => string) | undefined;
                     secondsClockNumberText?: ((seconds: string) => string) | undefined;
                     selectViewText?: ((view: TimeViewWithMeridiem) => string) | undefined;
-                    openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>) => string) | undefined;
-                    openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>) => string) | undefined;
+                    openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedDate: string | null) => string) | undefined;
+                    openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedTime: string | null) => string) | undefined;
                     fieldClearLabel?: string | undefined;
                     timeTableLabel?: string | undefined;
                     dateTableLabel?: string | undefined;

package/locales/zhCN.js

@@ -1,4 +1,4 @@
-import { getPickersLocalization } from './utils/getPickersLocalization';
+import { getPickersLocalization } from "./utils/getPickersLocalization.js";
 const views = {
   hours: '小时',
   minutes: '分钟',
@@ -31,7 +31,7 @@ const zhCNPickers = {
   timePickerToolbarTitle: '选择时间',
   dateRangePickerToolbarTitle: '选择时间范围',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `选择 ${views[view]}. ${time === null ? '未选择时间' : `已选择${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `选择 ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? '未选择时间' : `已选择${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours}小时`,
   minutesClockNumberText: minutes => `${minutes}分钟`,
   secondsClockNumberText: seconds => `${seconds}秒`,
@@ -43,8 +43,8 @@ const zhCNPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `第${weekNumber}周`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `选择日期，已选择${utils.format(value, 'fullDate')}` : '选择日期',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `选择时间，已选择${utils.format(value, 'fullTime')}` : '选择时间',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `选择日期，已选择${formattedDate ?? utils.format(value, 'fullDate')}` : '选择日期',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `选择时间，已选择${formattedTime ?? utils.format(value, 'fullTime')}` : '选择时间',
   fieldClearLabel: '清除',
   // Table labels
   timeTableLabel: '选择时间',

package/locales/zhHK.d.ts

@@ -23,13 +23,13 @@ export declare const zhHK: {
                     clearButtonLabel?: string | undefined;
                     okButtonLabel?: string | undefined;
                     todayButtonLabel?: string | undefined;
-                    clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, time: any, adapter: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>) => string) | undefined;
+                    clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, time: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedTime?: string | null) => string) | undefined;
                     hoursClockNumberText?: ((hours: string) => string) | undefined;
                     minutesClockNumberText?: ((minutes: string) => string) | undefined;
                     secondsClockNumberText?: ((seconds: string) => string) | undefined;
                     selectViewText?: ((view: TimeViewWithMeridiem) => string) | undefined;
-                    openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>) => string) | undefined;
-                    openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>) => string) | undefined;
+                    openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedDate: string | null) => string) | undefined;
+                    openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers/models").MuiPickersAdapter<any, any>, formattedTime: string | null) => string) | undefined;
                     fieldClearLabel?: string | undefined;
                     timeTableLabel?: string | undefined;
                     dateTableLabel?: string | undefined;

package/locales/zhHK.js

@@ -1,4 +1,4 @@
-import { getPickersLocalization } from './utils/getPickersLocalization';
+import { getPickersLocalization } from "./utils/getPickersLocalization.js";
 const views = {
   hours: '小時',
   minutes: '分鐘',
@@ -31,7 +31,7 @@ const zhHKPickers = {
   timePickerToolbarTitle: '選擇時間',
   dateRangePickerToolbarTitle: '選擇時間範圍',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `選擇 ${views[view]}. ${time === null ? '未選擇時間' : `已選擇${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `選擇 ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? '未選擇時間' : `已選擇${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours}小時`,
   minutesClockNumberText: minutes => `${minutes}分鐘`,
   secondsClockNumberText: seconds => `${seconds}秒`,
@@ -43,8 +43,8 @@ const zhHKPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `第${weekNumber}週`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `選擇日期，已選擇${utils.format(value, 'fullDate')}` : '選擇日期',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `選擇時間，已選擇${utils.format(value, 'fullTime')}` : '選擇時間',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `選擇日期，已選擇${formattedDate ?? utils.format(value, 'fullDate')}` : '選擇日期',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `選擇時間，已選擇${formattedTime ?? utils.format(value, 'fullTime')}` : '選擇時間',
   fieldClearLabel: '清除',
   // Table labels
   timeTableLabel: '選擇時間',

package/models/index.d.ts

@@ -5,3 +5,4 @@ export * from './views';
 export * from './adapters';
 export * from './common';
 export * from './pickers';
+export type { PropsFromSlot } from '@mui/x-internals/slots';

package/models/index.js

@@ -1,7 +1,10 @@
-export * from './fields';
-export * from './timezone';
-export * from './validation';
-export * from './views';
-export * from './adapters';
-export * from './common';
-export * from './pickers';
+export * from "./fields.js";
+export * from "./timezone.js";
+export * from "./validation.js";
+export * from "./views.js";
+export * from "./adapters.js";
+export * from "./common.js";
+export * from "./pickers.js";
+
+// Utils shared across the X packages
+export {};

package/models/validation.d.ts

@@ -5,4 +5,17 @@ type CommonDateTimeValidationError = 'invalidDate' | 'disableFuture' | 'disableP
 export type DateValidationError = CommonDateTimeValidationError | 'shouldDisableDate' | 'shouldDisableMonth' | 'shouldDisableYear' | 'minDate' | 'maxDate';
 export type TimeValidationError = CommonDateTimeValidationError | 'minutesStep' | 'minTime' | 'maxTime' | 'shouldDisableTime-hours' | 'shouldDisableTime-minutes' | 'shouldDisableTime-seconds';
 export type DateTimeValidationError = DateValidationError | TimeValidationError;
+export interface OnErrorProps<TValue, TError> {
+    /**
+     * Callback fired when the error associated with the current value changes.
+     * When a validation error is detected, the `error` parameter contains a non-null value.
+     * This can be used to render an appropriate form error.
+     * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+     * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+     * @param {TError} error The reason why the current value is not valid.
+     * @param {TValue} value The value associated with the error.
+     */
+    onError?: (error: TError, value: TValue) => void;
+}
+export type InferError<TProps> = TProps extends Pick<OnErrorProps<any, any>, 'onError'> ? Parameters<Exclude<TProps['onError'], undefined>>[0] : never;
 export {};

package/modern/AdapterDateFns/AdapterDateFns.js

@@ -44,7 +44,7 @@ import isWithinInterval from 'date-fns/isWithinInterval';
 import defaultLocale from 'date-fns/locale/en-US';
 // @ts-ignore
 import longFormatters from 'date-fns/_lib/format/longFormatters';
-import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
+import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
 /**
  * Based on `@date-io/date-fns`
  *

package/modern/AdapterDateFns/index.js

@@ -1 +1 @@
-export { AdapterDateFns } from './AdapterDateFns';
+export { AdapterDateFns } from "./AdapterDateFns.js";

package/modern/AdapterDateFnsBase/index.js

@@ -1 +1 @@
-export { AdapterDateFnsBase } from './AdapterDateFnsBase';
+export { AdapterDateFnsBase } from "./AdapterDateFnsBase.js";

package/modern/AdapterDateFnsJalali/AdapterDateFnsJalali.js

@@ -45,7 +45,7 @@ import isWithinInterval from 'date-fns-jalali/isWithinInterval';
 import defaultLocale from 'date-fns-jalali/locale/fa-IR';
 // @ts-ignore
 import longFormatters from 'date-fns-jalali/_lib/format/longFormatters';
-import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
+import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
 const defaultFormats = {
   year: 'yyyy',
   month: 'LLLL',

package/modern/AdapterDateFnsJalali/index.js

@@ -1 +1 @@
-export { AdapterDateFnsJalali } from './AdapterDateFnsJalali';
+export { AdapterDateFnsJalali } from "./AdapterDateFnsJalali.js";

package/modern/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.js

@@ -48,7 +48,7 @@ import { faIR as defaultLocale } from 'date-fns-jalali/locale/fa-IR';
 // date-fns-jalali v2 does not export types
 // @ts-ignore TODO remove when date-fns-jalali-v3 is the default
 
-import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
+import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
 const defaultFormats = {
   year: 'yyyy',
   month: 'LLLL',

package/modern/AdapterDateFnsJalaliV3/index.js

@@ -1 +1 @@
-export { AdapterDateFnsJalali } from './AdapterDateFnsJalaliV3';
+export { AdapterDateFnsJalali } from "./AdapterDateFnsJalaliV3.js";

package/modern/AdapterDateFnsV3/AdapterDateFnsV3.js

@@ -48,7 +48,7 @@ import { enUS } from 'date-fns/locale/en-US';
 // date-fns v2 does not export types
 // @ts-ignore TODO remove when date-fns-v3 is the default
 
-import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
+import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
 /**
  * Based on `@date-io/date-fns`
  *

package/modern/AdapterDateFnsV3/index.js

@@ -1 +1 @@
-export { AdapterDateFns } from './AdapterDateFnsV3';
+export { AdapterDateFns } from "./AdapterDateFnsV3.js";

package/modern/AdapterDayjs/AdapterDayjs.js

@@ -6,7 +6,7 @@ import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
 import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
 import isBetweenPlugin from 'dayjs/plugin/isBetween';
 import advancedFormatPlugin from 'dayjs/plugin/advancedFormat';
-import { warnOnce } from '../internals/utils/warning';
+import { warnOnce } from '@mui/x-internals/warning';
 defaultDayjs.extend(localizedFormatPlugin);
 defaultDayjs.extend(weekOfYearPlugin);
 defaultDayjs.extend(isBetweenPlugin);
@@ -427,7 +427,7 @@ export class AdapterDayjs {
       return this.adjustOffset(value.startOf('month'));
     };
     this.startOfWeek = value => {
-      return this.adjustOffset(value.startOf('week'));
+      return this.adjustOffset(this.setLocaleToValue(value).startOf('week'));
     };
     this.startOfDay = value => {
       return this.adjustOffset(value.startOf('day'));
@@ -439,7 +439,7 @@ export class AdapterDayjs {
       return this.adjustOffset(value.endOf('month'));
     };
     this.endOfWeek = value => {
-      return this.adjustOffset(value.endOf('week'));
+      return this.adjustOffset(this.setLocaleToValue(value).endOf('week'));
     };
     this.endOfDay = value => {
       return this.adjustOffset(value.endOf('day'));
@@ -511,9 +511,8 @@ export class AdapterDayjs {
       return value.daysInMonth();
     };
     this.getWeekArray = value => {
-      const cleanValue = this.setLocaleToValue(value);
-      const start = this.startOfWeek(this.startOfMonth(cleanValue));
-      const end = this.endOfWeek(this.endOfMonth(cleanValue));
+      const start = this.startOfWeek(this.startOfMonth(value));
+      const end = this.endOfWeek(this.endOfMonth(value));
       let count = 0;
       let current = start;
       const nestedWeeks = [];

package/modern/AdapterDayjs/index.js

@@ -1 +1 @@
-export { AdapterDayjs } from './AdapterDayjs';
+export { AdapterDayjs } from "./AdapterDayjs.js";

package/modern/AdapterLuxon/AdapterLuxon.js

@@ -344,7 +344,7 @@ export class AdapterLuxon {
       return value.startOf('month');
     };
     this.startOfWeek = value => {
-      return value.startOf('week', {
+      return this.setLocaleToValue(value).startOf('week', {
         useLocaleWeeks: true
       });
     };
@@ -358,7 +358,7 @@ export class AdapterLuxon {
       return value.endOf('month');
     };
     this.endOfWeek = value => {
-      return value.endOf('week', {
+      return this.setLocaleToValue(value).endOf('week', {
         useLocaleWeeks: true
       });
     };
@@ -461,9 +461,8 @@ export class AdapterLuxon {
       return value.daysInMonth;
     };
     this.getWeekArray = value => {
-      const cleanValue = this.setLocaleToValue(value);
-      const firstDay = this.startOfWeek(this.startOfMonth(cleanValue));
-      const lastDay = this.endOfWeek(this.endOfMonth(cleanValue));
+      const firstDay = this.startOfWeek(this.startOfMonth(value));
+      const lastDay = this.endOfWeek(this.endOfMonth(value));
       const {
         days
       } = lastDay.diff(firstDay, 'days').toObject();

package/modern/AdapterLuxon/index.js

@@ -1 +1 @@
-export { AdapterLuxon } from './AdapterLuxon';
+export { AdapterLuxon } from "./AdapterLuxon.js";

package/modern/AdapterMoment/AdapterMoment.js

@@ -341,7 +341,7 @@ export class AdapterMoment {
       return value.clone().startOf('month');
     };
     this.startOfWeek = value => {
-      return value.clone().startOf('week');
+      return this.setLocaleToValue(value.clone()).startOf('week');
     };
     this.startOfDay = value => {
       return value.clone().startOf('day');
@@ -353,7 +353,7 @@ export class AdapterMoment {
       return value.clone().endOf('month');
     };
     this.endOfWeek = value => {
-      return value.clone().endOf('week');
+      return this.setLocaleToValue(value.clone()).endOf('week');
     };
     this.endOfDay = value => {
       return value.clone().endOf('day');
@@ -425,9 +425,8 @@ export class AdapterMoment {
       return value.daysInMonth();
     };
     this.getWeekArray = value => {
-      const cleanValue = this.setLocaleToValue(value);
-      const start = this.startOfWeek(this.startOfMonth(cleanValue));
-      const end = this.endOfWeek(this.endOfMonth(cleanValue));
+      const start = this.startOfWeek(this.startOfMonth(value));
+      const end = this.endOfWeek(this.endOfMonth(value));
       let count = 0;
       let current = start;
       const nestedWeeks = [];

package/modern/AdapterMoment/index.js

@@ -1 +1 @@
-export { AdapterMoment } from './AdapterMoment';
+export { AdapterMoment } from "./AdapterMoment.js";

package/modern/AdapterMomentHijri/AdapterMomentHijri.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 /* eslint-disable class-methods-use-this */
 import defaultHMoment from 'moment-hijri';
-import { AdapterMoment } from '../AdapterMoment';
+import { AdapterMoment } from "../AdapterMoment/index.js";
 // From https://momentjs.com/docs/#/displaying/format/
 const formatTokenMap = {
   // Year

package/modern/AdapterMomentHijri/index.js

@@ -1 +1 @@
-export { AdapterMomentHijri } from './AdapterMomentHijri';
+export { AdapterMomentHijri } from "./AdapterMomentHijri.js";

package/modern/AdapterMomentJalaali/AdapterMomentJalaali.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 /* eslint-disable class-methods-use-this */
 import defaultJMoment from 'moment-jalaali';
-import { AdapterMoment } from '../AdapterMoment';
+import { AdapterMoment } from "../AdapterMoment/index.js";
 // From https://momentjs.com/docs/#/displaying/format/
 const formatTokenMap = {
   // Year

package/modern/AdapterMomentJalaali/index.js

@@ -1 +1 @@
-export { AdapterMomentJalaali } from './AdapterMomentJalaali';
+export { AdapterMomentJalaali } from "./AdapterMomentJalaali.js";

package/modern/DateCalendar/DateCalendar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow", "timezone"];
@@ -7,21 +9,21 @@ import clsx from 'clsx';
 import useSlotProps from '@mui/utils/useSlotProps';
 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';
-import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
-import { PickersFadeTransitionGroup } from './PickersFadeTransitionGroup';
-import { DayCalendar } from './DayCalendar';
-import { MonthCalendar } from '../MonthCalendar';
-import { YearCalendar } from '../YearCalendar';
-import { useViews } from '../internals/hooks/useViews';
-import { PickersCalendarHeader } from '../PickersCalendarHeader';
-import { findClosestEnabledDate, applyDefaultDate, mergeDateAndTime } from '../internals/utils/date-utils';
-import { PickerViewRoot } from '../internals/components/PickerViewRoot';
-import { useDefaultReduceAnimations } from '../internals/hooks/useDefaultReduceAnimations';
-import { getDateCalendarUtilityClass } from './dateCalendarClasses';
-import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { VIEW_HEIGHT } from '../internals/constants/dimensions';
+import { useCalendarState } from "./useCalendarState.js";
+import { useDefaultDates, useUtils } from "../internals/hooks/useUtils.js";
+import { PickersFadeTransitionGroup } from "./PickersFadeTransitionGroup.js";
+import { DayCalendar } from "./DayCalendar.js";
+import { MonthCalendar } from "../MonthCalendar/index.js";
+import { YearCalendar } from "../YearCalendar/index.js";
+import { useViews } from "../internals/hooks/useViews.js";
+import { PickersCalendarHeader } from "../PickersCalendarHeader/index.js";
+import { findClosestEnabledDate, applyDefaultDate, mergeDateAndTime } from "../internals/utils/date-utils.js";
+import { PickerViewRoot } from "../internals/components/PickerViewRoot/index.js";
+import { useDefaultReduceAnimations } from "../internals/hooks/useDefaultReduceAnimations.js";
+import { getDateCalendarUtilityClass } from "./dateCalendarClasses.js";
+import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -427,7 +429,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   monthsPerRow: PropTypes.oneOf([3, 4]),
   /**
    * Callback fired when the 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.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
    * @template TView The view type. Will be one of date or time views.
    * @param {TValue} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.

package/modern/DateCalendar/DayCalendar.js

@@ -10,14 +10,14 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useControlled as useControlled } from '@mui/utils';
 import clsx from 'clsx';
-import { PickersDay } from '../PickersDay/PickersDay';
-import { usePickersTranslations } from '../hooks/usePickersTranslations';
-import { useUtils, useNow } from '../internals/hooks/useUtils';
-import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
-import { PickersSlideTransition } from './PickersSlideTransition';
-import { useIsDateDisabled } from './useIsDateDisabled';
-import { findClosestEnabledDate, getWeekdays } from '../internals/utils/date-utils';
-import { getDayCalendarUtilityClass } from './dayCalendarClasses';
+import { PickersDay } from "../PickersDay/PickersDay.js";
+import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { useUtils, useNow } from "../internals/hooks/useUtils.js";
+import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
+import { PickersSlideTransition } from "./PickersSlideTransition.js";
+import { useIsDateDisabled } from "./useIsDateDisabled.js";
+import { findClosestEnabledDate, getWeekdays } from "../internals/utils/date-utils.js";
+import { getDayCalendarUtilityClass } from "./dayCalendarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -360,7 +360,6 @@ export function DayCalendar(inProps) {
   const transitionKey = `${currentYearNumber}-${currentMonthNumber}`;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const slideNodeRef = React.useMemo(() => /*#__PURE__*/React.createRef(), [transitionKey]);
-  const startOfCurrentWeek = utils.startOfWeek(now);
   const focusableDay = React.useMemo(() => {
     const startOfMonth = utils.startOfMonth(currentMonth);
     const endOfMonth = utils.endOfMonth(currentMonth);
@@ -410,7 +409,7 @@ export function DayCalendar(inProps) {
       }), getWeekdays(utils, now).map((weekday, i) => /*#__PURE__*/_jsx(PickersCalendarWeekDayLabel, {
         variant: "caption",
         role: "columnheader",
-        "aria-label": utils.format(utils.addDays(startOfCurrentWeek, i), 'weekday'),
+        "aria-label": utils.format(weekday, 'weekday'),
         className: classes.weekDayLabel,
         children: dayOfWeekFormatter(weekday)
       }, i.toString()))]

package/modern/DateCalendar/PickersFadeTransitionGroup.js

@@ -4,7 +4,7 @@ import { TransitionGroup } from 'react-transition-group';
 import Fade from '@mui/material/Fade';
 import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { getPickersFadeTransitionGroupUtilityClass } from './pickersFadeTransitionGroupClasses';
+import { getPickersFadeTransitionGroupUtilityClass } from "./pickersFadeTransitionGroupClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/DateCalendar/PickersSlideTransition.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import { getPickersSlideTransitionUtilityClass, pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
+import { getPickersSlideTransitionUtilityClass, pickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/DateCalendar/index.js

@@ -1,5 +1,5 @@
-export { DateCalendar } from './DateCalendar';
-export { getDateCalendarUtilityClass, dateCalendarClasses } from './dateCalendarClasses';
-export { dayCalendarClasses } from './dayCalendarClasses';
-export { pickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
-export { pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
+export { DateCalendar } from "./DateCalendar.js";
+export { getDateCalendarUtilityClass, dateCalendarClasses } from "./dateCalendarClasses.js";
+export { dayCalendarClasses } from "./dayCalendarClasses.js";
+export { pickersFadeTransitionGroupClasses } from "./pickersFadeTransitionGroupClasses.js";
+export { pickersSlideTransitionClasses } from "./pickersSlideTransitionClasses.js";

package/modern/DateCalendar/useCalendarState.js

@@ -1,10 +1,12 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useIsDateDisabled } from './useIsDateDisabled';
-import { useUtils } from '../internals/hooks/useUtils';
-import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
+import { useIsDateDisabled } from "./useIsDateDisabled.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
 export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
   switch (action.type) {
     case 'changeMonth':

package/modern/DateCalendar/useIsDateDisabled.js

@@ -1,6 +1,8 @@
+'use client';
+
 import * as React from 'react';
-import { validateDate } from '../internals/utils/validation/validateDate';
-import { useLocalizationContext } from '../internals/hooks/useUtils';
+import { validateDate } from "../validation/index.js";
+import { useLocalizationContext } from "../internals/hooks/useUtils.js";
 export const useIsDateDisabled = ({
   shouldDisableDate,
   shouldDisableMonth,
@@ -15,6 +17,7 @@ export const useIsDateDisabled = ({
   return React.useCallback(day => validateDate({
     adapter,
     value: day,
+    timezone,
     props: {
       shouldDisableDate,
       shouldDisableMonth,
@@ -22,8 +25,7 @@ export const useIsDateDisabled = ({
       minDate,
       maxDate,
       disableFuture,
-      disablePast,
-      timezone
+      disablePast
     }
   }) !== null, [adapter, shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast, timezone]);
 };

package/modern/DateField/DateField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
@@ -7,10 +9,10 @@ import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { refType } from '@mui/utils';
-import { useDateField } from './useDateField';
-import { useClearableField } from '../hooks';
-import { PickersTextField } from '../PickersTextField';
-import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps';
+import { useDateField } from "./useDateField.js";
+import { useClearableField } from "../hooks/index.js";
+import { PickersTextField } from "../PickersTextField/index.js";
+import { convertFieldResponseIntoMuiTextFieldProps } from "../internals/utils/convertFieldResponseIntoMuiTextFieldProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -189,8 +191,8 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   onBlur: PropTypes.func,
   /**
    * Callback fired when the 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.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
@@ -200,11 +202,13 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   onClear: 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.
-   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
-   * @param {TError} error The new error.
-   * @param {TValue} value The value associated to the error.
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
    */
   onError: PropTypes.func,
   onFocus: PropTypes.func,

package/modern/DateField/index.js

@@ -1,2 +1,2 @@
-export { DateField } from './DateField';
-export { useDateField as unstable_useDateField } from './useDateField';
+export { DateField } from "./DateField.js";
+export { useDateField as unstable_useDateField } from "./useDateField.js";

package/modern/DateField/useDateField.js

@@ -1,14 +1,16 @@
-import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
-import { useField } from '../internals/hooks/useField';
-import { validateDate } from '../internals/utils/validation/validateDate';
-import { splitFieldInternalAndForwardedProps } from '../internals/utils/fields';
-import { useDefaultizedDateField } from '../internals/hooks/defaultizedFieldProps';
+'use client';
+
+import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { useField } from "../internals/hooks/useField/index.js";
+import { validateDate } from "../validation/index.js";
+import { useSplitFieldProps } from "../hooks/index.js";
+import { useDefaultizedDateField } from "../internals/hooks/defaultizedFieldProps.js";
 export const useDateField = inProps => {
   const props = useDefaultizedDateField(inProps);
   const {
     forwardedProps,
     internalProps
-  } = splitFieldInternalAndForwardedProps(props, 'date');
+  } = useSplitFieldProps(props, 'date');
   return useField({
     forwardedProps,
     internalProps,