@mui/x-date-pickers 7.1.0 → 7.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (97) hide show
  1. package/CHANGELOG.md +261 -4
  2. package/DateCalendar/DateCalendar.js +1 -1
  3. package/DateCalendar/DayCalendar.d.ts +1 -1
  4. package/DateField/DateField.js +1 -1
  5. package/DatePicker/DatePicker.js +1 -1
  6. package/DateTimeField/DateTimeField.js +2 -2
  7. package/DateTimeField/DateTimeField.types.d.ts +1 -1
  8. package/DateTimePicker/DateTimePicker.js +2 -2
  9. package/DesktopDatePicker/DesktopDatePicker.js +1 -1
  10. package/DesktopDateTimePicker/DesktopDateTimePicker.js +14 -5
  11. package/DesktopTimePicker/DesktopTimePicker.js +1 -1
  12. package/DigitalClock/DigitalClock.js +1 -1
  13. package/MobileDatePicker/MobileDatePicker.js +1 -1
  14. package/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  15. package/MobileTimePicker/MobileTimePicker.js +1 -1
  16. package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -1
  17. package/PickersShortcuts/PickersShortcuts.d.ts +1 -1
  18. package/PickersShortcuts/PickersShortcuts.js +1 -1
  19. package/README.md +1 -1
  20. package/StaticDatePicker/StaticDatePicker.js +1 -1
  21. package/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  22. package/StaticTimePicker/StaticTimePicker.js +1 -1
  23. package/TimeClock/TimeClock.js +1 -1
  24. package/TimeField/TimeField.js +2 -2
  25. package/TimeField/TimeField.types.d.ts +1 -1
  26. package/TimePicker/TimePicker.js +1 -1
  27. package/index.js +1 -1
  28. package/internals/hooks/useField/useField.types.d.ts +1 -1
  29. package/internals/hooks/useField/useFieldV6TextField.js +3 -1
  30. package/internals/hooks/usePicker/usePickerValue.js +8 -2
  31. package/internals/hooks/usePicker/usePickerValue.types.d.ts +4 -3
  32. package/internals/models/props/clock.d.ts +1 -1
  33. package/locales/deDE.js +14 -17
  34. package/locales/faIR.js +7 -8
  35. package/locales/frFR.js +16 -20
  36. package/locales/ptBR.js +14 -17
  37. package/locales/svSE.js +23 -28
  38. package/locales/ukUA.js +15 -19
  39. package/modern/DateCalendar/DateCalendar.js +1 -1
  40. package/modern/DateField/DateField.js +1 -1
  41. package/modern/DatePicker/DatePicker.js +1 -1
  42. package/modern/DateTimeField/DateTimeField.js +2 -2
  43. package/modern/DateTimePicker/DateTimePicker.js +2 -2
  44. package/modern/DesktopDatePicker/DesktopDatePicker.js +1 -1
  45. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +14 -5
  46. package/modern/DesktopTimePicker/DesktopTimePicker.js +1 -1
  47. package/modern/DigitalClock/DigitalClock.js +1 -1
  48. package/modern/MobileDatePicker/MobileDatePicker.js +1 -1
  49. package/modern/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  50. package/modern/MobileTimePicker/MobileTimePicker.js +1 -1
  51. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -1
  52. package/modern/PickersShortcuts/PickersShortcuts.js +1 -1
  53. package/modern/StaticDatePicker/StaticDatePicker.js +1 -1
  54. package/modern/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  55. package/modern/StaticTimePicker/StaticTimePicker.js +1 -1
  56. package/modern/TimeClock/TimeClock.js +1 -1
  57. package/modern/TimeField/TimeField.js +2 -2
  58. package/modern/TimePicker/TimePicker.js +1 -1
  59. package/modern/index.js +1 -1
  60. package/modern/internals/hooks/useField/useFieldV6TextField.js +3 -1
  61. package/modern/internals/hooks/usePicker/usePickerValue.js +8 -2
  62. package/modern/locales/deDE.js +14 -17
  63. package/modern/locales/faIR.js +7 -8
  64. package/modern/locales/frFR.js +16 -20
  65. package/modern/locales/ptBR.js +14 -17
  66. package/modern/locales/svSE.js +23 -28
  67. package/modern/locales/ukUA.js +15 -19
  68. package/node/DateCalendar/DateCalendar.js +1 -1
  69. package/node/DateField/DateField.js +1 -1
  70. package/node/DatePicker/DatePicker.js +1 -1
  71. package/node/DateTimeField/DateTimeField.js +2 -2
  72. package/node/DateTimePicker/DateTimePicker.js +2 -2
  73. package/node/DesktopDatePicker/DesktopDatePicker.js +1 -1
  74. package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +14 -5
  75. package/node/DesktopTimePicker/DesktopTimePicker.js +1 -1
  76. package/node/DigitalClock/DigitalClock.js +1 -1
  77. package/node/MobileDatePicker/MobileDatePicker.js +1 -1
  78. package/node/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  79. package/node/MobileTimePicker/MobileTimePicker.js +1 -1
  80. package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -1
  81. package/node/PickersShortcuts/PickersShortcuts.js +1 -1
  82. package/node/StaticDatePicker/StaticDatePicker.js +1 -1
  83. package/node/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  84. package/node/StaticTimePicker/StaticTimePicker.js +1 -1
  85. package/node/TimeClock/TimeClock.js +1 -1
  86. package/node/TimeField/TimeField.js +2 -2
  87. package/node/TimePicker/TimePicker.js +1 -1
  88. package/node/index.js +1 -1
  89. package/node/internals/hooks/useField/useFieldV6TextField.js +3 -1
  90. package/node/internals/hooks/usePicker/usePickerValue.js +8 -2
  91. package/node/locales/deDE.js +14 -17
  92. package/node/locales/faIR.js +7 -8
  93. package/node/locales/frFR.js +16 -20
  94. package/node/locales/ptBR.js +14 -17
  95. package/node/locales/svSE.js +23 -28
  96. package/node/locales/ukUA.js +15 -19
  97. package/package.json +2 -2
