@mui/x-date-pickers 5.0.1 → 5.0.3

package/legacy/DateTimePicker/dateTimePickerTabsClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getDateTimePickerTabsUtilityClass(slot) {
+  return generateUtilityClass('MuiDateTimePickerTabs', slot);
+}
+export var dateTimePickerTabsClasses = generateUtilityClasses('MuiDateTimePickerTabs', ['root']);

package/legacy/DateTimePicker/dateTimePickerToolbarClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getDateTimePickerToolbarUtilityClass(slot) {
+  return generateUtilityClass('MuiDateTimePickerToolbar', slot);
+}
+export var dateTimePickerToolbarClasses = generateUtilityClasses('MuiDateTimePickerToolbar', ['root', 'dateContainer', 'timeContainer', 'separator']);

package/legacy/DateTimePicker/index.js

@@ -1,2 +1,4 @@
 export { DateTimePicker } from './DateTimePicker';
-export { DateTimePickerTabs } from './DateTimePickerTabs';
+export { DateTimePickerTabs } from './DateTimePickerTabs';
+export { dateTimePickerTabsClasses } from './dateTimePickerTabsClasses';
+export { dateTimePickerToolbarClasses } from './dateTimePickerToolbarClasses';

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,

package/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -194,7 +194,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,
@@ -220,7 +220,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/legacy/MobileTimePicker/MobileTimePicker.js

@@ -147,7 +147,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/legacy/MonthPicker/PickersMonth.js

@@ -1,18 +1,33 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["disabled", "onSelect", "selected", "value", "tabIndex", "hasFocus", "onFocus", "onBlur"];
 import * as React from 'react';
