@mui/x-date-pickers 5.0.0 → 5.0.2

package/modern/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 ?? 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/modern/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/modern/DatePicker/index.js

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

package/modern/DateTimePicker/DateTimePicker.js

@@ -366,6 +366,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'day'
    */
   openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
 
@@ -524,6 +526,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['year', 'day', 'hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired)
 } : void 0;

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

@@ -292,6 +292,8 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'day'
    */
   openTo: PropTypes.oneOf(['day', 'month', 'year']),
 
@@ -436,6 +438,7 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['year', 'day']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired)
 } : void 0;

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -10,7 +10,7 @@ import { CalendarOrClockPicker } from '../internals/components/CalendarOrClockPi
 import { useDateTimeValidation } from '../internals/hooks/validation/useDateTimeValidation';
 import { KeyboardDateInput } from '../internals/components/KeyboardDateInput';
 import { usePickerState } from '../internals/hooks/usePickerState';
-import { DateTimePickerTabs } from '../DateTimePicker';
+import { DateTimePickerTabs } from '../DateTimePicker/DateTimePickerTabs';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 /**
@@ -375,6 +375,8 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'day'
    */
   openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
 
@@ -533,6 +535,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['year', 'day', 'hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired)
 } : void 0;

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -269,6 +269,8 @@ process.env.NODE_ENV !== "production" ? DesktopTimePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'hours'
    */
   openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
 
@@ -350,6 +352,7 @@ process.env.NODE_ENV !== "production" ? DesktopTimePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -292,6 +292,8 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'day'
    */
   openTo: PropTypes.oneOf(['day', 'month', 'year']),
 
@@ -421,6 +423,7 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['year', 'day']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired)
 } : void 0;

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -10,7 +10,7 @@ import { CalendarOrClockPicker } from '../internals/components/CalendarOrClockPi
 import { useDateTimeValidation } from '../internals/hooks/validation/useDateTimeValidation';
 import { PureDateInput } from '../internals/components/PureDateInput';
 import { usePickerState } from '../internals/hooks/usePickerState';
-import { DateTimePickerTabs } from '../DateTimePicker';
+import { DateTimePickerTabs } from '../DateTimePicker/DateTimePickerTabs';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 /**
@@ -375,6 +375,8 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'day'
    */
   openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
 
@@ -518,6 +520,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['year', 'day', 'hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired)
 } : void 0;

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -269,6 +269,8 @@ process.env.NODE_ENV !== "production" ? MobileTimePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'hours'
    */
   openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
 
@@ -335,6 +337,7 @@ process.env.NODE_ENV !== "production" ? MobileTimePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

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);
@@ -207,7 +208,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
   }));
 });
 export const areDayPropsEqual = (prevProps, nextProps) => {
-  return prevProps.autoFocus === nextProps.autoFocus && prevProps.isAnimating === nextProps.isAnimating && prevProps.today === nextProps.today && prevProps.disabled === nextProps.disabled && prevProps.selected === nextProps.selected && prevProps.disableMargin === nextProps.disableMargin && prevProps.showDaysOutsideCurrentMonth === nextProps.showDaysOutsideCurrentMonth && prevProps.disableHighlightToday === nextProps.disableHighlightToday && prevProps.className === nextProps.className && prevProps.outsideCurrentMonth === nextProps.outsideCurrentMonth && prevProps.onFocus === nextProps.onFocus && prevProps.onBlur === nextProps.onBlur && prevProps.onDaySelect === nextProps.onDaySelect;
+  return prevProps.autoFocus === nextProps.autoFocus && prevProps.isAnimating === nextProps.isAnimating && prevProps.today === nextProps.today && prevProps.disabled === nextProps.disabled && prevProps.selected === nextProps.selected && prevProps.disableMargin === nextProps.disableMargin && prevProps.showDaysOutsideCurrentMonth === nextProps.showDaysOutsideCurrentMonth && prevProps.disableHighlightToday === nextProps.disableHighlightToday && prevProps.className === nextProps.className && prevProps.sx === nextProps.sx && prevProps.outsideCurrentMonth === nextProps.outsideCurrentMonth && prevProps.onFocus === nextProps.onFocus && prevProps.onBlur === nextProps.onBlur && prevProps.onDaySelect === nextProps.onDaySelect;
 };
 process.env.NODE_ENV !== "production" ? PickersDayRaw.propTypes = {
   // ----------------------------- Warning --------------------------------

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,
@@ -274,6 +276,8 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'day'
    */
   openTo: PropTypes.oneOf(['day', 'month', 'year']),
 
@@ -403,6 +407,7 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['year', 'day']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired)
 } : void 0;

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';
@@ -9,7 +9,7 @@ import { PickerStaticWrapper } from '../internals/components/PickerStaticWrapper
 import { CalendarOrClockPicker } from '../internals/components/CalendarOrClockPicker';
 import { useDateTimeValidation } from '../internals/hooks/validation/useDateTimeValidation';
 import { usePickerState } from '../internals/hooks/usePickerState';
-import { DateTimePickerTabs } from '../DateTimePicker';
+import { DateTimePickerTabs } from '../DateTimePicker/DateTimePickerTabs';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 /**
@@ -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,
@@ -357,6 +359,8 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'day'
    */
   openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
 
@@ -500,6 +504,7 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['year', 'day', 'hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired)
 } : void 0;