@@ -64,7 +64,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
64
64
  // ----------------------------------------------------------------------
65
65
  /**
66
66
  * 12h/24h view for hour selection clock.
67
- * @default `utils.is12HourCycleInCurrentLocale()`
67
+ * @default utils.is12HourCycleInCurrentLocale()
68
68
  */
69
69
  ampm: PropTypes.bool,
70
70
  /**
@@ -275,7 +275,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
275
275
  * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
276
276
  * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
277
277
  *
278
- * @default `false`
278
+ * @default false
279
279
  */
280
280
  shouldRespectLeadingZeros: PropTypes.bool,
281
281
  /**
@@ -50,7 +50,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
50
50
  // ----------------------------------------------------------------------
51
51
  /**
52
52
  * 12h/24h view for hour selection clock.
53
- * @default `utils.is12HourCycleInCurrentLocale()`
53
+ * @default utils.is12HourCycleInCurrentLocale()
54
54
  */
55
55
  ampm: PropTypes.bool,
56
56
  /**
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v7.1.0
2
+ * @mui/x-date-pickers v7.2.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -112,7 +112,8 @@ export const useFieldV6TextField = params => {
112
112
  getActiveSectionIndexFromDOM: () => {
113
113
  const browserStartIndex = inputRef.current.selectionStart ?? 0;
114
114
  const browserEndIndex = inputRef.current.selectionEnd ?? 0;
115
- if (browserStartIndex === 0 && browserEndIndex === 0) {
115
+ const isInputReadOnly = !!inputRef.current?.readOnly;
116
+ if (browserStartIndex === 0 && browserEndIndex === 0 || isInputReadOnly) {
116
117
  return null;
117
118
  }
118
119
  const nextSectionIndex = browserStartIndex <= sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
@@ -128,6 +129,7 @@ export const useFieldV6TextField = params => {
128
129
  }), [inputRef, parsedSelectedSections, sections, setSelectedSections]);
129
130
  const syncSelectionFromDOM = () => {
130
131
  if (readOnly) {
132
+ setSelectedSections(null);
131
133
  return;
132
134
  }
133
135
  const browserStartIndex = inputRef.current.selectionStart ?? 0;
@@ -270,8 +270,14 @@ export const usePickerValue = ({
270
270
  pickerAction: 'today'
271
271
  });
272
272
  });
273
- const handleOpen = useEventCallback(() => setIsOpen(true));
274
- const handleClose = useEventCallback(() => setIsOpen(false));
273
+ const handleOpen = useEventCallback(event => {
274
+ event.preventDefault();
275
+ setIsOpen(true);
276
+ });
277
+ const handleClose = useEventCallback(event => {
278
+ event?.preventDefault();
279
+ setIsOpen(false);
280
+ });
275
281
  const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
276
282
  name: 'setValueFromView',
277
283
  value: newValue,
@@ -17,11 +17,10 @@ const deDEPickers = {
17
17
  // DateRange labels
18
18
  start: 'Beginn',
19
19
  end: 'Ende',
20
- // startDate: 'Start date',
21
- // startTime: 'Start time',
22
- // endDate: 'End date',
23
- // endTime: 'End time',
24
-
20
+ startDate: 'Startdatum',
21
+ startTime: 'Startzeit',
22
+ endDate: 'Enddatum',
23
+ endTime: 'Endzeit',
25
24
  // Action bar
26
25
  cancelButtonLabel: 'Abbrechen',
27
26
  clearButtonLabel: 'Löschen',
@@ -59,19 +58,17 @@ const deDEPickers = {
59
58
  fieldHoursPlaceholder: () => 'hh',
60
59
  fieldMinutesPlaceholder: () => 'mm',
61
60
  fieldSecondsPlaceholder: () => 'ss',
62
- fieldMeridiemPlaceholder: () => 'aa'
63
-
61
+ fieldMeridiemPlaceholder: () => 'aa',
64
62
  // View names
65
- // year: 'Year',
66
- // month: 'Month',
67
- // day: 'Day',
68
- // weekDay: 'Week day',
69
- // hours: 'Hours',
70
- // minutes: 'Minutes',
71
- // seconds: 'Seconds',
72
- // meridiem: 'Meridiem',
73
-
63
+ year: 'Jahr',
64
+ month: 'Monat',
65
+ day: 'Tag',
66
+ weekDay: 'Wochentag',
67
+ hours: 'Stunden',
68
+ minutes: 'Minuten',
69
+ seconds: 'Sekunden',
70
+ meridiem: 'Tageszeit',
74
71
  // Common
75
- // empty: 'Empty',
72
+ empty: 'Leer'
76
73
  };
77
74
  export const deDE = getPickersLocalization(deDEPickers);
@@ -59,16 +59,15 @@ const faIRPickers = {
59
59
  fieldHoursPlaceholder: () => 'hh',
60
60
  fieldMinutesPlaceholder: () => 'mm',
61
61
  fieldSecondsPlaceholder: () => 'ss',
62
- fieldMeridiemPlaceholder: () => 'aa'
63
-
62
+ fieldMeridiemPlaceholder: () => 'aa',
64
63
  // View names
65
- // year: 'Year',
66
- // month: 'Month',
67
- // day: 'Day',
64
+ year: 'سال',
65
+ month: 'ماه',
66
+ day: 'روز',
68
67
  // weekDay: 'Week day',
69
- // hours: 'Hours',
70
- // minutes: 'Minutes',
71
- // seconds: 'Seconds',
68
+ hours: 'ساعت ها',
69
+ minutes: 'دقیقه ها',
70
+ seconds: 'ثانیه ها'
72
71
  // meridiem: 'Meridiem',
73
72
 
74
73
  // Common
@@ -16,11 +16,10 @@ const frFRPickers = {
16
16
  // DateRange labels
17
17
  start: 'Début',
18
18
  end: 'Fin',
19
- // startDate: 'Start date',
20
- // startTime: 'Start time',
21
- // endDate: 'End date',
22
- // endTime: 'End time',
23
-
19
+ startDate: 'Date de début',
20
+ startTime: 'Heure de début',
21
+ endDate: 'Date de fin',
22
+ endTime: 'Heure de fin',
24
23
  // Action bar
25
24
  cancelButtonLabel: 'Annuler',
26
25
  clearButtonLabel: 'Vider',
@@ -46,8 +45,7 @@ const frFRPickers = {
46
45
  // Open picker labels
47
46
  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir la date, la date sélectionnée est ${utils.format(value, 'fullDate')}` : 'Choisir la date',
48
47
  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir l'heure, l'heure sélectionnée est ${utils.format(value, 'fullTime')}` : "Choisir l'heure",
49
- // fieldClearLabel: 'Clear value',
50
-
48
+ fieldClearLabel: 'Effacer la valeur',
51
49
  // Table labels
52
50
  timeTableLabel: "choix de l'heure",
53
51
  dateTableLabel: 'choix de la date',
@@ -55,23 +53,21 @@ const frFRPickers = {
55
53
  fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
56
54
  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
57
55
  fieldDayPlaceholder: () => 'JJ',
58
- // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
56
+ fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
59
57
  fieldHoursPlaceholder: () => 'hh',
60
58
  fieldMinutesPlaceholder: () => 'mm',
61
59
  fieldSecondsPlaceholder: () => 'ss',
62
- fieldMeridiemPlaceholder: () => 'aa'
63
-
60
+ fieldMeridiemPlaceholder: () => 'aa',
64
61
  // View names
65
- // year: 'Year',
66
- // month: 'Month',
67
- // day: 'Day',
68
- // weekDay: 'Week day',
69
- // hours: 'Hours',
70
- // minutes: 'Minutes',
71
- // seconds: 'Seconds',
72
- // meridiem: 'Meridiem',
73
-
62
+ year: 'Année',
63
+ month: 'Mois',
64
+ day: 'Jour',
65
+ weekDay: 'Jour de la semaine',
66
+ hours: 'Heures',
67
+ minutes: 'Minutes',
68
+ seconds: 'Secondes',
69
+ meridiem: 'Méridien',
74
70
  // Common
75
- // empty: 'Empty',
71
+ empty: 'Vider'
76
72
  };
77
73
  export const frFR = getPickersLocalization(frFRPickers);
@@ -16,11 +16,10 @@ const ptBRPickers = {
16
16
  // DateRange labels
17
17
  start: 'Início',
18
18
  end: 'Fim',
19
- // startDate: 'Start date',
20
- // startTime: 'Start time',
21
- // endDate: 'End date',
22
- // endTime: 'End time',
23
-
19
+ startDate: 'Data de início',
20
+ startTime: 'Hora de início',
21
+ endDate: 'Data de Término',
22
+ endTime: 'Hora de Término',
24
23
  // Action bar
25
24
  cancelButtonLabel: 'Cancelar',
26
25
  clearButtonLabel: 'Limpar',
@@ -59,19 +58,17 @@ const ptBRPickers = {
59
58
  fieldHoursPlaceholder: () => 'hh',
60
59
  fieldMinutesPlaceholder: () => 'mm',
61
60
  fieldSecondsPlaceholder: () => 'ss',
62
- fieldMeridiemPlaceholder: () => 'aa'
63
-
61
+ fieldMeridiemPlaceholder: () => 'aa',
64
62
  // View names
65
- // year: 'Year',
66
- // month: 'Month',
67
- // day: 'Day',
68
- // weekDay: 'Week day',
69
- // hours: 'Hours',
70
- // minutes: 'Minutes',
71
- // seconds: 'Seconds',
72
- // meridiem: 'Meridiem',
73
-
63
+ year: 'Ano',
64
+ month: 'Mês',
65
+ day: 'Dia',
66
+ weekDay: 'Dia da Semana',
67
+ hours: 'Horas',
68
+ minutes: 'Minutos',
69
+ seconds: 'Segundos',
70
+ meridiem: 'Meio dia',
74
71
  // Common
75
- // empty: 'Empty',
72
+ empty: 'Vazio'
76
73
  };
77
74
  export const ptBR = getPickersLocalization(ptBRPickers);
@@ -16,11 +16,10 @@ const svSEPickers = {
16
16
  // DateRange labels
17
17
  start: 'Start',
18
18
  end: 'Slut',
19
- // startDate: 'Start date',
20
- // startTime: 'Start time',
21
- // endDate: 'End date',
22
- // endTime: 'End time',
23
-
19
+ startDate: 'Startdatum',
20
+ startTime: 'Starttid',
21
+ endDate: 'Slutdatum',
22
+ endTime: 'Sluttid',
24
23
  // Action bar
25
24
  cancelButtonLabel: 'Avbryt',
26
25
  clearButtonLabel: 'Rensa',
@@ -46,33 +45,29 @@ const svSEPickers = {
46
45
  // Open picker labels
47
46
  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj datum, valt datum är ${utils.format(value, 'fullDate')}` : 'Välj datum',
48
47
  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${utils.format(value, 'fullTime')}` : 'Välj tid',
49
- // fieldClearLabel: 'Clear value',
50
-
48
+ fieldClearLabel: 'Rensa värde',
51
49
  // Table labels
52
50
  timeTableLabel: 'välj tid',
53
- dateTableLabel: 'välj datum'
54
-
51
+ dateTableLabel: 'välj datum',
55
52
  // Field section placeholders
56
- // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
57
- // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
58
- // fieldDayPlaceholder: () => 'DD',
59
- // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
60
- // fieldHoursPlaceholder: () => 'hh',
61
- // fieldMinutesPlaceholder: () => 'mm',
62
- // fieldSecondsPlaceholder: () => 'ss',
63
- // fieldMeridiemPlaceholder: () => 'aa',
64
-
53
+ fieldYearPlaceholder: params => 'Å'.repeat(params.digitAmount),
54
+ fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
55
+ fieldDayPlaceholder: () => 'DD',
56
+ fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
57
+ fieldHoursPlaceholder: () => 'tt',
58
+ fieldMinutesPlaceholder: () => 'mm',
59
+ fieldSecondsPlaceholder: () => 'ss',
60
+ fieldMeridiemPlaceholder: () => 'aa',
65
61
  // View names
66
- // year: 'Year',
67
- // month: 'Month',
68
- // day: 'Day',
69
- // weekDay: 'Week day',
70
- // hours: 'Hours',
71
- // minutes: 'Minutes',
72
- // seconds: 'Seconds',
73
- // meridiem: 'Meridiem',
74
-
62
+ year: 'År',
63
+ month: 'Månad',
64
+ day: 'Dag',
65
+ weekDay: 'Veckodag',
66
+ hours: 'Timmar',
67
+ minutes: 'Minuter',
68
+ seconds: 'Sekunder',
69
+ meridiem: 'Meridiem',
75
70
  // Common
76
- // empty: 'Empty',
71
+ empty: 'Tom'
77
72
  };
78
73
  export const svSE = getPickersLocalization(svSEPickers);
@@ -16,11 +16,10 @@ const ukUAPickers = {
16
16
  // DateRange labels
17
17
  start: 'Початок',
18
18
  end: 'Кінець',
19
- // startDate: 'Start date',
20
- // startTime: 'Start time',
21
- // endDate: 'End date',
22
- // endTime: 'End time',
23
-
19
+ startDate: 'День початку',
20
+ startTime: 'Час початку',
21
+ endDate: 'День закінчення',
22
+ endTime: 'Час закінчення',
24
23
  // Action bar
25
24
  cancelButtonLabel: 'Відміна',
26
25
  clearButtonLabel: 'Очистити',
@@ -46,8 +45,7 @@ const ukUAPickers = {
46
45
  // Open picker labels
47
46
  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Оберіть дату, обрана дата ${utils.format(value, 'fullDate')}` : 'Оберіть дату',
48
47
  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Оберіть час, обраний час ${utils.format(value, 'fullTime')}` : 'Оберіть час',
49
- // fieldClearLabel: 'Clear value',
50
-
48
+ fieldClearLabel: 'Очистити дані',
51
49
  // Table labels
52
50
  timeTableLabel: 'оберіть час',
53
51
  dateTableLabel: 'оберіть дату',
@@ -59,19 +57,17 @@ const ukUAPickers = {
59
57
  fieldHoursPlaceholder: () => 'hh',
60
58
  fieldMinutesPlaceholder: () => 'mm',
61
59
  fieldSecondsPlaceholder: () => 'ss',
62
- fieldMeridiemPlaceholder: () => 'aa'
63
-
60
+ fieldMeridiemPlaceholder: () => 'aa',
64
61
  // View names
65
- // year: 'Year',
66
- // month: 'Month',
67
- // day: 'Day',
68
- // weekDay: 'Week day',
69
- // hours: 'Hours',
70
- // minutes: 'Minutes',
71
- // seconds: 'Seconds',
72
- // meridiem: 'Meridiem',
73
-
62
+ year: 'Рік',
63
+ month: 'Місяць',
64
+ day: 'День',
65
+ weekDay: 'День тижня',
66
+ hours: 'Годин',
67
+ minutes: 'Хвилин',
68
+ seconds: 'Секунд',
69
+ meridiem: 'Меридіем',
74
70
  // Common
75
- // empty: 'Empty',
71
+ empty: 'Порожній'
76
72
  };
77
73
  export const ukUA = getPickersLocalization(ukUAPickers);
@@ -371,7 +371,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
371
371
  * Formats the day of week displayed in the calendar header.
372
372
  * @param {TDate} date The date of the day of week provided by the adapter.
373
373
  * @returns {string} The name to display.
374
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
374
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
375
375
  */
