@mui/x-date-pickers 7.0.0 → 7.1.1

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 (157) hide show
  1. package/CHANGELOG.md +246 -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/DatePicker/DatePickerToolbar.js +11 -6
  7. package/DateTimeField/DateTimeField.js +2 -2
  8. package/DateTimeField/DateTimeField.types.d.ts +1 -1
  9. package/DateTimePicker/DateTimePicker.js +2 -2
  10. package/DateTimePicker/DateTimePickerToolbar.js +97 -45
  11. package/DayCalendarSkeleton/DayCalendarSkeleton.js +12 -8
  12. package/DesktopDatePicker/DesktopDatePicker.js +1 -1
  13. package/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  14. package/DesktopTimePicker/DesktopTimePicker.js +1 -1
  15. package/DigitalClock/DigitalClock.js +15 -7
  16. package/MobileDatePicker/MobileDatePicker.js +1 -1
  17. package/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  18. package/MobileTimePicker/MobileTimePicker.js +1 -1
  19. package/MonthCalendar/PickersMonth.js +12 -6
  20. package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -1
  21. package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +13 -4
  22. package/PickersCalendarHeader/PickersCalendarHeader.js +13 -9
  23. package/PickersDay/PickersDay.js +30 -15
  24. package/PickersLayout/PickersLayout.js +31 -17
  25. package/PickersShortcuts/PickersShortcuts.d.ts +1 -1
  26. package/PickersShortcuts/PickersShortcuts.js +1 -1
  27. package/PickersTextField/PickersFilledInput/PickersFilledInput.js +137 -72
  28. package/PickersTextField/PickersInput/PickersInput.js +76 -54
  29. package/PickersTextField/PickersInputBase/PickersInputBase.js +64 -24
  30. package/PickersTextField/PickersInputBase/PickersInputBase.types.d.ts +7 -0
  31. package/PickersTextField/PickersOutlinedInput/Outline.js +58 -41
  32. package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +31 -12
  33. package/README.md +1 -1
  34. package/StaticDatePicker/StaticDatePicker.js +1 -1
  35. package/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  36. package/StaticTimePicker/StaticTimePicker.js +1 -1
  37. package/TimeClock/Clock.js +48 -35
  38. package/TimeClock/ClockNumber.js +12 -7
  39. package/TimeClock/ClockPointer.js +23 -13
  40. package/TimeClock/TimeClock.js +1 -1
  41. package/TimeField/TimeField.js +2 -2
  42. package/TimeField/TimeField.types.d.ts +1 -1
  43. package/TimePicker/TimePicker.js +1 -1
  44. package/TimePicker/TimePickerToolbar.js +25 -16
  45. package/YearCalendar/PickersYear.js +12 -6
  46. package/index.js +1 -1
  47. package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +11 -6
  48. package/internals/components/PickersPopper.js +12 -8
  49. package/internals/components/PickersToolbar.js +39 -18
  50. package/internals/hooks/useField/useField.js +4 -2
  51. package/internals/hooks/useField/useField.types.d.ts +2 -1
  52. package/internals/hooks/useField/useFieldV6TextField.js +10 -3
  53. package/internals/models/props/clock.d.ts +1 -1
  54. package/locales/faIR.js +7 -8
  55. package/locales/itIT.js +16 -20
  56. package/locales/ptBR.js +14 -17
  57. package/locales/ukUA.js +15 -19
  58. package/locales/zhHK.js +14 -17
  59. package/modern/DateCalendar/DateCalendar.js +1 -1
  60. package/modern/DateField/DateField.js +1 -1
  61. package/modern/DatePicker/DatePicker.js +1 -1
  62. package/modern/DatePicker/DatePickerToolbar.js +11 -6
  63. package/modern/DateTimeField/DateTimeField.js +2 -2
  64. package/modern/DateTimePicker/DateTimePicker.js +2 -2
  65. package/modern/DateTimePicker/DateTimePickerToolbar.js +97 -45
  66. package/modern/DayCalendarSkeleton/DayCalendarSkeleton.js +12 -8
  67. package/modern/DesktopDatePicker/DesktopDatePicker.js +1 -1
  68. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  69. package/modern/DesktopTimePicker/DesktopTimePicker.js +1 -1
  70. package/modern/DigitalClock/DigitalClock.js +15 -7
  71. package/modern/MobileDatePicker/MobileDatePicker.js +1 -1
  72. package/modern/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  73. package/modern/MobileTimePicker/MobileTimePicker.js +1 -1
  74. package/modern/MonthCalendar/PickersMonth.js +12 -6
  75. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -1
  76. package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +13 -4
  77. package/modern/PickersCalendarHeader/PickersCalendarHeader.js +13 -9
  78. package/modern/PickersDay/PickersDay.js +30 -15
  79. package/modern/PickersLayout/PickersLayout.js +31 -17
  80. package/modern/PickersShortcuts/PickersShortcuts.js +1 -1
  81. package/modern/PickersTextField/PickersFilledInput/PickersFilledInput.js +137 -72
  82. package/modern/PickersTextField/PickersInput/PickersInput.js +76 -54
  83. package/modern/PickersTextField/PickersInputBase/PickersInputBase.js +64 -24
  84. package/modern/PickersTextField/PickersOutlinedInput/Outline.js +58 -41
  85. package/modern/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +31 -12
  86. package/modern/StaticDatePicker/StaticDatePicker.js +1 -1
  87. package/modern/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  88. package/modern/StaticTimePicker/StaticTimePicker.js +1 -1
  89. package/modern/TimeClock/Clock.js +48 -35
  90. package/modern/TimeClock/ClockNumber.js +12 -7
  91. package/modern/TimeClock/ClockPointer.js +23 -13
  92. package/modern/TimeClock/TimeClock.js +1 -1
  93. package/modern/TimeField/TimeField.js +2 -2
  94. package/modern/TimePicker/TimePicker.js +1 -1
  95. package/modern/TimePicker/TimePickerToolbar.js +25 -16
  96. package/modern/YearCalendar/PickersYear.js +12 -6
  97. package/modern/index.js +1 -1
  98. package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +11 -6
  99. package/modern/internals/components/PickersPopper.js +12 -8
  100. package/modern/internals/components/PickersToolbar.js +39 -18
  101. package/modern/internals/hooks/useField/useField.js +4 -2
  102. package/modern/internals/hooks/useField/useFieldV6TextField.js +10 -3
  103. package/modern/locales/faIR.js +7 -8
  104. package/modern/locales/itIT.js +16 -20
  105. package/modern/locales/ptBR.js +14 -17
  106. package/modern/locales/ukUA.js +15 -19
  107. package/modern/locales/zhHK.js +14 -17
  108. package/node/DateCalendar/DateCalendar.js +1 -1
  109. package/node/DateField/DateField.js +1 -1
  110. package/node/DatePicker/DatePicker.js +1 -1
  111. package/node/DatePicker/DatePickerToolbar.js +11 -6
  112. package/node/DateTimeField/DateTimeField.js +2 -2
  113. package/node/DateTimePicker/DateTimePicker.js +2 -2
  114. package/node/DateTimePicker/DateTimePickerToolbar.js +97 -45
  115. package/node/DayCalendarSkeleton/DayCalendarSkeleton.js +12 -8
  116. package/node/DesktopDatePicker/DesktopDatePicker.js +1 -1
  117. package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  118. package/node/DesktopTimePicker/DesktopTimePicker.js +1 -1
  119. package/node/DigitalClock/DigitalClock.js +15 -7
  120. package/node/MobileDatePicker/MobileDatePicker.js +1 -1
  121. package/node/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  122. package/node/MobileTimePicker/MobileTimePicker.js +1 -1
  123. package/node/MonthCalendar/PickersMonth.js +12 -6
  124. package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -1
  125. package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +13 -4
  126. package/node/PickersCalendarHeader/PickersCalendarHeader.js +13 -9
  127. package/node/PickersDay/PickersDay.js +30 -15
  128. package/node/PickersLayout/PickersLayout.js +31 -17
  129. package/node/PickersShortcuts/PickersShortcuts.js +1 -1
  130. package/node/PickersTextField/PickersFilledInput/PickersFilledInput.js +137 -72
  131. package/node/PickersTextField/PickersInput/PickersInput.js +76 -54
  132. package/node/PickersTextField/PickersInputBase/PickersInputBase.js +64 -24
  133. package/node/PickersTextField/PickersOutlinedInput/Outline.js +58 -41
  134. package/node/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +31 -12
  135. package/node/StaticDatePicker/StaticDatePicker.js +1 -1
  136. package/node/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  137. package/node/StaticTimePicker/StaticTimePicker.js +1 -1
  138. package/node/TimeClock/Clock.js +48 -35
  139. package/node/TimeClock/ClockNumber.js +12 -7
  140. package/node/TimeClock/ClockPointer.js +23 -13
  141. package/node/TimeClock/TimeClock.js +1 -1
  142. package/node/TimeField/TimeField.js +2 -2
  143. package/node/TimePicker/TimePicker.js +1 -1
  144. package/node/TimePicker/TimePickerToolbar.js +25 -16
  145. package/node/YearCalendar/PickersYear.js +12 -6
  146. package/node/index.js +1 -1
  147. package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +11 -6
  148. package/node/internals/components/PickersPopper.js +12 -8
  149. package/node/internals/components/PickersToolbar.js +39 -18
  150. package/node/internals/hooks/useField/useField.js +4 -2
  151. package/node/internals/hooks/useField/useFieldV6TextField.js +10 -3
  152. package/node/locales/faIR.js +7 -8
  153. package/node/locales/itIT.js +16 -20
  154. package/node/locales/ptBR.js +14 -17
  155. package/node/locales/ukUA.js +15 -19
  156. package/node/locales/zhHK.js +14 -17
  157. package/package.json +2 -2
