@mui/x-date-pickers 7.16.0 → 7.18.0

package/locales/ruRU.js

@@ -32,7 +32,7 @@ const ruRUPickers = {
   timePickerToolbarTitle: 'Выбрать время',
   dateRangePickerToolbarTitle: 'Выбрать период',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Выбрать ${timeViews[view]}. ${time === null ? 'Время не выбрано' : `Выбрано время ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Выбрать ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Время не выбрано' : `Выбрано время ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} часов`,
   minutesClockNumberText: minutes => `${minutes} минут`,
   secondsClockNumberText: seconds => `${seconds} секунд`,
@@ -44,8 +44,8 @@ const ruRUPickers = {
   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/skSK.d.ts

@@ -23,13 +23,13 @@ export declare const skSK: {
                     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/skSK.js

@@ -33,7 +33,7 @@ const skSKPickers = {
   timePickerToolbarTitle: 'Vyberte čas',
   dateRangePickerToolbarTitle: 'Vyberete rozmedzie dátumov',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${timeViews[view] ?? view} vybraný. ${time === null ? 'Nie je vybraný čas' : `Vybraný čas je ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view] ?? view} vybraný. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Nie je vybraný čas' : `Vybraný čas je ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} hodín`,
   minutesClockNumberText: minutes => `${minutes} minút`,
   secondsClockNumberText: seconds => `${seconds} sekúnd`,
@@ -45,9 +45,9 @@ const skSKPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `${weekNumber} týždeň v roku`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vyberte dátum, vybraný dátum je ${utils.format(value, 'fullDate')}` : 'Vyberte dátum',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${utils.format(value, 'fullTime')}` : 'Vyberte čas',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Vyberte dátum, vybraný dátum je ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Vyberte dátum',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Vyberte čas',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'vyberte čas',

package/locales/svSE.d.ts

@@ -23,13 +23,13 @@ export declare const svSE: {
                     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/svSE.js

@@ -31,7 +31,7 @@ const svSEPickers = {
   timePickerToolbarTitle: 'Välj tid',
   dateRangePickerToolbarTitle: 'Välj datumintervall',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Välj ${timeViews[view]}. ${time === null ? 'Ingen tid vald' : `Vald tid är ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Välj ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Ingen tid vald' : `Vald tid är ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} timmar`,
   minutesClockNumberText: minutes => `${minutes} minuter`,
   secondsClockNumberText: seconds => `${seconds} sekunder`,
@@ -43,8 +43,8 @@ const svSEPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Vecka ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj datum, valt datum är ${utils.format(value, 'fullDate')}` : 'Välj datum',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${utils.format(value, 'fullTime')}` : 'Välj tid',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Välj datum, valt datum är ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Välj datum',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Välj tid',
   fieldClearLabel: 'Rensa värde',
   // Table labels
   timeTableLabel: 'välj tid',

package/locales/trTR.d.ts

@@ -23,13 +23,13 @@ export declare const trTR: {
                     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/trTR.js

@@ -32,7 +32,7 @@ const trTRPickers = {
   timePickerToolbarTitle: 'Saat seç',
   dateRangePickerToolbarTitle: 'Tarih aralığı seçin',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${timeViews[view]} seç.  ${time === null ? 'Zaman seçilmedi' : `Seçilen zaman: ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view]} seç.  ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Zaman seçilmedi' : `Seçilen zaman: ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} saat`,
   minutesClockNumberText: minutes => `${minutes} dakika`,
   secondsClockNumberText: seconds => `${seconds} saniye`,
@@ -44,9 +44,9 @@ const trTRPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Hafta ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Tarih seçin, seçilen tarih: ${utils.format(value, 'fullDate')}` : 'Tarih seç',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Saat seçin, seçilen saat: ${utils.format(value, 'fullTime')}` : 'Saat seç',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Tarih seçin, seçilen tarih: ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Tarih seç',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Saat seçin, seçilen saat: ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Saat seç',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'saat seç',

package/locales/ukUA.d.ts