376
376
  dayOfWeekFormatter: _propTypes.default.func,
377
377
  /**
@@ -283,7 +283,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
283
283
  * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
284
284
  * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
285
285
  *
286
- * @default `false`
286
+ * @default false
287
287
  */
288
288
  shouldRespectLeadingZeros: _propTypes.default.bool,
289
289
  /**
@@ -74,7 +74,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
74
74
  * Formats the day of week displayed in the calendar header.
75
75
  * @param {TDate} date The date of the day of week provided by the adapter.
76
76
  * @returns {string} The name to display.
77
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
77
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
78
78
  */
79
79
  dayOfWeekFormatter: _propTypes.default.func,
80
80
  /**
@@ -73,7 +73,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
73
73
  // ----------------------------------------------------------------------
74
74
  /**
75
75
  * 12h/24h view for hour selection clock.
76
- * @default `utils.is12HourCycleInCurrentLocale()`
76
+ * @default utils.is12HourCycleInCurrentLocale()
77
77
  */
78
78
  ampm: _propTypes.default.bool,
79
79
  /**
@@ -324,7 +324,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
324
324
  * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
325
325
  * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
326
326
  *
327
- * @default `false`
327
+ * @default false
328
328
  */
329
329
  shouldRespectLeadingZeros: _propTypes.default.bool,
