From 3f247e5e335cd1fdceeb2d5d764da386e674bca2 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Fri, 16 Dec 2022 14:49:10 +0100 Subject: [PATCH] [pickers] Rework view internals (#7097) --- .../x/api/date-pickers/date-calendar.json | 14 +- .../api/date-pickers/date-range-calendar.json | 1 + .../x/api/date-pickers/date-range-picker.json | 1 - .../desktop-date-range-picker.json | 1 - .../desktop-next-date-picker.json | 6 + .../desktop-next-date-range-picker.json | 1 + .../desktop-next-date-time-picker.json | 6 + .../desktop-next-time-picker.json | 6 + .../mobile-date-range-picker.json | 1 - .../date-pickers/mobile-next-date-picker.json | 7 + .../mobile-next-date-range-picker.json | 1 + .../mobile-next-date-time-picker.json | 7 + .../date-pickers/mobile-next-time-picker.json | 7 + .../x/api/date-pickers/next-date-picker.json | 6 + .../date-pickers/next-date-range-picker.json | 1 + .../date-pickers/next-date-time-picker.json | 6 + .../x/api/date-pickers/next-time-picker.json | 6 + .../static-date-range-picker.json | 1 - .../date-pickers/static-next-date-picker.json | 6 + .../static-next-date-range-picker.json | 1 + .../static-next-date-time-picker.json | 6 + .../date-pickers/static-next-time-picker.json | 6 + .../date-pickers/date-calendar-pt.json | 11 +- .../date-pickers/date-calendar-zh.json | 11 +- .../api-docs/date-pickers/date-calendar.json | 11 +- .../date-pickers/date-range-calendar-pt.json | 1 + .../date-pickers/date-range-calendar-zh.json | 1 + .../date-pickers/date-range-calendar.json | 1 + .../date-pickers/date-range-picker-pt.json | 1 - .../date-pickers/date-range-picker-zh.json | 1 - .../date-pickers/date-range-picker.json | 1 - .../desktop-date-range-picker-pt.json | 1 - .../desktop-date-range-picker-zh.json | 1 - .../desktop-date-range-picker.json | 1 - .../desktop-next-date-picker-pt.json | 9 +- .../desktop-next-date-picker-zh.json | 9 +- .../desktop-next-date-picker.json | 9 +- .../desktop-next-date-range-picker-pt.json | 1 + .../desktop-next-date-range-picker-zh.json | 1 + .../desktop-next-date-range-picker.json | 1 + .../desktop-next-date-time-picker-pt.json | 9 +- .../desktop-next-date-time-picker-zh.json | 9 +- .../desktop-next-date-time-picker.json | 9 +- .../desktop-next-time-picker-pt.json | 9 +- .../desktop-next-time-picker-zh.json | 9 +- .../desktop-next-time-picker.json | 9 +- .../mobile-date-range-picker-pt.json | 1 - .../mobile-date-range-picker-zh.json | 1 - .../mobile-date-range-picker.json | 1 - .../mobile-next-date-picker-pt.json | 8 +- .../mobile-next-date-picker-zh.json | 8 +- .../date-pickers/mobile-next-date-picker.json | 8 +- .../mobile-next-date-range-picker-pt.json | 1 + .../mobile-next-date-range-picker-zh.json | 1 + .../mobile-next-date-range-picker.json | 1 + .../mobile-next-date-time-picker-pt.json | 8 +- .../mobile-next-date-time-picker-zh.json | 8 +- .../mobile-next-date-time-picker.json | 8 +- .../mobile-next-time-picker-pt.json | 8 +- .../mobile-next-time-picker-zh.json | 8 +- .../date-pickers/mobile-next-time-picker.json | 8 +- .../date-pickers/next-date-picker-pt.json | 9 +- .../date-pickers/next-date-picker-zh.json | 9 +- .../date-pickers/next-date-picker.json | 9 +- .../next-date-range-picker-pt.json | 1 + .../next-date-range-picker-zh.json | 1 + .../date-pickers/next-date-range-picker.json | 1 + .../next-date-time-picker-pt.json | 9 +- .../next-date-time-picker-zh.json | 9 +- .../date-pickers/next-date-time-picker.json | 9 +- .../date-pickers/next-time-picker-pt.json | 9 +- .../date-pickers/next-time-picker-zh.json | 9 +- .../date-pickers/next-time-picker.json | 9 +- .../static-date-range-picker-pt.json | 1 - .../static-date-range-picker-zh.json | 1 - .../static-date-range-picker.json | 1 - .../static-next-date-picker-pt.json | 9 +- .../static-next-date-picker-zh.json | 9 +- .../date-pickers/static-next-date-picker.json | 9 +- .../static-next-date-range-picker-pt.json | 1 + .../static-next-date-range-picker-zh.json | 1 + .../static-next-date-range-picker.json | 1 + .../static-next-date-time-picker-pt.json | 9 +- .../static-next-date-time-picker-zh.json | 9 +- .../static-next-date-time-picker.json | 9 +- .../static-next-time-picker-pt.json | 9 +- .../static-next-time-picker-zh.json | 9 +- .../date-pickers/static-next-time-picker.json | 9 +- .../DateRangeCalendar/DateRangeCalendar.tsx | 8 +- .../DateRangeCalendar.types.ts | 94 ++++---- .../src/DateRangePicker/DateRangePicker.tsx | 5 - .../DateRangePicker/DateRangePickerView.tsx | 15 +- .../DateRangePickerViewMobile.tsx | 2 +- .../DesktopDateRangePicker.tsx | 10 +- .../DesktopNextDateRangePicker.tsx | 6 + .../MobileDateRangePicker.tsx | 10 +- .../MobileNextDateRangePicker.tsx | 6 + .../NextDateRangePicker.tsx | 6 + .../src/NextDateRangePicker/shared.tsx | 2 +- .../StaticDateRangePicker.tsx | 5 - .../StaticNextDateRangePicker.tsx | 6 + .../src/DateCalendar/DateCalendar.tsx | 220 +++++++----------- .../DateCalendar/PickersCalendarHeader.tsx | 14 +- .../x-date-pickers/src/DatePicker/shared.ts | 2 +- .../src/DateTimePicker/DateTimePickerTabs.tsx | 4 +- .../DesktopDatePicker.test.tsx | 8 - .../DesktopDatePicker/DesktopDatePicker.tsx | 5 + .../DesktopDateTimePicker.tsx | 5 + .../DesktopNextDatePicker.tsx | 21 +- .../DesktopNextDateTimePicker.tsx | 21 +- .../DesktopNextTimePicker.tsx | 21 +- .../src/MobileDatePicker/MobileDatePicker.tsx | 5 + .../MobileDateTimePicker.tsx | 5 + .../MobileNextDatePicker.tsx | 23 +- .../MobileNextDateTimePicker.tsx | 23 +- .../MobileNextTimePicker.tsx | 23 +- .../src/MonthCalendar/MonthCalendar.tsx | 2 +- .../src/NextDatePicker/NextDatePicker.tsx | 21 +- .../src/NextDatePicker/shared.tsx | 14 +- .../NextDateTimePicker/NextDateTimePicker.tsx | 21 +- .../src/NextDateTimePicker/shared.tsx | 10 +- .../src/NextTimePicker/NextTimePicker.tsx | 21 +- .../src/NextTimePicker/shared.tsx | 10 +- .../StaticNextDatePicker.tsx | 21 +- .../StaticNextDateTimePicker.tsx | 21 +- .../StaticNextTimePicker.tsx | 21 +- .../src/TimeClock/TimeClock.tsx | 26 +-- .../src/YearCalendar/YearCalendar.tsx | 2 +- .../CalendarOrClockPicker.tsx | 49 ++-- .../useFocusManagement.tsx | 30 --- .../PickerStaticWrapper.tsx | 2 + .../src/internals/hooks/useField/index.ts | 2 +- .../src/internals/hooks/useField/useField.ts | 2 +- ...eField.interfaces.ts => useField.types.ts} | 0 .../hooks/useField/useField.utils.ts | 2 +- .../internals/hooks/useField/useFieldState.ts | 2 +- .../hooks/usePicker/usePickerValue.ts | 2 +- .../hooks/usePicker/usePickerViews.ts | 65 ++---- .../src/internals/hooks/useViews.tsx | 173 +++++++++++--- .../x-date-pickers/src/internals/index.ts | 1 + .../src/internals/utils/views.ts | 31 ++- scripts/x-date-pickers-pro.exports.json | 2 +- 142 files changed, 975 insertions(+), 626 deletions(-) delete mode 100644 packages/x-date-pickers/src/internals/components/CalendarOrClockPicker/useFocusManagement.tsx rename packages/x-date-pickers/src/internals/hooks/useField/{useField.interfaces.ts => useField.types.ts} (100%) diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index 14d8e59d13f7e..0ca7b1f20b60f 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -1,5 +1,6 @@ { "props": { + "autoFocus": { "type": { "name": "bool" } }, "components": { "type": { "name": "object" }, "default": "{}" }, "componentsProps": { "type": { "name": "object" }, "default": "{}" }, "dayOfWeekFormatter": { @@ -14,10 +15,17 @@ "disablePast": { "type": { "name": "bool" } }, "displayWeekNumber": { "type": { "name": "bool" } }, "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "focusedView": { + "type": { + "name": "enum", + "description": "'day'
| 'month'
| 'year'" + } + }, "loading": { "type": { "name": "bool" } }, "maxDate": { "type": { "name": "any" } }, "minDate": { "type": { "name": "any" } }, "onChange": { "type": { "name": "func" } }, + "onFocusedViewChange": { "type": { "name": "func" } }, "onMonthChange": { "type": { "name": "func" } }, "onViewChange": { "type": { "name": "func" } }, "onYearChange": { "type": { "name": "func" } }, @@ -25,8 +33,7 @@ "type": { "name": "enum", "description": "'day'
| 'month'
| 'year'" - }, - "default": "'day'" + } }, "readOnly": { "type": { "name": "bool" } }, "reduceAnimations": { @@ -58,8 +65,7 @@ "type": { "name": "arrayOf", "description": "Array<'day'
| 'month'
| 'year'>" - }, - "default": "['year', 'day']" + } } }, "slots": { diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.json b/docs/pages/x/api/date-pickers/date-range-calendar.json index 007f3e519a390..08c74a89a3bd3 100644 --- a/docs/pages/x/api/date-pickers/date-range-calendar.json +++ b/docs/pages/x/api/date-pickers/date-range-calendar.json @@ -1,5 +1,6 @@ { "props": { + "autoFocus": { "type": { "name": "bool" } }, "calendars": { "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "2" diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json index 2cff6e40d39f3..7a86c15b11da1 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -55,7 +55,6 @@ "onError": { "type": { "name": "func" } }, "onMonthChange": { "type": { "name": "func" } }, "onOpen": { "type": { "name": "func" } }, - "onViewChange": { "type": { "name": "func" } }, "open": { "type": { "name": "bool" } }, "OpenPickerButtonProps": { "type": { "name": "object" } }, "readOnly": { "type": { "name": "bool" } }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json index 1c3394896357c..59c589a49f682 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json @@ -51,7 +51,6 @@ "onError": { "type": { "name": "func" } }, "onMonthChange": { "type": { "name": "func" } }, "onOpen": { "type": { "name": "func" } }, - "onViewChange": { "type": { "name": "func" } }, "open": { "type": { "name": "bool" } }, "OpenPickerButtonProps": { "type": { "name": "object" } }, "readOnly": { "type": { "name": "bool" } }, diff --git a/docs/pages/x/api/date-pickers/desktop-next-date-picker.json b/docs/pages/x/api/date-pickers/desktop-next-date-picker.json index c627e25775fe6..d7300020e5a64 100644 --- a/docs/pages/x/api/date-pickers/desktop-next-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-next-date-picker.json @@ -78,6 +78,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'day'
| 'month'
| 'year'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/pages/x/api/date-pickers/desktop-next-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-next-date-range-picker.json index 39f77922b7c73..9e2126b5a6995 100644 --- a/docs/pages/x/api/date-pickers/desktop-next-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-next-date-range-picker.json @@ -1,5 +1,6 @@ { "props": { + "autoFocus": { "type": { "name": "bool" } }, "calendars": { "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "2" diff --git a/docs/pages/x/api/date-pickers/desktop-next-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-next-date-time-picker.json index 9a40f3b1689c3..a5030673d2a3b 100644 --- a/docs/pages/x/api/date-pickers/desktop-next-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-next-date-time-picker.json @@ -87,6 +87,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/pages/x/api/date-pickers/desktop-next-time-picker.json b/docs/pages/x/api/date-pickers/desktop-next-time-picker.json index 471e0e1afd2e4..e878b462d4cab 100644 --- a/docs/pages/x/api/date-pickers/desktop-next-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-next-time-picker.json @@ -60,6 +60,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'hours'
| 'minutes'
| 'seconds'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index d4fb93b246052..b33e2686fb7a1 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -51,7 +51,6 @@ "onError": { "type": { "name": "func" } }, "onMonthChange": { "type": { "name": "func" } }, "onOpen": { "type": { "name": "func" } }, - "onViewChange": { "type": { "name": "func" } }, "open": { "type": { "name": "bool" } }, "OpenPickerButtonProps": { "type": { "name": "object" } }, "readOnly": { "type": { "name": "bool" } }, diff --git a/docs/pages/x/api/date-pickers/mobile-next-date-picker.json b/docs/pages/x/api/date-pickers/mobile-next-date-picker.json index 1d21a316a2a76..8053fab38cb2b 100644 --- a/docs/pages/x/api/date-pickers/mobile-next-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-next-date-picker.json @@ -1,5 +1,6 @@ { "props": { + "autoFocus": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, "closeOnSelect": { "type": { "name": "bool" }, @@ -77,6 +78,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'day'
| 'month'
| 'year'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/pages/x/api/date-pickers/mobile-next-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-next-date-range-picker.json index a9b9aa4a101af..3c2e0e60bd9df 100644 --- a/docs/pages/x/api/date-pickers/mobile-next-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-next-date-range-picker.json @@ -1,5 +1,6 @@ { "props": { + "autoFocus": { "type": { "name": "bool" } }, "calendars": { "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "2" diff --git a/docs/pages/x/api/date-pickers/mobile-next-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-next-date-time-picker.json index 5b93c324a0ede..1dacd7d7778e2 100644 --- a/docs/pages/x/api/date-pickers/mobile-next-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-next-date-time-picker.json @@ -2,6 +2,7 @@ "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "ampmInClock": { "type": { "name": "bool" } }, + "autoFocus": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, "closeOnSelect": { "type": { "name": "bool" }, @@ -86,6 +87,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/pages/x/api/date-pickers/mobile-next-time-picker.json b/docs/pages/x/api/date-pickers/mobile-next-time-picker.json index ff36c7801c110..890599a75cf2f 100644 --- a/docs/pages/x/api/date-pickers/mobile-next-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-next-time-picker.json @@ -2,6 +2,7 @@ "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "ampmInClock": { "type": { "name": "bool" } }, + "autoFocus": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, "closeOnSelect": { "type": { "name": "bool" }, @@ -59,6 +60,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'hours'
| 'minutes'
| 'seconds'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/pages/x/api/date-pickers/next-date-picker.json b/docs/pages/x/api/date-pickers/next-date-picker.json index b7982e29849b5..19797e272a47b 100644 --- a/docs/pages/x/api/date-pickers/next-date-picker.json +++ b/docs/pages/x/api/date-pickers/next-date-picker.json @@ -82,6 +82,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'day'
| 'month'
| 'year'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/pages/x/api/date-pickers/next-date-range-picker.json b/docs/pages/x/api/date-pickers/next-date-range-picker.json index ebc217e6b8001..119d20a0891ef 100644 --- a/docs/pages/x/api/date-pickers/next-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/next-date-range-picker.json @@ -1,5 +1,6 @@ { "props": { + "autoFocus": { "type": { "name": "bool" } }, "calendars": { "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "2" diff --git a/docs/pages/x/api/date-pickers/next-date-time-picker.json b/docs/pages/x/api/date-pickers/next-date-time-picker.json index 7fa4e5008392e..695c568294370 100644 --- a/docs/pages/x/api/date-pickers/next-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/next-date-time-picker.json @@ -91,6 +91,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/pages/x/api/date-pickers/next-time-picker.json b/docs/pages/x/api/date-pickers/next-time-picker.json index 784f677bece07..2c4c8cd76dc93 100644 --- a/docs/pages/x/api/date-pickers/next-time-picker.json +++ b/docs/pages/x/api/date-pickers/next-time-picker.json @@ -64,6 +64,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'hours'
| 'minutes'
| 'seconds'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json index c71174abf8611..5bbe833b4f854 100644 --- a/docs/pages/x/api/date-pickers/static-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-range-picker.json @@ -53,7 +53,6 @@ "onAccept": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onMonthChange": { "type": { "name": "func" } }, - "onViewChange": { "type": { "name": "func" } }, "OpenPickerButtonProps": { "type": { "name": "object" } }, "readOnly": { "type": { "name": "bool" } }, "reduceAnimations": { diff --git a/docs/pages/x/api/date-pickers/static-next-date-picker.json b/docs/pages/x/api/date-pickers/static-next-date-picker.json index a55afd3894e8d..55351f2ae0f30 100644 --- a/docs/pages/x/api/date-pickers/static-next-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-next-date-picker.json @@ -62,6 +62,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'day'
| 'month'
| 'year'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/pages/x/api/date-pickers/static-next-date-range-picker.json b/docs/pages/x/api/date-pickers/static-next-date-range-picker.json index fde8bb12cc0b0..dc11f77ab8fc3 100644 --- a/docs/pages/x/api/date-pickers/static-next-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/static-next-date-range-picker.json @@ -1,5 +1,6 @@ { "props": { + "autoFocus": { "type": { "name": "bool" } }, "calendars": { "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "2" diff --git a/docs/pages/x/api/date-pickers/static-next-date-time-picker.json b/docs/pages/x/api/date-pickers/static-next-date-time-picker.json index 6a554b2978520..8cd7ac174e655 100644 --- a/docs/pages/x/api/date-pickers/static-next-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-next-date-time-picker.json @@ -71,6 +71,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/pages/x/api/date-pickers/static-next-time-picker.json b/docs/pages/x/api/date-pickers/static-next-time-picker.json index b4a765358e3c3..c3e512c215bdc 100644 --- a/docs/pages/x/api/date-pickers/static-next-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-next-time-picker.json @@ -44,6 +44,12 @@ } }, "value": { "type": { "name": "any" } }, + "view": { + "type": { + "name": "enum", + "description": "'hours'
| 'minutes'
| 'seconds'" + } + }, "views": { "type": { "name": "arrayOf", diff --git a/docs/translations/api-docs/date-pickers/date-calendar-pt.json b/docs/translations/api-docs/date-pickers/date-calendar-pt.json index f207cd00358b0..22e4b8c3a8756 100644 --- a/docs/translations/api-docs/date-pickers/date-calendar-pt.json +++ b/docs/translations/api-docs/date-pickers/date-calendar-pt.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", "dayOfWeekFormatter": "Formats the day of week displayed in the calendar header.

Signature:
function(day: string) => string
day: The day of week provided by the adapter's method getWeekdays.
returns (string): The name to display.", @@ -12,14 +13,16 @@ "disablePast": "If true disable values after the current date for date components, time for time components and both for date time components.", "displayWeekNumber": "If true, the week number will be display in the calendar.", "fixedWeekNumber": "Calendar will show more weeks in order to match this value. Put it to 6 for having fix number of week in Gregorian calendars", + "focusedView": "Controlled focused view.", "loading": "If true renders LoadingComponent in calendar instead of calendar view. Can be used to preload information and show it in calendar.", "maxDate": "Maximal selectable date.", "minDate": "Minimal selectable date.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TDate | null, selectionState: PickerSelectionState | undefined) => void
value: The new value.
selectionState: Indicates if the date selection is complete.", + "onFocusedViewChange": "Callback fired on focused view change.

Signature:
function(view: TView, hasFocus: boolean) => void
view: The new view to focus or not.
hasFocus: true if the view should be focused.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", - "openTo": "Initially open view.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "readOnly": "Make picker read only.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -29,8 +32,8 @@ "showDaysOutsideCurrentMonth": "If true, days that have outsideCurrentMonth={true} are displayed.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "view": "Controlled open view.", - "views": "Views for calendar picker." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, diff --git a/docs/translations/api-docs/date-pickers/date-calendar-zh.json b/docs/translations/api-docs/date-pickers/date-calendar-zh.json index f207cd00358b0..22e4b8c3a8756 100644 --- a/docs/translations/api-docs/date-pickers/date-calendar-zh.json +++ b/docs/translations/api-docs/date-pickers/date-calendar-zh.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", "dayOfWeekFormatter": "Formats the day of week displayed in the calendar header.

Signature:
function(day: string) => string
day: The day of week provided by the adapter's method getWeekdays.
returns (string): The name to display.", @@ -12,14 +13,16 @@ "disablePast": "If true disable values after the current date for date components, time for time components and both for date time components.", "displayWeekNumber": "If true, the week number will be display in the calendar.", "fixedWeekNumber": "Calendar will show more weeks in order to match this value. Put it to 6 for having fix number of week in Gregorian calendars", + "focusedView": "Controlled focused view.", "loading": "If true renders LoadingComponent in calendar instead of calendar view. Can be used to preload information and show it in calendar.", "maxDate": "Maximal selectable date.", "minDate": "Minimal selectable date.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TDate | null, selectionState: PickerSelectionState | undefined) => void
value: The new value.
selectionState: Indicates if the date selection is complete.", + "onFocusedViewChange": "Callback fired on focused view change.

Signature:
function(view: TView, hasFocus: boolean) => void
view: The new view to focus or not.
hasFocus: true if the view should be focused.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", - "openTo": "Initially open view.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "readOnly": "Make picker read only.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -29,8 +32,8 @@ "showDaysOutsideCurrentMonth": "If true, days that have outsideCurrentMonth={true} are displayed.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "view": "Controlled open view.", - "views": "Views for calendar picker." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, diff --git a/docs/translations/api-docs/date-pickers/date-calendar.json b/docs/translations/api-docs/date-pickers/date-calendar.json index f207cd00358b0..22e4b8c3a8756 100644 --- a/docs/translations/api-docs/date-pickers/date-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-calendar.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", "dayOfWeekFormatter": "Formats the day of week displayed in the calendar header.

Signature:
function(day: string) => string
day: The day of week provided by the adapter's method getWeekdays.
returns (string): The name to display.", @@ -12,14 +13,16 @@ "disablePast": "If true disable values after the current date for date components, time for time components and both for date time components.", "displayWeekNumber": "If true, the week number will be display in the calendar.", "fixedWeekNumber": "Calendar will show more weeks in order to match this value. Put it to 6 for having fix number of week in Gregorian calendars", + "focusedView": "Controlled focused view.", "loading": "If true renders LoadingComponent in calendar instead of calendar view. Can be used to preload information and show it in calendar.", "maxDate": "Maximal selectable date.", "minDate": "Minimal selectable date.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TDate | null, selectionState: PickerSelectionState | undefined) => void
value: The new value.
selectionState: Indicates if the date selection is complete.", + "onFocusedViewChange": "Callback fired on focused view change.

Signature:
function(view: TView, hasFocus: boolean) => void
view: The new view to focus or not.
hasFocus: true if the view should be focused.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", - "openTo": "Initially open view.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "readOnly": "Make picker read only.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -29,8 +32,8 @@ "showDaysOutsideCurrentMonth": "If true, days that have outsideCurrentMonth={true} are displayed.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "view": "Controlled open view.", - "views": "Views for calendar picker." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, diff --git a/docs/translations/api-docs/date-pickers/date-range-calendar-pt.json b/docs/translations/api-docs/date-pickers/date-range-calendar-pt.json index 88033e55c630e..d0445a0f178a3 100644 --- a/docs/translations/api-docs/date-pickers/date-range-calendar-pt.json +++ b/docs/translations/api-docs/date-pickers/date-range-calendar-pt.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", diff --git a/docs/translations/api-docs/date-pickers/date-range-calendar-zh.json b/docs/translations/api-docs/date-pickers/date-range-calendar-zh.json index 88033e55c630e..d0445a0f178a3 100644 --- a/docs/translations/api-docs/date-pickers/date-range-calendar-zh.json +++ b/docs/translations/api-docs/date-pickers/date-range-calendar-zh.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", diff --git a/docs/translations/api-docs/date-pickers/date-range-calendar.json b/docs/translations/api-docs/date-pickers/date-range-calendar.json index 88033e55c630e..d0445a0f178a3 100644 --- a/docs/translations/api-docs/date-pickers/date-range-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-range-calendar.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", diff --git a/docs/translations/api-docs/date-pickers/date-range-picker-pt.json b/docs/translations/api-docs/date-pickers/date-range-picker-pt.json index 721c01696b967..50503d18314d3 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker-pt.json @@ -34,7 +34,6 @@ "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "open": "Control the popup or dialog open state.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", diff --git a/docs/translations/api-docs/date-pickers/date-range-picker-zh.json b/docs/translations/api-docs/date-pickers/date-range-picker-zh.json index 721c01696b967..50503d18314d3 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker-zh.json @@ -34,7 +34,6 @@ "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "open": "Control the popup or dialog open state.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", diff --git a/docs/translations/api-docs/date-pickers/date-range-picker.json b/docs/translations/api-docs/date-pickers/date-range-picker.json index 721c01696b967..50503d18314d3 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker.json @@ -34,7 +34,6 @@ "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "open": "Control the popup or dialog open state.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-range-picker-pt.json b/docs/translations/api-docs/date-pickers/desktop-date-range-picker-pt.json index 16ea4a299060b..78547dafbc550 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-range-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-range-picker-pt.json @@ -33,7 +33,6 @@ "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "open": "Control the popup or dialog open state.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-range-picker-zh.json b/docs/translations/api-docs/date-pickers/desktop-date-range-picker-zh.json index 16ea4a299060b..78547dafbc550 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-range-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-range-picker-zh.json @@ -33,7 +33,6 @@ "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "open": "Control the popup or dialog open state.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json index 16ea4a299060b..78547dafbc550 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json @@ -33,7 +33,6 @@ "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "open": "Control the popup or dialog open state.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", diff --git a/docs/translations/api-docs/date-pickers/desktop-next-date-picker-pt.json b/docs/translations/api-docs/date-pickers/desktop-next-date-picker-pt.json index 68d2c68faaa04..73abb6a83ff13 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-date-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-date-picker-pt.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -30,10 +30,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -45,7 +45,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/desktop-next-date-picker-zh.json b/docs/translations/api-docs/date-pickers/desktop-next-date-picker-zh.json index 68d2c68faaa04..73abb6a83ff13 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-date-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-date-picker-zh.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -30,10 +30,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -45,7 +45,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/desktop-next-date-picker.json b/docs/translations/api-docs/date-pickers/desktop-next-date-picker.json index 68d2c68faaa04..73abb6a83ff13 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-date-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-date-picker.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -30,10 +30,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -45,7 +45,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker-pt.json b/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker-pt.json index 69860afa0ab80..d025e7250e949 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker-pt.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render on desktop.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", diff --git a/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker-zh.json b/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker-zh.json index 69860afa0ab80..d025e7250e949 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker-zh.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render on desktop.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", diff --git a/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker.json index 69860afa0ab80..d025e7250e949 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-date-range-picker.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render on desktop.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", diff --git a/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker-pt.json b/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker-pt.json index ae3fccbd9cdbe..3e1f8b1fc56da 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker-pt.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -38,10 +38,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -54,7 +54,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker-zh.json b/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker-zh.json index ae3fccbd9cdbe..3e1f8b1fc56da 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker-zh.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -38,10 +38,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -54,7 +54,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker.json index ae3fccbd9cdbe..3e1f8b1fc56da 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-date-time-picker.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -38,10 +38,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -54,7 +54,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/desktop-next-time-picker-pt.json b/docs/translations/api-docs/date-pickers/desktop-next-time-picker-pt.json index 48e1376cfd62b..9dac9f3ba837e 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-time-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-time-picker-pt.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -27,16 +27,17 @@ "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "selectedSections": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type MuiDateSectionName is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/desktop-next-time-picker-zh.json b/docs/translations/api-docs/date-pickers/desktop-next-time-picker-zh.json index 48e1376cfd62b..9dac9f3ba837e 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-time-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-time-picker-zh.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -27,16 +27,17 @@ "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "selectedSections": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type MuiDateSectionName is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/desktop-next-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-next-time-picker.json index 48e1376cfd62b..9dac9f3ba837e 100644 --- a/docs/translations/api-docs/date-pickers/desktop-next-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-next-time-picker.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -27,16 +27,17 @@ "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "selectedSections": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type MuiDateSectionName is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/mobile-date-range-picker-pt.json b/docs/translations/api-docs/date-pickers/mobile-date-range-picker-pt.json index 8c098a876f156..25f6fdb258b1a 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-range-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-range-picker-pt.json @@ -33,7 +33,6 @@ "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "open": "Control the popup or dialog open state.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", diff --git a/docs/translations/api-docs/date-pickers/mobile-date-range-picker-zh.json b/docs/translations/api-docs/date-pickers/mobile-date-range-picker-zh.json index 8c098a876f156..25f6fdb258b1a 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-range-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-range-picker-zh.json @@ -33,7 +33,6 @@ "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "open": "Control the popup or dialog open state.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", diff --git a/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json index 8c098a876f156..25f6fdb258b1a 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json @@ -33,7 +33,6 @@ "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "open": "Control the popup or dialog open state.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", diff --git a/docs/translations/api-docs/date-pickers/mobile-next-date-picker-pt.json b/docs/translations/api-docs/date-pickers/mobile-next-date-picker-pt.json index afa7d88db6d28..56ff54d0fc94f 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-date-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-date-picker-pt.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -29,10 +30,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -44,7 +45,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/mobile-next-date-picker-zh.json b/docs/translations/api-docs/date-pickers/mobile-next-date-picker-zh.json index afa7d88db6d28..56ff54d0fc94f 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-date-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-date-picker-zh.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -29,10 +30,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -44,7 +45,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/mobile-next-date-picker.json b/docs/translations/api-docs/date-pickers/mobile-next-date-picker.json index afa7d88db6d28..56ff54d0fc94f 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-date-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-date-picker.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -29,10 +30,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -44,7 +45,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker-pt.json b/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker-pt.json index 381cd71da6792..0478135d8368a 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker-pt.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render on desktop.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", diff --git a/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker-zh.json b/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker-zh.json index 381cd71da6792..0478135d8368a 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker-zh.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render on desktop.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", diff --git a/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker.json index 381cd71da6792..0478135d8368a 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-date-range-picker.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render on desktop.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", diff --git a/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker-pt.json b/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker-pt.json index 9295362926f9e..376bdec05cebe 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker-pt.json @@ -3,6 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -37,10 +38,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -53,7 +54,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker-zh.json b/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker-zh.json index 9295362926f9e..376bdec05cebe 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker-zh.json @@ -3,6 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -37,10 +38,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -53,7 +54,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker.json index 9295362926f9e..376bdec05cebe 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-date-time-picker.json @@ -3,6 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -37,10 +38,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -53,7 +54,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/mobile-next-time-picker-pt.json b/docs/translations/api-docs/date-pickers/mobile-next-time-picker-pt.json index 31d9a8c8c3949..439d08d40b522 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-time-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-time-picker-pt.json @@ -3,6 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -26,16 +27,17 @@ "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "selectedSections": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type MuiDateSectionName is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/mobile-next-time-picker-zh.json b/docs/translations/api-docs/date-pickers/mobile-next-time-picker-zh.json index 31d9a8c8c3949..439d08d40b522 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-time-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-time-picker-zh.json @@ -3,6 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -26,16 +27,17 @@ "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "selectedSections": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type MuiDateSectionName is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/mobile-next-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-next-time-picker.json index 31d9a8c8c3949..439d08d40b522 100644 --- a/docs/translations/api-docs/date-pickers/mobile-next-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-next-time-picker.json @@ -3,6 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -26,16 +27,17 @@ "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "selectedSections": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type MuiDateSectionName is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/next-date-picker-pt.json b/docs/translations/api-docs/date-pickers/next-date-picker-pt.json index c1d0523346b19..a6ac89c6ff036 100644 --- a/docs/translations/api-docs/date-pickers/next-date-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/next-date-picker-pt.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -31,10 +31,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -46,7 +46,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/next-date-picker-zh.json b/docs/translations/api-docs/date-pickers/next-date-picker-zh.json index c1d0523346b19..a6ac89c6ff036 100644 --- a/docs/translations/api-docs/date-pickers/next-date-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/next-date-picker-zh.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -31,10 +31,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -46,7 +46,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/next-date-picker.json b/docs/translations/api-docs/date-pickers/next-date-picker.json index c1d0523346b19..a6ac89c6ff036 100644 --- a/docs/translations/api-docs/date-pickers/next-date-picker.json +++ b/docs/translations/api-docs/date-pickers/next-date-picker.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -31,10 +31,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -46,7 +46,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/next-date-range-picker-pt.json b/docs/translations/api-docs/date-pickers/next-date-range-picker-pt.json index 5c0bfa93f97dd..db1787688873b 100644 --- a/docs/translations/api-docs/date-pickers/next-date-range-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/next-date-range-picker-pt.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render on desktop.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", diff --git a/docs/translations/api-docs/date-pickers/next-date-range-picker-zh.json b/docs/translations/api-docs/date-pickers/next-date-range-picker-zh.json index 5c0bfa93f97dd..db1787688873b 100644 --- a/docs/translations/api-docs/date-pickers/next-date-range-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/next-date-range-picker-zh.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render on desktop.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", diff --git a/docs/translations/api-docs/date-pickers/next-date-range-picker.json b/docs/translations/api-docs/date-pickers/next-date-range-picker.json index 5c0bfa93f97dd..db1787688873b 100644 --- a/docs/translations/api-docs/date-pickers/next-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/next-date-range-picker.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render on desktop.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", diff --git a/docs/translations/api-docs/date-pickers/next-date-time-picker-pt.json b/docs/translations/api-docs/date-pickers/next-date-time-picker-pt.json index 6522d6619e3d9..db5b2e7a0c6b7 100644 --- a/docs/translations/api-docs/date-pickers/next-date-time-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/next-date-time-picker-pt.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -39,10 +39,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -55,7 +55,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/next-date-time-picker-zh.json b/docs/translations/api-docs/date-pickers/next-date-time-picker-zh.json index 6522d6619e3d9..db5b2e7a0c6b7 100644 --- a/docs/translations/api-docs/date-pickers/next-date-time-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/next-date-time-picker-zh.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -39,10 +39,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -55,7 +55,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/next-date-time-picker.json b/docs/translations/api-docs/date-pickers/next-date-time-picker.json index 6522d6619e3d9..db5b2e7a0c6b7 100644 --- a/docs/translations/api-docs/date-pickers/next-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/next-date-time-picker.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -39,10 +39,10 @@ "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -55,7 +55,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/next-time-picker-pt.json b/docs/translations/api-docs/date-pickers/next-time-picker-pt.json index e9fd0cc56026d..66c003ff24924 100644 --- a/docs/translations/api-docs/date-pickers/next-time-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/next-time-picker-pt.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -28,16 +28,17 @@ "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "selectedSections": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type MuiDateSectionName is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/next-time-picker-zh.json b/docs/translations/api-docs/date-pickers/next-time-picker-zh.json index e9fd0cc56026d..66c003ff24924 100644 --- a/docs/translations/api-docs/date-pickers/next-time-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/next-time-picker-zh.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -28,16 +28,17 @@ "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "selectedSections": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type MuiDateSectionName is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/next-time-picker.json b/docs/translations/api-docs/date-pickers/next-time-picker.json index e9fd0cc56026d..66c003ff24924 100644 --- a/docs/translations/api-docs/date-pickers/next-time-picker.json +++ b/docs/translations/api-docs/date-pickers/next-time-picker.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the input element is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "closeOnSelect": "If true the popup or dialog will close after submitting full date.", "components": "Overrideable components.", @@ -28,16 +28,17 @@ "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "open": "Control the popup or dialog open state.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "selectedSections": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type MuiDateSectionName is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/static-date-range-picker-pt.json b/docs/translations/api-docs/date-pickers/static-date-range-picker-pt.json index 9c7cee78c572e..7668a3e65718b 100644 --- a/docs/translations/api-docs/date-pickers/static-date-range-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/static-date-range-picker-pt.json @@ -32,7 +32,6 @@ "onChange": "Callback fired when the value (the selected date range) changes @DateIOType.

Signature:
function(date: DateRange<TDate>, keyboardInputValue: string) => void
date: The new date range.
keyboardInputValue: The current value of the keyboard input.", "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", "reduceAnimations": "Disable heavy animations.", diff --git a/docs/translations/api-docs/date-pickers/static-date-range-picker-zh.json b/docs/translations/api-docs/date-pickers/static-date-range-picker-zh.json index 9c7cee78c572e..7668a3e65718b 100644 --- a/docs/translations/api-docs/date-pickers/static-date-range-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/static-date-range-picker-zh.json @@ -32,7 +32,6 @@ "onChange": "Callback fired when the value (the selected date range) changes @DateIOType.

Signature:
function(date: DateRange<TDate>, keyboardInputValue: string) => void
date: The new date range.
keyboardInputValue: The current value of the keyboard input.", "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", "reduceAnimations": "Disable heavy animations.", diff --git a/docs/translations/api-docs/date-pickers/static-date-range-picker.json b/docs/translations/api-docs/date-pickers/static-date-range-picker.json index 9c7cee78c572e..7668a3e65718b 100644 --- a/docs/translations/api-docs/date-pickers/static-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-range-picker.json @@ -32,7 +32,6 @@ "onChange": "Callback fired when the value (the selected date range) changes @DateIOType.

Signature:
function(date: DateRange<TDate>, keyboardInputValue: string) => void
date: The new date range.
keyboardInputValue: The current value of the keyboard input.", "onError": "Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.
Read the guide about form integration and error displaying.

Signature:
function(reason: TError, value: TValue) => void
reason: The reason why the current value is not valid.
value: The invalid value.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: DateView) => void
view: The new view.", "OpenPickerButtonProps": "Props to pass to keyboard adornment button.", "readOnly": "Make picker read only.", "reduceAnimations": "Disable heavy animations.", diff --git a/docs/translations/api-docs/date-pickers/static-next-date-picker-pt.json b/docs/translations/api-docs/date-pickers/static-next-date-picker-pt.json index be8e51d8077f9..a2d72a70907c8 100644 --- a/docs/translations/api-docs/date-pickers/static-next-date-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/static-next-date-picker-pt.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "autoFocus": "If true, the view is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", @@ -23,9 +23,9 @@ "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, The: FieldChangeHandlerContext<TError>) => void
value: The new value.
The: context containing the validation result of the current value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -36,7 +36,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/static-next-date-picker-zh.json b/docs/translations/api-docs/date-pickers/static-next-date-picker-zh.json index be8e51d8077f9..a2d72a70907c8 100644 --- a/docs/translations/api-docs/date-pickers/static-next-date-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/static-next-date-picker-zh.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "autoFocus": "If true, the view is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", @@ -23,9 +23,9 @@ "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, The: FieldChangeHandlerContext<TError>) => void
value: The new value.
The: context containing the validation result of the current value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -36,7 +36,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/static-next-date-picker.json b/docs/translations/api-docs/date-pickers/static-next-date-picker.json index be8e51d8077f9..a2d72a70907c8 100644 --- a/docs/translations/api-docs/date-pickers/static-next-date-picker.json +++ b/docs/translations/api-docs/date-pickers/static-next-date-picker.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "autoFocus": "If true, the view is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", @@ -23,9 +23,9 @@ "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, The: FieldChangeHandlerContext<TError>) => void
value: The new value.
The: context containing the validation result of the current value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -36,7 +36,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/static-next-date-range-picker-pt.json b/docs/translations/api-docs/date-pickers/static-next-date-range-picker-pt.json index 330235d6db7b6..b6e90c96902f8 100644 --- a/docs/translations/api-docs/date-pickers/static-next-date-range-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/static-next-date-range-picker-pt.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render.", "className": "Class name applied to the root element.", "components": "Overrideable components.", diff --git a/docs/translations/api-docs/date-pickers/static-next-date-range-picker-zh.json b/docs/translations/api-docs/date-pickers/static-next-date-range-picker-zh.json index 330235d6db7b6..b6e90c96902f8 100644 --- a/docs/translations/api-docs/date-pickers/static-next-date-range-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/static-next-date-range-picker-zh.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render.", "className": "Class name applied to the root element.", "components": "Overrideable components.", diff --git a/docs/translations/api-docs/date-pickers/static-next-date-range-picker.json b/docs/translations/api-docs/date-pickers/static-next-date-range-picker.json index 330235d6db7b6..b6e90c96902f8 100644 --- a/docs/translations/api-docs/date-pickers/static-next-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/static-next-date-range-picker.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "calendars": "The number of calendars to render.", "className": "Class name applied to the root element.", "components": "Overrideable components.", diff --git a/docs/translations/api-docs/date-pickers/static-next-date-time-picker-pt.json b/docs/translations/api-docs/date-pickers/static-next-date-time-picker-pt.json index 9e2732b397ee3..1be3dd96cd255 100644 --- a/docs/translations/api-docs/date-pickers/static-next-date-time-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/static-next-date-time-picker-pt.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the view is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", @@ -31,9 +31,9 @@ "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, The: FieldChangeHandlerContext<TError>) => void
value: The new value.
The: context containing the validation result of the current value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -45,7 +45,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/static-next-date-time-picker-zh.json b/docs/translations/api-docs/date-pickers/static-next-date-time-picker-zh.json index 9e2732b397ee3..1be3dd96cd255 100644 --- a/docs/translations/api-docs/date-pickers/static-next-date-time-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/static-next-date-time-picker-zh.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the view is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", @@ -31,9 +31,9 @@ "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, The: FieldChangeHandlerContext<TError>) => void
value: The new value.
The: context containing the validation result of the current value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -45,7 +45,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/static-next-date-time-picker.json b/docs/translations/api-docs/date-pickers/static-next-date-time-picker.json index 9e2732b397ee3..1be3dd96cd255 100644 --- a/docs/translations/api-docs/date-pickers/static-next-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-next-date-time-picker.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the view is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", @@ -31,9 +31,9 @@ "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, The: FieldChangeHandlerContext<TError>) => void
value: The new value.
The: context containing the validation result of the current value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", "onMonthChange": "Callback firing on month change @DateIOType.

Signature:
function(month: TDate) => void | Promise
month: The new month.
returns (void | Promise): -", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", "onYearChange": "Callback firing on year change @DateIOType.

Signature:
function(year: TDate) => void
year: The new year.", - "openTo": "First view to show.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "reduceAnimations": "Disable heavy animations.", "renderLoading": "Component displaying when passed loading true.

Signature:
function() => React.ReactNode

returns (React.ReactNode): The node to render when loading.", @@ -45,7 +45,8 @@ "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/static-next-time-picker-pt.json b/docs/translations/api-docs/date-pickers/static-next-time-picker-pt.json index 9bb82601fd284..8fd281e130a24 100644 --- a/docs/translations/api-docs/date-pickers/static-next-time-picker-pt.json +++ b/docs/translations/api-docs/date-pickers/static-next-time-picker-pt.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the view is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", @@ -20,14 +20,15 @@ "onAccept": "Callback fired when the value is accepted.

Signature:
function(value: TValue) => void
value: The value that was just accepted.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, The: FieldChangeHandlerContext<TError>) => void
value: The new value.
The: context containing the validation result of the current value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", - "openTo": "First view to show.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/static-next-time-picker-zh.json b/docs/translations/api-docs/date-pickers/static-next-time-picker-zh.json index 9bb82601fd284..8fd281e130a24 100644 --- a/docs/translations/api-docs/date-pickers/static-next-time-picker-zh.json +++ b/docs/translations/api-docs/date-pickers/static-next-time-picker-zh.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the view is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", @@ -20,14 +20,15 @@ "onAccept": "Callback fired when the value is accepted.

Signature:
function(value: TValue) => void
value: The value that was just accepted.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, The: FieldChangeHandlerContext<TError>) => void
value: The new value.
The: context containing the validation result of the current value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", - "openTo": "First view to show.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/docs/translations/api-docs/date-pickers/static-next-time-picker.json b/docs/translations/api-docs/date-pickers/static-next-time-picker.json index 9bb82601fd284..8fd281e130a24 100644 --- a/docs/translations/api-docs/date-pickers/static-next-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-next-time-picker.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", - "autoFocus": "If true, the view is focused during the first mount.", + "autoFocus": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.", "className": "Class name applied to the root element.", "components": "Overrideable components.", "componentsProps": "The props used for each component slot.", @@ -20,14 +20,15 @@ "onAccept": "Callback fired when the value is accepted.

Signature:
function(value: TValue) => void
value: The value that was just accepted.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, The: FieldChangeHandlerContext<TError>) => void
value: The new value.
The: context containing the validation result of the current value.", "onError": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Signature:
function(error: TError, value: TValue) => void
error: The new error describing why the current value is not valid.
value: The value associated to the error.", - "onViewChange": "Callback fired on view change.

Signature:
function(view: View) => void
view: The new view.", - "openTo": "First view to show.", + "onViewChange": "Callback fired on view change.

Signature:
function(view: TView) => void
view: The new view.", + "openTo": "The default visible view. Used when the component view is not controlled. Must be a valid option from views list.", "orientation": "Force rendering in particular orientation.", "shouldDisableTime": "Disable specific time.

Signature:
function(timeValue: number, view: TimeView) => boolean
timeValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.", "showToolbar": "If true, the toolbar will be visible.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The selected value. Used when the component is controlled.", - "views": "Array of views to show." + "view": "The visible view. Used when the component view is controlled. Must be a valid option from views list.", + "views": "Available views." }, "classDescriptions": {}, "slotDescriptions": { diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx index 9d6aba560ad11..c435477f123b3 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx @@ -496,7 +496,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( {calendars === 1 ? ( handleChangeMonth({ newMonth, direction })} minDate={minDateWithDisabled} @@ -560,6 +560,12 @@ DateRangeCalendar.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. + */ autoFocus: PropTypes.bool, /** * The number of calendars to render. diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts index ddc964d1fbe5b..474750635d5d4 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts @@ -14,6 +14,7 @@ import { PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, DayCalendarProps, + ExportedUseViewsOptions, } from '@mui/x-date-pickers/internals'; import { DateRange, RangePositionProps, DayRangeValidationProps } from '../internal/models'; import { DateRangeCalendarClasses } from './dateRangeCalendarClasses'; @@ -44,45 +45,12 @@ export interface DateRangeCalendarSlotsComponentsProps >; } -export interface DateRangeCalendarProps +export interface ExportedDateRangeCalendarProps extends ExportedDayCalendarProps, BaseDateValidationProps, DayRangeValidationProps, - Partial { - /** - * The selected value. - * Used when the component is controlled. - */ - value?: DateRange; - /** - * The default selected value. - * Used when the component is not controlled. - */ - defaultValue?: DateRange; - /** - * Callback fired when the value changes. - * @template TDate - * @param {DateRange} value The new value. - * @param {PickerSelectionState | undefined} selectionState Indicates if the date range selection is complete. - */ - onChange?: (value: DateRange, selectionState?: PickerSelectionState) => void; - autoFocus?: boolean; - className?: string; - classes?: Partial; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * Overrideable components. - * @default {} - */ - components?: DateRangeCalendarSlotsComponent; - /** - * The props used for each component slot. - * @default {} - */ - componentsProps?: DateRangeCalendarSlotsComponentsProps; + // TODO: Add the other props of `ExportedUseViewOptions` once `DateRangeCalendar` handles several views + Pick, 'autoFocus'> { /** * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date. * @default false @@ -126,6 +94,44 @@ export interface DateRangeCalendarProps disableDragEditing?: boolean; } +export interface DateRangeCalendarProps + extends ExportedDateRangeCalendarProps, + Partial { + /** + * The selected value. + * Used when the component is controlled. + */ + value?: DateRange; + /** + * The default selected value. + * Used when the component is not controlled. + */ + defaultValue?: DateRange; + /** + * Callback fired when the value changes. + * @template TDate + * @param {DateRange} value The new value. + * @param {PickerSelectionState | undefined} selectionState Indicates if the date range selection is complete. + */ + onChange?: (value: DateRange, selectionState?: PickerSelectionState) => void; + className?: string; + classes?: Partial; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * Overrideable components. + * @default {} + */ + components?: DateRangeCalendarSlotsComponent; + /** + * The props used for each component slot. + * @default {} + */ + componentsProps?: DateRangeCalendarSlotsComponentsProps; +} + export interface DateRangeCalendarOwnerState extends DateRangeCalendarProps { isDragging: boolean; } @@ -134,19 +140,3 @@ export type DateRangeCalendarDefaultizedProps = DefaultizedProps< DateRangeCalendarProps, 'reduceAnimations' | 'calendars' | 'disableDragEditing' | keyof BaseDateValidationProps >; - -export type ExportedDateRangeCalendarProps = Omit< - DateRangeCalendarProps, - | 'defaultValue' - | 'value' - | 'onChange' - | 'changeView' - | 'slideDirection' - | 'currentMonth' - | 'className' - | 'classes' - | 'components' - | 'componentsProps' - | 'rangePosition' - | 'onRangePositionChange' ->; diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx index b30af0bd5a90b..f733b912867c0 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx @@ -273,11 +273,6 @@ DateRangePicker.propTypes = { * Use in controlled mode (see open). */ onOpen: PropTypes.func, - /** - * Callback fired on view change. - * @param {DateView} view The new view. - */ - onViewChange: PropTypes.func, /** * Control the popup or dialog open state. */ diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerView.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerView.tsx index 5d402864799e0..35401ae7c613a 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerView.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerView.tsx @@ -13,6 +13,7 @@ import { BaseDateValidationProps, DayValidationProps, ExportedBaseToolbarProps, + ExportedUseViewsOptions, } from '@mui/x-date-pickers/internals'; import { DateRange, RangePositionProps } from '../internal/models/range'; import { DayRangeValidationProps } from '../internal/models/dateRange'; @@ -52,7 +53,12 @@ export interface ExportedDateRangePickerViewProps DayRangeValidationProps, Omit< ExportedDateCalendarProps, - 'onYearChange' | keyof BaseDateValidationProps | keyof DayValidationProps + | 'value' + | 'defaultValue' + | 'onChange' + | 'onYearChange' + | keyof BaseDateValidationProps + | keyof DayValidationProps > { /** * Overrideable components. @@ -83,7 +89,8 @@ interface DateRangePickerViewProps extends RangePositionProps, ExportedDateRangePickerViewProps, PickerStatePickerProps>, - Required> { + Required>, + Pick, 'onFocusedViewChange'> { calendars: 1 | 2 | 3; open: boolean; DateInputProps: DateRangePickerInputProps; @@ -121,6 +128,7 @@ function DateRangePickerViewRaw(props: DateRangePickerViewProps) { toggleMobileKeyboardView, components, componentsProps, + onFocusedViewChange, ...other } = props; @@ -225,6 +233,9 @@ function DateRangePickerViewRaw(props: DateRangePickerViewProps) { componentsProps, shouldDisableDate: wrappedShouldDisableDate, ...calendarState, + onFocusedViewChange: onFocusedViewChange + ? (newHasFocus: boolean) => onFocusedViewChange('day', newHasFocus) + : undefined, ...other, }; diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerViewMobile.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerViewMobile.tsx index 2a035e99faf24..8ec2fff2aea4b 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerViewMobile.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerViewMobile.tsx @@ -128,7 +128,7 @@ export function DateRangePickerViewMobile(props: DesktopDateRangeCalendar maxDate={maxDateWithDisabled} minDate={minDateWithDisabled} onMonthChange={changeMonth as any} - openView="day" + view="day" views={onlyDayView} disabled={disabled} {...other} diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index 4c0ffef1a2755..d1bba4117ad06 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { SxProps } from '@mui/system'; import { useLicenseVerifier } from '@mui/x-license-pro'; import { DesktopTooltipWrapper, @@ -48,6 +49,10 @@ export interface DesktopDateRangePickerProps * @default {} */ componentsProps?: DesktopDateRangePickerSlotsComponentsProps; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; } type DesktopDateRangePickerComponent = (( @@ -302,11 +307,6 @@ DesktopDateRangePicker.propTypes = { * Use in controlled mode (see open). */ onOpen: PropTypes.func, - /** - * Callback fired on view change. - * @param {DateView} view The new view. - */ - onViewChange: PropTypes.func, /** * Control the popup or dialog open state. */ diff --git a/packages/x-date-pickers-pro/src/DesktopNextDateRangePicker/DesktopNextDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopNextDateRangePicker/DesktopNextDateRangePicker.tsx index 8179ccdc8f28f..e7d1af891e751 100644 --- a/packages/x-date-pickers-pro/src/DesktopNextDateRangePicker/DesktopNextDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopNextDateRangePicker/DesktopNextDateRangePicker.tsx @@ -65,6 +65,12 @@ DesktopNextDateRangePicker.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. + */ autoFocus: PropTypes.bool, /** * The number of calendars to render on **desktop**. diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx index 7406023ec243f..bba1ab821e269 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useLicenseVerifier } from '@mui/x-license-pro'; +import { SxProps } from '@mui/system'; import { MobileWrapper, MobileWrapperProps, @@ -49,6 +50,10 @@ export interface MobileDateRangePickerProps * @default {} */ componentsProps?: MobileDateRangePickerSlotsComponentsProps; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; } type MobileDateRangePickerComponent = (( @@ -315,11 +320,6 @@ MobileDateRangePicker.propTypes = { * Use in controlled mode (see open). */ onOpen: PropTypes.func, - /** - * Callback fired on view change. - * @param {DateView} view The new view. - */ - onViewChange: PropTypes.func, /** * Control the popup or dialog open state. */ diff --git a/packages/x-date-pickers-pro/src/MobileNextDateRangePicker/MobileNextDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileNextDateRangePicker/MobileNextDateRangePicker.tsx index 22a0c20d2aca9..b0b257d4323bc 100644 --- a/packages/x-date-pickers-pro/src/MobileNextDateRangePicker/MobileNextDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileNextDateRangePicker/MobileNextDateRangePicker.tsx @@ -65,6 +65,12 @@ MobileNextDateRangePicker.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. + */ autoFocus: PropTypes.bool, /** * The number of calendars to render on **desktop**. diff --git a/packages/x-date-pickers-pro/src/NextDateRangePicker/NextDateRangePicker.tsx b/packages/x-date-pickers-pro/src/NextDateRangePicker/NextDateRangePicker.tsx index 21f4be0a59dd1..11200cee9a9de 100644 --- a/packages/x-date-pickers-pro/src/NextDateRangePicker/NextDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/NextDateRangePicker/NextDateRangePicker.tsx @@ -33,6 +33,12 @@ NextDateRangePicker.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. + */ autoFocus: PropTypes.bool, /** * The number of calendars to render on **desktop**. diff --git a/packages/x-date-pickers-pro/src/NextDateRangePicker/shared.tsx b/packages/x-date-pickers-pro/src/NextDateRangePicker/shared.tsx index 9d198cbafaed4..2c96caf18394c 100644 --- a/packages/x-date-pickers-pro/src/NextDateRangePicker/shared.tsx +++ b/packages/x-date-pickers-pro/src/NextDateRangePicker/shared.tsx @@ -39,7 +39,7 @@ export interface BaseNextDateRangePickerSlotsComponentsProps export interface BaseNextDateRangePickerProps extends Omit< BaseNextPickerProps, TDate, 'day', DateRangeValidationError>, - 'views' | 'openTo' | 'onViewChange' | 'orientation' + 'view' | 'views' | 'openTo' | 'onViewChange' | 'orientation' >, ExportedDateRangeCalendarProps, BaseDateValidationProps { diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx index e4a3dbea8e9f0..151e6614e5eff 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx @@ -305,11 +305,6 @@ StaticDateRangePicker.propTypes = { * @returns {void|Promise} - */ onMonthChange: PropTypes.func, - /** - * Callback fired on view change. - * @param {DateView} view The new view. - */ - onViewChange: PropTypes.func, /** * Props to pass to keyboard adornment button. */ diff --git a/packages/x-date-pickers-pro/src/StaticNextDateRangePicker/StaticNextDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticNextDateRangePicker/StaticNextDateRangePicker.tsx index 29689c42f013a..ec552057906e4 100644 --- a/packages/x-date-pickers-pro/src/StaticNextDateRangePicker/StaticNextDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/StaticNextDateRangePicker/StaticNextDateRangePicker.tsx @@ -52,6 +52,12 @@ StaticNextDateRangePicker.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. + */ autoFocus: PropTypes.bool, /** * The number of calendars to render. diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx index d1bbcdd2b62ba..86fce3f3d1b63 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx @@ -20,10 +20,9 @@ import { } from './DayCalendar'; import { MonthCalendar } from '../MonthCalendar'; import { YearCalendar } from '../YearCalendar'; -import { useViews } from '../internals/hooks/useViews'; +import { ExportedUseViewsOptions, useViews } from '../internals/hooks/useViews'; import { PickersCalendarHeader, - ExportedCalendarHeaderProps, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, } from './PickersCalendarHeader'; @@ -49,47 +48,12 @@ export interface DateCalendarSlotsComponentsProps extends PickersCalendarHeaderSlotsComponentsProps, DayCalendarSlotsComponentsProps {} -export interface DateCalendarProps +export interface ExportedDateCalendarProps extends ExportedDayCalendarProps, BaseDateValidationProps, DayValidationProps, YearValidationProps, - MonthValidationProps, - ExportedCalendarHeaderProps { - autoFocus?: boolean; - className?: string; - classes?: Partial; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * Overrideable components. - * @default {} - */ - components?: DateCalendarSlotsComponent; - /** - * The props used for each component slot. - * @default {} - */ - componentsProps?: DateCalendarSlotsComponentsProps; - /** - * The selected value. - * Used when the component is controlled. - */ - value?: TDate | null; - /** - * The default selected value. - * Used when the component is not controlled. - */ - defaultValue?: TDate | null; - /** - * Callback fired when the value changes. - * @template TDate - * @param {TDate | null} value The new value. - * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. - */ - onChange?: (value: TDate | null, selectionState?: PickerSelectionState) => void; + MonthValidationProps { /** * Default calendar month displayed when `value={null}`. */ @@ -99,16 +63,6 @@ export interface DateCalendarProps * @default false */ disabled?: boolean; - /** - * Callback fired on view change. - * @param {DateView} view The new view. - */ - onViewChange?: (view: DateView) => void; - /** - * Initially open view. - * @default 'day' - */ - openTo?: DateView; /** * Make picker read only. * @default false @@ -125,15 +79,6 @@ export interface DateCalendarProps * @default () => ... */ renderLoading?: () => React.ReactNode; - /** - * Controlled open view. - */ - view?: DateView; - /** - * Views for calendar picker. - * @default ['year', 'day'] - */ - views?: readonly DateView[]; /** * Callback firing on year change @DateIOType. * @template TDate @@ -147,29 +92,45 @@ export interface DateCalendarProps * @returns {void|Promise} - */ onMonthChange?: (month: TDate) => void | Promise; - focusedView?: DateView | null; - onFocusedViewChange?: (view: DateView) => (newHasFocus: boolean) => void; } -export type ExportedDateCalendarProps = Omit< - DateCalendarProps, - | 'defaultValue' - | 'value' - | 'view' - | 'views' - | 'openTo' - | 'onChange' - | 'changeView' - | 'slideDirection' - | 'currentMonth' - | 'className' - | 'classes' - | 'components' - | 'componentsProps' - | 'onFocusedViewChange' - | 'focusedView' - | 'autoFocus' ->; +export interface DateCalendarProps + extends ExportedDateCalendarProps, + ExportedUseViewsOptions { + /** + * The selected value. + * Used when the component is controlled. + */ + value?: TDate | null; + /** + * The default selected value. + * Used when the component is not controlled. + */ + defaultValue?: TDate | null; + /** + * Callback fired when the value changes. + * @template TDate + * @param {TDate | null} value The new value. + * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. + */ + onChange?: (value: TDate | null, selectionState?: PickerSelectionState) => void; + className?: string; + classes?: Partial; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * Overrideable components. + * @default {} + */ + components?: DateCalendarSlotsComponent; + /** + * The props used for each component slot. + * @default {} + */ + componentsProps?: DateCalendarSlotsComponentsProps; +} export type DateCalendarDefaultizedProps = DefaultizedProps< DateCalendarProps, @@ -268,7 +229,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar( shouldDisableDate, shouldDisableMonth, shouldDisableYear, - view, + view: inView, views, openTo, className, @@ -277,7 +238,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar( minDate, maxDate, disableHighlightToday, - focusedView, + focusedView: inFocusedView, onFocusedViewChange, showDaysOutsideCurrentMonth, fixedWeekNumber, @@ -304,12 +265,15 @@ export const DateCalendar = React.forwardRef(function DateCalendar( }, ); - const { openView, setOpenView, openNext } = useViews({ - view, + const { view, setView, focusedView, setFocusedView, goToNextView } = useViews({ + view: inView, views, openTo, onChange: handleValueChange, onViewChange, + autoFocus, + focusedView: inFocusedView, + onFocusedViewChange, }); const { @@ -351,7 +315,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar( handleValueChange(closestEnabledDate, 'finish'); onMonthChange?.(startOfMonth); } else { - openNext(); + goToNextView(); changeMonth(startOfMonth); } @@ -378,7 +342,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar( handleValueChange(closestEnabledDate, 'finish'); onYearChange?.(closestEnabledDate); } else { - openNext(); + goToNextView(); changeMonth(startOfYear); } @@ -423,45 +387,21 @@ export const DateCalendar = React.forwardRef(function DateCalendar( }; const gridLabelId = `${id}-grid-label`; + const hasFocus = focusedView !== null; - const [internalFocusedView, setInternalFocusedView] = useControlled({ - name: 'DateCalendar', - state: 'focusedView', - controlled: focusedView, - default: autoFocus ? openView : null, - }); - - const hasFocus = internalFocusedView !== null; - - const handleFocusedViewChange = useEventCallback( - (eventView: DateView) => (newHasFocus: boolean) => { - if (onFocusedViewChange) { - // Use the calendar or clock logic - onFocusedViewChange(eventView)(newHasFocus); - return; - } - // If alone, do the local modifications - if (newHasFocus) { - setInternalFocusedView(eventView); - } else { - setInternalFocusedView((prevView) => (prevView === eventView ? null : prevView)); - } - }, - ); - - const prevOpenViewRef = React.useRef(openView); + const prevOpenViewRef = React.useRef(view); React.useEffect(() => { - // If the view change and the focus was on the previouse view + // If the view change and the focus was on the previous view // Then we update the focus. - if (prevOpenViewRef.current === openView) { + if (prevOpenViewRef.current === view) { return; } if (focusedView === prevOpenViewRef.current) { - handleFocusedViewChange(openView)(true); + setFocusedView(view, true); } - prevOpenViewRef.current = openView; - }, [focusedView, handleFocusedViewChange, openView]); + prevOpenViewRef.current = view; + }, [focusedView, setFocusedView, view]); const selectedDays = React.useMemo(() => [value], [value]); @@ -474,9 +414,9 @@ export const DateCalendar = React.forwardRef(function DateCalendar( > handleChangeMonth({ newMonth, direction })} minDate={minDateWithDisabled} maxDate={maxDateWithDisabled} @@ -491,11 +431,11 @@ export const DateCalendar = React.forwardRef(function DateCalendar(
- {openView === 'year' && ( + {view === 'year' && ( {...baseDateValidationProps} {...commonViewProps} @@ -503,11 +443,11 @@ export const DateCalendar = React.forwardRef(function DateCalendar( onChange={handleDateYearChange} shouldDisableYear={shouldDisableYear} hasFocus={hasFocus} - onFocusedViewChange={handleFocusedViewChange('year')} + onFocusedViewChange={(isViewFocused) => setFocusedView('year', isViewFocused)} /> )} - {openView === 'month' && ( + {view === 'month' && ( {...baseDateValidationProps} {...commonViewProps} @@ -516,11 +456,11 @@ export const DateCalendar = React.forwardRef(function DateCalendar( value={value} onChange={handleDateMonthChange} shouldDisableMonth={shouldDisableMonth} - onFocusedViewChange={handleFocusedViewChange('month')} + onFocusedViewChange={(isViewFocused) => setFocusedView('month', isViewFocused)} /> )} - {openView === 'day' && ( + {view === 'day' && ( {...calendarState} {...baseDateValidationProps} @@ -534,7 +474,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar( shouldDisableMonth={shouldDisableMonth} shouldDisableYear={shouldDisableYear} hasFocus={hasFocus} - onFocusedViewChange={handleFocusedViewChange('day')} + onFocusedViewChange={(isViewFocused) => setFocusedView('day', isViewFocused)} gridLabelId={gridLabelId} showDaysOutsideCurrentMonth={showDaysOutsideCurrentMonth} fixedWeekNumber={fixedWeekNumber} @@ -557,6 +497,12 @@ DateCalendar.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. + */ autoFocus: PropTypes.bool, classes: PropTypes.object, className: PropTypes.string, @@ -616,6 +562,9 @@ DateCalendar.propTypes = { * @default undefined */ fixedWeekNumber: PropTypes.number, + /** + * Controlled focused view. + */ focusedView: PropTypes.oneOf(['day', 'month', 'year']), /** * If `true` renders `LoadingComponent` in calendar instead of calendar view. @@ -638,6 +587,12 @@ DateCalendar.propTypes = { * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. */ onChange: PropTypes.func, + /** + * Callback fired on focused view change. + * @template TView + * @param {TView} view The new view to focus or not. + * @param {boolean} hasFocus `true` if the view should be focused. + */ onFocusedViewChange: PropTypes.func, /** * Callback firing on month change @DateIOType. @@ -648,7 +603,8 @@ DateCalendar.propTypes = { onMonthChange: PropTypes.func, /** * Callback fired on view change. - * @param {DateView} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -658,8 +614,9 @@ DateCalendar.propTypes = { */ onYearChange: PropTypes.func, /** - * Initially open view. - * @default 'day' + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['day', 'month', 'year']), /** @@ -718,12 +675,13 @@ DateCalendar.propTypes = { */ value: PropTypes.any, /** - * Controlled open view. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. */ view: PropTypes.oneOf(['day', 'month', 'year']), /** - * Views for calendar picker. - * @default ['year', 'day'] + * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), } as any; diff --git a/packages/x-date-pickers/src/DateCalendar/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/DateCalendar/PickersCalendarHeader.tsx index 0798ca6a70db4..0b5b0912e88b5 100644 --- a/packages/x-date-pickers/src/DateCalendar/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/DateCalendar/PickersCalendarHeader.tsx @@ -78,7 +78,7 @@ export interface PickersCalendarHeaderProps disabled?: boolean; views: readonly DateView[]; onMonthChange: (date: TDate, slideDirection: SlideDirection) => void; - openView: DateView; + view: DateView; reduceAnimations: boolean; onViewChange?: (view: DateView) => void; labelId?: string; @@ -150,7 +150,7 @@ const PickersCalendarHeaderSwitchViewButton = styled(IconButton, { ownerState: PickersCalendarHeaderOwnerState; }>(({ ownerState }) => ({ marginRight: 'auto', - ...(ownerState.openView === 'year' && { + ...(ownerState.view === 'year' && { [`.${pickersCalendarHeaderClasses.switchViewIcon}`]: { transform: 'rotate(180deg)', }, @@ -187,7 +187,7 @@ export function PickersCalendarHeader(inProps: PickersCalendarHeaderProps minDate, onMonthChange, onViewChange, - openView: currentView, + view, reduceAnimations, views, labelId, @@ -203,7 +203,7 @@ export function PickersCalendarHeader(inProps: PickersCalendarHeaderProps externalSlotProps: componentsProps.switchViewButton, additionalProps: { size: 'small', - 'aria-label': localeText.calendarViewSwitchingButtonAriaLabel(currentView), + 'aria-label': localeText.calendarViewSwitchingButtonAriaLabel(view), }, ownerState, className: classes.switchViewButton, @@ -236,10 +236,10 @@ export function PickersCalendarHeader(inProps: PickersCalendarHeaderProps } if (views.length === 2) { - onViewChange(views.find((view) => view !== currentView) || views[0]); + onViewChange(views.find((el) => el !== view) || views[0]); } else { // switching only between first 2 - const nextIndexToOpen = views.indexOf(currentView) !== 0 ? 0 : 1; + const nextIndexToOpen = views.indexOf(view) !== 0 ? 0 : 1; onViewChange(views[nextIndexToOpen]); } }; @@ -278,7 +278,7 @@ export function PickersCalendarHeader(inProps: PickersCalendarHeaderProps )} - + } export interface BaseDatePickerProps - extends ExportedDateCalendarProps, + extends Omit, 'value' | 'onChange' | 'defaultValue'>, BasePickerProps, ValidationCommonProps, ExportedDateInputProps { diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx index 807b8deccabfa..f867147387461 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx @@ -19,8 +19,8 @@ import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/ type TabValue = 'date' | 'time'; -const viewToTab = (openView: DateOrTimeView): TabValue => { - if (['day', 'month', 'year'].includes(openView)) { +const viewToTab = (view: DateOrTimeView): TabValue => { + if (['day', 'month', 'year'].includes(view)) { return 'date'; } diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.test.tsx index 658c2a4f3ebbe..1eb35a4b309ef 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.test.tsx @@ -774,14 +774,6 @@ describe('', () => { }); }); - it('should throw console warning when invalid `openTo` prop is provided', () => { - expect(() => { - render(); - - openPicker({ type: 'date', variant: 'desktop' }); - }).toWarnDev('MUI: `openTo="month"` is not a valid prop.'); - }); - describe('localization', () => { it('should respect the `localeText` prop', () => { render( diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 027a849471a44..5355b8723570e 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { SxProps } from '@mui/system'; import { BaseDatePickerProps, useDatePickerDefaultizedProps, @@ -39,6 +40,10 @@ export interface DesktopDatePickerProps * @default {} */ componentsProps?: DesktopDatePickerSlotsComponentsProps; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; } type DesktopDatePickerComponent = (( diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index e58c2027a7054..cade6cac60e05 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { SxProps } from '@mui/system'; import { BaseDateTimePickerProps, useDateTimePickerDefaultizedProps, @@ -41,6 +42,10 @@ export interface DesktopDateTimePickerProps * @default {} */ componentsProps?: DesktopDateTimePickerSlotsComponentsProps; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; } type DesktopDateTimePickerComponent = (( diff --git a/packages/x-date-pickers/src/DesktopNextDatePicker/DesktopNextDatePicker.tsx b/packages/x-date-pickers/src/DesktopNextDatePicker/DesktopNextDatePicker.tsx index 26e6c7a3cb423..aafa7fcebf199 100644 --- a/packages/x-date-pickers/src/DesktopNextDatePicker/DesktopNextDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopNextDatePicker/DesktopNextDatePicker.tsx @@ -78,7 +78,10 @@ DesktopNextDatePicker.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * If `true`, the `input` element is focused during the first mount. + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. */ autoFocus: PropTypes.bool, /** @@ -234,8 +237,8 @@ DesktopNextDatePicker.propTypes = { onSelectedSectionsChange: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -250,7 +253,9 @@ DesktopNextDatePicker.propTypes = { */ open: PropTypes.bool, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['day', 'month', 'year']), /** @@ -331,7 +336,13 @@ DesktopNextDatePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['day', 'month', 'year']), + /** + * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), } as any; diff --git a/packages/x-date-pickers/src/DesktopNextDateTimePicker/DesktopNextDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopNextDateTimePicker/DesktopNextDateTimePicker.tsx index 35d593445fe23..30d26887b02e1 100644 --- a/packages/x-date-pickers/src/DesktopNextDateTimePicker/DesktopNextDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopNextDateTimePicker/DesktopNextDateTimePicker.tsx @@ -87,7 +87,10 @@ DesktopNextDateTimePicker.propTypes = { */ ampmInClock: PropTypes.bool, /** - * If `true`, the `input` element is focused during the first mount. + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. */ autoFocus: PropTypes.bool, /** @@ -271,8 +274,8 @@ DesktopNextDateTimePicker.propTypes = { onSelectedSectionsChange: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -287,7 +290,9 @@ DesktopNextDateTimePicker.propTypes = { */ open: PropTypes.bool, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']), /** @@ -375,7 +380,13 @@ DesktopNextDateTimePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']), + /** + * Available views. */ views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, diff --git a/packages/x-date-pickers/src/DesktopNextTimePicker/DesktopNextTimePicker.tsx b/packages/x-date-pickers/src/DesktopNextTimePicker/DesktopNextTimePicker.tsx index 93b8c3d4e75c9..005953718ea6c 100644 --- a/packages/x-date-pickers/src/DesktopNextTimePicker/DesktopNextTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopNextTimePicker/DesktopNextTimePicker.tsx @@ -83,7 +83,10 @@ DesktopNextTimePicker.propTypes = { */ ampmInClock: PropTypes.bool, /** - * If `true`, the `input` element is focused during the first mount. + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. */ autoFocus: PropTypes.bool, /** @@ -212,8 +215,8 @@ DesktopNextTimePicker.propTypes = { onSelectedSectionsChange: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -222,7 +225,9 @@ DesktopNextTimePicker.propTypes = { */ open: PropTypes.bool, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']), /** @@ -273,7 +278,13 @@ DesktopNextTimePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['hours', 'minutes', 'seconds']), + /** + * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired), } as any; diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 63a00bb1221c4..cedaaf3412041 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { SxProps } from '@mui/system'; import { BaseDatePickerProps, useDatePickerDefaultizedProps, @@ -39,6 +40,10 @@ export interface MobileDatePickerProps * @default {} */ componentsProps?: MobileDatePickerSlotsComponentsProps; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; } type MobileDatePickerComponent = (( diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 02523bc023090..6a5596f024830 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { SxProps } from '@mui/system'; import { BaseDateTimePickerProps, useDateTimePickerDefaultizedProps, @@ -40,6 +41,10 @@ export interface MobileDateTimePickerProps * @default {} */ componentsProps?: MobileDateTimePickerSlotsComponentsProps; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; } type MobileDateTimePickerComponent = (( diff --git a/packages/x-date-pickers/src/MobileNextDatePicker/MobileNextDatePicker.tsx b/packages/x-date-pickers/src/MobileNextDatePicker/MobileNextDatePicker.tsx index d66139eda205e..b3cdf3e503fbc 100644 --- a/packages/x-date-pickers/src/MobileNextDatePicker/MobileNextDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileNextDatePicker/MobileNextDatePicker.tsx @@ -75,6 +75,13 @@ MobileNextDatePicker.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. + */ + autoFocus: PropTypes.bool, /** * Class name applied to the root element. */ @@ -228,8 +235,8 @@ MobileNextDatePicker.propTypes = { onSelectedSectionsChange: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -244,7 +251,9 @@ MobileNextDatePicker.propTypes = { */ open: PropTypes.bool, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['day', 'month', 'year']), /** @@ -325,7 +334,13 @@ MobileNextDatePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['day', 'month', 'year']), + /** + * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), } as any; diff --git a/packages/x-date-pickers/src/MobileNextDateTimePicker/MobileNextDateTimePicker.tsx b/packages/x-date-pickers/src/MobileNextDateTimePicker/MobileNextDateTimePicker.tsx index 72e2a4c2e0d80..ccc42152e5040 100644 --- a/packages/x-date-pickers/src/MobileNextDateTimePicker/MobileNextDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileNextDateTimePicker/MobileNextDateTimePicker.tsx @@ -84,6 +84,13 @@ MobileNextDateTimePicker.propTypes = { * @default false */ ampmInClock: PropTypes.bool, + /** + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. + */ + autoFocus: PropTypes.bool, /** * Class name applied to the root element. */ @@ -265,8 +272,8 @@ MobileNextDateTimePicker.propTypes = { onSelectedSectionsChange: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -281,7 +288,9 @@ MobileNextDateTimePicker.propTypes = { */ open: PropTypes.bool, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']), /** @@ -369,7 +378,13 @@ MobileNextDateTimePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']), + /** + * Available views. */ views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, diff --git a/packages/x-date-pickers/src/MobileNextTimePicker/MobileNextTimePicker.tsx b/packages/x-date-pickers/src/MobileNextTimePicker/MobileNextTimePicker.tsx index f687c30935479..97c3dc8b72ad4 100644 --- a/packages/x-date-pickers/src/MobileNextTimePicker/MobileNextTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileNextTimePicker/MobileNextTimePicker.tsx @@ -81,6 +81,13 @@ MobileNextTimePicker.propTypes = { * @default false */ ampmInClock: PropTypes.bool, + /** + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. + */ + autoFocus: PropTypes.bool, /** * Class name applied to the root element. */ @@ -207,8 +214,8 @@ MobileNextTimePicker.propTypes = { onSelectedSectionsChange: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -217,7 +224,9 @@ MobileNextTimePicker.propTypes = { */ open: PropTypes.bool, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']), /** @@ -268,7 +277,13 @@ MobileNextTimePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['hours', 'minutes', 'seconds']), + /** + * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired), } as any; diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx index ff20f666cdb8c..e8364d8186381 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx @@ -61,7 +61,7 @@ export interface MonthCalendarProps disableHighlightToday?: boolean; onMonthFocus?: (month: number) => void; hasFocus?: boolean; - onFocusedViewChange?: (newHasFocus: boolean) => void; + onFocusedViewChange?: (hasFocus: boolean) => void; } const useUtilityClasses = (ownerState: MonthCalendarProps) => { diff --git a/packages/x-date-pickers/src/NextDatePicker/NextDatePicker.tsx b/packages/x-date-pickers/src/NextDatePicker/NextDatePicker.tsx index 9b4dcb692bd0b..2abdcb62d3f80 100644 --- a/packages/x-date-pickers/src/NextDatePicker/NextDatePicker.tsx +++ b/packages/x-date-pickers/src/NextDatePicker/NextDatePicker.tsx @@ -34,7 +34,10 @@ NextDatePicker.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * If `true`, the `input` element is focused during the first mount. + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. */ autoFocus: PropTypes.bool, /** @@ -196,8 +199,8 @@ NextDatePicker.propTypes = { onSelectedSectionsChange: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -212,7 +215,9 @@ NextDatePicker.propTypes = { */ open: PropTypes.bool, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['day', 'month', 'year']), /** @@ -293,7 +298,13 @@ NextDatePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['day', 'month', 'year']), + /** + * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), } as any; diff --git a/packages/x-date-pickers/src/NextDatePicker/shared.tsx b/packages/x-date-pickers/src/NextDatePicker/shared.tsx index 62ecf7342bbd9..b3190e84c8ff8 100644 --- a/packages/x-date-pickers/src/NextDatePicker/shared.tsx +++ b/packages/x-date-pickers/src/NextDatePicker/shared.tsx @@ -7,7 +7,11 @@ import { ExportedDateCalendarProps, } from '../DateCalendar/DateCalendar'; import { useDefaultDates, useUtils } from '../internals/hooks/useUtils'; -import { isYearAndMonthViews, isYearOnlyView } from '../internals/utils/views'; +import { + applyDefaultViewProps, + isYearAndMonthViews, + isYearOnlyView, +} from '../internals/utils/views'; import { DateValidationError } from '../internals/hooks/validation/useDateValidation'; import { BaseNextPickerProps } from '../internals/models/props/basePickerProps'; import { applyDefaultDate } from '../internals/utils/date-utils'; @@ -99,8 +103,12 @@ export function useNextDatePickerDefaultizedProps< return { ...themeProps, localeText, - views: themeProps.views ?? ['year', 'day'], - openTo: themeProps.openTo ?? 'day', + ...applyDefaultViewProps({ + views: themeProps.views, + openTo: themeProps.openTo, + defaultViews: ['year', 'day'], + defaultOpenTo: 'day', + }), disableFuture: themeProps.disableFuture ?? false, disablePast: themeProps.disablePast ?? false, minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate), diff --git a/packages/x-date-pickers/src/NextDateTimePicker/NextDateTimePicker.tsx b/packages/x-date-pickers/src/NextDateTimePicker/NextDateTimePicker.tsx index 9d27fb72eeec4..09a4ce14903f6 100644 --- a/packages/x-date-pickers/src/NextDateTimePicker/NextDateTimePicker.tsx +++ b/packages/x-date-pickers/src/NextDateTimePicker/NextDateTimePicker.tsx @@ -44,7 +44,10 @@ NextDateTimePicker.propTypes = { */ ampmInClock: PropTypes.bool, /** - * If `true`, the `input` element is focused during the first mount. + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. */ autoFocus: PropTypes.bool, /** @@ -234,8 +237,8 @@ NextDateTimePicker.propTypes = { onSelectedSectionsChange: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -250,7 +253,9 @@ NextDateTimePicker.propTypes = { */ open: PropTypes.bool, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']), /** @@ -338,7 +343,13 @@ NextDateTimePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']), + /** + * Available views. */ views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, diff --git a/packages/x-date-pickers/src/NextDateTimePicker/shared.tsx b/packages/x-date-pickers/src/NextDateTimePicker/shared.tsx index fc4355f2123f0..8a211859c62f5 100644 --- a/packages/x-date-pickers/src/NextDateTimePicker/shared.tsx +++ b/packages/x-date-pickers/src/NextDateTimePicker/shared.tsx @@ -31,6 +31,7 @@ import { ExportedDateTimePickerToolbarProps, } from '../DateTimePicker/DateTimePickerToolbar'; import { DateTimeValidationError } from '../internals/hooks/validation/useDateTimeValidation'; +import { applyDefaultViewProps } from '../internals/utils/views'; export interface BaseNextDateTimePickerSlotsComponent extends DateCalendarSlotsComponent, @@ -120,7 +121,6 @@ export function useNextDateTimePickerDefaultizedProps< name, }); - const views = themeProps.views ?? ['year', 'day', 'hours', 'minutes']; const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale(); const localeText = React.useMemo | undefined>(() => { @@ -136,12 +136,16 @@ export function useNextDateTimePickerDefaultizedProps< return { ...themeProps, - views, + ...applyDefaultViewProps({ + views: themeProps.views, + openTo: themeProps.openTo, + defaultViews: ['year', 'day', 'hours', 'minutes'], + defaultOpenTo: 'day', + }), ampm, localeText, orientation: themeProps.orientation ?? 'portrait', ampmInClock: themeProps.ampmInClock ?? true, - openTo: themeProps.openTo ?? 'day', // TODO: Remove from public API disableIgnoringDatePartForTimeValidation: themeProps.disableIgnoringDatePartForTimeValidation ?? diff --git a/packages/x-date-pickers/src/NextTimePicker/NextTimePicker.tsx b/packages/x-date-pickers/src/NextTimePicker/NextTimePicker.tsx index 3947e29e0cef6..db64c47ec40df 100644 --- a/packages/x-date-pickers/src/NextTimePicker/NextTimePicker.tsx +++ b/packages/x-date-pickers/src/NextTimePicker/NextTimePicker.tsx @@ -44,7 +44,10 @@ NextTimePicker.propTypes = { */ ampmInClock: PropTypes.bool, /** - * If `true`, the `input` element is focused during the first mount. + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. */ autoFocus: PropTypes.bool, /** @@ -179,8 +182,8 @@ NextTimePicker.propTypes = { onSelectedSectionsChange: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -189,7 +192,9 @@ NextTimePicker.propTypes = { */ open: PropTypes.bool, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']), /** @@ -240,7 +245,13 @@ NextTimePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['hours', 'minutes', 'seconds']), + /** + * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired), } as any; diff --git a/packages/x-date-pickers/src/NextTimePicker/shared.tsx b/packages/x-date-pickers/src/NextTimePicker/shared.tsx index 392176be26fc4..dfba5ea923f95 100644 --- a/packages/x-date-pickers/src/NextTimePicker/shared.tsx +++ b/packages/x-date-pickers/src/NextTimePicker/shared.tsx @@ -17,6 +17,7 @@ import { TimePickerToolbar, } from '../TimePicker/TimePickerToolbar'; import { TimeValidationError } from '../internals/hooks/validation/useTimeValidation'; +import { applyDefaultViewProps } from '../internals/utils/views'; export interface BaseNextTimePickerSlotsComponent extends TimeClockSlotsComponent { /** @@ -71,7 +72,6 @@ export function useNextTimePickerDefaultizedProps< name, }); - const views = themeProps.views ?? ['hours', 'minutes']; const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale(); const localeText = React.useMemo | undefined>(() => { @@ -89,8 +89,12 @@ export function useNextTimePickerDefaultizedProps< ...themeProps, ampm, localeText, - views, - openTo: themeProps.openTo ?? 'hours', + ...applyDefaultViewProps({ + views: themeProps.views, + openTo: themeProps.openTo, + defaultViews: ['hours', 'minutes'], + defaultOpenTo: 'hours', + }), disableFuture: themeProps.disableFuture ?? false, disablePast: themeProps.disablePast ?? false, components: { diff --git a/packages/x-date-pickers/src/StaticNextDatePicker/StaticNextDatePicker.tsx b/packages/x-date-pickers/src/StaticNextDatePicker/StaticNextDatePicker.tsx index e436f16952107..c720780f7f268 100644 --- a/packages/x-date-pickers/src/StaticNextDatePicker/StaticNextDatePicker.tsx +++ b/packages/x-date-pickers/src/StaticNextDatePicker/StaticNextDatePicker.tsx @@ -52,7 +52,10 @@ StaticNextDatePicker.propTypes = { // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * If `true`, the view is focused during the first mount. + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. */ autoFocus: PropTypes.bool, /** @@ -170,8 +173,8 @@ StaticNextDatePicker.propTypes = { onMonthChange: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -181,7 +184,9 @@ StaticNextDatePicker.propTypes = { */ onYearChange: PropTypes.func, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['day', 'month', 'year']), /** @@ -245,7 +250,13 @@ StaticNextDatePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['day', 'month', 'year']), + /** + * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired), } as any; diff --git a/packages/x-date-pickers/src/StaticNextDateTimePicker/StaticNextDateTimePicker.tsx b/packages/x-date-pickers/src/StaticNextDateTimePicker/StaticNextDateTimePicker.tsx index f0779d3afa49e..58df50b6fbce9 100644 --- a/packages/x-date-pickers/src/StaticNextDateTimePicker/StaticNextDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticNextDateTimePicker/StaticNextDateTimePicker.tsx @@ -73,7 +73,10 @@ StaticNextDateTimePicker.propTypes = { */ ampmInClock: PropTypes.bool, /** - * If `true`, the view is focused during the first mount. + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. */ autoFocus: PropTypes.bool, /** @@ -219,8 +222,8 @@ StaticNextDateTimePicker.propTypes = { onMonthChange: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** @@ -230,7 +233,9 @@ StaticNextDateTimePicker.propTypes = { */ onYearChange: PropTypes.func, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']), /** @@ -301,7 +306,13 @@ StaticNextDateTimePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']), + /** + * Available views. */ views: PropTypes.arrayOf( PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired, diff --git a/packages/x-date-pickers/src/StaticNextTimePicker/StaticNextTimePicker.tsx b/packages/x-date-pickers/src/StaticNextTimePicker/StaticNextTimePicker.tsx index ae8595a31dc66..a919e20b7dd16 100644 --- a/packages/x-date-pickers/src/StaticNextTimePicker/StaticNextTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticNextTimePicker/StaticNextTimePicker.tsx @@ -63,7 +63,10 @@ StaticNextTimePicker.propTypes = { */ ampmInClock: PropTypes.bool, /** - * If `true`, the view is focused during the first mount. + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. */ autoFocus: PropTypes.bool, /** @@ -154,12 +157,14 @@ StaticNextTimePicker.propTypes = { onError: PropTypes.func, /** * Callback fired on view change. - * @template View - * @param {View} view The new view. + * @template TView + * @param {TView} view The new view. */ onViewChange: PropTypes.func, /** - * First view to show. + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. */ openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']), /** @@ -193,7 +198,13 @@ StaticNextTimePicker.propTypes = { */ value: PropTypes.any, /** - * Array of views to show. + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view: PropTypes.oneOf(['hours', 'minutes', 'seconds']), + /** + * Available views. */ views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired), } as any; diff --git a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx index c5cc99c4a2e5a..5a9a1f992fc41 100644 --- a/packages/x-date-pickers/src/TimeClock/TimeClock.tsx +++ b/packages/x-date-pickers/src/TimeClock/TimeClock.tsx @@ -186,7 +186,7 @@ export const TimeClock = React.forwardRef(function TimeClock( selectedTimeOrMidnight, ampm, - handleChangeAndOpenNext, + setValueAndGoToNextView, ); const isTimeDisabled = React.useCallback( @@ -322,11 +322,11 @@ export const TimeClock = React.forwardRef(function TimeClock, 'onChange' | 'viewValue' | 'children'> >(() => { - switch (openView) { + switch (view) { case 'hours': { const handleHoursChange = (hourValue: number, isFinish?: PickerSelectionState) => { const valueWithMeridiem = convertValueToMeridiem(hourValue, meridiemMode, ampm); - handleChangeAndOpenNext( + setValueAndGoToNextView( utils.setHours(selectedTimeOrMidnight, valueWithMeridiem), isFinish, ); @@ -350,7 +350,7 @@ export const TimeClock = React.forwardRef(function TimeClock { - handleChangeAndOpenNext(utils.setMinutes(selectedTimeOrMidnight, minuteValue), isFinish); + setValueAndGoToNextView(utils.setMinutes(selectedTimeOrMidnight, minuteValue), isFinish); }; return { @@ -370,7 +370,7 @@ export const TimeClock = React.forwardRef(function TimeClock { - handleChangeAndOpenNext(utils.setSeconds(selectedTimeOrMidnight, secondValue), isFinish); + setValueAndGoToNextView(utils.setSeconds(selectedTimeOrMidnight, secondValue), isFinish); }; return { @@ -391,7 +391,7 @@ export const TimeClock = React.forwardRef(function TimeClock setOpenView(previousView)} + onGoToPrevious={() => setView(previousView!)} isPreviousDisabled={!previousView} previousLabel={localeText.openPreviousView} - onGoToNext={() => setOpenView(nextView)} + onGoToNext={() => setView(nextView!)} isNextDisabled={!nextView} nextLabel={localeText.openNextView} ownerState={ownerState} @@ -435,7 +435,7 @@ export const TimeClock = React.forwardRef(function TimeClock disableHighlightToday?: boolean; onYearFocus?: (year: number) => void; hasFocus?: boolean; - onFocusedViewChange?: (newHasFocus: boolean) => void; + onFocusedViewChange?: (hasFocus: boolean) => void; } type YearCalendarComponent = ((props: YearCalendarProps) => JSX.Element) & { diff --git a/packages/x-date-pickers/src/internals/components/CalendarOrClockPicker/CalendarOrClockPicker.tsx b/packages/x-date-pickers/src/internals/components/CalendarOrClockPicker/CalendarOrClockPicker.tsx index f1a65406f913f..b953549c15300 100644 --- a/packages/x-date-pickers/src/internals/components/CalendarOrClockPicker/CalendarOrClockPicker.tsx +++ b/packages/x-date-pickers/src/internals/components/CalendarOrClockPicker/CalendarOrClockPicker.tsx @@ -19,7 +19,6 @@ import { PickerViewRoot } from '../PickerViewRoot'; import { DateOrTimeView, DateView, TimeView } from '../../models'; import { BaseToolbarProps, ExportedBaseToolbarProps } from '../../models/props/toolbar'; import { BaseTabsProps, ExportedBaseTabsProps } from '../../models/props/tabs'; -import { useFocusManagement } from './useFocusManagement'; import { CalendarOrClockPickerClasses, getCalendarOrClockPickerUtilityClass, @@ -39,7 +38,7 @@ export interface CalendarOrClockPickerSlotsComponentsProps export interface ExportedCalendarOrClockPickerProps extends Omit, 'value' | 'onChange' | 'localeText'>, - Omit, 'onViewChange' | 'openTo' | 'view'>, + Omit, 'onViewChange' | 'openTo' | 'view' | 'views'>, ExportedTimeClockProps { /** * Callback fired on view change. @@ -113,8 +112,6 @@ const isDatePickerView = (view: DateOrTimeView): view is DateView => const isTimePickerView = (view: DateOrTimeView): view is TimeView => view === 'hours' || view === 'minutes' || view === 'seconds'; -let warnedOnceNotValidOpenTo = false; - // TODO v6: Drop with the legacy pickers export function CalendarOrClockPicker( inProps: CalendarOrClockPickerProps, @@ -162,27 +159,13 @@ export function CalendarOrClockPicker( [isMobileKeyboardViewOpen, onViewChange, toggleMobileKeyboardView], ); - if (process.env.NODE_ENV !== 'production') { - if (!warnedOnceNotValidOpenTo && !views.includes(openTo)) { - console.warn( - `MUI: \`openTo="${openTo}"\` is not a valid prop.`, - `It must be an element of \`views=["${views.join('", "')}"]\`.`, - ); - warnedOnceNotValidOpenTo = true; - } - } - - const { openView, setOpenView, handleChangeAndOpenNext } = useViews({ + const { view, setView, focusedView, setFocusedView, setValueAndGoToNextView } = useViews({ view: undefined, views, openTo, onChange: handleDateChange, onViewChange: handleViewChange, - }); - - const { focusedView, setFocusedView } = useFocusManagement({ autoFocus, - openView, }); const Tabs = components?.Tabs; @@ -198,8 +181,8 @@ export function CalendarOrClockPicker( isLandscape={isLandscape} onChange={handleDateChange} value={value} - view={openView} - onViewChange={setOpenView as (view: DateOrTimeView) => void} + view={view} + onViewChange={setView as (view: DateOrTimeView) => void} views={views} disabled={other.disabled} readOnly={other.readOnly} @@ -209,8 +192,8 @@ export function CalendarOrClockPicker( )} {!!Tabs && ( void} + view={view} + onViewChange={setView as (view: DateOrTimeView) => void} {...componentsProps?.tabs} /> )} @@ -227,33 +210,33 @@ export function CalendarOrClockPicker( ) : ( - {isDatePickerView(openView) && ( + {isDatePickerView(view) && ( void} - onChange={handleChangeAndOpenNext} - view={openView} + onViewChange={setView as (view: DateView) => void} + onChange={setValueAndGoToNextView} + view={view} // Unclear why the predicate `isDatePickerView` does not imply the casted type views={views.filter(isDatePickerView) as DateView[]} - focusedView={focusedView} - onFocusedViewChange={setFocusedView} + focusedView={focusedView as DateView | null} + onFocusedViewChange={setFocusedView as (view: DateView, hasFocus: boolean) => void} components={components} componentsProps={componentsProps} {...other} /> )} - {isTimePickerView(openView) && ( + {isTimePickerView(view) && ( void} + onChange={setValueAndGoToNextView} + onViewChange={setView as (view: TimeView) => void} showViewSwitcher={wrapperVariant === 'desktop'} components={components} componentsProps={componentsProps} diff --git a/packages/x-date-pickers/src/internals/components/CalendarOrClockPicker/useFocusManagement.tsx b/packages/x-date-pickers/src/internals/components/CalendarOrClockPicker/useFocusManagement.tsx deleted file mode 100644 index e262869669596..0000000000000 --- a/packages/x-date-pickers/src/internals/components/CalendarOrClockPicker/useFocusManagement.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react'; -import { DateOrTimeView } from '../../models/views'; - -interface FocusStateInput { - autoFocus?: boolean; - openView: any; -} - -export const useFocusManagement = ({ - autoFocus, - openView, -}: FocusStateInput) => { - const [focusedView, setFocusedView] = React.useState(autoFocus ? openView : null); - - const setFocusedViewCallback = React.useCallback( - (view: TView) => (newHasFocus: boolean) => { - if (newHasFocus) { - setFocusedView(view); - } else { - setFocusedView((prevFocusedView) => (view === prevFocusedView ? null : prevFocusedView)); - } - }, - [], - ); - - return { - focusedView, - setFocusedView: setFocusedViewCallback, - }; -}; diff --git a/packages/x-date-pickers/src/internals/components/PickerStaticWrapper/PickerStaticWrapper.tsx b/packages/x-date-pickers/src/internals/components/PickerStaticWrapper/PickerStaticWrapper.tsx index a81c08bc97057..46d5562e5edf4 100644 --- a/packages/x-date-pickers/src/internals/components/PickerStaticWrapper/PickerStaticWrapper.tsx +++ b/packages/x-date-pickers/src/internals/components/PickerStaticWrapper/PickerStaticWrapper.tsx @@ -43,6 +43,7 @@ export interface ExportedPickerStaticWrapperProps { * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps; + autoFocus?: boolean; } export interface PickerStaticWrapperProps @@ -150,6 +151,7 @@ PickerStaticWrapper.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + autoFocus: PropTypes.bool, children: PropTypes.node, /** * Override or extend the styles applied to the component. diff --git a/packages/x-date-pickers/src/internals/hooks/useField/index.ts b/packages/x-date-pickers/src/internals/hooks/useField/index.ts index 0e9d8009b620a..9a8df84e580cd 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/index.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/index.ts @@ -9,7 +9,7 @@ export type { FieldSelectedSections, FieldChangeHandler, FieldChangeHandlerContext, -} from './useField.interfaces'; +} from './useField.types'; export { splitFormatIntoSections, addPositionPropertiesToSections, diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index a822b0a0217d9..94332cdeaf145 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -13,7 +13,7 @@ import { UseFieldInternalProps, AvailableAdjustKeyCode, FieldBoundaries, -} from './useField.interfaces'; +} from './useField.types'; import { getMonthsMatchingQuery, adjustDateSectionValue, diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.interfaces.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts similarity index 100% rename from packages/x-date-pickers/src/internals/hooks/useField/useField.interfaces.ts rename to packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts index 683249266b0f6..228477569322e 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts @@ -4,7 +4,7 @@ import { FieldBoundaries, SectionNeighbors, SectionOrdering, -} from './useField.interfaces'; +} from './useField.types'; import { MuiPickersAdapter, MuiDateSectionName } from '../../models'; import { PickersLocaleText } from '../../../locales/utils/pickersLocaleTextApi'; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts index 1e79bab0dbc06..4bfdff44b260c 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -12,7 +12,7 @@ import { FieldSelectedSections, FieldBoundaries, FieldChangeHandlerContext, -} from './useField.interfaces'; +} from './useField.types'; import { addPositionPropertiesToSections, splitFormatIntoSections, diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts index f171fe248b56c..553cadce740bf 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts @@ -11,7 +11,7 @@ import { UseFieldInternalProps, } from '../useField'; import { InferError, useValidation, Validator } from '../validation/useValidation'; -import { UseFieldValidationProps } from '../useField/useField.interfaces'; +import { UseFieldValidationProps } from '../useField/useField.types'; export interface PickerChangeHandlerContext { validationError: TError; diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts index b27e0193c47fc..6a4428375d9bf 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts @@ -2,10 +2,9 @@ import * as React from 'react'; import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; import useEventCallback from '@mui/utils/useEventCallback'; import { DateOrTimeView } from '../../models'; -import { useViews } from '../useViews'; +import { useViews, UseViewsOptions } from '../useViews'; import { WrapperVariant } from '../../components/wrappers/WrapperVariantContext'; import type { UsePickerValueViewsResponse } from './usePickerValue'; -import { useFocusManagement } from '../../components/CalendarOrClockPicker/useFocusManagement'; type PickerViewRenderer< TValue, @@ -28,26 +27,13 @@ export type PickerViewRendererLookup< /** * Props used to handle the views that are common to all pickers. */ -export interface UsePickerViewsBaseProps { +export interface UsePickerViewsBaseProps + extends Omit, 'onChange' | 'onFocusedViewChange' | 'focusedView'> { /** * If `true`, the picker and text field are disabled. * @default false */ disabled?: boolean; - /** - * First view to show. - */ - openTo: TView; - /** - * Callback fired on view change. - * @template View - * @param {View} view The new view. - */ - onViewChange?: (view: TView) => void; - /** - * Array of views to show. - */ - views: readonly TView[]; } /** @@ -110,7 +96,7 @@ export type PickerViewsRendererProps< views: readonly TView[]; wrapperVariant: WrapperVariant; focusedView: TView | null; - onFocusedViewChange?: (view: TView) => (newHasFocus: boolean) => void; + onFocusedViewChange: (viewToFocus: TView, hasFocus: boolean) => void; }; export interface UsePickerViewsLayoutResponse { @@ -119,8 +105,6 @@ export interface UsePickerViewsLayoutResponse { views: readonly TView[]; } -let warnedOnceNotValidOpenTo = false; - /** * Manage the views of all the pickers: * - Handles the view switch @@ -149,44 +133,29 @@ export const usePickerViews = < const { onChange, open, onSelectedSectionsChange, onClose } = propsFromPickerValue; const { views, openTo, onViewChange, disableOpenPicker } = props; - if (process.env.NODE_ENV !== 'production') { - if (!warnedOnceNotValidOpenTo && !views.includes(openTo)) { - console.warn( - `MUI: \`openTo="${openTo}"\` is not a valid prop.`, - `It must be an element of \`views=["${views.join('", "')}"]\`.`, - ); - warnedOnceNotValidOpenTo = true; - } - } - - const { openView, setOpenView, handleChangeAndOpenNext } = useViews({ + const { view, setView, focusedView, setFocusedView, setValueAndGoToNextView } = useViews({ view: undefined, views, openTo, onChange, onViewChange, - }); - - // TODO v6: Move `useFocusManagement` here - const { focusedView, setFocusedView } = useFocusManagement({ autoFocus: autoFocusView, - openView, }); const { hasUIView, viewModeLookup } = React.useMemo( () => views.reduce( - (acc, view) => { + (acc, viewForReduce) => { let viewMode: 'field' | 'UI'; if (disableOpenPicker) { viewMode = 'field'; - } else if (viewLookup[view] != null) { + } else if (viewLookup[viewForReduce] != null) { viewMode = 'UI'; } else { viewMode = 'field'; } - acc.viewModeLookup[view] = viewMode; + acc.viewModeLookup[viewForReduce] = viewMode; if (viewMode === 'UI') { acc.hasUIView = true; } @@ -198,14 +167,14 @@ export const usePickerViews = < [disableOpenPicker, viewLookup, views], ); - const currentViewMode = viewModeLookup[openView]; + const currentViewMode = viewModeLookup[view]; const shouldRestoreFocus = useEventCallback(() => currentViewMode === 'UI'); const [popperView, setPopperView] = React.useState( - currentViewMode === 'UI' ? openView : null, + currentViewMode === 'UI' ? view : null, ); - if (popperView !== openView && viewModeLookup[openView] === 'UI') { - setPopperView(openView); + if (popperView !== view && viewModeLookup[view] === 'UI') { + setPopperView(view); } useEnhancedEffect(() => { @@ -217,7 +186,7 @@ export const usePickerViews = < inputRef?.current!.focus(); }); } - }, [openView]); // eslint-disable-line react-hooks/exhaustive-deps + }, [view]); // eslint-disable-line react-hooks/exhaustive-deps useEnhancedEffect(() => { if (!open) { @@ -225,14 +194,14 @@ export const usePickerViews = < } if (currentViewMode === 'field' && popperView != null) { - setOpenView(popperView); + setView(popperView); } }, [open]); // eslint-disable-line react-hooks/exhaustive-deps const layoutProps: UsePickerViewsLayoutResponse = { views, view: popperView, - onViewChange: setOpenView, + onViewChange: setView, }; return { @@ -255,9 +224,9 @@ export const usePickerViews = < ...propsFromPickerValue, wrapperVariant, views, - onChange: handleChangeAndOpenNext, + onChange: setValueAndGoToNextView, view: popperView, - onViewChange: setOpenView, + onViewChange: setView, focusedView, onFocusedViewChange: setFocusedView, }); diff --git a/packages/x-date-pickers/src/internals/hooks/useViews.tsx b/packages/x-date-pickers/src/internals/hooks/useViews.tsx index 176fa45ff8cda..cfcb5a17a9a21 100644 --- a/packages/x-date-pickers/src/internals/hooks/useViews.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useViews.tsx @@ -1,58 +1,150 @@ import * as React from 'react'; +import useEventCallback from '@mui/utils/useEventCallback'; import { unstable_useControlled as useControlled } from '@mui/utils'; import { arrayIncludes } from '../utils/utils'; import { PickerSelectionState } from './usePickerState'; import { DateOrTimeView } from '../models'; +import { MakeOptional } from '../models/helpers'; export type PickerOnChangeFn = ( date: TDate | null, selectionState?: PickerSelectionState, ) => void; -interface UseViewsOptions { +export interface UseViewsOptions { + /** + * Callback fired when the value changes. + * @template TValue + * @param {TValue} value The new value. + * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete. + */ onChange: (value: TValue, selectionState?: PickerSelectionState) => void; - onViewChange?: (newView: View) => void; - openTo?: View; - view: View | undefined; - views: readonly View[]; + /** + * Callback fired on view change. + * @template TView + * @param {TView} view The new view. + */ + onViewChange?: (view: TView) => void; + /** + * The default visible view. + * Used when the component view is not controlled. + * Must be a valid option from `views` list. + */ + openTo?: TView; + /** + * The visible view. + * Used when the component view is controlled. + * Must be a valid option from `views` list. + */ + view?: TView; + /** + * Available views. + */ + views: readonly TView[]; + /** + * If `true`, the main element is focused during the first mount. + * This main element is: + * - the element chosen by the visible view if any (i.e: the selected day on the `day` view). + * - the `input` element if there is a field rendered. + */ + autoFocus?: boolean; + /** + * Controlled focused view. + */ + focusedView?: TView | null; + /** + * Callback fired on focused view change. + * @template TView + * @param {TView} view The new view to focus or not. + * @param {boolean} hasFocus `true` if the view should be focused. + */ + onFocusedViewChange?: (view: TView, hasFocus: boolean) => void; } -export function useViews({ +export interface ExportedUseViewsOptions + extends MakeOptional, 'onChange'>, 'openTo' | 'views'> {} + +let warnedOnceNotValidView = false; + +interface UseViewsResponse { + view: TView; + setView: (view: TView) => void; + focusedView: TView | null; + setFocusedView: (view: TView, hasFocus: boolean) => void; + nextView: TView | null; + previousView: TView | null; + goToNextView: () => void; + setValueAndGoToNextView: ( + value: TValue, + currentViewSelectionState?: PickerSelectionState, + ) => void; +} + +export function useViews({ onChange, onViewChange, openTo, - view, + view: inView, views, -}: UseViewsOptions) { - const [openView, setOpenView] = useControlled({ - name: 'Picker', + autoFocus, + focusedView: inFocusedView, + onFocusedViewChange, +}: UseViewsOptions): UseViewsResponse { + if (process.env.NODE_ENV !== 'production') { + if (!warnedOnceNotValidView) { + if (inView != null && !views.includes(inView)) { + console.warn( + `MUI: \`view="${inView}"\` is not a valid prop.`, + `It must be an element of \`views=["${views.join('", "')}"]\`.`, + ); + warnedOnceNotValidView = true; + } + + if (inView == null && openTo != null && !views.includes(openTo)) { + console.warn( + `MUI: \`openTo="${openTo}"\` is not a valid prop.`, + `It must be an element of \`views=["${views.join('", "')}"]\`.`, + ); + warnedOnceNotValidView = true; + } + } + } + + const defaultView = React.useRef(arrayIncludes(views, openTo) ? openTo : views[0]); + const [view, setView] = useControlled({ + name: 'useViews', state: 'view', - controlled: view, - default: openTo && arrayIncludes(views, openTo) ? openTo : views[0], + controlled: inView, + default: defaultView.current, }); - const openViewIndex = views.indexOf(openView); - const previousView: View | null = views[openViewIndex - 1] ?? null; - const nextView: View | null = views[openViewIndex + 1] ?? null; + const defaultFocusedView = React.useRef(autoFocus ? view : null); + const [focusedView, setFocusedView] = useControlled({ + name: 'useViews', + state: 'focusedView', + controlled: inFocusedView, + default: defaultFocusedView.current, + }); - const changeView = React.useCallback( - (newView: View) => { - setOpenView(newView); + const viewIndex = views.indexOf(view); + const previousView: TView | null = views[viewIndex - 1] ?? null; + const nextView: TView | null = views[viewIndex + 1] ?? null; - if (onViewChange) { - onViewChange(newView); - } - }, - [setOpenView, onViewChange], - ); + const handleChangeView = useEventCallback((newView: TView) => { + setView(newView); + + if (onViewChange) { + onViewChange(newView); + } + }); - const openNext = React.useCallback(() => { + const goToNextView = useEventCallback(() => { if (nextView) { - changeView(nextView); + handleChangeView(nextView); } - }, [nextView, changeView]); + }); - const handleChangeAndOpenNext = React.useCallback( + const setValueAndGoToNextView = useEventCallback( (value: TValue, currentViewSelectionState?: PickerSelectionState) => { const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish'; const globalSelectionState = @@ -62,18 +154,31 @@ export function useViews({ onChange(value, globalSelectionState); if (isSelectionFinishedOnCurrentView) { - openNext(); + goToNextView(); } }, - [nextView, onChange, openNext], ); + const handleFocusedViewChange = useEventCallback((viewToFocus: TView, hasFocus: boolean) => { + if (hasFocus) { + setFocusedView(viewToFocus); + } else { + setFocusedView((prevFocusedView) => + viewToFocus === prevFocusedView ? null : prevFocusedView, + ); + } + + onFocusedViewChange?.(viewToFocus, hasFocus); + }); + return { - handleChangeAndOpenNext, + view, + setView: handleChangeView, + focusedView, + setFocusedView: handleFocusedViewChange, nextView, previousView, - openNext, - openView, - setOpenView: changeView, + goToNextView, + setValueAndGoToNextView, }; } diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 1ca9d37b05a2f..490fb43abdaa0 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -139,6 +139,7 @@ export { useLocaleText, useNow, } from './hooks/useUtils'; +export type { ExportedUseViewsOptions } from './hooks/useViews'; export type { BaseDateValidationProps, BaseTimeValidationProps, diff --git a/packages/x-date-pickers/src/internals/utils/views.ts b/packages/x-date-pickers/src/internals/utils/views.ts index 7547b30a84e71..4715d57c93964 100644 --- a/packages/x-date-pickers/src/internals/utils/views.ts +++ b/packages/x-date-pickers/src/internals/utils/views.ts @@ -1,4 +1,4 @@ -import { DateView } from '../models/views'; +import { DateOrTimeView, DateView } from '../models/views'; export const isYearOnlyView = (views: readonly DateView[]): views is ReadonlyArray<'year'> => views.length === 1 && views[0] === 'year'; @@ -7,3 +7,32 @@ export const isYearAndMonthViews = ( views: readonly DateView[], ): views is ReadonlyArray<'month' | 'year'> => views.length === 2 && views.indexOf('month') !== -1 && views.indexOf('year') !== -1; + +export const applyDefaultViewProps = ({ + openTo, + defaultOpenTo, + views, + defaultViews, +}: { + openTo: TView | undefined; + defaultOpenTo: TView; + views: readonly TView[] | undefined; + defaultViews: readonly TView[]; +}) => { + const viewsWithDefault: readonly TView[] = views ?? defaultViews; + let openToWithDefault: TView; + if (openTo != null) { + openToWithDefault = openTo; + } else if (viewsWithDefault.includes(defaultOpenTo)) { + openToWithDefault = defaultOpenTo; + } else if (viewsWithDefault.length > 0) { + openToWithDefault = viewsWithDefault[0]; + } else { + throw new Error('MUI: The `views` prop must contain at least one view'); + } + + return { + views: viewsWithDefault, + openTo: openToWithDefault, + }; +}; diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 8a4fb86b5abe2..d87ef8d562134 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -103,7 +103,7 @@ { "name": "DesktopTimePickerSlotsComponentsProps", "kind": "Interface" }, { "name": "enUS", "kind": "Variable" }, { "name": "esES", "kind": "Variable" }, - { "name": "ExportedDateRangeCalendarProps", "kind": "TypeAlias" }, + { "name": "ExportedDateRangeCalendarProps", "kind": "Interface" }, { "name": "ExportedPickersMonthProps", "kind": "Interface" }, { "name": "ExportedPickersYearProps", "kind": "Interface" }, { "name": "ExportedSlideTransitionProps", "kind": "Interface" },