[pickers] Rework view internals (#7097)

mui · Dec 16, 2022 · 3f247e5 · 3f247e5
1 parent 48bbb75
commit 3f247e5
Show file tree

Hide file tree

Showing 142 changed files with 975 additions and 626 deletions.
diff --git 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,19 +15,25 @@
  "disablePast": { "type": { "name": "bool" } },
  "displayWeekNumber": { "type": { "name": "bool" } },
  "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" },
+ "focusedView": {
+ "type": {
+ "name": "enum",
+ "description": "'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'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" } },
  "openTo": {
  "type": {
  "name": "enum",
  "description": "'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'"
- },
- "default": "'day'"
+ }
  },
  "readOnly": { "type": { "name": "bool" } },
  "reduceAnimations": {
@@ -58,8 +65,7 @@
  "type": {
  "name": "arrayOf",
  "description": "Array&lt;'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'&gt;"
- },
- "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
@@ -1,5 +1,6 @@
 {
  "props": {
+ "autoFocus": { "type": { "name": "bool" } },
  "calendars": {
  "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;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
@@ -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
@@ -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
@@ -78,6 +78,12 @@
  }
  },
  "value": { "type": { "name": "any" } },
+ "view": {
+ "type": {
+ "name": "enum",
+ "description": "'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'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
@@ -1,5 +1,6 @@
 {
  "props": {
+ "autoFocus": { "type": { "name": "bool" } },
  "calendars": {
  "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;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
@@ -87,6 +87,12 @@
  }
  },
  "value": { "type": { "name": "any" } },
+ "view": {
+ "type": {
+ "name": "enum",
+ "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'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
@@ -60,6 +60,12 @@
  }
  },
  "value": { "type": { "name": "any" } },
+ "view": {
+ "type": {
+ "name": "enum",
+ "description": "'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'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
@@ -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
@@ -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'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'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
@@ -1,5 +1,6 @@
 {
  "props": {
+ "autoFocus": { "type": { "name": "bool" } },
  "calendars": {
  "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;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
@@ -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'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'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
@@ -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'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'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
@@ -82,6 +82,12 @@
  }
  },
  "value": { "type": { "name": "any" } },
+ "view": {
+ "type": {
+ "name": "enum",
+ "description": "'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'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
@@ -1,5 +1,6 @@
 {
  "props": {
+ "autoFocus": { "type": { "name": "bool" } },
  "calendars": {
  "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;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
@@ -91,6 +91,12 @@
  }
  },
  "value": { "type": { "name": "any" } },
+ "view": {
+ "type": {
+ "name": "enum",
+ "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'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
@@ -64,6 +64,12 @@
  }
  },
  "value": { "type": { "name": "any" } },
+ "view": {
+ "type": {
+ "name": "enum",
+ "description": "'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'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
@@ -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
@@ -62,6 +62,12 @@
  }
  },
  "value": { "type": { "name": "any" } },
+ "view": {
+ "type": {
+ "name": "enum",
+ "description": "'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'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
@@ -1,5 +1,6 @@
 {
  "props": {
+ "autoFocus": { "type": { "name": "bool" } },
  "calendars": {
  "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;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
@@ -71,6 +71,12 @@
  }
  },
  "value": { "type": { "name": "any" } },
+ "view": {
+ "type": {
+ "name": "enum",
+ "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'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
@@ -44,6 +44,12 @@
  }
  },
  "value": { "type": { "name": "any" } },
+ "view": {
+ "type": {
+ "name": "enum",
+ "description": "'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'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
@@ -1,6 +1,7 @@
 {
  "componentDescription": "",
  "propDescriptions": {
+ "autoFocus": "If <code>true</code>, 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 <code>day</code> view). - the <code>input</code> 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.<br><br><strong>Signature:</strong><br><code>function(day: string) =&gt; string</code><br><em>day:</em> The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.<br> <em>returns</em> (string): The name to display.",
@@ -12,14 +13,16 @@
  "disablePast": "If <code>true</code> disable values after the current date for date components, time for time components and both for date time components.",
  "displayWeekNumber": "If <code>true</code>, 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 <code>true</code> renders <code>LoadingComponent</code> 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.<br><br><strong>Signature:</strong><br><code>function(value: TDate | null, selectionState: PickerSelectionState | undefined) =&gt; void</code><br><em>value:</em> The new value.<br><em>selectionState:</em> Indicates if the date selection is complete.",
+ "onFocusedViewChange": "Callback fired on focused view change.<br><br><strong>Signature:</strong><br><code>function(view: TView, hasFocus: boolean) =&gt; void</code><br><em>view:</em> The new view to focus or not.<br><em>hasFocus:</em> <code>true</code> if the view should be focused.",
  "onMonthChange": "Callback firing on month change @DateIOType.<br><br><strong>Signature:</strong><br><code>function(month: TDate) =&gt; void | Promise</code><br><em>month:</em> The new month.<br> <em>returns</em> (void | Promise): -",
- "onViewChange": "Callback fired on view change.<br><br><strong>Signature:</strong><br><code>function(view: DateView) =&gt; void</code><br><em>view:</em> The new view.",
+ "onViewChange": "Callback fired on view change.<br><br><strong>Signature:</strong><br><code>function(view: TView) =&gt; void</code><br><em>view:</em> The new view.",
  "onYearChange": "Callback firing on year change @DateIOType.<br><br><strong>Signature:</strong><br><code>function(year: TDate) =&gt; void</code><br><em>year:</em> 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 <code>views</code> list.",
  "readOnly": "Make picker read only.",
  "reduceAnimations": "Disable heavy animations.",
  "renderLoading": "Component displaying when passed <code>loading</code> true.<br><br><strong>Signature:</strong><br><code>function() =&gt; React.ReactNode</code><br><br> <em>returns</em> (React.ReactNode): The node to render when loading.",
@@ -29,8 +32,8 @@
  "showDaysOutsideCurrentMonth": "If <code>true</code>, days that have <code>outsideCurrentMonth={true}</code> are displayed.",
  "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> 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 <code>views</code> 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
@@ -1,6 +1,7 @@
 {
  "componentDescription": "",
  "propDescriptions": {
+ "autoFocus": "If <code>true</code>, 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 <code>day</code> view). - the <code>input</code> 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.<br><br><strong>Signature:</strong><br><code>function(day: string) =&gt; string</code><br><em>day:</em> The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.<br> <em>returns</em> (string): The name to display.",
@@ -12,14 +13,16 @@
  "disablePast": "If <code>true</code> disable values after the current date for date components, time for time components and both for date time components.",
  "displayWeekNumber": "If <code>true</code>, 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 <code>true</code> renders <code>LoadingComponent</code> 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.<br><br><strong>Signature:</strong><br><code>function(value: TDate | null, selectionState: PickerSelectionState | undefined) =&gt; void</code><br><em>value:</em> The new value.<br><em>selectionState:</em> Indicates if the date selection is complete.",
+ "onFocusedViewChange": "Callback fired on focused view change.<br><br><strong>Signature:</strong><br><code>function(view: TView, hasFocus: boolean) =&gt; void</code><br><em>view:</em> The new view to focus or not.<br><em>hasFocus:</em> <code>true</code> if the view should be focused.",
  "onMonthChange": "Callback firing on month change @DateIOType.<br><br><strong>Signature:</strong><br><code>function(month: TDate) =&gt; void | Promise</code><br><em>month:</em> The new month.<br> <em>returns</em> (void | Promise): -",
- "onViewChange": "Callback fired on view change.<br><br><strong>Signature:</strong><br><code>function(view: DateView) =&gt; void</code><br><em>view:</em> The new view.",
+ "onViewChange": "Callback fired on view change.<br><br><strong>Signature:</strong><br><code>function(view: TView) =&gt; void</code><br><em>view:</em> The new view.",
  "onYearChange": "Callback firing on year change @DateIOType.<br><br><strong>Signature:</strong><br><code>function(year: TDate) =&gt; void</code><br><em>year:</em> 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 <code>views</code> list.",
  "readOnly": "Make picker read only.",
  "reduceAnimations": "Disable heavy animations.",
  "renderLoading": "Component displaying when passed <code>loading</code> true.<br><br><strong>Signature:</strong><br><code>function() =&gt; React.ReactNode</code><br><br> <em>returns</em> (React.ReactNode): The node to render when loading.",
@@ -29,8 +32,8 @@
  "showDaysOutsideCurrentMonth": "If <code>true</code>, days that have <code>outsideCurrentMonth={true}</code> are displayed.",
  "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> 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 <code>views</code> list.",
+ "views": "Available views."
  },
  "classDescriptions": {
  "root": { "description": "Styles applied to the root element." },