@@ -23,13 +23,13 @@ export declare const ukUA: {
                     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/ukUA.js

@@ -31,7 +31,7 @@ const ukUAPickers = {
   timePickerToolbarTitle: 'Вибрати час',
   dateRangePickerToolbarTitle: 'Вибрати календарний період',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Вибрати ${timeViews[view]}. ${time === null ? 'Час не вибраний' : `Вибрано час ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Вибрати ${timeViews[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 ukUAPickers = {
   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/urPK.d.ts

@@ -23,13 +23,13 @@ export declare const urPK: {
                     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/urPK.js

@@ -32,7 +32,7 @@ const urPKPickers = {
   timePickerToolbarTitle: 'وقت منتخب کریں',
   dateRangePickerToolbarTitle: 'تاریخوں کی رینج منتخب کریں',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${timeViews[view]} منتخب کریں ${time === null ? 'کوئی وقت منتخب نہیں' : `منتخب وقت ہے ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view]} منتخب کریں ${!formattedTime && (time === null || !utils.isValid(time)) ? 'کوئی وقت منتخب نہیں' : `منتخب وقت ہے ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} گھنٹے`,
   minutesClockNumberText: minutes => `${minutes} منٹ`,
   secondsClockNumberText: seconds => `${seconds} سیکنڈ`,
@@ -44,9 +44,9 @@ const urPKPickers = {
   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')}` : 'وقت منتخب کریں',
-  // fieldClearLabel: 'Clear value',
+  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: 'Clear',
 
   // Table labels
   timeTableLabel: 'وقت منتخب کریں',

package/locales/utils/getPickersLocalization.d.ts

@@ -1,3 +1,4 @@
+import { AdapterFormats, MuiPickersAdapter, PickerValidDate } from '../../models';
 import { PickersLocaleText } from './pickersLocaleTextApi';
 export declare const getPickersLocalization: (pickersTranslations: Partial<PickersLocaleText<any>>) => {
     components: {
@@ -23,13 +24,13 @@ export declare const getPickersLocalization: (pickersTranslations: Partial<Picke
                     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: 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: import("../../internals").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: MuiPickersAdapter<any, any>, formattedDate: string | null) => string) | undefined;
+                    openTimePickerDialogue?: ((date: any, utils: MuiPickersAdapter<any, any>, formattedTime: string | null) => string) | undefined;
                     fieldClearLabel?: string | undefined;
                     timeTableLabel?: string | undefined;
                     dateTableLabel?: string | undefined;
@@ -78,3 +79,9 @@ export declare const getPickersLocalization: (pickersTranslations: Partial<Picke
         };
     };
 };
+export declare const buildGetOpenDialogAriaText: <TDate extends PickerValidDate>(params: {
+    utils: MuiPickersAdapter<TDate>;
+    formatKey: keyof AdapterFormats;
+    contextTranslation: (date: TDate | null, utils: MuiPickersAdapter<TDate>, formattedValue: string | null) => string;
+    propsTranslation: ((date: TDate | null, utils: MuiPickersAdapter<TDate>, formattedValue: string | null) => string) | undefined;
+}) => (value: TDate | null) => string;

package/locales/utils/getPickersLocalization.js

@@ -9,4 +9,17 @@ export const getPickersLocalization = pickersTranslations => {
       }
     }
   };
+};
+export const buildGetOpenDialogAriaText = params => {
+  const {
+    utils,
+    formatKey,
+    contextTranslation,
+    propsTranslation
+  } = params;
+  return value => {
+    const formattedValue = value !== null && utils.isValid(value) ? utils.format(value, formatKey) : null;
+    const translation = propsTranslation ?? contextTranslation;
+    return translation(value, utils, formattedValue);
+  };
 };

package/locales/utils/pickersLocaleTextApi.d.ts

@@ -42,13 +42,37 @@ export interface PickersComponentAgnosticLocaleText<TDate extends PickerValidDat
     clearButtonLabel: string;
     okButtonLabel: string;
     todayButtonLabel: string;
-    clockLabelText: (view: TimeView, time: TDate | null, adapter: MuiPickersAdapter<TDate>) => string;
+    clockLabelText: (view: TimeView, 
+    /**
+     * @deprecated Use `formattedTime` instead
+     */
+    time: TDate | null, 
+    /**
+     * @deprecated Use `formattedTime` instead
+     */
+    utils: MuiPickersAdapter<TDate>, formattedTime?: string | null) => string;
     hoursClockNumberText: (hours: string) => string;
     minutesClockNumberText: (minutes: string) => string;
     secondsClockNumberText: (seconds: string) => string;
     selectViewText: (view: TimeViewWithMeridiem) => string;
-    openDatePickerDialogue: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
-    openTimePickerDialogue: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
+    openDatePickerDialogue: (
+    /**
+     * @deprecated Use `formattedTime` instead
+     */
+    date: TDate | null, 
+    /**
+     * @deprecated Use `formattedTime` instead
+     */
+    utils: MuiPickersAdapter<TDate>, formattedDate: string | null) => string;
+    openTimePickerDialogue: (
+    /**
+     * @deprecated Use `formattedTime` instead
+     */
+    date: TDate | null, 
+    /**
+     * @deprecated Use `formattedTime` instead
+     */
+    utils: MuiPickersAdapter<TDate>, formattedTime: string | null) => string;
     fieldClearLabel: string;
     timeTableLabel: string;
     dateTableLabel: string;

