@mui/x-date-pickers 5.0.0 → 5.0.2

package/node/DateTimePicker/dateTimePickerToolbarClasses.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dateTimePickerToolbarClasses = void 0;
+exports.getDateTimePickerToolbarUtilityClass = getDateTimePickerToolbarUtilityClass;
+
+var _material = require("@mui/material");
+
+function getDateTimePickerToolbarUtilityClass(slot) {
+  return (0, _material.generateUtilityClass)('MuiDateTimePickerToolbar', slot);
+}
+
+const dateTimePickerToolbarClasses = (0, _material.generateUtilityClasses)('MuiDateTimePickerToolbar', ['root', 'dateContainer', 'timeContainer', 'separator']);
+exports.dateTimePickerToolbarClasses = dateTimePickerToolbarClasses;

package/node/DateTimePicker/index.js

@@ -15,7 +15,23 @@ Object.defineProperty(exports, "DateTimePickerTabs", {
     return _DateTimePickerTabs.DateTimePickerTabs;
   }
 });
+Object.defineProperty(exports, "dateTimePickerTabsClasses", {
+  enumerable: true,
+  get: function () {
+    return _dateTimePickerTabsClasses.dateTimePickerTabsClasses;
+  }
+});
+Object.defineProperty(exports, "dateTimePickerToolbarClasses", {
+  enumerable: true,
+  get: function () {
+    return _dateTimePickerToolbarClasses.dateTimePickerToolbarClasses;
+  }
+});
 
 var _DateTimePicker = require("./DateTimePicker");
 
-var _DateTimePickerTabs = require("./DateTimePickerTabs");
+var _DateTimePickerTabs = require("./DateTimePickerTabs");
+
+var _dateTimePickerTabsClasses = require("./dateTimePickerTabsClasses");
+
+var _dateTimePickerToolbarClasses = require("./dateTimePickerToolbarClasses");

package/node/DesktopDatePicker/DesktopDatePicker.js

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

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -29,7 +29,7 @@ var _KeyboardDateInput = require("../internals/components/KeyboardDateInput");
 
 var _usePickerState = require("../internals/hooks/usePickerState");
 
-var _DateTimePicker = require("../DateTimePicker");
+var _DateTimePickerTabs = require("../DateTimePicker/DateTimePickerTabs");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -68,7 +68,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const components = React.useMemo(() => (0, _extends2.default)({
-    Tabs: _DateTimePicker.DateTimePickerTabs
+    Tabs: _DateTimePickerTabs.DateTimePickerTabs
   }, providedComponents), [providedComponents]);
   const AllDateInputProps = (0, _extends2.default)({}, inputProps, other, {
     components,
@@ -398,6 +398,8 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'day'
    */
   openTo: _propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
 
@@ -556,6 +558,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['year', 'day', 'hours', 'minutes']
    */
   views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired)
 } : void 0;

package/node/DesktopTimePicker/DesktopTimePicker.js

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

package/node/MobileDatePicker/MobileDatePicker.js

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

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -29,7 +29,7 @@ var _PureDateInput = require("../internals/components/PureDateInput");
 
 var _usePickerState = require("../internals/hooks/usePickerState");
 
-var _DateTimePicker = require("../DateTimePicker");
+var _DateTimePickerTabs = require("../DateTimePicker/DateTimePickerTabs");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -67,7 +67,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const components = React.useMemo(() => (0, _extends2.default)({
-    Tabs: _DateTimePicker.DateTimePickerTabs
+    Tabs: _DateTimePickerTabs.DateTimePickerTabs
   }, providedComponents), [providedComponents]);
   const DateInputProps = (0, _extends2.default)({}, inputProps, other, {
     components,
@@ -399,6 +399,8 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'day'
    */
   openTo: _propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
 
@@ -542,6 +544,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['year', 'day', 'hours', 'minutes']
    */
   views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired)
 } : void 0;

package/node/MobileTimePicker/MobileTimePicker.js

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

package/node/MonthPicker/PickersMonth.js

@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _styles = require("@mui/material/styles");
@@ -25,6 +23,8 @@ var _utils = require("@mui/material/utils");
 
 var _utils2 = require("../internals/utils/utils");
 
