@mui/x-date-pickers 5.0.1 → 5.0.2

package/ClockPicker/index.d.ts

@@ -1,5 +1,14 @@
 export { ClockPicker } from './ClockPicker';
 export type { ClockPickerProps } from './ClockPicker';
+export { clockClasses } from './clockClasses';
+export type { ClockClasses, ClockClassKey } from './clockClasses';
+export type { ClockProps } from './Clock';
+export { clockNumberClasses } from './clockNumberClasses';
+export type { ClockNumberClasses, ClockNumberClassKey } from './clockNumberClasses';
+export type { ClockNumberProps } from './ClockNumber';
 export { clockPickerClasses, getClockPickerUtilityClass } from './clockPickerClasses';
 export type { ClockPickerClasses, ClockPickerClassKey } from './clockPickerClasses';
+export { clockPointerClasses } from './clockPointerClasses';
+export type { ClockPointerClasses, ClockPointerClassKey } from './clockPointerClasses';
+export type { ClockPointerProps } from './ClockPointer';
 export type { ClockPickerView } from '../internals/models';

package/ClockPicker/index.js

@@ -1,2 +1,5 @@
 export { ClockPicker } from './ClockPicker';
-export { clockPickerClasses, getClockPickerUtilityClass } from './clockPickerClasses';
+export { clockClasses } from './clockClasses';
+export { clockNumberClasses } from './clockNumberClasses';
+export { clockPickerClasses, getClockPickerUtilityClass } from './clockPickerClasses';
+export { clockPointerClasses } from './clockPointerClasses';

