@mui/x-date-pickers 5.0.2 → 5.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/CHANGELOG.md +95 -1
  2. package/CalendarPicker/CalendarPicker.js +12 -4
  3. package/CalendarPicker/PickersCalendarHeader.d.ts +1 -1
  4. package/ClockPicker/ClockPicker.d.ts +6 -6
  5. package/ClockPicker/ClockPicker.js +6 -6
  6. package/DatePicker/DatePicker.js +1 -1
  7. package/DateTimePicker/DateTimePicker.js +2 -2
  8. package/DesktopDatePicker/DesktopDatePicker.js +1 -1
  9. package/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  10. package/DesktopTimePicker/DesktopTimePicker.js +1 -1
  11. package/MobileDatePicker/MobileDatePicker.js +1 -1
  12. package/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  13. package/MobileTimePicker/MobileTimePicker.js +1 -1
  14. package/StaticDatePicker/StaticDatePicker.js +1 -1
  15. package/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  16. package/StaticTimePicker/StaticTimePicker.js +1 -1
  17. package/TimePicker/TimePicker.js +1 -1
  18. package/YearPicker/PickersYear.js +2 -2
  19. package/YearPicker/YearPicker.js +32 -3
  20. package/index.js +1 -1
  21. package/internals/models/muiPickersAdapter.d.ts +12 -7
  22. package/legacy/CalendarPicker/CalendarPicker.js +12 -4
  23. package/legacy/ClockPicker/ClockPicker.js +6 -6
  24. package/legacy/DatePicker/DatePicker.js +1 -1
  25. package/legacy/DateTimePicker/DateTimePicker.js +2 -2
  26. package/legacy/DesktopDatePicker/DesktopDatePicker.js +1 -1
  27. package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  28. package/legacy/DesktopTimePicker/DesktopTimePicker.js +1 -1
  29. package/legacy/MobileDatePicker/MobileDatePicker.js +1 -1
  30. package/legacy/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  31. package/legacy/MobileTimePicker/MobileTimePicker.js +1 -1
  32. package/legacy/StaticDatePicker/StaticDatePicker.js +1 -1
  33. package/legacy/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  34. package/legacy/StaticTimePicker/StaticTimePicker.js +1 -1
  35. package/legacy/TimePicker/TimePicker.js +1 -1
  36. package/legacy/YearPicker/PickersYear.js +2 -2
  37. package/legacy/YearPicker/YearPicker.js +32 -3
  38. package/legacy/index.js +1 -1
  39. package/legacy/locales/faIR.js +52 -0
  40. package/legacy/locales/fiFI.js +61 -0
  41. package/legacy/locales/index.js +3 -0
  42. package/legacy/locales/isIS.js +0 -1
  43. package/legacy/locales/jaJP.js +65 -0
  44. package/locales/faIR.d.ts +35 -0
  45. package/locales/faIR.js +36 -0
  46. package/locales/fiFI.d.ts +35 -0
  47. package/locales/fiFI.js +45 -0
  48. package/locales/index.d.ts +3 -0
  49. package/locales/index.js +3 -0
  50. package/locales/isIS.js +0 -1
  51. package/locales/jaJP.d.ts +35 -0
  52. package/locales/jaJP.js +51 -0
  53. package/modern/CalendarPicker/CalendarPicker.js +12 -4
  54. package/modern/ClockPicker/ClockPicker.js +6 -6
  55. package/modern/DatePicker/DatePicker.js +1 -1
  56. package/modern/DateTimePicker/DateTimePicker.js +2 -2
  57. package/modern/DesktopDatePicker/DesktopDatePicker.js +1 -1
  58. package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  59. package/modern/DesktopTimePicker/DesktopTimePicker.js +1 -1
  60. package/modern/MobileDatePicker/MobileDatePicker.js +1 -1
  61. package/modern/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  62. package/modern/MobileTimePicker/MobileTimePicker.js +1 -1
  63. package/modern/StaticDatePicker/StaticDatePicker.js +1 -1
  64. package/modern/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  65. package/modern/StaticTimePicker/StaticTimePicker.js +1 -1
  66. package/modern/TimePicker/TimePicker.js +1 -1
  67. package/modern/YearPicker/PickersYear.js +2 -2
  68. package/modern/YearPicker/YearPicker.js +32 -3
  69. package/modern/index.js +1 -1
  70. package/modern/locales/faIR.js +36 -0
  71. package/modern/locales/fiFI.js +45 -0
  72. package/modern/locales/index.js +3 -0
  73. package/modern/locales/isIS.js +0 -1
  74. package/modern/locales/jaJP.js +47 -0
  75. package/node/CalendarPicker/CalendarPicker.js +12 -4
  76. package/node/ClockPicker/ClockPicker.js +6 -6
  77. package/node/DatePicker/DatePicker.js +1 -1
  78. package/node/DateTimePicker/DateTimePicker.js +2 -2
  79. package/node/DesktopDatePicker/DesktopDatePicker.js +1 -1
  80. package/node/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -2
  81. package/node/DesktopTimePicker/DesktopTimePicker.js +1 -1
  82. package/node/MobileDatePicker/MobileDatePicker.js +1 -1
  83. package/node/MobileDateTimePicker/MobileDateTimePicker.js +2 -2
  84. package/node/MobileTimePicker/MobileTimePicker.js +1 -1
  85. package/node/StaticDatePicker/StaticDatePicker.js +1 -1
  86. package/node/StaticDateTimePicker/StaticDateTimePicker.js +2 -2
  87. package/node/StaticTimePicker/StaticTimePicker.js +1 -1
  88. package/node/TimePicker/TimePicker.js +1 -1
  89. package/node/YearPicker/PickersYear.js +2 -2
  90. package/node/YearPicker/YearPicker.js +34 -4
  91. package/node/index.js +1 -1
  92. package/node/locales/faIR.js +45 -0
  93. package/node/locales/fiFI.js +54 -0
  94. package/node/locales/index.js +39 -0
  95. package/node/locales/isIS.js +0 -1
  96. package/node/locales/jaJP.js +60 -0
  97. package/package.json +2 -2
  98. package/internals/models/muiPickersAdapter.js +0 -1
  99. package/legacy/internals/models/muiPickersAdapter.js +0 -1
  100. package/modern/internals/models/muiPickersAdapter.js +0 -1
  101. package/node/internals/models/muiPickersAdapter.js +0 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,100 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 5.17.6