330
330
  /**
@@ -59,7 +59,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
59
59
  // ----------------------------------------------------------------------
60
60
  /**
61
61
  * 12h/24h view for hour selection clock.
62
- * @default `utils.is12HourCycleInCurrentLocale()`
62
+ * @default utils.is12HourCycleInCurrentLocale()
63
63
  */
64
64
  ampm: _propTypes.default.bool,
65
65
  /**
@@ -84,7 +84,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
84
84
  * Formats the day of week displayed in the calendar header.
85
85
  * @param {TDate} date The date of the day of week provided by the adapter.
86
86
  * @returns {string} The name to display.
87
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
87
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
88
88
  */
89
89
  dayOfWeekFormatter: _propTypes.default.func,
90
90
  /**
@@ -95,7 +95,7 @@ DesktopDatePicker.propTypes = {
95
95
  * Formats the day of week displayed in the calendar header.
96
96
  * @param {TDate} date The date of the day of week provided by the adapter.
97
97
  * @returns {string} The name to display.
98
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
98
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
99
99
  */
100
100
  dayOfWeekFormatter: _propTypes.default.func,
101
101
  /**
@@ -54,15 +54,24 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
54
54
  children: [inViewRenderers[!isTimeViewActive ? popperView : 'day']?.((0, _extends2.default)({}, rendererProps, {
55
55
  view: !isTimeViewActive ? popperView : 'day',
56
56
  focusedView: focusedView && (0, _internals.isDatePickerView)(focusedView) ? focusedView : null,
57
- views: rendererProps.views.filter(_internals.isDatePickerView)
57
+ views: rendererProps.views.filter(_internals.isDatePickerView),
58
+ sx: [{
59
+ gridColumn: 1
60
+ }, ...finalProps.sx]
58
61
  })), timeViewsCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
59
62
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
60
- orientation: "vertical"
63
+ orientation: "vertical",
64
+ sx: {
65
+ gridColumn: 2
66
+ }
61
67
  }), inViewRenderers[isTimeViewActive ? popperView : 'hours']?.((0, _extends2.default)({}, finalProps, {
62
68
  view: isTimeViewActive ? popperView : 'hours',
63
69
  focusedView: focusedView && (0, _internals.isInternalTimeView)(focusedView) ? focusedView : null,
64
70
  openTo: (0, _internals.isInternalTimeView)(openTo) ? openTo : 'hours',
65
- views: rendererProps.views.filter(_internals.isInternalTimeView)
71
+ views: rendererProps.views.filter(_internals.isInternalTimeView),
72
+ sx: [{
73
+ gridColumn: 3
74
+ }, ...finalProps.sx]
66
75
  }))]
67
76
  })]
68
77
  });
@@ -156,7 +165,7 @@ DesktopDateTimePicker.propTypes = {
156
165
  // ----------------------------------------------------------------------
157
166
  /**
158
167
  * 12h/24h view for hour selection clock.
159
- * @default `utils.is12HourCycleInCurrentLocale()`
168
+ * @default utils.is12HourCycleInCurrentLocale()
160
169
  */