package/DatePicker/DatePickerToolbar.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { BaseToolbarProps } from '../internals/models/props/baseToolbarProps';
-export declare const datePickerToolbarClasses: Record<"root" | "title", string>;
-declare type DatePickerToolbarComponent = (<TDate>(props: BaseToolbarProps<TDate, TDate | null> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+import { DatePickerToolbarClasses } from './datePickerToolbarClasses';
+export interface DatePickerToolbarProps<TDate> extends BaseToolbarProps<TDate, TDate | null> {
+    classes?: Partial<DatePickerToolbarClasses>;
+}
+declare type DatePickerToolbarComponent = (<TDate>(props: DatePickerToolbarProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DatePicker/DatePickerToolbar.js

@@ -3,17 +3,30 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["parsedValue", "isLandscape", "isMobileKeyboardViewOpen", "onChange", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/material';
-import { PickersToolbar, pickersToolbarClasses } from '../internals/components/PickersToolbar';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { PickersToolbar } from '../internals/components/PickersToolbar';
+import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
+import { getDatePickerToolbarUtilityClass } from './datePickerToolbarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const datePickerToolbarClasses = generateUtilityClasses('MuiDatePickerToolbar', ['root', 'title']);
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    title: ['title']
+  };
+  return composeClasses(slots, getDatePickerToolbarUtilityClass, classes);
+};
+
 const DatePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDatePickerToolbar',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (_, styles) => styles.root
 })({
   [`& .${pickersToolbarClasses.penIconButton}`]: {
     position: 'relative',
@@ -23,7 +36,7 @@ const DatePickerToolbarRoot = styled(PickersToolbar, {
 const DatePickerToolbarTitle = styled(Typography, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
-  overridesResolver: (props, styles) => styles.title
+  overridesResolver: (_, styles) => styles.title
 })(({
   ownerState
 }) => _extends({}, ownerState.isLandscape && {
@@ -33,7 +46,12 @@ const DatePickerToolbarTitle = styled(Typography, {
 /**
  * @ignore - internal component.
  */
-export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(props, ref) {
+export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDatePickerToolbar'
+  });
+
   const {
     parsedValue,
     isLandscape,
@@ -48,6 +66,7 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
 
   const utils = useUtils();
   const localeText = useLocaleText();
+  const classes = useUtilityClasses(props);
   const toolbarTitle = toolbarTitleProp != null ? toolbarTitleProp : localeText.datePickerDefaultToolbarTitle;
   const dateText = React.useMemo(() => {
     if (!parsedValue) {
@@ -79,13 +98,13 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     toggleMobileKeyboardView: toggleMobileKeyboardView,
     isLandscape: isLandscape,
     ownerState: ownerState,
-    className: datePickerToolbarClasses.root
+    className: classes.root
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
       variant: "h4",
       align: isLandscape ? 'left' : 'center',
       ownerState: ownerState,
-      className: datePickerToolbarClasses.title,
+      className: classes.title,
       children: dateText
     })
   }));

package/DatePicker/datePickerToolbarClasses.d.ts

@@ -0,0 +1,9 @@
+export interface DatePickerToolbarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the title element. */
+    title: string;
+}
+export declare type DatePickerToolbarClassKey = keyof DatePickerToolbarClasses;
+export declare function getDatePickerToolbarUtilityClass(slot: string): string;
+export declare const datePickerToolbarClasses: DatePickerToolbarClasses;

package/DatePicker/datePickerToolbarClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getDatePickerToolbarUtilityClass(slot) {
+  return generateUtilityClass('MuiDatePickerToolbar', slot);
+}
+export const datePickerToolbarClasses = generateUtilityClasses('MuiDatePickerToolbar', ['root', 'title']);

package/DatePicker/index.d.ts

@@ -1,2 +1,5 @@
 export { DatePicker } from './DatePicker';
 export type { DatePickerProps } from './DatePicker';
+export type { DatePickerToolbarProps } from './DatePickerToolbar';
+export { datePickerToolbarClasses } from './datePickerToolbarClasses';
+export type { DatePickerToolbarClassKey, DatePickerToolbarClasses, } from './datePickerToolbarClasses';

package/DatePicker/index.js

@@ -1 +1,2 @@
-export { DatePicker } from './DatePicker';
+export { DatePicker } from './DatePicker';
+export { datePickerToolbarClasses } from './datePickerToolbarClasses';

package/DateTimePicker/DateTimePickerTabs.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { CalendarOrClockPickerView } from '../internals/models';
+import { DateTimePickerTabsClasses } from './dateTimePickerTabsClasses';
 export interface DateTimePickerTabsProps {
     /**
      * Date tab icon.
@@ -20,9 +21,13 @@ export interface DateTimePickerTabsProps {
      * Open picker view
      */
     view: CalendarOrClockPickerView;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<DateTimePickerTabsClasses>;
 }
 declare const DateTimePickerTabs: {
-    (props: DateTimePickerTabsProps): JSX.Element;
+    (inProps: DateTimePickerTabsProps): JSX.Element;
     propTypes: any;
 };
 export { DateTimePickerTabs };

package/DateTimePicker/DateTimePickerTabs.js

@@ -3,10 +3,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses } from '@mui/material/Tabs';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { Time, DateRange } from '../internals/components/icons';
 import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
 import { useLocaleText } from '../internals/hooks/useUtils';
+import { getDateTimePickerTabsUtilityClass } from './dateTimePickerTabsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -26,7 +28,21 @@ const tabToView = tab => {
   return 'hours';
 };
 
-const DateTimePickerTabsRoot = styled(Tabs)(({
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getDateTimePickerTabsUtilityClass, classes);
+};
+
+const DateTimePickerTabsRoot = styled(Tabs, {
+  name: 'MuiDateTimePickerTabs',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   ownerState,
   theme
 }) => _extends({
@@ -40,7 +56,11 @@ const DateTimePickerTabsRoot = styled(Tabs)(({
   }
 }));
 
-const DateTimePickerTabs = props => {
+const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateTimePickerTabs'
+  });
   const {
     dateRangeIcon = /*#__PURE__*/_jsx(DateRange, {}),
     onChange,
@@ -54,6 +74,8 @@ const DateTimePickerTabs = props => {
     wrapperVariant
   });
 
+  const classes = useUtilityClasses(ownerState);
+
   const handleChange = (event, value) => {
     onChange(tabToView(value));
   };
@@ -63,6 +85,7 @@ const DateTimePickerTabs = props => {
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,
+    className: classes.root,
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -85,6 +108,11 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
 
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
   /**
    * Date tab icon.
    * @default DateRange

package/DateTimePicker/DateTimePickerToolbar.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 import { BaseToolbarProps } from '../internals/models/props/baseToolbarProps';
-export declare const dateTimePickerToolbarClasses: Record<"root" | "separator" | "dateContainer" | "timeContainer", string>;
+import { DateTimePickerToolbarClasses } from './dateTimePickerToolbarClasses';
+export interface DateTimePickerToolbarProps<TDate> extends BaseToolbarProps<TDate, TDate | null> {
+    classes?: Partial<DateTimePickerToolbarClasses>;
+}
 /**
  * @ignore - internal component.
  */
-export declare const DateTimePickerToolbar: <TDate extends unknown>(props: BaseToolbarProps<TDate, TDate | null>) => JSX.Element;
+export declare function DateTimePickerToolbar<TDate extends unknown>(inProps: DateTimePickerToolbarProps<TDate>): JSX.Element;

package/DateTimePicker/DateTimePickerToolbar.js

@@ -2,15 +2,30 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/material';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
-import { PickersToolbar, pickersToolbarClasses } from '../internals/components/PickersToolbar';
+import { PickersToolbar } from '../internals/components/PickersToolbar';
+import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { getDateTimePickerToolbarUtilityClass } from './dateTimePickerToolbarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const dateTimePickerToolbarClasses = generateUtilityClasses('MuiDateTimePickerToolbar', ['root', 'dateContainer', 'timeContainer', 'separator']);
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    dateContainer: ['dateContainer'],
+    timeContainer: ['timeContainer'],
+    separator: ['separator']
+  };
+  return composeClasses(slots, getDateTimePickerToolbarUtilityClass, classes);
+};
+
 const DateTimePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Root',
@@ -53,7 +68,12 @@ const DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
  * @ignore - internal component.
  */
 
-export const DateTimePickerToolbar = props => {
+export function DateTimePickerToolbar(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateTimePickerToolbar'
+  });
+
   const {
     ampm,
     parsedValue,
@@ -68,8 +88,10 @@ export const DateTimePickerToolbar = props => {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const ownerState = props;
   const utils = useUtils();
   const localeText = useLocaleText();
+  const classes = useUtilityClasses(ownerState);
   const toolbarTitle = toolbarTitleProp != null ? toolbarTitleProp : localeText.dateTimePickerDefaultToolbarTitle;
 
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
@@ -85,17 +107,16 @@ export const DateTimePickerToolbar = props => {
 
     return utils.format(parsedValue, 'shortDate');
   }, [parsedValue, toolbarFormat, toolbarPlaceholder, utils]);
-  const ownerState = props;
   return /*#__PURE__*/_jsxs(DateTimePickerToolbarRoot, _extends({
     toolbarTitle: toolbarTitle,
     isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
     toggleMobileKeyboardView: toggleMobileKeyboardView,
-    className: dateTimePickerToolbarClasses.root
+    className: classes.root
   }, other, {
     isLandscape: false,
     ownerState: ownerState,
     children: [/*#__PURE__*/_jsxs(DateTimePickerToolbarDateContainer, {
-      className: dateTimePickerToolbarClasses.dateContainer,
+      className: classes.dateContainer,
       ownerState: ownerState,
       children: [views.includes('year') && /*#__PURE__*/_jsx(PickersToolbarButton, {
         tabIndex: -1,
@@ -111,7 +132,7 @@ export const DateTimePickerToolbar = props => {
         value: dateText
       })]
     }), /*#__PURE__*/_jsxs(DateTimePickerToolbarTimeContainer, {
-      className: dateTimePickerToolbarClasses.timeContainer,
+      className: classes.timeContainer,
       ownerState: ownerState,
       children: [views.includes('hours') && /*#__PURE__*/_jsx(PickersToolbarButton, {
         variant: "h3",
@@ -122,7 +143,7 @@ export const DateTimePickerToolbar = props => {
         children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
           variant: "h3",
           value: ":",
-          className: dateTimePickerToolbarClasses.separator,
+          className: classes.separator,
           ownerState: ownerState
         }), /*#__PURE__*/_jsx(PickersToolbarButton, {
           variant: "h3",
@@ -134,7 +155,7 @@ export const DateTimePickerToolbar = props => {
         children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
           variant: "h3",
           value: ":",
-          className: dateTimePickerToolbarClasses.separator,
+          className: classes.separator,
           ownerState: ownerState
         }), /*#__PURE__*/_jsx(PickersToolbarButton, {
           variant: "h3",
@@ -145,4 +166,4 @@ export const DateTimePickerToolbar = props => {
       })]
     })]
   }));
-};
+}

package/DateTimePicker/dateTimePickerTabsClasses.d.ts

@@ -0,0 +1,7 @@
+export interface DateTimePickerTabsClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type DateTimePickerTabsClassKey = keyof DateTimePickerTabsClasses;
+export declare function getDateTimePickerTabsUtilityClass(slot: string): string;
+export declare const dateTimePickerTabsClasses: DateTimePickerTabsClasses;

package/DateTimePicker/dateTimePickerTabsClasses.js

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

package/DateTimePicker/dateTimePickerToolbarClasses.d.ts

@@ -0,0 +1,13 @@
+export interface DateTimePickerToolbarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the date container element. */
+    dateContainer: string;
+    /** Styles applied to the time container element. */
+    timeContainer: string;
+    /** Styles applied to the separator element. */
+    separator: string;
+}
+export declare type DateTimePickerToolbarClassKey = keyof DateTimePickerToolbarClasses;
+export declare function getDateTimePickerToolbarUtilityClass(slot: string): string;
+export declare const dateTimePickerToolbarClasses: DateTimePickerToolbarClasses;

package/DateTimePicker/dateTimePickerToolbarClasses.js

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

package/DateTimePicker/index.d.ts

@@ -2,3 +2,8 @@ export { DateTimePicker } from './DateTimePicker';
 export { DateTimePickerTabs } from './DateTimePickerTabs';
 export type { DateTimePickerProps } from './DateTimePicker';
 export type { DateTimePickerTabsProps } from './DateTimePickerTabs';
+export type { DateTimePickerToolbarProps } from './DateTimePickerToolbar';
+export { dateTimePickerTabsClasses } from './dateTimePickerTabsClasses';
+export type { DateTimePickerTabsClassKey, DateTimePickerTabsClasses, } from './dateTimePickerTabsClasses';
+export { dateTimePickerToolbarClasses } from './dateTimePickerToolbarClasses';
+export type { DateTimePickerToolbarClassKey, DateTimePickerToolbarClasses, } from './dateTimePickerToolbarClasses';

package/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/MonthPicker/PickersMonth.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const classes: Record<"root" | "selected", string>;
+import { PickersMonthClasses } from './pickersMonthClasses';
 export interface MonthProps {
     children: React.ReactNode;
     disabled?: boolean;
@@ -10,10 +10,9 @@ export interface MonthProps {
     onBlur: (event: React.FocusEvent, month: number) => void;
     onFocus: (event: React.FocusEvent, month: number) => void;
     tabIndex: number;
+    classes?: Partial<PickersMonthClasses>;
 }
-export declare type PickersMonthClassKey = keyof typeof classes;
 /**
  * @ignore - do not document.
  */
 export declare const PickersMonth: React.FC<MonthProps>;
-export {};

package/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);
   };
@@ -77,7 +97,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/MonthPicker/index.d.ts

@@ -2,3 +2,5 @@ export { MonthPicker } from './MonthPicker';
 export type { MonthPickerProps } from './MonthPicker';
 export { monthPickerClasses, getMonthPickerUtilityClass } from './monthPickerClasses';
 export type { MonthPickerClasses, MonthPickerClassKey } from './monthPickerClasses';
+export { pickersMonthClasses } from './pickersMonthClasses';
+export type { PickersMonthClassKey, PickersMonthClasses } from './pickersMonthClasses';

package/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/MonthPicker/pickersMonthClasses.d.ts

@@ -0,0 +1,9 @@
+export interface PickersMonthClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to a selected root element. */
+    selected: string;
+}
+export declare type PickersMonthClassKey = keyof PickersMonthClasses;
+export declare function getPickersMonthUtilityClass(slot: string): string;
+export declare const pickersMonthClasses: Record<keyof PickersMonthClasses, string>;

package/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/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/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,

package/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,