7
+
8
+ _Oct 6, 2022_
9
+
10
+ We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
11
+
12
+ - 🌍 Add Japanese (ja-JP) locale to pickers (#6365) @sho918
13
+ - 🎁 Improve support for theme augmentation in the DataGrid (#6406) @cherniavskii
14
+ - 🐞 Bugfixes
15
+
16
+ ### `@mui/x-data-grid@v5.17.6` / `@mui/x-data-grid-pro@v5.17.6` / `@mui/x-data-grid-premium@v5.17.6`
17
+
18
+ #### Changes
19
+
20
+ - [DataGrid] Add missing `valueOptions` (#6400) @DanailH
21
+ - [DataGrid] Don't start edit mode when pressing <kbd>Shift</kbd> + <kbd>Space</kbd> (#6380) @m4theushw
22
+ - [DataGrid] Pass generics to the components in the theme augmentation (#6406) @cherniavskii
23
+
24
+ ### `@mui/x-date-pickers@v5.0.4` / `@mui/x-date-pickers-pro@v5.0.4`
25
+
26
+ #### Changes
27
+
28
+ - [l10n] Add Japanese (ja-JP) locale to pickers (#6365) (#6382) @sho918
29
+ - [pickers] Prevent `CalendarPicker` getting focus when `autoFocus=false` (#6304) (#6362) @alexfauquette
30
+ - [pickers] Fix git repository location @oliviertassinari
31
+
32
+ ### Docs
33
+
34
+ - [docs] Fix customized day rendering demo style (#6342) @Ambrish-git
35
+
36
+ ## 5.17.5
37
+
38
+ _Sep 29, 2022_
39
+
40
+ We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
41
+
42
+ - 🎁 Add theme augmentation module to DataGridPremium (#6316) @cherniavskii
43
+ - 👀 Fix blank space when changing page with dynamic row height (#6320) @m4theushw
44
+ - 📚 Improve controlled editing demo to make easier to reuse it (#6306) @cherniavskii
45
+ - 🐞 Bugfixes
46
+
47
+ ### `@mui/x-data-grid@v5.17.5` / `@mui/x-data-grid-pro@v5.17.5` / `@mui/x-data-grid-premium@v5.17.5`
48
+
49
+ #### Changes
50
+
51
+ - [DataGrid] Fix `GridPagination` props typing (#6295) @cherniavskii
52
+ - [DataGrid] Fix `GridRow` not forwarding `ref` to the root element (#6303) @cherniavskii
53
+ - [DataGrid] Fix `undefined` value being showed in filter button tooltip text (#6271) @cherniavskii
54
+ - [DataGrid] Fix blank space when changing page with dynamic row height (#6320) @m4theushw
55
+ - [DataGrid] Revert cell/row mode if `processRowUpdate` fails (#6319) @m4theushw
56
+ - [DataGridPremium] Add missing `themeAugmentation` module (#6316) @cherniavskii
57
+
58
+ ### Docs
59
+
60
+ - [docs] Pass model change callbacks in controlled grid editing demos (#6306) @cherniavskii
61
+
62
+ ### Core
63
+
64
+ - [core] Reduce the amount of updated screenshots reported by Argos (#6310) @cherniavskii
65
+
66
+ ## 5.17.4
67
+
68
+ _Sep 22, 2022_
69
+
70
+ We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
71
+
72
+ - 🌍 Add Finnish (fi-FI) locale to the pickers (#6230) @PetroSilenius
73
+ - 🌍 Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
74
+ - 🐞 Bugfixes
75
+
76
+ ### `@mui/x-data-grid@v5.17.4` / `@mui/x-data-grid-pro@v5.17.4` / `@mui/x-data-grid-premium@v5.17.4`
77
+
78
+ #### Changes
79
+
80
+ - [DataGrid] Do not publish `cellFocusOut` event if the row was removed (#6251) @cherniavskii
81
+ - [DataGrid] Improve Polish (pl-PL) locale on the data grid (#6245) @grzegorz-bach
82
+
83
+ ### `@mui/x-date-pickers@v5.0.3` / `@mui/x-date-pickers-pro@v5.0.3`
84
+
85
+ #### Changes
86
+
87
+ - [pickers] Add Finnish (fi-FI) locale to pickers (#6219) (#6230) @PetroSilenius
88
+ - [pickers] Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
89
+ - [pickers] Fix usage with Typescript 4.8 (#6229) @flaviendelangle
90
+ - [YearPicker] Scroll to the current year even with `autoFocus=false` (#6224) @alexfauquette
91
+
92
+ ### Docs
93
+
94
+ - [docs] Fix 301 link (#6239) @oliviertassinari
95
+
96
+ ### Core
97
+
98
+ - [core] Use the official repository for `@mui/monorepo` instead of a fork (#6189) @oliviertassinari
99
+
6
100
  ## 5.17.3
7
101
 
8
102
  _Sep 16, 2022_
@@ -101,7 +195,7 @@ We'd like to offer a big thanks to the 3 contributors who made this release poss
101
195
 
102
196
  _Sep 2, 2022_
103
197
 
104
- 🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` packages!
198
+ 🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` packages!
105
199
 
106
200
  If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
107
201
 
@@ -68,9 +68,7 @@ const CalendarPickerViewTransitionContainer = styled(PickersFadeTransitionGroup,
68
68
  name: 'MuiCalendarPicker',
69
69
  slot: 'ViewTransitionContainer',
70
70
  overridesResolver: (props, styles) => styles.viewTransitionContainer
71
- })({
72
- overflowY: 'auto'
73
- });
71
+ })({});
74
72
 
75
73
  /**
76
74
  *
@@ -259,6 +257,16 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
259
257
  setInternalFocusedView(prevView => prevView === eventView ? null : prevView);
260
258
  }
261
259
  });
260
+ const prevOpenViewRef = React.useRef(openView);
261
+ React.useEffect(() => {
262
+ // Set focus to the button when switching from a view to another
263
+ if (prevOpenViewRef.current === openView) {
264
+ return;
265
+ }
266
+
267
+ prevOpenViewRef.current = openView;
268
+ handleFocusedViewChange(openView)(true);
269
+ }, [openView, handleFocusedViewChange]);
262
270
  return /*#__PURE__*/_jsxs(CalendarPickerRoot, {
263
271
  ref: ref,
264
272
  className: clsx(classes.root, className),
@@ -380,7 +388,7 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
380
388
  * Get aria-label text for switching between views button.
381
389
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
382
390
  * @returns {string} The label of the view.
383
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
391
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
384
392
  */
385
393
  getViewSwitchingButtonText: PropTypes.func,
386
394
 
@@ -41,7 +41,7 @@ export interface PickersCalendarHeaderProps<TDate> extends ExportedArrowSwitcher
41
41
  * Get aria-label text for switching between views button.
42
42
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
43
43
  * @returns {string} The label of the view.
44
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
44
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
45
45
  */
46
46
  getViewSwitchingButtonText?: (currentView: CalendarPickerView) => string;
47
47
  onMonthChange: (date: TDate, slideDirection: SlideDirection) => void;
@@ -22,7 +22,7 @@ export interface ExportedClockPickerProps<TDate> extends ExportedTimeValidationP
22
22
  * @param {TDate | null} time The current time.
23
23
  * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
24
24
  * @returns {string} The clock label.
25
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
25
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
26
26
  * @default <TDate extends any>(
27
27
  * view: ClockView,
28
28
  * time: TDate | null,
@@ -69,7 +69,7 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
69
69
  * @param {string} hours The hours to format.
70
70
  * @returns {string} the formatted hours text.
71
71
  * @default (hours: string) => `${hours} hours`
72
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
72
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
73
73
  */
74
74
  getHoursClockNumberText?: (hours: string) => string;
75
75
  /**
@@ -77,7 +77,7 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
77
77
  * @param {string} minutes The minutes to format.
78
78
  * @returns {string} the formatted minutes text.
79
79
  * @default (minutes: string) => `${minutes} minutes`
80
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
80
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
81
81
  */
82
82
  getMinutesClockNumberText?: (minutes: string) => string;
83
83
  /**
@@ -85,13 +85,13 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
85
85
  * @param {string} seconds The seconds to format.
86
86
  * @returns {string} the formatted seconds text.
87
87
  * @default (seconds: string) => `${seconds} seconds`
88
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
88
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
89
89
  */
90
90
  getSecondsClockNumberText?: (seconds: string) => string;
91
91
  /**
92
92
  * Left arrow icon aria-label text.
93
93
  * @default 'open previous view'
94
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
94
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
95
95
  */
96
96
  leftArrowButtonText?: string;
97
97
  /**
@@ -101,7 +101,7 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
101
101
  /**
102
102
  * Right arrow icon aria-label text.
103
103
  * @default 'open next view'
104
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
104
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
105
105
  */
106
106
  rightArrowButtonText?: string;
107
107
  showViewSwitcher?: boolean;
@@ -363,7 +363,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
363
363
  * @param {TDate | null} time The current time.
364
364
  * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
365
365
  * @returns {string} The clock label.
366
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
366
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
367
367
  * @default <TDate extends any>(
368
368
  * view: ClockView,
369
369
  * time: TDate | null,
@@ -380,7 +380,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
380
380
  * @param {string} hours The hours to format.
381
381
  * @returns {string} the formatted hours text.
382
382
  * @default (hours: string) => `${hours} hours`
383
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
383
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
384
384
  */
385
385
  getHoursClockNumberText: PropTypes.func,
386
386
 
@@ -389,7 +389,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
389
389
  * @param {string} minutes The minutes to format.
390
390
  * @returns {string} the formatted minutes text.
391
391
  * @default (minutes: string) => `${minutes} minutes`
392
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
392
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
393
393
  */
394
394
  getMinutesClockNumberText: PropTypes.func,
395
395
 
@@ -398,14 +398,14 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
398
398
  * @param {string} seconds The seconds to format.
399
399
  * @returns {string} the formatted seconds text.
400
400
  * @default (seconds: string) => `${seconds} seconds`
401
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
401
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
402
402
  */
403
403
  getSecondsClockNumberText: PropTypes.func,
404
404
 
405
405
  /**
406
406
  * Left arrow icon aria-label text.
407
407
  * @default 'open previous view'
408
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
408
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
409
409
  */
410
410
  leftArrowButtonText: PropTypes.string,
411
411
 
@@ -453,7 +453,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
453
453
  /**
454
454
  * Right arrow icon aria-label text.
455
455
  * @default 'open next view'
456
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
456
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
457
457
  */
458
458
  rightArrowButtonText: PropTypes.string,
459
459
 
@@ -164,7 +164,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
164
164
  * Get aria-label text for switching between views button.
165
165
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
166
166
  * @returns {string} The label of the view.
167
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
167
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
168
168
  */
169
169
  getViewSwitchingButtonText: PropTypes.func,
170
170
  ignoreInvalidInputs: PropTypes.bool,
@@ -180,7 +180,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
180
180
  * @param {TDate | null} time The current time.
181
181
  * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
182
182
  * @returns {string} The clock label.
183
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
183
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
184
184
  * @default <TDate extends any>(
185
185
  * view: ClockView,
186
186
  * time: TDate | null,
@@ -206,7 +206,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
206
206
  * Get aria-label text for switching between views button.
207
207
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
208
208
  * @returns {string} The label of the view.
209
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
209
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
210
210
  */
211
211
  getViewSwitchingButtonText: PropTypes.func,
212
212
 
@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes = {
166
166
  * Get aria-label text for switching between views button.
167
167
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
168
168
  * @returns {string} The label of the view.
169
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
169
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
170
170
  */
171
171
  getViewSwitchingButtonText: PropTypes.func,
172
172
  ignoreInvalidInputs: PropTypes.bool,
@@ -189,7 +189,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
189
189
  * @param {TDate | null} time The current time.
190
190
  * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
191
191
  * @returns {string} The clock label.
192
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
192
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
193
193
  * @default <TDate extends any>(
194
194
  * view: ClockView,
195
195
  * time: TDate | null,
@@ -215,7 +215,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
215
215
  * Get aria-label text for switching between views button.
216
216
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
217
217
  * @returns {string} The label of the view.
218
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
218
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
219
219
  */
220
220
  getViewSwitchingButtonText: PropTypes.func,
221
221
 
@@ -145,7 +145,7 @@ process.env.NODE_ENV !== "production" ? DesktopTimePicker.propTypes = {
145
145
  * @param {TDate | null} time The current time.
146
146
  * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
147
147
  * @returns {string} The clock label.
148
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
148
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
149
149
  * @default <TDate extends any>(
150
150
  * view: ClockView,
151
151
  * time: TDate | null,
@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes = {
166
166
  * Get aria-label text for switching between views button.
167
167
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
168
168
  * @returns {string} The label of the view.
169
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
169
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
170
170
  */
171
171
  getViewSwitchingButtonText: PropTypes.func,
172
172
  ignoreInvalidInputs: PropTypes.bool,
@@ -189,7 +189,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
189
189
  * @param {TDate | null} time The current time.
190
190
  * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
191
191
  * @returns {string} The clock label.
192
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
192
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
193
193
  * @default <TDate extends any>(
194
194
  * view: ClockView,
195
195
  * time: TDate | null,
@@ -215,7 +215,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
215
215
  * Get aria-label text for switching between views button.
216
216
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
217
217
  * @returns {string} The label of the view.
218
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
218
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
219
219
  */
220
220
  getViewSwitchingButtonText: PropTypes.func,
221
221
 
@@ -145,7 +145,7 @@ process.env.NODE_ENV !== "production" ? MobileTimePicker.propTypes = {
145
145
  * @param {TDate | null} time The current time.
146
146
  * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
147
147
  * @returns {string} The clock label.
148
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
148
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
149
149
  * @default <TDate extends any>(
150
150
  * view: ClockView,
151
151
  * time: TDate | null,
@@ -167,7 +167,7 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
167
167
  * Get aria-label text for switching between views button.
168
168
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
169
169
  * @returns {string} The label of the view.
170
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
170
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
171
171
  */
172
172
  getViewSwitchingButtonText: PropTypes.func,
173
173
  ignoreInvalidInputs: PropTypes.bool,
@@ -190,7 +190,7 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
190
190
  * @param {TDate | null} time The current time.
191
191
  * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
192
192
  * @returns {string} The clock label.
193
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
193
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
194
194
  * @default <TDate extends any>(
195
195
  * view: ClockView,
196
196
  * time: TDate | null,
@@ -216,7 +216,7 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
216
216
  * Get aria-label text for switching between views button.
217
217
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
218
218
  * @returns {string} The label of the view.
219
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
219
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
220
220
  */
221
221
  getViewSwitchingButtonText: PropTypes.func,
222
222
 
@@ -146,7 +146,7 @@ process.env.NODE_ENV !== "production" ? StaticTimePicker.propTypes = {
146
146
  * @param {TDate | null} time The current time.
147
147
  * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
148
148
  * @returns {string} The clock label.
149
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
149
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
150
150
  * @default <TDate extends any>(
151
151
  * view: ClockView,
152
152
  * time: TDate | null,
@@ -143,7 +143,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
143
143
  * @param {TDate | null} time The current time.
144
144
  * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
145
145
  * @returns {string} The clock label.
146
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
146
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
147
147
  * @default <TDate extends any>(
148
148
  * view: ClockView,
149
149
  * time: TDate | null,
@@ -108,11 +108,11 @@ export const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(pr
108
108
  wrapperVariant
109
109
  });
110
110
 
111
- const classes = useUtilityClasses(ownerState); // TODO: Can we just forward this to the button?
111
+ const classes = useUtilityClasses(ownerState); // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
112
112
 
113
113
  React.useEffect(() => {
114
114
  if (autoFocus) {
115
- // `ref.current` being `null` would be a bug in MUIu
115
+ // `ref.current` being `null` would be a bug in MUI.
116
116
  ref.current.focus();
117
117
  }
118
118
  }, [autoFocus]);
@@ -3,8 +3,9 @@ import * as React from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import { useTheme, styled, useThemeProps } from '@mui/material/styles';
5
5
  import { unstable_composeClasses as composeClasses } from '@mui/material';
6
- import { useControlled } from '@mui/material/utils';
7
6
  import clsx from 'clsx';
7
+ import { useForkRef } from '@mui/material/utils';
8
+ import { unstable_useControlled as useControlled } from '@mui/utils';
8
9
  import { PickersYear } from './PickersYear';
9
10
  import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
10
11
  import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
@@ -48,7 +49,8 @@ const YearPickerRoot = styled('div', {
48
49
  flexWrap: 'wrap',
49
50
  overflowY: 'auto',
50
51
  height: '100%',
51
- margin: '0 4px'
52
+ padding: '0 4px',
53
+ maxHeight: '304px'
52
54
  });
53
55
  export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref) {
54
56
  const now = useNow();
@@ -181,8 +183,35 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
181
183
  }
182
184
  }, [focusedYear, changeHasFocus]);
183
185
  const nowYear = utils.getYear(now);
186
+ const scrollerRef = React.useRef(null);
187
+ const handleRef = useForkRef(ref, scrollerRef);
188
+ React.useEffect(() => {
189
+ if (autoFocus || scrollerRef.current === null) {
190
+ return;
191
+ }
192
+
193
+ const tabbableButton = scrollerRef.current.querySelector('[tabindex="0"]');
194
+
195
+ if (!tabbableButton) {
196
+ return;
197
+ } // Taken from useScroll in x-data-grid, but vertically centered
198
+
199
+
200
+ const offsetHeight = tabbableButton.offsetHeight;
201
+ const offsetTop = tabbableButton.offsetTop;
202
+ const clientHeight = scrollerRef.current.clientHeight;
203
+ const scrollTop = scrollerRef.current.scrollTop;
204
+ const elementBottom = offsetTop + offsetHeight;
205
+
206
+ if (offsetHeight > clientHeight || offsetTop < scrollTop) {
207
+ // Button already visible
208
+ return;
209
+ }
210
+
211
+ scrollerRef.current.scrollTop = elementBottom - clientHeight / 2 - offsetHeight / 2;
212
+ }, [autoFocus]);
184
213
  return /*#__PURE__*/_jsx(YearPickerRoot, {
185
- ref: ref,
214
+ ref: handleRef,
186
215
  className: clsx(classes.root, className),
187
216
  ownerState: ownerState,
188
217
  children: utils.getYearRange(minDate, maxDate).map(year => {
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license MUI v5.0.2
1
+ /** @license MUI v5.0.4
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
@@ -1,10 +1,15 @@
1
1
  import { IUtils } from '@date-io/core/IUtils';
2
- export declare type MuiPickersAdapter<TDate> = IUtils<TDate>;
3
- export declare type MuiDateSectionName = 'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'am-pm';
4
- export declare type MuiFormatTokenMap = {
5
- [formatToken: string]: MuiDateSectionName;
6
- };
2
+
3
+ // TODO: Maybe we should add the same constraint.
4
+ // @ts-expect-error TDate in our codebase does not have the `ExtendableDateType` constraint.
5
+ export type MuiPickersAdapter<TDate> = IUtils<TDate>;
6
+
7
+ export type MuiDateSectionName = 'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'am-pm';
8
+
9
+ export type MuiFormatTokenMap = { [formatToken: string]: MuiDateSectionName };
10
+
7
11
  export interface MuiPickerFieldAdapter<TDate> extends MuiPickersAdapter<TDate> {
8
- formatTokenMap: MuiFormatTokenMap;
9
- expandFormat: (format: string) => string;
12
+ formatTokenMap: MuiFormatTokenMap;
13
+
14
+ expandFormat: (format: string) => string;
10
15
  }
@@ -73,9 +73,7 @@ var CalendarPickerViewTransitionContainer = styled(PickersFadeTransitionGroup, {
73
73
  overridesResolver: function overridesResolver(props, styles) {
74
74
  return styles.viewTransitionContainer;
75
75
  }
76
- })({
77
- overflowY: 'auto'
78
- });
76
+ })({});
79
77
 
80
78
  /**
81
79
  *
@@ -272,6 +270,16 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
272
270
  }
273
271
  };
274
272
  });
273
+ var prevOpenViewRef = React.useRef(openView);
274
+ React.useEffect(function () {
275
+ // Set focus to the button when switching from a view to another
276
+ if (prevOpenViewRef.current === openView) {
277
+ return;
278
+ }
279
+
280
+ prevOpenViewRef.current = openView;
281
+ handleFocusedViewChange(openView)(true);
282
+ }, [openView, handleFocusedViewChange]);
275
283
  return /*#__PURE__*/_jsxs(CalendarPickerRoot, {
276
284
  ref: ref,
277
285
  className: clsx(classes.root, className),
@@ -395,7 +403,7 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
395
403
  * Get aria-label text for switching between views button.
396
404
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
397
405
  * @returns {string} The label of the view.
398
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
406
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
399
407
  */
400
408
  getViewSwitchingButtonText: PropTypes.func,
401
409
 
@@ -386,7 +386,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
386
386
  * @param {TDate | null} time The current time.
387
387
  * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
388
388
  * @returns {string} The clock label.
389
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
389
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
390
390
  * @default <TDate extends any>(
391
391
  * view: ClockView,
392
392
  * time: TDate | null,
@@ -403,7 +403,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
403
403
  * @param {string} hours The hours to format.
404
404
  * @returns {string} the formatted hours text.
405
405
  * @default (hours: string) => `${hours} hours`
406
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
406
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
407
407
  */
408
408
  getHoursClockNumberText: PropTypes.func,
409
409
 
@@ -412,7 +412,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
412
412
  * @param {string} minutes The minutes to format.
413
413
  * @returns {string} the formatted minutes text.
414
414
  * @default (minutes: string) => `${minutes} minutes`
415
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
415
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
416
416
  */
417
417
  getMinutesClockNumberText: PropTypes.func,
418
418
 
@@ -421,14 +421,14 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
421
421
  * @param {string} seconds The seconds to format.
422
422
  * @returns {string} the formatted seconds text.
423
423
  * @default (seconds: string) => `${seconds} seconds`
424
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
424
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
425
425
  */
426
426
  getSecondsClockNumberText: PropTypes.func,
427
427
 
428
428
  /**
429
429
  * Left arrow icon aria-label text.
430
430
  * @default 'open previous view'
431
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
431
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
432
432
  */
433
433
  leftArrowButtonText: PropTypes.string,
434
434
 
@@ -476,7 +476,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
476
476
  /**
477
477
  * Right arrow icon aria-label text.
478
478
  * @default 'open next view'
479
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
479
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
480
480
  */
481
481
  rightArrowButtonText: PropTypes.string,
482
482
 
@@ -163,7 +163,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
163
163
  * Get aria-label text for switching between views button.
164
164
  * @param {CalendarPickerView} currentView The view from which we want to get the button text.
165
165
  * @returns {string} The label of the view.
166
- * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
166
+ * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
167
167
  */
168
168
  getViewSwitchingButtonText: PropTypes.func,
169
169
  ignoreInvalidInputs: PropTypes.bool,