package/locales/itIT.js CHANGED
@@ -16,11 +16,10 @@ const itITPickers = {
16
16
  // DateRange labels
17
17
  start: 'Inizio',
18
18
  end: 'Fine',
19
- // startDate: 'Start date',
20
- // startTime: 'Start time',
21
- // endDate: 'End date',
22
- // endTime: 'End time',
23
-
19
+ startDate: 'Data di inizio',
20
+ startTime: 'Ora di inizio',
21
+ endDate: 'Data di fine',
22
+ endTime: 'Ora di fine',
24
23
  // Action bar
25
24
  cancelButtonLabel: 'Cancellare',
26
25
  clearButtonLabel: 'Sgomberare',
@@ -46,8 +45,7 @@ const itITPickers = {
46
45
  // Open picker labels
47
46
  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Scegli la data, la data selezionata è ${utils.format(value, 'fullDate')}` : 'Scegli la data',
48
47
  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Scegli l'ora, l'ora selezionata è ${utils.format(value, 'fullTime')}` : "Scegli l'ora",
49
- // fieldClearLabel: 'Clear value',
50
-
48
+ fieldClearLabel: 'Cancella valore',
51
49
  // Table labels
52
50
  timeTableLabel: "scegli un'ora",
53
51
  dateTableLabel: 'scegli una data',
@@ -55,23 +53,21 @@ const itITPickers = {
55
53
  fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
56
54
  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
57
55
  fieldDayPlaceholder: () => 'GG',
58
- // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
56
+ fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'GGGG' : 'GG',
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: 'Anno',
63
+ month: 'Mese',
64
+ day: 'Giorno',
65
+ weekDay: 'Giorno della settimana',
66
+ hours: 'Ore',
67
+ minutes: 'Minuti',
68
+ seconds: 'Secondi',
69
+ meridiem: 'Meridiano',
74
70
  // Common
75
- // empty: 'Empty',
71
+ empty: 'Vuoto'
76
72
  };
77
73
  export const itIT = getPickersLocalization(itITPickers);
package/locales/ptBR.js CHANGED
@@ -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);
package/locales/ukUA.js CHANGED
@@ -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);
package/locales/zhHK.js CHANGED
@@ -16,11 +16,10 @@ const zhHKPickers = {
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: '清除',
@@ -59,19 +58,17 @@ const zhHKPickers = {
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: '',
64
+ month: '',
65
+ day: '',
66
+ weekDay: '星期',
67
+ hours: '小時',
68
+ minutes: '分鐘',
69
+ seconds: '',
70
+ meridiem: '子午線',
74
71
  // Common
75
- // empty: 'Empty',
72
+ empty: '空值'
76
73
  };
77
74
  export const zhHK = getPickersLocalization(zhHKPickers);
@@ -363,7 +363,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
363
363
  * Formats the day of week displayed in the calendar header.
364
364
  * @param {TDate} date The date of the day of week provided by the adapter.
365
365
  * @returns {string} The name to display.
366
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
366
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
367
367
  */
368
368
  dayOfWeekFormatter: PropTypes.func,
369
369
  /**
@@ -274,7 +274,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
274
274
  * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
275
275
  * 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.
276
276
  *
277
- * @default `false`
277
+ * @default false
278
278
  */
279
279
  shouldRespectLeadingZeros: PropTypes.bool,
280
280
  /**
@@ -65,7 +65,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
65
65
  * Formats the day of week displayed in the calendar header.
66
66
  * @param {TDate} date The date of the day of week provided by the adapter.
67
67
  * @returns {string} The name to display.
68
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
68
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
69
69
  */
70
70
  dayOfWeekFormatter: PropTypes.func,
71
71
  /**
@@ -1,5 +1,5 @@
1
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
3
  const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className", "onViewChange", "view"];
4
4
  import * as React from 'react';
5
5
  import clsx from 'clsx';
@@ -31,11 +31,16 @@ const DatePickerToolbarTitle = styled(Typography, {
31
31
  name: 'MuiDatePickerToolbar',
32
32
  slot: 'Title',
33
33
  overridesResolver: (_, styles) => styles.title
34
- })(({
35
- ownerState
36
- }) => _extends({}, ownerState.isLandscape && {
37
- margin: 'auto 16px auto auto'
38
- }));
34
+ })({
35
+ variants: [{
36
+ props: {
37
+ isLandscape: true
38
+ },
39
+ style: {
40
+ margin: 'auto 16px auto auto'
41
+ }
42
+ }]
43
+ });
39
44
  /**
40
45
  * Demos:
41
46
  *
@@ -64,7 +64,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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
  /**
@@ -315,7 +315,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
315
315
  * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
316
316
  * 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.
317
317
  *
318
- * @default `false`
318
+ * @default false
319
319
  */
320
320
  shouldRespectLeadingZeros: PropTypes.bool,
321
321
  /**
@@ -50,7 +50,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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
  /**
@@ -75,7 +75,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
75
75
  * Formats the day of week displayed in the calendar header.
76
76
  * @param {TDate} date The date of the day of week provided by the adapter.
77
77
  * @returns {string} The name to display.
78
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
78
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
79
79
  */
80
80
  dayOfWeekFormatter: PropTypes.func,
81
81
  /**
@@ -40,20 +40,41 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
40
40
  slot: 'Root',
41
41
  overridesResolver: (props, styles) => styles.root
42
42
  })(({
43
- theme,
44
- ownerState
45
- }) => _extends({
46
- paddingLeft: ownerState.toolbarVariant === 'desktop' && !ownerState.isLandscape ? 24 : 16,
47
- paddingRight: ownerState.toolbarVariant === 'desktop' && !ownerState.isLandscape ? 0 : 16,
48
- borderBottom: ownerState.toolbarVariant === 'desktop' ? `1px solid ${(theme.vars || theme).palette.divider}` : undefined,
49
- borderRight: ownerState.toolbarVariant === 'desktop' && ownerState.isLandscape ? `1px solid ${(theme.vars || theme).palette.divider}` : undefined,
43
+ theme
44
+ }) => ({
45
+ paddingLeft: 16,
46
+ paddingRight: 16,
50
47
  justifyContent: 'space-around',
51
- position: 'relative'
52
- }, ownerState.toolbarVariant === 'desktop' && {
53
- [`& .${pickersToolbarClasses.content} .${pickersToolbarTextClasses.selected}`]: {
54
- color: (theme.vars || theme).palette.primary.main,
55
- fontWeight: theme.typography.fontWeightBold
56
- }
48
+ position: 'relative',
49
+ variants: [{
50
+ props: {
51
+ toolbarVariant: 'desktop'
52
+ },
53
+ style: {
54
+ borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
55
+ [`& .${pickersToolbarClasses.content} .${pickersToolbarTextClasses.selected}`]: {
56
+ color: (theme.vars || theme).palette.primary.main,
57
+ fontWeight: theme.typography.fontWeightBold
58
+ }
59
+ }
60
+ }, {
61
+ props: {
62
+ toolbarVariant: 'desktop',
63
+ isLandscape: true
64
+ },
65
+ style: {
66
+ borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
67
+ }
68
+ }, {
69
+ props: {
70
+ toolbarVariant: 'desktop',
71
+ isLandscape: false
72
+ },
73
+ style: {
74
+ paddingLeft: 24,
75
+ paddingRight: 0
76
+ }
77
+ }]
57
78
  }));
58
79
  DateTimePickerToolbarRoot.propTypes = {
59
80
  // ----------------------------- Warning --------------------------------
@@ -86,19 +107,35 @@ const DateTimePickerToolbarTimeContainer = styled('div', {
86
107
  slot: 'TimeContainer',
87
108
  overridesResolver: (props, styles) => styles.timeContainer
88
109
  })(({
89
- theme,
90
- ownerState
110
+ theme
91
111
  }) => {
92
- const direction = ownerState.isLandscape && ownerState.toolbarVariant !== 'desktop' ? 'column' : 'row';
93
112
  return _extends({
94
113
  display: 'flex',
95
- flexDirection: direction
96
- }, ownerState.toolbarVariant === 'desktop' && _extends({}, !ownerState.isLandscape && {
97
- gap: 9,
98
- marginRight: 4,
99
- alignSelf: 'flex-end'
100
- }), theme.direction === 'rtl' && {
101
- flexDirection: `${direction}-reverse`
114
+ flexDirection: 'row'
115
+ }, theme.direction === 'rtl' && {
116
+ flexDirection: 'row-reverse'
117
+ }, {
118
+ variants: [{
119
+ props: ({
120
+ isLandscape,
121
+ toolbarVariant
122
+ }) => isLandscape && toolbarVariant !== 'desktop',
123
+ style: _extends({
124
+ flexDirection: 'column'
125
+ }, theme.direction === 'rtl' && {
126
+ flexDirection: 'column-reverse'
127
+ })
128
+ }, {
129
+ props: {
130
+ toolbarVariant: 'desktop',
131
+ isLandscape: false
132
+ },
133
+ style: {
134
+ gap: 9,
135
+ marginRight: 4,
136
+ alignSelf: 'flex-end'
137
+ }
138
+ }]
102
139
  });
103
140
  });
104
141
  const DateTimePickerToolbarTimeDigitsContainer = styled('div', {
@@ -106,14 +143,20 @@ const DateTimePickerToolbarTimeDigitsContainer = styled('div', {
106
143
  slot: 'TimeDigitsContainer',
107
144
  overridesResolver: (props, styles) => styles.timeDigitsContainer
108
145
  })(({
109
- theme,
110
- ownerState
146
+ theme
111
147
  }) => _extends({
112
148
  display: 'flex'
113
- }, ownerState.toolbarVariant === 'desktop' && {
114
- gap: 1.5
115
149
  }, theme.direction === 'rtl' && {
116
150
  flexDirection: 'row-reverse'
151
+ }, {
152
+ variants: [{
153
+ props: {
154
+ toolbarVariant: 'desktop'
155
+ },
156
+ style: {
157
+ gap: 1.5
158
+ }
159
+ }]
117
160
  }));
118
161
  DateTimePickerToolbarTimeContainer.propTypes = {
119
162
  // ----------------------------- Warning --------------------------------
@@ -128,12 +171,18 @@ const DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
128
171
  name: 'MuiDateTimePickerToolbar',
129
172
  slot: 'Separator',
130
173
  overridesResolver: (props, styles) => styles.separator
131
- })(({
132
- ownerState
133
- }) => ({
134
- margin: ownerState.toolbarVariant === 'desktop' ? 0 : '0 4px 0 2px',
135
- cursor: 'default'
136
- }));
174
+ })({
175
+ margin: '0 4px 0 2px',
176
+ cursor: 'default',
177
+ variants: [{
178
+ props: {
179
+ toolbarVariant: 'desktop'
180
+ },
181
+ style: {
182
+ margin: 0
183
+ }
184
+ }]
185
+ });
137
186
 
138
187
  // Taken from TimePickerToolbar
139
188
  const DateTimePickerToolbarAmPmSelection = styled('div', {
@@ -144,23 +193,26 @@ const DateTimePickerToolbarAmPmSelection = styled('div', {
144
193
  }, {
145
194
  [`&.${dateTimePickerToolbarClasses.ampmLandscape}`]: styles.ampmLandscape
146
195
  }, styles.ampmSelection]
147
- })(({
148
- ownerState
149
- }) => _extends({
196
+ })({
150
197
  display: 'flex',
151
198
  flexDirection: 'column',
152
199
  marginRight: 'auto',
153
- marginLeft: 12
154
- }, ownerState.isLandscape && {
155
- margin: '4px 0 auto',
156
- flexDirection: 'row',
157
- justifyContent: 'space-around',
158
- width: '100%'
159
- }, {
200
+ marginLeft: 12,
160
201
  [`& .${dateTimePickerToolbarClasses.ampmLabel}`]: {
161
202
  fontSize: 17
162
- }
163
- }));
203
+ },
204
+ variants: [{
205
+ props: {
206
+ isLandscape: true
207
+ },
208
+ style: {
209
+ margin: '4px 0 auto',
210
+ flexDirection: 'row',
211
+ justifyContent: 'space-around',
212
+ width: '100%'
213
+ }
214
+ }]
215
+ });
164
216
 
165
217
  /**
166
218
  * Demos:
@@ -1,5 +1,5 @@
1
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
3
  const _excluded = ["className"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
@@ -41,13 +41,17 @@ const DayCalendarSkeletonDay = styled(Skeleton, {
41
41
  name: 'MuiDayCalendarSkeleton',
42
42
  slot: 'DaySkeleton',
43
43
  overridesResolver: (props, styles) => styles.daySkeleton
44
- })(({
45
- ownerState
46
- }) => _extends({
47
- margin: `0 ${DAY_MARGIN}px`
48
- }, ownerState.day === 0 && {
49
- visibility: 'hidden'
50
- }));
44
+ })({
45
+ margin: `0 ${DAY_MARGIN}px`,
46
+ variants: [{
47
+ props: {
48
+ day: 0
49
+ },
50
+ style: {
51
+ visibility: 'hidden'
52
+ }
53
+ }]
54
+ });
51
55
  DayCalendarSkeletonDay.propTypes = {
52
56
  // ----------------------------- Warning --------------------------------
53
57
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -86,7 +86,7 @@ DesktopDatePicker.propTypes = {
86
86
  * Formats the day of week displayed in the calendar header.
87
87
  * @param {TDate} date The date of the day of week provided by the adapter.
88
88
  * @returns {string} The name to display.
89
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
89
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
90
90
  */
91
91
  dayOfWeekFormatter: PropTypes.func,
92
92
  /**
@@ -148,7 +148,7 @@ DesktopDateTimePicker.propTypes = {
148
148
  // ----------------------------------------------------------------------
149
149
  /**
150
150
  * 12h/24h view for hour selection clock.
151
- * @default `utils.is12HourCycleInCurrentLocale()`
151
+ * @default utils.is12HourCycleInCurrentLocale()
152
152
  */
153
153
  ampm: PropTypes.bool,
154
154
  /**
@@ -173,7 +173,7 @@ DesktopDateTimePicker.propTypes = {
173
173
  * Formats the day of week displayed in the calendar header.
174
174
  * @param {TDate} date The date of the day of week provided by the adapter.
175
175
  * @returns {string} The name to display.
176
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
176
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
177
177
  */
178
178
  dayOfWeekFormatter: PropTypes.func,
179
179
  /**
@@ -92,7 +92,7 @@ DesktopTimePicker.propTypes = {
92
92
  // ----------------------------------------------------------------------
93
93
  /**
94
94
  * 12h/24h view for hour selection clock.
95
- * @default `utils.is12HourCycleInCurrentLocale()`
95
+ * @default utils.is12HourCycleInCurrentLocale()
96
96
  */
97
97
  ampm: PropTypes.bool,
98
98
  /**
@@ -36,16 +36,24 @@ const DigitalClockRoot = styled(PickerViewRoot, {
36
36
  name: 'MuiDigitalClock',
37
37
  slot: 'Root',
38
38
  overridesResolver: (props, styles) => styles.root
39
- })(({
40
- ownerState
41
- }) => ({
39
+ })({
42
40
  overflowY: 'auto',
43
41
  width: '100%',
44
42
  '@media (prefers-reduced-motion: no-preference)': {
45
- scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
43
+ scrollBehavior: 'auto'
46
44
  },
47
- maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT
48
- }));
45
+ maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT,
46
+ variants: [{
47
+ props: {
48
+ alreadyRendered: true
49
+ },
50
+ style: {
51
+ '@media (prefers-reduced-motion: no-preference)': {
52
+ scrollBehavior: 'smooth'
53
+ }
54
+ }
55
+ }]
56
+ });
49
57
  const DigitalClockList = styled(MenuList, {
50
58
  name: 'MuiDigitalClock',
51
59
  slot: 'List',
@@ -266,7 +274,7 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
266
274
  // ----------------------------------------------------------------------
267
275
  /**
268
276
  * 12h/24h view for hour selection clock.
269
- * @default `utils.is12HourCycleInCurrentLocale()`
277
+ * @default utils.is12HourCycleInCurrentLocale()
270
278
  */
271
279
  ampm: PropTypes.bool,
272
280
  /**
@@ -83,7 +83,7 @@ MobileDatePicker.propTypes = {
83
83
  * Formats the day of week displayed in the calendar header.
84
84
  * @param {TDate} date The date of the day of week provided by the adapter.
85
85
  * @returns {string} The name to display.
86
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
86
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
87
87
  */
88
88
  dayOfWeekFormatter: PropTypes.func,
89
89
  /**
@@ -78,7 +78,7 @@ MobileDateTimePicker.propTypes = {
78
78
  // ----------------------------------------------------------------------
79
79
  /**
80
80
  * 12h/24h view for hour selection clock.
81
- * @default `utils.is12HourCycleInCurrentLocale()`
81
+ * @default utils.is12HourCycleInCurrentLocale()
82
82
  */
83
83
  ampm: PropTypes.bool,
84
84
  /**
@@ -103,7 +103,7 @@ MobileDateTimePicker.propTypes = {
103
103
  * Formats the day of week displayed in the calendar header.
104
104
  * @param {TDate} date The date of the day of week provided by the adapter.
105
105
  * @returns {string} The name to display.
106
- * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
106
+ * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
107
107
  */
108
108
  dayOfWeekFormatter: PropTypes.func,
109
109
  /**
@@ -71,7 +71,7 @@ MobileTimePicker.propTypes = {
71
71
  // ----------------------------------------------------------------------
72
72
  /**
73
73
  * 12h/24h view for hour selection clock.
74
- * @default `utils.is12HourCycleInCurrentLocale()`
74
+ * @default utils.is12HourCycleInCurrentLocale()
75
75
  */
76
76
  ampm: PropTypes.bool,
77
77
  /**