@mui/x-date-pickers 5.0.1 → 5.0.3

package/modern/MonthPicker/PickersMonth.js

@@ -2,15 +2,32 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _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";
-const classes = generateUtilityClasses('PrivatePickersMonth', ['root', 'selected']);
-const PickersMonthRoot = styled(Typography)(({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    selected
+  } = ownerState;
+  const slots = {
+    root: ['root', selected && 'selected']
+  };
+  return composeClasses(slots, getPickersMonthUtilityClass, classes);
+};
+
+const PickersMonthRoot = styled(Typography, {
+  name: 'PrivatePickersMonth',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [styles.root, {
+    [`&.${pickersMonthClasses.selected}`]: styles.selected
+  }]
+})(({
   theme
 }) => _extends({
   flex: '1 0 33.33%',
@@ -33,7 +50,7 @@ const PickersMonthRoot = styled(Typography)(({
     pointerEvents: 'none',
     color: theme.palette.text.secondary
   },
-  [`&.${classes.selected}`]: {
+  [`&.${pickersMonthClasses.selected}`]: {
     color: theme.palette.primary.contrastText,
     backgroundColor: theme.palette.primary.main,
     '&:focus, &:hover': {
@@ -49,6 +66,7 @@ const noop = () => {};
 
 
 export const PickersMonth = props => {
+  // TODO v6 add 'useThemeProps' once the component class names are aligned
   const {
     disabled,
     onSelect,
@@ -61,6 +79,8 @@ export const PickersMonth = props => {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const classes = useUtilityClasses(props);
+
   const handleSelection = () => {
     onSelect(value);
   };
@@ -75,7 +95,7 @@ export const 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/modern/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/modern/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 const pickersMonthClasses = generateUtilityClasses( // TODO v6 Rename 'PrivatePickersMonth' to 'MuiPickersMonth' to follow convention
+'PrivatePickersMonth', ['root', 'selected']);

package/modern/PickersDay/PickersDay.js

@@ -20,12 +20,13 @@ const useUtilityClasses = ownerState => {
     disableMargin,
     disableHighlightToday,
     today,
+    disabled,
     outsideCurrentMonth,
     showDaysOutsideCurrentMonth,
     classes
   } = ownerState;
   const 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/modern/StaticDatePicker/StaticDatePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ToolbarComponent", "value", "onChange", "displayStaticWrapperAs", "components", "componentsProps"];
+const _excluded = ["ToolbarComponent", "value", "onChange", "displayStaticWrapperAs", "components", "componentsProps", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDatePickerDefaultizedProps, datePickerValueManager } from '../DatePicker/shared';
@@ -29,7 +29,8 @@ export const StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDat
     ToolbarComponent = DatePickerToolbar,
     displayStaticWrapperAs = 'mobile',
     components,
-    componentsProps
+    componentsProps,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -49,7 +50,8 @@ export const StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDat
   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,
@@ -165,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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "hideTabs"];
+const _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';
@@ -31,7 +31,8 @@ export const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function Stati
     ToolbarComponent = DateTimePickerToolbar,
     components: providedComponents,
     componentsProps,
-    hideTabs = displayStaticWrapperAs === 'desktop'
+    hideTabs = displayStaticWrapperAs === 'desktop',
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -55,7 +56,8 @@ export const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function Stati
   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,
@@ -188,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,
@@ -214,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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps"];
+const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTimePickerDefaultizedProps, timePickerValueManager } from '../TimePicker/shared';
@@ -28,7 +28,8 @@ export const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTim
     displayStaticWrapperAs = 'mobile',
     ToolbarComponent = TimePickerToolbar,
     components,
-    componentsProps
+    componentsProps,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -49,7 +50,8 @@ export const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTim
   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,
@@ -144,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/TimePicker/TimePickerToolbar.js

@@ -2,11 +2,12 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _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';
@@ -51,7 +52,10 @@ const TimePickerToolbarSeparator = styled(PickersToolbarText, {
 const TimePickerToolbarHourMinuteLabel = styled('div', {
   name: 'MuiTimePickerToolbar',
   slot: 'HourMinuteLabel',
-  overridesResolver: (props, styles) => styles.hourMinuteLabel
+  overridesResolver: (props, styles) => [{
+    [`&.${timePickerToolbarClasses.hourMinuteLabelLandscape}`]: styles.hourMinuteLabelLandscape,
+    [`&.${timePickerToolbarClasses.hourMinuteLabelReverse}`]: styles.hourMinuteLabelReverse
+  }, styles.hourMinuteLabel]
 })(({
   theme,
   ownerState
@@ -67,7 +71,11 @@ const TimePickerToolbarHourMinuteLabel = styled('div', {
 const TimePickerToolbarAmPmSelection = styled('div', {
   name: 'MuiTimePickerToolbar',
   slot: 'AmPmSelection',
-  overridesResolver: (props, styles) => styles.ampmSelection
+  overridesResolver: (props, styles) => [{
+    [`.${timePickerToolbarClasses.ampmLabel}`]: styles.ampmLabel
+  }, {
+    [`&.${timePickerToolbarClasses.ampmLandscape}`]: styles.ampmLandscape
+  }, styles.ampmSelection]
 })(({
   ownerState
 }) => _extends({
@@ -89,7 +97,12 @@ const TimePickerToolbarAmPmSelection = styled('div', {
  * @ignore - internal component.
  */
 
-export const TimePickerToolbar = props => {
+export function TimePickerToolbar(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiTimePickerToolbar'
+  });
+
   const {
     ampm,
     ampmInClock,
@@ -185,4 +198,4 @@ export const TimePickerToolbar = props => {
       })]
     })]
   }));
-};
+}

package/modern/TimePicker/index.js

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

package/modern/YearPicker/PickersYear.js

@@ -5,13 +5,10 @@ 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 const pickersYearClasses = generateUtilityClasses('PrivatePickersYear', ['root', 'modeMobile', 'modeDesktop', 'yearButton', 'disabled', 'selected']);
 
 const useUtilityClasses = ownerState => {
   const {
@@ -27,7 +24,15 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getPickersYearUtilityClass, classes);
 };
 
-const PickersYearRoot = styled('div')(({
+const PickersYearRoot = styled('div', {
+  name: 'PrivatePickersYear',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [styles.root, {
+    [`&.${pickersYearClasses.modeDesktop}`]: styles.modeDesktop
+  }, {
+    [`&.${pickersYearClasses.modeMobile}`]: styles.modeMobile
+  }]
+})(({
   ownerState
 }) => _extends({
   flexBasis: '33.3%',
@@ -37,7 +42,15 @@ const PickersYearRoot = styled('div')(({
 }, ownerState?.wrapperVariant === 'desktop' && {
   flexBasis: '25%'
 }));
-const PickersYearButton = styled('button')(({
+const PickersYearButton = styled('button', {
+  name: 'PrivatePickersYear',
+  slot: 'Button',
+  overridesResolver: (_, styles) => [styles.button, {
+    [`&.${pickersYearClasses.disabled}`]: styles.disabled
+  }, {
+    [`&.${pickersYearClasses.selected}`]: styles.selected
+  }]
+})(({
   theme
 }) => _extends({
   color: 'unset',
@@ -72,6 +85,7 @@ const noop = () => {};
 
 
 export const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(props, forwardedRef) {
+  // TODO v6: add 'useThemeProps' once the component class names are aligned
   const {
     autoFocus,
     className,
@@ -94,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/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/modern/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 const pickersYearClasses = generateUtilityClasses('PrivatePickersYear', ['root', 'modeDesktop', 'modeMobile', 'yearButton', 'selected', 'disabled']);

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

package/modern/internals/components/CalendarOrClockPicker/CalendarOrClockPicker.js

@@ -1,8 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "parsedValue", "DateInputProps", "isMobileKeyboardViewOpen", "onDateChange", "onViewChange", "openTo", "orientation", "showToolbar", "toggleMobileKeyboardView", "ToolbarComponent", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views", "dateRangeIcon", "timeIcon", "hideTabs"];
+const _excluded = ["autoFocus", "className", "parsedValue", "DateInputProps", "isMobileKeyboardViewOpen", "onDateChange", "onViewChange", "openTo", "orientation", "showToolbar", "toggleMobileKeyboardView", "ToolbarComponent", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views", "dateRangeIcon", "timeIcon", "hideTabs", "classes"];
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useViews } from '../../hooks/useViews';
 import { ClockPicker } from '../../../ClockPicker/ClockPicker';
 import { CalendarPicker } from '../../../CalendarPicker/CalendarPicker';
@@ -11,12 +12,33 @@ import { useIsLandscape } from '../../hooks/useIsLandscape';
 import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
 import { PickerViewRoot } from '../PickerViewRoot';
 import { useFocusManagement } from './useFocusManagement';
+import { getCalendarOrClockPickerUtilityClass } from './calendarOrClockPickerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const MobileKeyboardInputView = styled('div')({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    mobileKeyboardInputView: ['mobileKeyboardInputView']
+  };
+  return composeClasses(slots, getCalendarOrClockPickerUtilityClass, classes);
+};
+
+export const MobileKeyboardInputView = styled('div', {
+  name: 'MuiCalendarOrClockPicker',
+  slot: 'MobileKeyboardInputView',
+  overridesResolver: (_, styles) => styles.mobileKeyboardInputView
+})({
   padding: '16px 24px'
 });
-const PickerRoot = styled('div')(({
+const PickerRoot = styled('div', {
+  name: 'MuiCalendarOrClockPicker',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   ownerState
 }) => _extends({
   display: 'flex',
@@ -33,7 +55,12 @@ const isDatePickerView = view => view === 'year' || view === 'month' || view ===
 const isTimePickerView = view => view === 'hours' || view === 'minutes' || view === 'seconds';
 
 let warnedOnceNotValidOpenTo = false;
-export function CalendarOrClockPicker(props) {
+export function CalendarOrClockPicker(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiCalendarOrClockPicker'
+  });
+
   const {
     autoFocus,
     parsedValue,
@@ -59,6 +86,7 @@ export function CalendarOrClockPicker(props) {
   const TabsComponent = other.components?.Tabs;
   const isLandscape = useIsLandscape(views, orientation);
   const wrapperVariant = React.useContext(WrapperVariantContext);
+  const classes = useUtilityClasses(props);
   const toShowToolbar = showToolbar ?? wrapperVariant !== 'desktop';
   const showTabs = !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
   const handleDateChange = React.useCallback((newDate, selectionState) => {
@@ -103,6 +131,7 @@ export function CalendarOrClockPicker(props) {
     ownerState: {
       isLandscape
     },
+    className: classes.root,
     children: [toShowToolbar && /*#__PURE__*/_jsx(ToolbarComponent, _extends({}, other, {
       views: views,
       isLandscape: isLandscape,
@@ -122,6 +151,7 @@ export function CalendarOrClockPicker(props) {
       onChange: setOpenView
     }, other.componentsProps?.tabs)), /*#__PURE__*/_jsx(PickerViewRoot, {
       children: isMobileKeyboardViewOpen ? /*#__PURE__*/_jsx(MobileKeyboardInputView, {
+        className: classes.mobileKeyboardInputView,
         children: /*#__PURE__*/_jsx(KeyboardDateInput, _extends({}, DateInputProps, {
           ignoreInvalidInputs: true,
           disableOpenPicker: true,

package/modern/internals/components/CalendarOrClockPicker/calendarOrClockPickerClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getCalendarOrClockPickerUtilityClass(slot) {
+  return generateUtilityClass('MuiCalendarOrClockPicker', slot);
+}
+export const calendarOrClockPickerClasses = generateUtilityClasses('MuiCalendarOrClockPicker', ['root', 'mobileKeyboardInputView']);

package/modern/internals/components/PickerStaticWrapper/PickerStaticWrapper.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["displayStaticWrapperAs", "onAccept", "onClear", "onCancel", "onDismiss", "onSetToday", "open", "children", "components", "componentsProps"];
+const _excluded = ["displayStaticWrapperAs", "onAccept", "onClear", "onCancel", "onDismiss", "onSetToday", "open", "children", "components", "componentsProps", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
+import clsx from 'clsx';
 import { DIALOG_WIDTH } from '../../constants/dimensions';
 import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
 import { getStaticWrapperUtilityClass } from './pickerStaticWrapperClasses';
@@ -59,7 +60,8 @@ function PickerStaticWrapper(inProps) {
     onSetToday,
     children,
     components,
-    componentsProps
+    componentsProps,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -69,7 +71,7 @@ function PickerStaticWrapper(inProps) {
   return /*#__PURE__*/_jsx(WrapperVariantContext.Provider, {
     value: displayStaticWrapperAs,
     children: /*#__PURE__*/_jsxs(PickerStaticWrapperRoot, _extends({
-      className: classes.root
+      className: clsx(classes.root, className)
     }, other, {
       children: [/*#__PURE__*/_jsx(PickerStaticWrapperContent, {
         className: classes.content,
@@ -98,6 +100,7 @@ process.env.NODE_ENV !== "production" ? PickerStaticWrapper.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
 
   /**
    * Overrideable components.

package/modern/internals/components/PickersArrowSwitcher.js

@@ -4,13 +4,26 @@ const _excluded = ["children", "className", "components", "componentsProps", "is
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
-import { generateUtilityClasses } from '@mui/material';
-import { useTheme, styled } from '@mui/material/styles';
+import { useTheme, styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { ArrowLeft, ArrowRight } from './icons';
+import { getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const classes = generateUtilityClasses('MuiPickersArrowSwitcher', ['root', 'spacer', 'button']);
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    spacer: ['spacer'],
+    button: ['button']
+  };
+  return composeClasses(slots, getPickersArrowSwitcherUtilityClass, classes);
+};
+
 const PickersArrowSwitcherRoot = styled('div', {
   name: 'MuiPickersArrowSwitcher',
   slot: 'Root',
@@ -36,7 +49,12 @@ const PickersArrowSwitcherButton = styled(IconButton, {
 }) => _extends({}, ownerState.hidden && {
   visibility: 'hidden'
 }));
-export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrowSwitcher(props, ref) {
+export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrowSwitcher(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersArrowSwitcher'
+  });
+
   const {
     children,
     className,
@@ -60,6 +78,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
   const rightArrowButtonProps = componentsProps?.rightArrowButton || {};
   const RightArrowIcon = components?.RightArrowIcon || ArrowRight;
   const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(PickersArrowSwitcherRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),