@mui/x-date-pickers 5.0.2 → 5.0.3

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/locales/faIR.js

@@ -0,0 +1,36 @@
+import { getPickersLocalization } from './utils/getPickersLocalization';
+const faIRPickers = {
+  // Calendar navigation
+  previousMonth: 'ماه گذشته',
+  nextMonth: 'ماه آینده',
+  // View navigation
+  openPreviousView: 'نمای قبلی',
+  openNextView: 'نمای بعدی',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'نمای سال باز است، رفتن به نمای تقویم' : 'نمای تقویم باز است، رفتن به نمای سال',
+  inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) => isKeyboardInputOpen ? `نمای ورودی متن باز است، رفتن به نمای ${viewType}` : `نمای ${viewType} باز است، رفتن به نمای ورودی متن`,
+  // DateRange placeholders
+  start: 'شروع',
+  end: 'پایان',
+  // Action bar
+  cancelButtonLabel: 'لغو',
+  clearButtonLabel: 'پاک کردن',
+  okButtonLabel: 'اوکی',
+  todayButtonLabel: 'امروز',
+  // Toolbar titles
+  datePickerDefaultToolbarTitle: 'تاریخ را انتخاب کنید',
+  dateTimePickerDefaultToolbarTitle: 'تاریخ و ساعت را انتخاب کنید',
+  timePickerDefaultToolbarTitle: 'ساعت را انتخاب کنید',
+  dateRangePickerDefaultToolbarTitle: 'محدوده تاریخ را انتخاب کنید',
+  // Clock labels
+  clockLabelText: (view, time, adapter) => `Select ${view}. ${time === null ? 'هیچ ساعتی انتخاب نشده است' : `ساعت انتخاب ${adapter.format(time, 'fullTime')} می باشد`}`,
+  hoursClockNumberText: hours => `${hours} ساعت ها`,
+  minutesClockNumberText: minutes => `${minutes} دقیقه ها`,
+  secondsClockNumberText: seconds => `${seconds} ثانیه ها`,
+  // Open picker labels
+  openDatePickerDialogue: (rawValue, utils) => rawValue && utils.isValid(utils.date(rawValue)) ? `تاریخ را انتخاب کنید، تاریخ انتخاب شده ${utils.format(utils.date(rawValue), 'fullDate')} می باشد` : 'تاریخ را انتخاب کنید',
+  openTimePickerDialogue: (rawValue, utils) => rawValue && utils.isValid(utils.date(rawValue)) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(utils.date(rawValue), 'fullTime')} می باشد` : 'ساعت را انتخاب کنید',
+  // Table labels
+  timeTableLabel: 'انتخاب تاریخ',
+  dateTableLabel: 'انتخاب ساعت'
+};
+export const faIR = getPickersLocalization(faIRPickers);

package/modern/locales/fiFI.js

@@ -0,0 +1,45 @@
+import { getPickersLocalization } from './utils/getPickersLocalization';
+const views = {
+  hours: 'tunnit',
+  minutes: 'minuutit',
+  seconds: 'sekuntit'
+};
+const viewTranslation = {
+  calendar: 'kalenteri',
+  clock: 'kello'
+};
+const fiFIPickers = {
+  // Calendar navigation
+  previousMonth: 'Edellinen kuukausi',
+  nextMonth: 'Seuraava kuukausi',
+  // View navigation
+  openPreviousView: 'avaa edellinen kuukausi',
+  openNextView: 'avaa seuraava kuukausi',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'vuosinäkymä on auki, vaihda kalenterinäkymään' : 'kalenterinäkymä on auki, vaihda vuosinäkymään',
+  inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) => isKeyboardInputOpen ? `tekstikenttä on auki, mene ${viewTranslation[viewType]}näkymään` : `${viewTranslation[viewType]}näkymä on auki, mene tekstikenttään`,
+  // DateRange placeholders
+  start: 'Alku',
+  end: 'Loppu',
+  // Action bar
+  cancelButtonLabel: 'Peruuta',
+  clearButtonLabel: 'Tyhjennä',
+  okButtonLabel: 'OK',
+  todayButtonLabel: 'Tänään',
+  // Toolbar titles
+  datePickerDefaultToolbarTitle: 'Valitse päivä',
+  dateTimePickerDefaultToolbarTitle: 'Valitse päivä ja aika',
+  timePickerDefaultToolbarTitle: 'Valitse aika',
+  dateRangePickerDefaultToolbarTitle: 'Valitse aikaväli',
+  // Clock labels
+  clockLabelText: (view, time, adapter) => `Valitse ${views[view]}. ${time === null ? 'Ei aikaa valittuna' : `Valittu aika on ${adapter.format(time, 'fullTime')}`}`,
+  hoursClockNumberText: hours => `${hours} tuntia`,
+  minutesClockNumberText: minutes => `${minutes} minuuttia`,
+  secondsClockNumberText: seconds => `${seconds} sekunttia`,
+  // Open picker labels
+  openDatePickerDialogue: (rawValue, utils) => rawValue && utils.isValid(utils.date(rawValue)) ? `Valitse päivä, valittu päivä on ${utils.format(utils.date(rawValue), 'fullDate')}` : 'Valitse päivä',
+  openTimePickerDialogue: (rawValue, utils) => rawValue && utils.isValid(utils.date(rawValue)) ? `Valitse aika, valittu aika on ${utils.format(utils.date(rawValue), 'fullTime')}` : 'Valitse aika',
+  // Table labels
+  timeTableLabel: 'valitse aika',
+  dateTableLabel: 'valitse päivä'
+};
+export const fiFI = getPickersLocalization(fiFIPickers);

package/modern/locales/index.js

@@ -4,6 +4,8 @@ export * from './ptBR';
 export * from './trTR';
 export * from './deDE';
 export * from './esES';
+export * from './faIR';
+export * from './fiFI';
 export * from './frFR';
 export * from './enUS';
 export * from './nbNO';

package/modern/locales/isIS.js

@@ -1,5 +1,4 @@
 import { getPickersLocalization } from './utils/getPickersLocalization';
-// This object is not Partial<PickersLocaleText> because it is the default values
 const isISPickers = {
   // Calendar navigation
   previousMonth: 'Fyrri mánuður',

package/node/CalendarPicker/CalendarPicker.js

@@ -101,9 +101,7 @@ const CalendarPickerViewTransitionContainer = (0, _styles.styled)(_PickersFadeTr
   name: 'MuiCalendarPicker',
   slot: 'ViewTransitionContainer',
   overridesResolver: (props, styles) => styles.viewTransitionContainer
-})({
-  overflowY: 'auto'
-});
+})({});
 
 /**
  *
@@ -290,6 +288,10 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
       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__*/(0, _jsxRuntime.jsxs)(CalendarPickerRoot, {
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),
@@ -412,7 +414,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.default.func,
 

package/node/ClockPicker/ClockPicker.js

@@ -393,7 +393,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,
@@ -410,7 +410,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.default.func,
 
@@ -419,7 +419,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.default.func,
 
@@ -428,14 +428,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.default.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.default.string,
 
@@ -483,7 +483,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.default.string,
 

package/node/DatePicker/DatePicker.js

@@ -185,7 +185,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.default.func,
   ignoreInvalidInputs: _propTypes.default.bool,

package/node/DateTimePicker/DateTimePicker.js

@@ -201,7 +201,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,
@@ -227,7 +227,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.default.func,
 

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -189,7 +189,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.default.func,
   ignoreInvalidInputs: _propTypes.default.bool,

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -212,7 +212,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,
@@ -238,7 +238,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.default.func,
 

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -168,7 +168,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/node/MobileDatePicker/MobileDatePicker.js

@@ -190,7 +190,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.default.func,
   ignoreInvalidInputs: _propTypes.default.bool,

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -213,7 +213,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,
@@ -239,7 +239,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.default.func,
 

package/node/MobileTimePicker/MobileTimePicker.js

@@ -169,7 +169,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/node/StaticDatePicker/StaticDatePicker.js

@@ -189,7 +189,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.default.func,
   ignoreInvalidInputs: _propTypes.default.bool,

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -213,7 +213,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,
@@ -239,7 +239,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.default.func,
 

package/node/StaticTimePicker/StaticTimePicker.js

@@ -167,7 +167,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/node/TimePicker/TimePicker.js

@@ -164,7 +164,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/node/YearPicker/PickersYear.js

@@ -128,11 +128,11 @@ const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(props, fo
   const ownerState = (0, _extends2.default)({}, props, {
     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/node/YearPicker/YearPicker.js

@@ -17,9 +17,11 @@ var _styles = require("@mui/material/styles");
 
 var _material = require("@mui/material");
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _utils = require("@mui/material/utils");
 
-var _clsx = _interopRequireDefault(require("clsx"));
+var _utils2 = require("@mui/utils");
 
 var _PickersYear = require("./PickersYear");
 
@@ -73,7 +75,8 @@ const YearPickerRoot = (0, _styles.styled)('div', {
   flexWrap: 'wrap',
   overflowY: 'auto',
   height: '100%',
-  margin: '0 4px'
+  padding: '0 4px',
+  maxHeight: '304px'
 });
 const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref) {
   const now = (0, _useUtils.useNow)();
@@ -114,7 +117,7 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
   const wrapperVariant = React.useContext(_WrapperVariantContext.WrapperVariantContext);
   const selectedYearRef = React.useRef(null);
   const [focusedYear, setFocusedYear] = React.useState(() => currentYear || utils.getYear(now));
-  const [internalHasFocus, setInternalHasFocus] = (0, _utils.useControlled)({
+  const [internalHasFocus, setInternalHasFocus] = (0, _utils2.unstable_useControlled)({
     name: 'YearPicker',
     state: 'hasFocus',
     controlled: hasFocus,
@@ -206,8 +209,35 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
     }
   }, [focusedYear, changeHasFocus]);
   const nowYear = utils.getYear(now);
+  const scrollerRef = React.useRef(null);
+  const handleRef = (0, _utils.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__*/(0, _jsxRuntime.jsx)(YearPickerRoot, {
-    ref: ref,
+    ref: handleRef,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     children: utils.getYearRange(minDate, maxDate).map(year => {

package/node/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.