@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.
- package/CHANGELOG.md +246 -4
- package/DateCalendar/DateCalendar.js +1 -1
- package/DateCalendar/DayCalendar.d.ts +1 -1
- package/DateField/DateField.js +1 -1
- package/DatePicker/DatePicker.js +1 -1
- package/DatePicker/DatePickerToolbar.js +11 -6
- package/DateTimeField/DateTimeField.js +2 -2
- package/DateTimeField/DateTimeField.types.d.ts +1 -1
- package/DateTimePicker/DateTimePicker.js +2 -2
- package/DateTimePicker/DateTimePickerToolbar.js +97 -45
- package/DayCalendarSkeleton/DayCalendarSkeleton.js +12 -8
- package/DesktopDatePicker/DesktopDatePicker.js +1 -1
- package/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
- package/DesktopTimePicker/DesktopTimePicker.js +1 -1
- package/DigitalClock/DigitalClock.js +15 -7
- package/MobileDatePicker/MobileDatePicker.js +1 -1
- package/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
- package/MobileTimePicker/MobileTimePicker.js +1 -1
- package/MonthCalendar/PickersMonth.js +12 -6
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -1
- package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +13 -4
- package/PickersCalendarHeader/PickersCalendarHeader.js +13 -9
- package/PickersDay/PickersDay.js +30 -15
- package/PickersLayout/PickersLayout.js +31 -17
- package/PickersShortcuts/PickersShortcuts.d.ts +1 -1
- package/PickersShortcuts/PickersShortcuts.js +1 -1
- package/PickersTextField/PickersFilledInput/PickersFilledInput.js +137 -72
- package/PickersTextField/PickersInput/PickersInput.js +76 -54
- package/PickersTextField/PickersInputBase/PickersInputBase.js +64 -24
- package/PickersTextField/PickersInputBase/PickersInputBase.types.d.ts +7 -0
- package/PickersTextField/PickersOutlinedInput/Outline.js +58 -41
- package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +31 -12
- package/README.md +1 -1
- package/StaticDatePicker/StaticDatePicker.js +1 -1
- package/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
- package/StaticTimePicker/StaticTimePicker.js +1 -1
- package/TimeClock/Clock.js +48 -35
- package/TimeClock/ClockNumber.js +12 -7
- package/TimeClock/ClockPointer.js +23 -13
- package/TimeClock/TimeClock.js +1 -1
- package/TimeField/TimeField.js +2 -2
- package/TimeField/TimeField.types.d.ts +1 -1
- package/TimePicker/TimePicker.js +1 -1
- package/TimePicker/TimePickerToolbar.js +25 -16
- package/YearCalendar/PickersYear.js +12 -6
- package/index.js +1 -1
- package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +11 -6
- package/internals/components/PickersPopper.js +12 -8
- package/internals/components/PickersToolbar.js +39 -18
- package/internals/hooks/useField/useField.js +4 -2
- package/internals/hooks/useField/useField.types.d.ts +2 -1
- package/internals/hooks/useField/useFieldV6TextField.js +10 -3
- package/internals/models/props/clock.d.ts +1 -1
- package/locales/faIR.js +7 -8
- package/locales/itIT.js +16 -20
- package/locales/ptBR.js +14 -17
- package/locales/ukUA.js +15 -19
- package/locales/zhHK.js +14 -17
- package/modern/DateCalendar/DateCalendar.js +1 -1
- package/modern/DateField/DateField.js +1 -1
- package/modern/DatePicker/DatePicker.js +1 -1
- package/modern/DatePicker/DatePickerToolbar.js +11 -6
- package/modern/DateTimeField/DateTimeField.js +2 -2
- package/modern/DateTimePicker/DateTimePicker.js +2 -2
- package/modern/DateTimePicker/DateTimePickerToolbar.js +97 -45
- package/modern/DayCalendarSkeleton/DayCalendarSkeleton.js +12 -8
- package/modern/DesktopDatePicker/DesktopDatePicker.js +1 -1
- package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
- package/modern/DesktopTimePicker/DesktopTimePicker.js +1 -1
- package/modern/DigitalClock/DigitalClock.js +15 -7
- package/modern/MobileDatePicker/MobileDatePicker.js +1 -1
- package/modern/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
- package/modern/MobileTimePicker/MobileTimePicker.js +1 -1
- package/modern/MonthCalendar/PickersMonth.js +12 -6
- package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -1
- package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +13 -4
- package/modern/PickersCalendarHeader/PickersCalendarHeader.js +13 -9
- package/modern/PickersDay/PickersDay.js +30 -15
- package/modern/PickersLayout/PickersLayout.js +31 -17
- package/modern/PickersShortcuts/PickersShortcuts.js +1 -1
- package/modern/PickersTextField/PickersFilledInput/PickersFilledInput.js +137 -72
- package/modern/PickersTextField/PickersInput/PickersInput.js +76 -54
- package/modern/PickersTextField/PickersInputBase/PickersInputBase.js +64 -24
- package/modern/PickersTextField/PickersOutlinedInput/Outline.js +58 -41
- package/modern/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +31 -12
- package/modern/StaticDatePicker/StaticDatePicker.js +1 -1
- package/modern/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
- package/modern/StaticTimePicker/StaticTimePicker.js +1 -1
- package/modern/TimeClock/Clock.js +48 -35
- package/modern/TimeClock/ClockNumber.js +12 -7
- package/modern/TimeClock/ClockPointer.js +23 -13
- package/modern/TimeClock/TimeClock.js +1 -1
- package/modern/TimeField/TimeField.js +2 -2
- package/modern/TimePicker/TimePicker.js +1 -1
- package/modern/TimePicker/TimePickerToolbar.js +25 -16
- package/modern/YearCalendar/PickersYear.js +12 -6
- package/modern/index.js +1 -1
- package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +11 -6
- package/modern/internals/components/PickersPopper.js +12 -8
- package/modern/internals/components/PickersToolbar.js +39 -18
- package/modern/internals/hooks/useField/useField.js +4 -2
- package/modern/internals/hooks/useField/useFieldV6TextField.js +10 -3
- package/modern/locales/faIR.js +7 -8
- package/modern/locales/itIT.js +16 -20
- package/modern/locales/ptBR.js +14 -17
- package/modern/locales/ukUA.js +15 -19
- package/modern/locales/zhHK.js +14 -17
- package/node/DateCalendar/DateCalendar.js +1 -1
- package/node/DateField/DateField.js +1 -1
- package/node/DatePicker/DatePicker.js +1 -1
- package/node/DatePicker/DatePickerToolbar.js +11 -6
- package/node/DateTimeField/DateTimeField.js +2 -2
- package/node/DateTimePicker/DateTimePicker.js +2 -2
- package/node/DateTimePicker/DateTimePickerToolbar.js +97 -45
- package/node/DayCalendarSkeleton/DayCalendarSkeleton.js +12 -8
- package/node/DesktopDatePicker/DesktopDatePicker.js +1 -1
- package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
- package/node/DesktopTimePicker/DesktopTimePicker.js +1 -1
- package/node/DigitalClock/DigitalClock.js +15 -7
- package/node/MobileDatePicker/MobileDatePicker.js +1 -1
- package/node/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
- package/node/MobileTimePicker/MobileTimePicker.js +1 -1
- package/node/MonthCalendar/PickersMonth.js +12 -6
- package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js +1 -1
- package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js +13 -4
- package/node/PickersCalendarHeader/PickersCalendarHeader.js +13 -9
- package/node/PickersDay/PickersDay.js +30 -15
- package/node/PickersLayout/PickersLayout.js +31 -17
- package/node/PickersShortcuts/PickersShortcuts.js +1 -1
- package/node/PickersTextField/PickersFilledInput/PickersFilledInput.js +137 -72
- package/node/PickersTextField/PickersInput/PickersInput.js +76 -54
- package/node/PickersTextField/PickersInputBase/PickersInputBase.js +64 -24
- package/node/PickersTextField/PickersOutlinedInput/Outline.js +58 -41
- package/node/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js +31 -12
- package/node/StaticDatePicker/StaticDatePicker.js +1 -1
- package/node/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
- package/node/StaticTimePicker/StaticTimePicker.js +1 -1
- package/node/TimeClock/Clock.js +48 -35
- package/node/TimeClock/ClockNumber.js +12 -7
- package/node/TimeClock/ClockPointer.js +23 -13
- package/node/TimeClock/TimeClock.js +1 -1
- package/node/TimeField/TimeField.js +2 -2
- package/node/TimePicker/TimePicker.js +1 -1
- package/node/TimePicker/TimePickerToolbar.js +25 -16
- package/node/YearCalendar/PickersYear.js +12 -6
- package/node/index.js +1 -1
- package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js +11 -6
- package/node/internals/components/PickersPopper.js +12 -8
- package/node/internals/components/PickersToolbar.js +39 -18
- package/node/internals/hooks/useField/useField.js +4 -2
- package/node/internals/hooks/useField/useFieldV6TextField.js +10 -3
- package/node/locales/faIR.js +7 -8
- package/node/locales/itIT.js +16 -20
- package/node/locales/ptBR.js +14 -17
- package/node/locales/ukUA.js +15 -19
- package/node/locales/zhHK.js +14 -17
- 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
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
-
|
|
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
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
-
|
|
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
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
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
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
62
|
+
year: 'Рік',
|
|
63
|
+
month: 'Місяць',
|
|
64
|
+
day: 'День',
|
|
65
|
+
weekDay: 'День тижня',
|
|
66
|
+
hours: 'Годин',
|
|
67
|
+
minutes: 'Хвилин',
|
|
68
|
+
seconds: 'Секунд',
|
|
69
|
+
meridiem: 'Меридіем',
|
|
74
70
|
// Common
|
|
75
|
-
|
|
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
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
63
|
+
year: '年',
|
|
64
|
+
month: '月',
|
|
65
|
+
day: '日',
|
|
66
|
+
weekDay: '星期',
|
|
67
|
+
hours: '小時',
|
|
68
|
+
minutes: '分鐘',
|
|
69
|
+
seconds: '秒',
|
|
70
|
+
meridiem: '子午線',
|
|
74
71
|
// Common
|
|
75
|
-
|
|
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 (
|
|
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
|
|
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 (
|
|
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
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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
|
|
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
|
|
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
|
|
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 (
|
|
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
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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:
|
|
96
|
-
},
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
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
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
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
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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 (
|
|
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
|
|
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 (
|
|
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
|
|
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:
|
|
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
|
|
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 (
|
|
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
|
|
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 (
|
|
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
|
|
74
|
+
* @default utils.is12HourCycleInCurrentLocale()
|
|
75
75
|
*/
|
|
76
76
|
ampm: PropTypes.bool,
|
|
77
77
|
/**
|