+var _pickersMonthClasses = require("./pickersMonthClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["disabled", "onSelect", "selected", "value", "tabIndex", "hasFocus", "onFocus", "onBlur"];
@@ -33,8 +33,24 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const classes = (0, _material.generateUtilityClasses)('PrivatePickersMonth', ['root', 'selected']);
-const PickersMonthRoot = (0, _styles.styled)(_Typography.default)(({
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    selected
+  } = ownerState;
+  const slots = {
+    root: ['root', selected && 'selected']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _pickersMonthClasses.getPickersMonthUtilityClass, classes);
+};
+
+const PickersMonthRoot = (0, _styles.styled)(_Typography.default, {
+  name: 'PrivatePickersMonth',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [styles.root, {
+    [`&.${_pickersMonthClasses.pickersMonthClasses.selected}`]: styles.selected
+  }]
+})(({
   theme
 }) => (0, _extends2.default)({
   flex: '1 0 33.33%',
@@ -57,7 +73,7 @@ const PickersMonthRoot = (0, _styles.styled)(_Typography.default)(({
     pointerEvents: 'none',
     color: theme.palette.text.secondary
   },
-  [`&.${classes.selected}`]: {
+  [`&.${_pickersMonthClasses.pickersMonthClasses.selected}`]: {
     color: theme.palette.primary.contrastText,
     backgroundColor: theme.palette.primary.main,
     '&:focus, &:hover': {
@@ -73,6 +89,7 @@ const noop = () => {};
 
 
 const PickersMonth = props => {
+  // TODO v6 add 'useThemeProps' once the component class names are aligned
   const {
     disabled,
     onSelect,
@@ -84,6 +101,7 @@ const PickersMonth = props => {
     onBlur = noop
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const classes = useUtilityClasses(props);
 
   const handleSelection = () => {
     onSelect(value);
@@ -101,7 +119,7 @@ const PickersMonth = props => {
     ref: ref,
     component: "button",
     type: "button",
-    className: (0, _clsx.default)(classes.root, selected && classes.selected),
+    className: classes.root,
     tabIndex: tabIndex,
     onClick: handleSelection,
     onKeyDown: (0, _utils2.onSpaceOrEnter)(handleSelection),

package/node/MonthPicker/index.js

@@ -21,7 +21,15 @@ Object.defineProperty(exports, "monthPickerClasses", {
     return _monthPickerClasses.monthPickerClasses;
   }
 });
+Object.defineProperty(exports, "pickersMonthClasses", {
+  enumerable: true,
+  get: function () {
+    return _pickersMonthClasses.pickersMonthClasses;
+  }
+});
 
 var _MonthPicker = require("./MonthPicker");
 
-var _monthPickerClasses = require("./monthPickerClasses");
+var _monthPickerClasses = require("./monthPickerClasses");
+
+var _pickersMonthClasses = require("./pickersMonthClasses");

package/node/MonthPicker/pickersMonthClasses.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPickersMonthUtilityClass = getPickersMonthUtilityClass;
+exports.pickersMonthClasses = void 0;
+
+var _material = require("@mui/material");
+
+function getPickersMonthUtilityClass(slot) {
+  // TODO v6 Rename 'PrivatePickersMonth' to 'MuiPickersMonth' to follow convention
+  return (0, _material.generateUtilityClass)('PrivatePickersMonth', slot);
+}
+
+const pickersMonthClasses = (0, _material.generateUtilityClasses)( // TODO v6 Rename 'PrivatePickersMonth' to 'MuiPickersMonth' to follow convention
+'PrivatePickersMonth', ['root', 'selected']);
+exports.pickersMonthClasses = pickersMonthClasses;

package/node/PickersDay/PickersDay.js

@@ -47,12 +47,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 (0, _material.unstable_composeClasses)(slots, _pickersDayClasses.getPickersDayUtilityClass, classes);
@@ -232,7 +233,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
 });
 
 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;
 };
 
 exports.areDayPropsEqual = areDayPropsEqual;

package/node/StaticDatePicker/StaticDatePicker.js

@@ -29,7 +29,7 @@ var _usePickerState = require("../internals/hooks/usePickerState");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["ToolbarComponent", "value", "onChange", "displayStaticWrapperAs", "components", "componentsProps"];
+const _excluded = ["ToolbarComponent", "value", "onChange", "displayStaticWrapperAs", "components", "componentsProps", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -53,7 +53,8 @@ const StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDatePicker
     ToolbarComponent = _DatePickerToolbar.DatePickerToolbar,
     displayStaticWrapperAs = 'mobile',
     components,
-    componentsProps
+    componentsProps,
+    className
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -70,7 +71,8 @@ const StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDatePicker
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerStaticWrapper.PickerStaticWrapper, (0, _extends2.default)({
     displayStaticWrapperAs: displayStaticWrapperAs,
     components: components,
-    componentsProps: componentsProps
+    componentsProps: componentsProps,
+    className: className
   }, wrapperProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarOrClockPicker.CalendarOrClockPicker, (0, _extends2.default)({}, pickerProps, {
       toolbarTitle: props.label || props.toolbarTitle,
@@ -296,6 +298,8 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'day'
    */
   openTo: _propTypes.default.oneOf(['day', 'month', 'year']),
 
@@ -425,6 +429,7 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['year', 'day']
    */
   views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'month', 'year']).isRequired)
 } : void 0;

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -27,11 +27,11 @@ var _useDateTimeValidation = require("../internals/hooks/validation/useDateTimeV
 
 var _usePickerState = require("../internals/hooks/usePickerState");
 
-var _DateTimePicker = require("../DateTimePicker");
+var _DateTimePickerTabs = require("../DateTimePicker/DateTimePickerTabs");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "hideTabs"];
+const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "hideTabs", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -56,7 +56,8 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
     ToolbarComponent = _DateTimePickerToolbar.DateTimePickerToolbar,
     components: providedComponents,
     componentsProps,
-    hideTabs = displayStaticWrapperAs === 'desktop'
+    hideTabs = displayStaticWrapperAs === 'desktop',
+    className
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -66,7 +67,7 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
   } = (0, _usePickerState.usePickerState)(props, _shared.dateTimePickerValueManager);
   const validationError = (0, _useDateTimeValidation.useDateTimeValidation)(props) !== null;
   const components = React.useMemo(() => (0, _extends2.default)({
-    Tabs: _DateTimePicker.DateTimePickerTabs
+    Tabs: _DateTimePickerTabs.DateTimePickerTabs
   }, providedComponents), [providedComponents]);
   const DateInputProps = (0, _extends2.default)({}, inputProps, other, {
     ref,
@@ -77,7 +78,8 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerStaticWrapper.PickerStaticWrapper, (0, _extends2.default)({
     displayStaticWrapperAs: displayStaticWrapperAs,
     components: components,
-    componentsProps: componentsProps
+    componentsProps: componentsProps,
+    className: className
   }, wrapperProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarOrClockPicker.CalendarOrClockPicker, (0, _extends2.default)({}, pickerProps, {
       toolbarTitle: props.label || props.toolbarTitle,
@@ -380,6 +382,8 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'day'
    */
   openTo: _propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
 
@@ -523,6 +527,7 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['year', 'day', 'hours', 'minutes']
    */
   views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired)
 } : void 0;

package/node/StaticTimePicker/StaticTimePicker.js

@@ -29,7 +29,7 @@ var _usePickerState = require("../internals/hooks/usePickerState");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps"];
+const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -51,7 +51,8 @@ const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker
     displayStaticWrapperAs = 'mobile',
     ToolbarComponent = _TimePickerToolbar.TimePickerToolbar,
     components,
-    componentsProps
+    componentsProps,
+    className
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const validationError = (0, _useTimeValidation.useTimeValidation)(props) !== null;
@@ -69,7 +70,8 @@ const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerStaticWrapper.PickerStaticWrapper, (0, _extends2.default)({
     displayStaticWrapperAs: displayStaticWrapperAs,
     components: components,
-    componentsProps: componentsProps
+    componentsProps: componentsProps,
+    className: className
   }, wrapperProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarOrClockPicker.CalendarOrClockPicker, (0, _extends2.default)({}, pickerProps, {
       toolbarTitle: props.label || props.toolbarTitle,
@@ -272,6 +274,8 @@ process.env.NODE_ENV !== "production" ? StaticTimePicker.propTypes = {
 
   /**
    * First view to show.
+   * Must be a valid option from `views` list
+   * @default 'hours'
    */
   openTo: _propTypes.default.oneOf(['hours', 'minutes', 'seconds']),
 
@@ -338,6 +342,7 @@ process.env.NODE_ENV !== "production" ? StaticTimePicker.propTypes = {
 
   /**
    * Array of views to show.
+   * @default ['hours', 'minutes']
    */
   views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/node/TimePicker/TimePicker.js

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

package/node/TimePicker/TimePickerToolbar.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TimePickerToolbar = void 0;
+exports.TimePickerToolbar = TimePickerToolbar;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -23,6 +23,8 @@ var _PickersToolbarButton = require("../internals/components/PickersToolbarButto
 
 var _PickersToolbar = require("../internals/components/PickersToolbar");
 
+var _pickersToolbarClasses = require("../internals/components/pickersToolbarClasses");
+
 var _utils = require("../internals/utils/utils");
 
 var _useUtils = require("../internals/hooks/useUtils");
@@ -60,7 +62,7 @@ const TimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToolbar
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({
-  [`& .${_PickersToolbar.pickersToolbarClasses.penIconButtonLandscape}`]: {
+  [`& .${_pickersToolbarClasses.pickersToolbarClasses.penIconButtonLandscape}`]: {
     marginTop: 'auto'
   }
 });
@@ -76,7 +78,10 @@ const TimePickerToolbarSeparator = (0, _styles.styled)(_PickersToolbarText.Picke
 const TimePickerToolbarHourMinuteLabel = (0, _styles.styled)('div', {
   name: 'MuiTimePickerToolbar',
   slot: 'HourMinuteLabel',
-  overridesResolver: (props, styles) => styles.hourMinuteLabel
+  overridesResolver: (props, styles) => [{
+    [`&.${_timePickerToolbarClasses.timePickerToolbarClasses.hourMinuteLabelLandscape}`]: styles.hourMinuteLabelLandscape,
+    [`&.${_timePickerToolbarClasses.timePickerToolbarClasses.hourMinuteLabelReverse}`]: styles.hourMinuteLabelReverse
+  }, styles.hourMinuteLabel]
 })(({
   theme,
   ownerState
@@ -92,7 +97,11 @@ const TimePickerToolbarHourMinuteLabel = (0, _styles.styled)('div', {
 const TimePickerToolbarAmPmSelection = (0, _styles.styled)('div', {
   name: 'MuiTimePickerToolbar',
   slot: 'AmPmSelection',
-  overridesResolver: (props, styles) => styles.ampmSelection
+  overridesResolver: (props, styles) => [{
+    [`.${_timePickerToolbarClasses.timePickerToolbarClasses.ampmLabel}`]: styles.ampmLabel
+  }, {
+    [`&.${_timePickerToolbarClasses.timePickerToolbarClasses.ampmLandscape}`]: styles.ampmLandscape
+  }, styles.ampmSelection]
 })(({
   ownerState
 }) => (0, _extends2.default)({
@@ -114,7 +123,11 @@ const TimePickerToolbarAmPmSelection = (0, _styles.styled)('div', {
  * @ignore - internal component.
  */
 
-const TimePickerToolbar = props => {
+function TimePickerToolbar(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiTimePickerToolbar'
+  });
   const {
     ampm,
     ampmInClock,
@@ -207,6 +220,4 @@ const TimePickerToolbar = props => {
       })]
     })]
   }));
-};
-
-exports.TimePickerToolbar = TimePickerToolbar;
+}

package/node/TimePicker/index.js

@@ -9,5 +9,13 @@ Object.defineProperty(exports, "TimePicker", {
     return _TimePicker.TimePicker;
   }
 });
+Object.defineProperty(exports, "timePickerToolbarClasses", {
+  enumerable: true,
+  get: function () {
+    return _timePickerToolbarClasses.timePickerToolbarClasses;
+  }
+});
+
+var _TimePicker = require("./TimePicker");
 
-var _TimePicker = require("./TimePicker");
+var _timePickerToolbarClasses = require("./timePickerToolbarClasses");