-import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, alpha } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/material';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { onSpaceOrEnter } from '../internals/utils/utils';
+import { getPickersMonthUtilityClass, pickersMonthClasses } from './pickersMonthClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-var classes = generateUtilityClasses('PrivatePickersMonth', ['root', 'selected']);
-var PickersMonthRoot = styled(Typography)(function (_ref) {
-  var theme = _ref.theme;
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+      selected = ownerState.selected;
+  var slots = {
+    root: ['root', selected && 'selected']
+  };
+  return composeClasses(slots, getPickersMonthUtilityClass, classes);
+};
+
+var PickersMonthRoot = styled(Typography, {
+  name: 'PrivatePickersMonth',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return [styles.root, _defineProperty({}, "&.".concat(pickersMonthClasses.selected), styles.selected)];
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme;
   return _extends({
     flex: '1 0 33.33%',
     display: 'flex',
@@ -34,7 +49,7 @@ var PickersMonthRoot = styled(Typography)(function (_ref) {
       pointerEvents: 'none',
       color: theme.palette.text.secondary
     }
-  }, "&.".concat(classes.selected), {
+  }, "&.".concat(pickersMonthClasses.selected), {
     color: theme.palette.primary.contrastText,
     backgroundColor: theme.palette.primary.main,
     '&:focus, &:hover': {
@@ -50,6 +65,7 @@ var noop = function noop() {};
 
 
 export var PickersMonth = function PickersMonth(props) {
+  // TODO v6 add 'useThemeProps' once the component class names are aligned
   var disabled = props.disabled,
       onSelect = props.onSelect,
       selected = props.selected,
@@ -62,6 +78,8 @@ export var PickersMonth = function PickersMonth(props) {
       _onBlur = _props$onBlur === void 0 ? noop : _props$onBlur,
       other = _objectWithoutProperties(props, _excluded);
 
+  var classes = useUtilityClasses(props);
+
   var handleSelection = function handleSelection() {
     onSelect(value);
   };
@@ -78,7 +96,7 @@ export var PickersMonth = function PickersMonth(props) {
     ref: ref,
     component: "button",
     type: "button",
-    className: clsx(classes.root, selected && classes.selected),
+    className: classes.root,
     tabIndex: tabIndex,
     onClick: handleSelection,
     onKeyDown: onSpaceOrEnter(handleSelection),

package/legacy/MonthPicker/index.js

@@ -1,2 +1,3 @@
 export { MonthPicker } from './MonthPicker';
-export { monthPickerClasses, getMonthPickerUtilityClass } from './monthPickerClasses';
+export { monthPickerClasses, getMonthPickerUtilityClass } from './monthPickerClasses';
+export { pickersMonthClasses } from './pickersMonthClasses';

package/legacy/MonthPicker/pickersMonthClasses.js

@@ -0,0 +1,7 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getPickersMonthUtilityClass(slot) {
+  // TODO v6 Rename 'PrivatePickersMonth' to 'MuiPickersMonth' to follow convention
+  return generateUtilityClass('PrivatePickersMonth', slot);
+}
+export var pickersMonthClasses = generateUtilityClasses( // TODO v6 Rename 'PrivatePickersMonth' to 'MuiPickersMonth' to follow convention
+'PrivatePickersMonth', ['root', 'selected']);

package/legacy/PickersDay/PickersDay.js

@@ -20,11 +20,12 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
       disableMargin = ownerState.disableMargin,
       disableHighlightToday = ownerState.disableHighlightToday,
       today = ownerState.today,
+      disabled = ownerState.disabled,
       outsideCurrentMonth = ownerState.outsideCurrentMonth,
       showDaysOutsideCurrentMonth = ownerState.showDaysOutsideCurrentMonth,
       classes = ownerState.classes;
   var slots = {
-    root: ['root', selected && 'selected', !disableMargin && 'dayWithMargin', !disableHighlightToday && today && 'today', outsideCurrentMonth && showDaysOutsideCurrentMonth && 'dayOutsideMonth'],
+    root: ['root', selected && 'selected', disabled && 'disabled', !disableMargin && 'dayWithMargin', !disableHighlightToday && today && 'today', outsideCurrentMonth && showDaysOutsideCurrentMonth && 'dayOutsideMonth', outsideCurrentMonth && !showDaysOutsideCurrentMonth && 'hiddenDaySpacingFiller'],
     hiddenDaySpacingFiller: ['hiddenDaySpacingFiller']
   };
   return composeClasses(slots, getPickersDayUtilityClass, classes);

package/legacy/StaticDatePicker/StaticDatePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["ToolbarComponent", "value", "onChange", "displayStaticWrapperAs", "components", "componentsProps"];
+var _excluded = ["ToolbarComponent", "value", "onChange", "displayStaticWrapperAs", "components", "componentsProps", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDatePickerDefaultizedProps, datePickerValueManager } from '../DatePicker/shared';
@@ -33,6 +33,7 @@ export var StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDateP
       displayStaticWrapperAs = _props$displayStaticW === void 0 ? 'mobile' : _props$displayStaticW,
       components = props.components,
       componentsProps = props.componentsProps,
+      className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
   var _usePickerState = usePickerState(props, datePickerValueManager),
@@ -51,7 +52,8 @@ export var StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDateP
   return /*#__PURE__*/_jsx(PickerStaticWrapper, _extends({
     displayStaticWrapperAs: displayStaticWrapperAs,
     components: components,
-    componentsProps: componentsProps
+    componentsProps: componentsProps,
+    className: className
   }, wrapperProps, {
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
       toolbarTitle: props.label || props.toolbarTitle,
@@ -167,7 +169,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/legacy/StaticDateTimePicker/StaticDateTimePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "hideTabs"];
+var _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "hideTabs", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDateTimePickerDefaultizedProps, dateTimePickerValueManager } from '../DateTimePicker/shared';
@@ -36,6 +36,7 @@ export var StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticD
       componentsProps = props.componentsProps,
       _props$hideTabs = props.hideTabs,
       hideTabs = _props$hideTabs === void 0 ? displayStaticWrapperAs === 'desktop' : _props$hideTabs,
+      className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
   var _usePickerState = usePickerState(props, dateTimePickerValueManager),
@@ -60,7 +61,8 @@ export var StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticD
   return /*#__PURE__*/_jsx(PickerStaticWrapper, _extends({
     displayStaticWrapperAs: displayStaticWrapperAs,
     components: components,
-    componentsProps: componentsProps
+    componentsProps: componentsProps,
+    className: className
   }, wrapperProps, {
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
       toolbarTitle: props.label || props.toolbarTitle,
@@ -193,7 +195,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,
@@ -219,7 +221,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/legacy/StaticTimePicker/StaticTimePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps"];
+var _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTimePickerDefaultizedProps, timePickerValueManager } from '../TimePicker/shared';
@@ -32,6 +32,7 @@ export var StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimeP
       value = props.value,
       components = props.components,
       componentsProps = props.componentsProps,
+      className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
   var validationError = useTimeValidation(props) !== null;
@@ -51,7 +52,8 @@ export var StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimeP
   return /*#__PURE__*/_jsx(PickerStaticWrapper, _extends({
     displayStaticWrapperAs: displayStaticWrapperAs,
     components: components,
-    componentsProps: componentsProps
+    componentsProps: componentsProps,
+    className: className
   }, wrapperProps, {
     children: /*#__PURE__*/_jsx(CalendarOrClockPicker, _extends({}, pickerProps, {
       toolbarTitle: props.label || props.toolbarTitle,
@@ -146,7 +148,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/legacy/TimePicker/TimePicker.js

@@ -142,7 +142,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/legacy/TimePicker/TimePickerToolbar.js

@@ -3,11 +3,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["ampm", "ampmInClock", "parsedValue", "isLandscape", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarTitle", "views", "disabled", "readOnly"];
 import * as React from 'react';
-import { useTheme, styled } from '@mui/material/styles';
+import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
-import { PickersToolbar, pickersToolbarClasses } from '../internals/components/PickersToolbar';
+import { PickersToolbar } from '../internals/components/PickersToolbar';
+import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { arrayIncludes } from '../internals/utils/utils';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
@@ -53,11 +54,13 @@ var TimePickerToolbarHourMinuteLabel = styled('div', {
   name: 'MuiTimePickerToolbar',
   slot: 'HourMinuteLabel',
   overridesResolver: function overridesResolver(props, styles) {
-    return styles.hourMinuteLabel;
+    var _ref;
+
+    return [(_ref = {}, _defineProperty(_ref, "&.".concat(timePickerToolbarClasses.hourMinuteLabelLandscape), styles.hourMinuteLabelLandscape), _defineProperty(_ref, "&.".concat(timePickerToolbarClasses.hourMinuteLabelReverse), styles.hourMinuteLabelReverse), _ref), styles.hourMinuteLabel];
   }
-})(function (_ref) {
-  var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+})(function (_ref2) {
+  var theme = _ref2.theme,
+      ownerState = _ref2.ownerState;
   return _extends({
     display: 'flex',
     justifyContent: 'flex-end',
@@ -72,10 +75,10 @@ var TimePickerToolbarAmPmSelection = styled('div', {
   name: 'MuiTimePickerToolbar',
   slot: 'AmPmSelection',
   overridesResolver: function overridesResolver(props, styles) {
-    return styles.ampmSelection;
+    return [_defineProperty({}, ".".concat(timePickerToolbarClasses.ampmLabel), styles.ampmLabel), _defineProperty({}, "&.".concat(timePickerToolbarClasses.ampmLandscape), styles.ampmLandscape), styles.ampmSelection];
   }
-})(function (_ref2) {
-  var ownerState = _ref2.ownerState;
+})(function (_ref5) {
+  var ownerState = _ref5.ownerState;
   return _extends({
     display: 'flex',
     flexDirection: 'column',
@@ -94,7 +97,12 @@ var TimePickerToolbarAmPmSelection = styled('div', {
  * @ignore - internal component.
  */
 
-export var TimePickerToolbar = function TimePickerToolbar(props) {
+export function TimePickerToolbar(inProps) {
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiTimePickerToolbar'
+  });
+
   var ampm = props.ampm,
       ampmInClock = props.ampmInClock,
       parsedValue = props.parsedValue,
@@ -200,4 +208,4 @@ export var TimePickerToolbar = function TimePickerToolbar(props) {
       })]
     })]
   }));
-};
+}

package/legacy/TimePicker/index.js

@@ -1 +1,2 @@
-export { TimePicker } from './TimePicker';
+export { TimePicker } from './TimePicker';
+export { timePickerToolbarClasses } from './timePickerToolbarClasses';

package/legacy/YearPicker/PickersYear.js

@@ -1,18 +1,15 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["autoFocus", "className", "children", "disabled", "onClick", "onKeyDown", "value", "tabIndex", "onFocus", "onBlur"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { useForkRef, capitalize } from '@mui/material/utils';
 import { alpha, styled } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/material';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
+import { getPickersYearUtilityClass, pickersYearClasses } from './pickersYearClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getPickersYearUtilityClass(slot) {
-  return generateUtilityClass('PrivatePickersYear', slot);
-}
-export var pickersYearClasses = generateUtilityClasses('PrivatePickersYear', ['root', 'modeMobile', 'modeDesktop', 'yearButton', 'disabled', 'selected']);
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var wrapperVariant = ownerState.wrapperVariant,
@@ -26,8 +23,14 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getPickersYearUtilityClass, classes);
 };
 
-var PickersYearRoot = styled('div')(function (_ref) {
-  var ownerState = _ref.ownerState;
+var PickersYearRoot = styled('div', {
+  name: 'PrivatePickersYear',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return [styles.root, _defineProperty({}, "&.".concat(pickersYearClasses.modeDesktop), styles.modeDesktop), _defineProperty({}, "&.".concat(pickersYearClasses.modeMobile), styles.modeMobile)];
+  }
+})(function (_ref3) {
+  var ownerState = _ref3.ownerState;
   return _extends({
     flexBasis: '33.3%',
     display: 'flex',
@@ -37,10 +40,16 @@ var PickersYearRoot = styled('div')(function (_ref) {
     flexBasis: '25%'
   });
 });
-var PickersYearButton = styled('button')(function (_ref2) {
+var PickersYearButton = styled('button', {
+  name: 'PrivatePickersYear',
+  slot: 'Button',
+  overridesResolver: function overridesResolver(_, styles) {
+    return [styles.button, _defineProperty({}, "&.".concat(pickersYearClasses.disabled), styles.disabled), _defineProperty({}, "&.".concat(pickersYearClasses.selected), styles.selected)];
+  }
+})(function (_ref6) {
   var _extends2;
 
-  var theme = _ref2.theme;
+  var theme = _ref6.theme;
   return _extends({
     color: 'unset',
     backgroundColor: 'transparent',
@@ -73,6 +82,7 @@ var noop = function noop() {};
 
 
 export var PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(props, forwardedRef) {
+  // TODO v6: add 'useThemeProps' once the component class names are aligned
   var autoFocus = props.autoFocus,
       className = props.className,
       children = props.children,
@@ -95,11 +105,11 @@ export var PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(prop
     wrapperVariant: wrapperVariant
   });
 
-  var classes = useUtilityClasses(ownerState); // TODO: Can we just forward this to the button?
+  var classes = useUtilityClasses(ownerState); // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
 
   React.useEffect(function () {
     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/legacy/YearPicker/YearPicker.js

@@ -4,8 +4,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';
@@ -49,7 +50,8 @@ var YearPickerRoot = styled('div', {
   flexWrap: 'wrap',
   overflowY: 'auto',
   height: '100%',
-  margin: '0 4px'
+  padding: '0 4px',
+  maxHeight: '304px'
 });
 export var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref) {
   var now = useNow();
@@ -195,8 +197,35 @@ export var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProp
     }
   }, [focusedYear, changeHasFocus]);
   var nowYear = utils.getYear(now);
+  var scrollerRef = React.useRef(null);
+  var handleRef = useForkRef(ref, scrollerRef);
+  React.useEffect(function () {
+    if (autoFocus || scrollerRef.current === null) {
+      return;
+    }
+
+    var tabbableButton = scrollerRef.current.querySelector('[tabindex="0"]');
+
+    if (!tabbableButton) {
+      return;
+    } // Taken from useScroll in x-data-grid, but vertically centered
+
+
+    var offsetHeight = tabbableButton.offsetHeight;
+    var offsetTop = tabbableButton.offsetTop;
+    var clientHeight = scrollerRef.current.clientHeight;
+    var scrollTop = scrollerRef.current.scrollTop;
+    var 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(function (year) {

package/legacy/YearPicker/index.js

@@ -1,2 +1,3 @@
 export { YearPicker } from './YearPicker';
-export { yearPickerClasses, getYearPickerUtilityClass } from './yearPickerClasses';
+export { yearPickerClasses, getYearPickerUtilityClass } from './yearPickerClasses';
+export { pickersYearClasses } from './pickersYearClasses';

package/legacy/YearPicker/pickersYearClasses.js

@@ -0,0 +1,7 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getPickersYearUtilityClass(slot) {
+  // TODO v6: Rename 'PrivatePickersYear' to 'MuiPickersYear' to follow convention
+  return generateUtilityClass('PrivatePickersYear', slot);
+} // TODO v6: Rename 'PrivatePickersYear' to 'MuiPickersYear' to follow convention
+
+export var pickersYearClasses = generateUtilityClasses('PrivatePickersYear', ['root', 'modeDesktop', 'modeMobile', 'yearButton', 'selected', 'disabled']);

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.1
+/** @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.