@mui/x-date-pickers 5.0.2 → 5.0.3

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.17.4
+
+_Sep 22, 2022_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Finnish (fi-FI) locale to the pickers (#6230) @PetroSilenius
+- 🌍 Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.4` / `@mui/x-data-grid-pro@v5.17.4` / `@mui/x-data-grid-premium@v5.17.4`
+
+#### Changes
+
+- [DataGrid] Do not publish `cellFocusOut` event if the row was removed (#6251) @cherniavskii
+- [DataGrid] Improve Polish (pl-PL) locale on the data grid (#6245) @grzegorz-bach
+
+### `@mui/x-date-pickers@v5.0.3` / `@mui/x-date-pickers-pro@v5.0.3`
+
+#### Changes
+
+- [pickers] Add Finnish (fi-FI) locale to pickers (#6219) (#6230) @PetroSilenius
+- [pickers] Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- [pickers] Fix usage with Typescript 4.8 (#6229) @flaviendelangle
+- [YearPicker] Scroll to the current year even with `autoFocus=false` (#6224) @alexfauquette
+
+### Docs
+
+- [docs] Fix 301 link (#6239) @oliviertassinari
+
+### Core
+
+- [core] Use the official repository for `@mui/monorepo` instead of a fork (#6189) @oliviertassinari
+
 ## 5.17.3
 
 _Sep 16, 2022_
@@ -101,7 +135,7 @@ We'd like to offer a big thanks to the 3 contributors who made this release poss
 
 _Sep 2, 2022_
 
-🎉 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!
+🎉 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!
 
 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/).
 

package/CalendarPicker/CalendarPicker.js

@@ -68,9 +68,7 @@ const CalendarPickerViewTransitionContainer = styled(PickersFadeTransitionGroup,
   name: 'MuiCalendarPicker',
   slot: 'ViewTransitionContainer',
   overridesResolver: (props, styles) => styles.viewTransitionContainer
-})({
-  overflowY: 'auto'
-});
+})({});
 
 /**
  *
@@ -259,6 +257,10 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
       setInternalFocusedView(prevView => prevView === eventView ? null : prevView);
     }
   });
+  React.useEffect(() => {
+    // Set focus to the button when switching from a view to another
+    handleFocusedViewChange(openView)(true);
+  }, [openView, handleFocusedViewChange]);
   return /*#__PURE__*/_jsxs(CalendarPickerRoot, {
     ref: ref,
     className: clsx(classes.root, className),
@@ -380,7 +382,7 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
 

package/CalendarPicker/PickersCalendarHeader.d.ts

@@ -41,7 +41,7 @@ export interface PickersCalendarHeaderProps<TDate> extends ExportedArrowSwitcher
      * Get aria-label text for switching between views button.
      * @param {CalendarPickerView} currentView The view from which we want to get the button text.
      * @returns {string} The label of the view.
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
      */
     getViewSwitchingButtonText?: (currentView: CalendarPickerView) => string;
     onMonthChange: (date: TDate, slideDirection: SlideDirection) => void;

package/ClockPicker/ClockPicker.d.ts

@@ -22,7 +22,7 @@ export interface ExportedClockPickerProps<TDate> extends ExportedTimeValidationP
      * @param {TDate | null} time The current time.
      * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
      * @returns {string} The clock label.
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
      * @default <TDate extends any>(
      *   view: ClockView,
      *   time: TDate | null,
@@ -69,7 +69,7 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
      * @param {string} hours The hours to format.
      * @returns {string} the formatted hours text.
      * @default (hours: string) => `${hours} hours`
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
      */
     getHoursClockNumberText?: (hours: string) => string;
     /**
@@ -77,7 +77,7 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
      * @param {string} minutes The minutes to format.
      * @returns {string} the formatted minutes text.
      * @default (minutes: string) => `${minutes} minutes`
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
      */
     getMinutesClockNumberText?: (minutes: string) => string;
     /**
@@ -85,13 +85,13 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
      * @param {string} seconds The seconds to format.
      * @returns {string} the formatted seconds text.
      * @default (seconds: string) => `${seconds} seconds`
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
      */
     getSecondsClockNumberText?: (seconds: string) => string;
     /**
      * Left arrow icon aria-label text.
      * @default 'open previous view'
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
      */
     leftArrowButtonText?: string;
     /**
@@ -101,7 +101,7 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
     /**
      * Right arrow icon aria-label text.
      * @default 'open next view'
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
      */
     rightArrowButtonText?: string;
     showViewSwitcher?: boolean;

package/ClockPicker/ClockPicker.js

@@ -363,7 +363,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -380,7 +380,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {string} hours The hours to format.
    * @returns {string} the formatted hours text.
    * @default (hours: string) => `${hours} hours`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getHoursClockNumberText: PropTypes.func,
 
@@ -389,7 +389,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {string} minutes The minutes to format.
    * @returns {string} the formatted minutes text.
    * @default (minutes: string) => `${minutes} minutes`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getMinutesClockNumberText: PropTypes.func,
 
@@ -398,14 +398,14 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {string} seconds The seconds to format.
    * @returns {string} the formatted seconds text.
    * @default (seconds: string) => `${seconds} seconds`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getSecondsClockNumberText: PropTypes.func,
 
   /**
    * Left arrow icon aria-label text.
    * @default 'open previous view'
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   leftArrowButtonText: PropTypes.string,
 
@@ -453,7 +453,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
   /**
    * Right arrow icon aria-label text.
    * @default 'open next view'
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   rightArrowButtonText: PropTypes.string,
 

package/DatePicker/DatePicker.js

@@ -164,7 +164,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,

package/DateTimePicker/DateTimePicker.js

@@ -180,7 +180,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -206,7 +206,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
 

package/DesktopDatePicker/DesktopDatePicker.js

@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -189,7 +189,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -215,7 +215,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
 

package/DesktopTimePicker/DesktopTimePicker.js

@@ -145,7 +145,7 @@ process.env.NODE_ENV !== "production" ? DesktopTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,

package/MobileDatePicker/MobileDatePicker.js

@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -189,7 +189,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -215,7 +215,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
 

package/MobileTimePicker/MobileTimePicker.js

@@ -145,7 +145,7 @@ process.env.NODE_ENV !== "production" ? MobileTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,

package/StaticDatePicker/StaticDatePicker.js

@@ -167,7 +167,7 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -190,7 +190,7 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -216,7 +216,7 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
 

package/StaticTimePicker/StaticTimePicker.js

@@ -146,7 +146,7 @@ process.env.NODE_ENV !== "production" ? StaticTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,

package/TimePicker/TimePicker.js

@@ -143,7 +143,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,

package/YearPicker/PickersYear.js

@@ -108,11 +108,11 @@ export const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(pr
     wrapperVariant
   });
 
-  const classes = useUtilityClasses(ownerState); // TODO: Can we just forward this to the button?
+  const classes = useUtilityClasses(ownerState); // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
 
   React.useEffect(() => {
     if (autoFocus) {
-      // `ref.current` being `null` would be a bug in MUIu
+      // `ref.current` being `null` would be a bug in MUI.
       ref.current.focus();
     }
   }, [autoFocus]);

package/YearPicker/YearPicker.js

@@ -3,8 +3,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useControlled } from '@mui/material/utils';
 import clsx from 'clsx';
+import { useForkRef } from '@mui/material/utils';
+import { unstable_useControlled as useControlled } from '@mui/utils';
 import { PickersYear } from './PickersYear';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
 import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
@@ -48,7 +49,8 @@ const YearPickerRoot = styled('div', {
   flexWrap: 'wrap',
   overflowY: 'auto',
   height: '100%',
-  margin: '0 4px'
+  padding: '0 4px',
+  maxHeight: '304px'
 });
 export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref) {
   const now = useNow();
@@ -181,8 +183,35 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
     }
   }, [focusedYear, changeHasFocus]);
   const nowYear = utils.getYear(now);
+  const scrollerRef = React.useRef(null);
+  const handleRef = useForkRef(ref, scrollerRef);
+  React.useEffect(() => {
+    if (autoFocus || scrollerRef.current === null) {
+      return;
+    }
+
+    const tabbableButton = scrollerRef.current.querySelector('[tabindex="0"]');
+
+    if (!tabbableButton) {
+      return;
+    } // Taken from useScroll in x-data-grid, but vertically centered
+
+
+    const offsetHeight = tabbableButton.offsetHeight;
+    const offsetTop = tabbableButton.offsetTop;
+    const clientHeight = scrollerRef.current.clientHeight;
+    const scrollTop = scrollerRef.current.scrollTop;
+    const elementBottom = offsetTop + offsetHeight;
+
+    if (offsetHeight > clientHeight || offsetTop < scrollTop) {
+      // Button already visible
+      return;
+    }
+
+    scrollerRef.current.scrollTop = elementBottom - clientHeight / 2 - offsetHeight / 2;
+  }, [autoFocus]);
   return /*#__PURE__*/_jsx(YearPickerRoot, {
-    ref: ref,
+    ref: handleRef,
     className: clsx(classes.root, className),
     ownerState: ownerState,
     children: utils.getYearRange(minDate, maxDate).map(year => {

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.2
+/** @license MUI v5.0.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internals/models/muiPickersAdapter.d.ts

@@ -1,10 +1,15 @@
 import { IUtils } from '@date-io/core/IUtils';
-export declare type MuiPickersAdapter<TDate> = IUtils<TDate>;
-export declare type MuiDateSectionName = 'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'am-pm';
-export declare type MuiFormatTokenMap = {
-    [formatToken: string]: MuiDateSectionName;
-};
+
+// TODO: Maybe we should add the same constraint.
+// @ts-expect-error TDate in our codebase does not have the `ExtendableDateType` constraint.
+export type MuiPickersAdapter<TDate> = IUtils<TDate>;
+
+export type MuiDateSectionName = 'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'am-pm';
+
+export type MuiFormatTokenMap = { [formatToken: string]: MuiDateSectionName };
+
 export interface MuiPickerFieldAdapter<TDate> extends MuiPickersAdapter<TDate> {
-    formatTokenMap: MuiFormatTokenMap;
-    expandFormat: (format: string) => string;
+  formatTokenMap: MuiFormatTokenMap;
+
+  expandFormat: (format: string) => string;
 }

package/legacy/CalendarPicker/CalendarPicker.js

@@ -73,9 +73,7 @@ var CalendarPickerViewTransitionContainer = styled(PickersFadeTransitionGroup, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.viewTransitionContainer;
   }
-})({
-  overflowY: 'auto'
-});
+})({});
 
 /**
  *
@@ -272,6 +270,10 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
       }
     };
   });
+  React.useEffect(function () {
+    // Set focus to the button when switching from a view to another
+    handleFocusedViewChange(openView)(true);
+  }, [openView, handleFocusedViewChange]);
   return /*#__PURE__*/_jsxs(CalendarPickerRoot, {
     ref: ref,
     className: clsx(classes.root, className),
@@ -395,7 +397,7 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
 

package/legacy/ClockPicker/ClockPicker.js

@@ -386,7 +386,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -403,7 +403,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {string} hours The hours to format.
    * @returns {string} the formatted hours text.
    * @default (hours: string) => `${hours} hours`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getHoursClockNumberText: PropTypes.func,
 
@@ -412,7 +412,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {string} minutes The minutes to format.
    * @returns {string} the formatted minutes text.
    * @default (minutes: string) => `${minutes} minutes`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getMinutesClockNumberText: PropTypes.func,
 
@@ -421,14 +421,14 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {string} seconds The seconds to format.
    * @returns {string} the formatted seconds text.
    * @default (seconds: string) => `${seconds} seconds`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getSecondsClockNumberText: PropTypes.func,
 
   /**
    * Left arrow icon aria-label text.
    * @default 'open previous view'
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   leftArrowButtonText: PropTypes.string,
 
@@ -476,7 +476,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
   /**
    * Right arrow icon aria-label text.
    * @default 'open next view'
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   rightArrowButtonText: PropTypes.string,
 

package/legacy/DatePicker/DatePicker.js

@@ -163,7 +163,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,

package/legacy/DateTimePicker/DateTimePicker.js

@@ -179,7 +179,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -205,7 +205,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
 

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -167,7 +167,7 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -193,7 +193,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -219,7 +219,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
 

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -146,7 +146,7 @@ process.env.NODE_ENV !== "production" ? DesktopTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,

package/legacy/MobileDatePicker/MobileDatePicker.js

@@ -168,7 +168,7 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,