@mui/x-date-pickers 6.14.0 → 6.16.0

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error"];
+const _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -42,7 +42,9 @@ export const useField = params => {
         onBlur,
         onMouseUp,
         onPaste,
-        error
+        error,
+        clearable,
+        onClear
       },
       fieldValueManager,
       valueManager,
@@ -84,8 +86,13 @@ export const useField = params => {
     const sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
     setSelectedSections(sectionIndex);
   };
-  const handleInputClick = useEventCallback((...args) => {
-    onClick?.(...args);
+  const handleInputClick = useEventCallback((event, ...args) => {
+    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
+    // We avoid this by checking if the call of `handleInputClick` is actually intended, or a side effect.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    onClick?.(event, ...args);
     syncSelectionFromDOM();
   });
   const handleInputMouseUp = useEventCallback(event => {
@@ -369,7 +376,8 @@ export const useField = params => {
     return 'numeric';
   }, [selectedSectionIndexes, state.sections]);
   const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
-  const shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  const areAllSectionsEmpty = valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty;
   React.useImperativeHandle(unstableFieldRef, () => ({
     getSections: () => state.sections,
     getActiveSectionIndex: () => {
@@ -384,6 +392,13 @@ export const useField = params => {
     },
     setSelectedSections: activeSectionIndex => setSelectedSections(activeSectionIndex)
   }));
+  const handleClearValue = useEventCallback((event, ...args) => {
+    event.preventDefault();
+    onClear?.(event, ...args);
+    clearValue();
+    inputRef?.current?.focus();
+    setSelectedSections(0);
+  });
   return _extends({
     placeholder,
     autoComplete: 'off'
@@ -398,7 +413,9 @@ export const useField = params => {
     onChange: handleInputChange,
     onKeyDown: handleInputKeyDown,
     onMouseUp: handleInputMouseUp,
+    onClear: handleClearValue,
     error: inputError,
-    ref: handleRef
+    ref: handleRef,
+    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly)
   });
 };

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

@@ -385,15 +385,20 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
   const escapedParts = getEscapedPartsFromFormat(utils, expandedFormat);
 
   // This RegExp test if the beginning of a string correspond to a supported token
-  const isTokenStartRegExp = new RegExp(`^(${Object.keys(utils.formatTokenMap).join('|')})`);
+  const isTokenStartRegExp = new RegExp(`^(${Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length) // Sort to put longest word first
+  .join('|')})`, 'g') // used to get access to lastIndex state
+  ;
+
   let currentTokenValue = '';
   for (let i = 0; i < expandedFormat.length; i += 1) {
     const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
     const char = expandedFormat[i];
     const isEscapedChar = escapedPartOfCurrentChar != null;
     const potentialToken = `${currentTokenValue}${expandedFormat.slice(i)}`;
-    if (!isEscapedChar && char.match(/([A-Za-z]+)/) && isTokenStartRegExp.test(potentialToken)) {
-      currentTokenValue += char;
+    const regExpMatch = isTokenStartRegExp.test(potentialToken);
+    if (!isEscapedChar && char.match(/([A-Za-z]+)/) && regExpMatch) {
+      currentTokenValue = potentialToken.slice(0, isTokenStartRegExp.lastIndex);
+      i += isTokenStartRegExp.lastIndex - 1;
     } else {
       // If we are on the opening or closing character of an escaped part of the format,
       // Then we ignore this character.

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

@@ -116,4 +116,8 @@ export const resolveDateFormat = (utils, {
     return /en/.test(utils.getCurrentLocaleCode()) ? formats.normalDateWithWeekday : formats.normalDate;
   }
   return formats.keyboardDate;
+};
+export const getWeekdays = (utils, date) => {
+  const start = utils.startOfWeek(date);
+  return [0, 1, 2, 3, 4, 5, 6].map(diff => utils.addDays(start, diff));
 };

package/modern/locales/beBY.js

@@ -42,6 +42,8 @@ const beBYPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: 'абраць час',
   dateTableLabel: 'абраць дату',

package/modern/locales/caES.js

@@ -41,6 +41,8 @@ const caESPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Tria la data, la data triada és ${utils.format(value, 'fullDate')}` : 'Tria la data',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Tria l'hora, l'hora triada és ${utils.format(value, 'fullTime')}` : "Tria l'hora",
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'tria la data',
   dateTableLabel: "tria l'hora",

package/modern/locales/csCZ.js

@@ -42,6 +42,8 @@ const csCZPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vyberte datum, vybrané datum je ${utils.format(value, 'fullDate')}` : 'Vyberte datum',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${utils.format(value, 'fullTime')}` : 'Vyberte čas',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'vyberte čas',
   dateTableLabel: 'vyberte datum',

package/modern/locales/daDK.js

@@ -42,6 +42,8 @@ const daDKPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg dato, valgte dato er ${utils.format(value, 'fullDate')}` : 'Vælg dato',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg tidspunkt, valgte tidspunkt er ${utils.format(value, 'fullTime')}` : 'Vælg tidspunkt',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'vælg tidspunkt',
   dateTableLabel: 'vælg dato',

package/modern/locales/deDE.js

@@ -42,6 +42,8 @@ const deDEPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Datum auswählen, gewähltes Datum ist ${utils.format(value, 'fullDate')}` : 'Datum auswählen',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Uhrzeit auswählen, gewählte Uhrzeit ist ${utils.format(value, 'fullTime')}` : 'Uhrzeit auswählen',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'Uhrzeit auswählen',
   dateTableLabel: 'Datum auswählen',

package/modern/locales/elGR.js

@@ -41,6 +41,8 @@ const elGRPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: 'επιλέξτε ώρα',
   dateTableLabel: 'επιλέξτε ημερομηνία',

package/modern/locales/enUS.js

@@ -38,6 +38,7 @@ const enUSPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choose date, selected date is ${utils.format(value, 'fullDate')}` : 'Choose date',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choose time, selected time is ${utils.format(value, 'fullTime')}` : 'Choose time',
+  fieldClearLabel: 'Clear value',
   // Table labels
   timeTableLabel: 'pick time',
   dateTableLabel: 'pick date',

package/modern/locales/esES.js

@@ -41,6 +41,8 @@ const esESPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Elige la fecha, la fecha elegida es ${utils.format(value, 'fullDate')}` : 'Elige la fecha',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Elige la hora, la hora elegido es ${utils.format(value, 'fullTime')}` : 'Elige la hora',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'elige la fecha',
   dateTableLabel: 'elige la hora',

package/modern/locales/faIR.js

@@ -41,6 +41,8 @@ const faIRPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: 'انتخاب تاریخ',
   dateTableLabel: 'انتخاب ساعت',

package/modern/locales/fiFI.js

@@ -41,19 +41,19 @@ const fiFIPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Valitse päivä, valittu päivä on ${utils.format(value, 'fullDate')}` : 'Valitse päivä',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Valitse aika, valittu aika on ${utils.format(value, 'fullTime')}` : 'Valitse aika',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'valitse aika',
-  dateTableLabel: 'valitse päivä'
-
+  dateTableLabel: 'valitse päivä',
   // Field section placeholders
-  // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
-  // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
-  // fieldDayPlaceholder: () => 'DD',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
-  // fieldHoursPlaceholder: () => 'hh',
-  // fieldMinutesPlaceholder: () => 'mm',
-  // fieldSecondsPlaceholder: () => 'ss',
-  // fieldMeridiemPlaceholder: () => 'aa',
+  fieldYearPlaceholder: params => 'V'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'KKKK' : 'KK',
+  fieldDayPlaceholder: () => 'PP',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'tt',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa'
 };
-
 export const fiFI = getPickersLocalization(fiFIPickers);

package/modern/locales/frFR.js

@@ -41,6 +41,8 @@ const frFRPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir la date, la date sélectionnée est ${utils.format(value, 'fullDate')}` : 'Choisir la date',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir l'heure, l'heure sélectionnée est ${utils.format(value, 'fullTime')}` : "Choisir l'heure",
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: "choix de l'heure",
   dateTableLabel: 'choix de la date',

package/modern/locales/heIL.js

@@ -41,6 +41,8 @@ const heILPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: 'בחירת שעה',
   dateTableLabel: 'בחירת תאריך',

package/modern/locales/huHU.js

@@ -42,6 +42,7 @@ const huHUPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Válasszon dátumot, a kiválasztott dátum: ${utils.format(value, 'fullDate')}` : 'Válasszon dátumot',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Válasszon időt, a kiválasztott idő: ${utils.format(value, 'fullTime')}` : 'Válasszon időt',
+  fieldClearLabel: 'Tartalom ürítése',
   // Table labels
   timeTableLabel: 'válasszon időt',
   dateTableLabel: 'válasszon dátumot',

package/modern/locales/isIS.js

@@ -41,6 +41,8 @@ const isISPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velja dagsetningu, valin dagsetning er ${utils.format(value, 'fullDate')}` : 'Velja dagsetningu',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velja tíma, valinn tími er ${utils.format(value, 'fullTime')}` : 'Velja tíma',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'velja tíma',
   dateTableLabel: 'velja dagsetningu',

package/modern/locales/itIT.js

@@ -41,6 +41,8 @@ const itITPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Scegli la data, la data selezionata è ${utils.format(value, 'fullDate')}` : 'Scegli la data',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Scegli l'ora, l'ora selezionata è ${utils.format(value, 'fullTime')}` : "Scegli l'ora",
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: "scegli un'ora",
   dateTableLabel: 'scegli una data',

package/modern/locales/jaJP.js

@@ -42,6 +42,8 @@ const jaJPPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: '時間を選択',
   dateTableLabel: '日付を選択',

package/modern/locales/koKR.js

@@ -41,6 +41,8 @@ const koKRPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: '선택한 시간',
   dateTableLabel: '선택한 날짜',

package/modern/locales/kzKZ.js

@@ -42,6 +42,8 @@ const kzKZPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: 'уақытты таңдау',
   dateTableLabel: 'күнді таңдау',

package/modern/locales/nbNO.js

@@ -41,6 +41,8 @@ const nbNOPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velg dato, valgt dato er ${utils.format(value, 'fullDate')}` : 'Velg dato',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velg tid, valgt tid er ${utils.format(value, 'fullTime')}` : 'Velg tid',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'velg tid',
   dateTableLabel: 'velg dato',

package/modern/locales/nlNL.js

@@ -41,6 +41,8 @@ const nlNLPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Kies datum, geselecteerde datum is ${utils.format(value, 'fullDate')}` : 'Kies datum',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Kies tijd, geselecteerde tijd is ${utils.format(value, 'fullTime')}` : 'Kies tijd',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'kies tijd',
   dateTableLabel: 'kies datum',

package/modern/locales/plPL.js

@@ -41,6 +41,8 @@ const plPLPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value != null && utils.isValid(value) ? `Wybierz datę, obecnie wybrana data to ${utils.format(value, 'fullDate')}` : 'Wybierz datę',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Wybierz czas, obecnie wybrany czas to ${utils.format(value, 'fullTime')}` : 'Wybierz czas',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'wybierz czas',
   dateTableLabel: 'wybierz datę'

package/modern/locales/ptBR.js

@@ -41,6 +41,8 @@ const ptBRPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Escolha uma data, data selecionada ${utils.format(value, 'fullDate')}` : 'Escolha uma data',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Escolha uma hora, hora selecionada ${utils.format(value, 'fullTime')}` : 'Escolha uma hora',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'escolha uma hora',
   dateTableLabel: 'escolha uma data',

package/modern/locales/roRO.js

@@ -42,6 +42,7 @@ const roROPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Selectați data, data selectată este ${utils.format(value, 'fullDate')}` : 'Selectați data',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Selectați ora, ora selectată este ${utils.format(value, 'fullTime')}` : 'Selectați ora',
+  fieldClearLabel: 'Golire conținut',
   // Table labels
   timeTableLabel: 'Selectați ora',
   dateTableLabel: 'Selectați data',

package/modern/locales/ruRU.js

@@ -42,6 +42,8 @@ const ruRUPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: 'выбрать время',
   dateTableLabel: 'выбрать дату',

package/modern/locales/skSK.js

@@ -42,6 +42,8 @@ const skSKPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: 'vyberte čas',
   dateTableLabel: 'vyberte dátum',

package/modern/locales/svSE.js

@@ -41,6 +41,8 @@ const svSEPickers = {
   // 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',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'välj tid',
   dateTableLabel: 'välj datum'

package/modern/locales/trTR.js

@@ -41,6 +41,8 @@ const trTRPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: 'saat seç',
   dateTableLabel: 'tarih seç',

package/modern/locales/ukUA.js

@@ -41,6 +41,8 @@ const ukUAPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: 'оберіть час',
   dateTableLabel: 'оберіть дату',

package/modern/locales/urPK.js

@@ -41,6 +41,8 @@ const urPKPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: 'وقت منتخب کریں',
   dateTableLabel: 'تاریخ منتخب کریں'

package/modern/locales/viVN.js

@@ -41,6 +41,8 @@ const viVNPickers = {
   // 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ờ',
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'chọn giờ',
   dateTableLabel: 'chọn ngày',

package/modern/locales/zhCN.js

@@ -41,6 +41,8 @@ const zhCNPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: '选择时间',
   dateTableLabel: '选择日期',

package/modern/locales/zhHK.js

@@ -41,6 +41,8 @@ const zhHKPickers = {
   // 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',
+
   // Table labels
   timeTableLabel: '選擇時間',
   dateTableLabel: '選擇日期',

package/node/DateCalendar/DateCalendar.js

@@ -382,9 +382,10 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   componentsProps: _propTypes.default.object,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter's method `getWeekdays`.
+   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
+   * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (day) => day.charAt(0).toUpperCase()
+   * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
@@ -510,6 +511,9 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   renderLoading: _propTypes.default.func,
   /**
    * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   *
    * @template TDate
    * @param {TDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.

package/node/DateCalendar/DayCalendar.js

@@ -31,6 +31,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
+    root: ['root'],
     header: ['header'],
     weekDayLabel: ['weekDayLabel'],
     loadingContainer: ['loadingContainer'],
@@ -42,8 +43,12 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils2.unstable_composeClasses)(slots, _dayCalendarClasses.getDayCalendarUtilityClass, classes);
 };
-const defaultDayOfWeekFormatter = day => day.charAt(0).toUpperCase();
 const weeksContainerHeight = (_dimensions.DAY_SIZE + _dimensions.DAY_MARGIN * 2) * 6;
+const PickersCalendarDayRoot = (0, _styles.styled)('div', {
+  name: 'MuiDayCalendar',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({});
 const PickersCalendarDayHeader = (0, _styles.styled)('div', {
   name: 'MuiDayCalendar',
   slot: 'Header',
@@ -243,7 +248,7 @@ function DayCalendar(inProps) {
     shouldDisableDate,
     shouldDisableMonth,
     shouldDisableYear,
-    dayOfWeekFormatter = defaultDayOfWeekFormatter,
+    dayOfWeekFormatter: dayOfWeekFormatterFromProps,
     hasFocus,
     onFocusedViewChange,
     gridLabelId,
@@ -257,6 +262,9 @@ function DayCalendar(inProps) {
   const classes = useUtilityClasses(props);
   const theme = (0, _styles.useTheme)();
   const isRTL = theme.direction === 'rtl';
+
+  // before we could define this outside of the component scope, but now we need utils, which is only defined here
+  const dayOfWeekFormatter = dayOfWeekFormatterFromProps || ((_day, date) => utils.format(date, 'weekdayShort').charAt(0).toUpperCase());
   const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
     shouldDisableDate,
     shouldDisableMonth,
@@ -398,9 +406,10 @@ function DayCalendar(inProps) {
     }
     return toDisplay;
   }, [currentMonth, fixedWeekNumber, utils, timezone]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,
+    className: classes.root,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarDayHeader, {
       role: "row",
       className: classes.header,
@@ -410,13 +419,18 @@ function DayCalendar(inProps) {
         "aria-label": localeText.calendarWeekNumberHeaderLabel,
         className: classes.weekNumberLabel,
         children: localeText.calendarWeekNumberHeaderText
-      }), utils.getWeekdays().map((day, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeekDayLabel, {
-        variant: "caption",
-        role: "columnheader",
-        "aria-label": utils.format(utils.addDays(startOfCurrentWeek, i), 'weekday'),
-        className: classes.weekDayLabel,
-        children: dayOfWeekFormatter?.(day) ?? day
-      }, day + i.toString()))]
+      }), (0, _dateUtils.getWeekdays)(utils, now).map((weekday, i) => {
+        // regression-prevention:
+        // since 'weekdayShort' now always returns an abbreviated form we slice the first 2 letters from it.
+        const day = utils.format(weekday, 'weekdayShort').slice(0, 2);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeekDayLabel, {
+          variant: "caption",
+          role: "columnheader",
+          "aria-label": utils.format(utils.addDays(startOfCurrentWeek, i), 'weekday'),
+          className: classes.weekDayLabel,
+          children: dayOfWeekFormatter?.(day, weekday) ?? day
+        }, day + i.toString());
+      })]
     }), loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarLoadingContainer, {
       className: classes.loadingContainer,
       children: renderLoading()

package/node/DateCalendar/dayCalendarClasses.js

@@ -7,5 +7,5 @@ exports.getDayCalendarUtilityClass = exports.dayPickerClasses = void 0;
 var _utils = require("@mui/utils");
 const getDayCalendarUtilityClass = slot => (0, _utils.unstable_generateUtilityClass)('MuiDayCalendar', slot);
 exports.getDayCalendarUtilityClass = getDayCalendarUtilityClass;
-const dayPickerClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDayCalendar', ['header', 'weekDayLabel', 'loadingContainer', 'slideTransition', 'monthContainer', 'weekContainer', 'weekNumberLabel', 'weekNumber']);
+const dayPickerClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDayCalendar', ['root', 'header', 'weekDayLabel', 'loadingContainer', 'slideTransition', 'monthContainer', 'weekContainer', 'weekNumberLabel', 'weekNumber']);
 exports.dayPickerClasses = dayPickerClasses;