161
170
  ampm: _propTypes.default.bool,
162
171
  /**
@@ -181,7 +190,7 @@ DesktopDateTimePicker.propTypes = {
181
190
  * Formats the day of week displayed in the calendar header.
182
191
  * @param {TDate} date The date of the day of week provided by the adapter.
183
192
  * @returns {string} The name to display.
184
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
193
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
185
194
  */
186
195
  dayOfWeekFormatter: _propTypes.default.func,
187
196
  /**
@@ -101,7 +101,7 @@ DesktopTimePicker.propTypes = {
101
101
  // ----------------------------------------------------------------------
102
102
  /**
103
103
  * 12h/24h view for hour selection clock.
104
- * @default `utils.is12HourCycleInCurrentLocale()`
104
+ * @default utils.is12HourCycleInCurrentLocale()
105
105
  */
106
106
  ampm: _propTypes.default.bool,
107
107
  /**
@@ -283,7 +283,7 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
283
283
  // ----------------------------------------------------------------------
284
284
  /**
285
285
  * 12h/24h view for hour selection clock.
286
- * @default `utils.is12HourCycleInCurrentLocale()`
286
+ * @default utils.is12HourCycleInCurrentLocale()
287
287
  */
288
288
  ampm: _propTypes.default.bool,
289
289
  /**
@@ -92,7 +92,7 @@ MobileDatePicker.propTypes = {
92
92
  * Formats the day of week displayed in the calendar header.
93
93
  * @param {TDate} date The date of the day of week provided by the adapter.
94
94
  * @returns {string} The name to display.
95
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
95
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
96
96
  */