package/locales/viVN.d.ts

@@ -23,13 +23,13 @@ export declare const viVN: {
                     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/viVN.js

@@ -31,7 +31,7 @@ const viVNPickers = {
   timePickerToolbarTitle: 'Chọn giờ',
   dateRangePickerToolbarTitle: 'Chọn khoảng ngày',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Chọn ${views[view]}. ${time === null ? 'Không có giờ được chọn' : `Giờ được chọn là ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Chọn ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Không có giờ được chọn' : `Giờ được chọn là ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} giờ`,
   minutesClockNumberText: minutes => `${minutes} phút`,
   secondsClockNumberText: seconds => `${seconds} giây`,
@@ -43,8 +43,8 @@ const viVNPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Tuần ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Chọn ngày, ngày đã chọn là ${utils.format(value, 'fullDate')}` : 'Chọn ngày',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Chọn giờ, giờ đã chọn là ${utils.format(value, 'fullTime')}` : 'Chọn giờ',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Chọn ngày, ngày đã chọn là ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Chọn ngày',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Chọn giờ, giờ đã chọn là ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Chọn giờ',
   fieldClearLabel: 'Xóa giá trị',
   // Table labels
   timeTableLabel: 'chọn giờ',

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

@@ -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

@@ -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/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

@@ -78,7 +78,7 @@ export class AdapterDateFns extends AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof addDays !== 'function') {
-        throw new Error(['MUI: The `date-fns` package v3.x is not compatible with this adapter.', 'Please, install v2.x of the package or use the `AdapterDateFnsV3` instead.'].join('\n'));
+        throw new Error(['MUI: This adapter is only compatible with `date-fns` v2.x package versions.', 'Please, install v2.x of the package or use the `AdapterDateFnsV3` instead.'].join('\n'));
       }
     }
     super({

package/modern/AdapterDateFnsV3/AdapterDateFnsV3.js

@@ -82,7 +82,7 @@ export class AdapterDateFns extends AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof addDays !== 'function') {
-        throw new Error([`MUI: The \`date-fns\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x of the package or use the `AdapterDateFns` instead.'].join('\n'));
+        throw new Error([`MUI: The \`date-fns\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x or v4.x of the package or use the `AdapterDateFns` instead.'].join('\n'));
       }
       if (!longFormatters) {
         throw new Error('MUI: The minimum supported `date-fns` package version compatible with this adapter is `3.2.x`.');

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.js";
+import { warnOnce } from '@mui/x-internals/warning';
 defaultDayjs.extend(localizedFormatPlugin);
 defaultDayjs.extend(weekOfYearPlugin);
 defaultDayjs.extend(isBetweenPlugin);

package/modern/DateCalendar/DateCalendar.js

@@ -1,6 +1,8 @@
+'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"];
+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", "yearsOrder", "yearsPerRow", "monthsPerRow", "timezone"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -118,6 +120,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       loading,
       renderLoading,
       displayWeekNumber,
+      yearsOrder,
       yearsPerRow,
       monthsPerRow,
       timezone: timezoneProp
@@ -309,6 +312,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
           onFocusedViewChange: isViewFocused => setFocusedView('year', isViewFocused),
+          yearsOrder: yearsOrder,
           yearsPerRow: yearsPerRow,
           referenceDate: referenceDate
         })), view === 'month' && /*#__PURE__*/_jsx(MonthCalendar, _extends({}, baseDateValidationProps, commonViewProps, {
@@ -558,6 +562,12 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired),
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 3

package/modern/DateCalendar/useCalendarState.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';

package/modern/DateCalendar/useIsDateDisabled.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { validateDate } from "../internals/utils/validation/validateDate.js";
+import { validateDate } from "../validation/index.js";
 import { useLocalizationContext } from "../internals/hooks/useUtils.js";
 export const useIsDateDisabled = ({
   shouldDisableDate,
@@ -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"];

package/modern/DateField/useDateField.js

@@ -1,14 +1,16 @@
+'use client';
+
 import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useField } from "../internals/hooks/useField/index.js";
-import { validateDate } from "../internals/utils/validation/validateDate.js";
-import { splitFieldInternalAndForwardedProps } from "../internals/utils/fields.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,