97
97
  dayOfWeekFormatter: _propTypes.default.func,
98
98
  /**
@@ -87,7 +87,7 @@ MobileDateTimePicker.propTypes = {
87
87
  // ----------------------------------------------------------------------
88
88
  /**
89
89
  * 12h/24h view for hour selection clock.
90
- * @default `utils.is12HourCycleInCurrentLocale()`
90
+ * @default utils.is12HourCycleInCurrentLocale()
91
91
  */
92
92
  ampm: _propTypes.default.bool,
93
93
  /**
@@ -112,7 +112,7 @@ MobileDateTimePicker.propTypes = {
112
112
  * Formats the day of week displayed in the calendar header.
113
113
  * @param {TDate} date The date of the day of week provided by the adapter.
114
114
  * @returns {string} The name to display.
115
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
115
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
116
116
  */
117
117
  dayOfWeekFormatter: _propTypes.default.func,
118
118
  /**
@@ -80,7 +80,7 @@ MobileTimePicker.propTypes = {
80
80
  // ----------------------------------------------------------------------
81
81
  /**
82
82
  * 12h/24h view for hour selection clock.
83
- * @default `utils.is12HourCycleInCurrentLocale()`
83
+ * @default utils.is12HourCycleInCurrentLocale()
84
84
  */
85
85
  ampm: _propTypes.default.bool,
86
86
  /**
@@ -340,7 +340,7 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
340
340
  // ----------------------------------------------------------------------
341
341
  /**
342
342
  * 12h/24h view for hour selection clock.
343
- * @default `utils.is12HourCycleInCurrentLocale()`
343
+ * @default utils.is12HourCycleInCurrentLocale()
344
344
  */
345
345
  ampm: _propTypes.default.bool,
346
346
  /**
@@ -100,7 +100,7 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
100
100
  /**
101
101
  * Ordered array of shortcuts to display.
102
102
  * If empty, does not display the shortcuts.
103
- * @default `[]`
103
+ * @default []
104
104
  */
105
105
  items: _propTypes.default.arrayOf(_propTypes.default.shape({
106
106
  getValue: _propTypes.default.func.isRequired,
@@ -73,7 +73,7 @@ StaticDatePicker.propTypes = {
73
73
  * Formats the day of week displayed in the calendar header.
74
74
  * @param {TDate} date The date of the day of week provided by the adapter.
75
75
  * @returns {string} The name to display.
76
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
76
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
77
77
  */
78
78
  dayOfWeekFormatter: _propTypes.default.func,
79
79
  /**
@@ -73,7 +73,7 @@ StaticDateTimePicker.propTypes = {
73
73
  // ----------------------------------------------------------------------
74
74
  /**
75
75
  * 12h/24h view for hour selection clock.
76
- * @default `utils.is12HourCycleInCurrentLocale()`
76
+ * @default utils.is12HourCycleInCurrentLocale()
77
77
  */
78
78
  ampm: _propTypes.default.bool,
79
79
  /**
@@ -93,7 +93,7 @@ StaticDateTimePicker.propTypes = {
93
93
  * Formats the day of week displayed in the calendar header.
94
94
  * @param {TDate} date The date of the day of week provided by the adapter.
95
95
  * @returns {string} The name to display.
96
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
96
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
97
97
  */
98
98
  dayOfWeekFormatter: _propTypes.default.func,
99
99
  /**
@@ -65,7 +65,7 @@ StaticTimePicker.propTypes = {
65
65
  // ----------------------------------------------------------------------
66
66
  /**
67
67
  * 12h/24h view for hour selection clock.
68
- * @default `utils.is12HourCycleInCurrentLocale()`
68
+ * @default utils.is12HourCycleInCurrentLocale()
69
69
  */
70
70
  ampm: _propTypes.default.bool,
71
71
  /**
@@ -325,7 +325,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
325
325
  // ----------------------------------------------------------------------
326
326
  /**
327
327
  * 12h/24h view for hour selection clock.
328
- * @default `utils.is12HourCycleInCurrentLocale()`
328
+ * @default utils.is12HourCycleInCurrentLocale()
329
329
  */
330
330
  ampm: _propTypes.default.bool,
331
331
  /**