@mui/x-date-pickers 5.0.1 → 5.0.2

package/node/DatePicker/index.js

@@ -9,5 +9,13 @@ Object.defineProperty(exports, "DatePicker", {
     return _DatePicker.DatePicker;
   }
 });
+Object.defineProperty(exports, "datePickerToolbarClasses", {
+  enumerable: true,
+  get: function () {
+    return _datePickerToolbarClasses.datePickerToolbarClasses;
+  }
+});
+
+var _DatePicker = require("./DatePicker");
 
-var _DatePicker = require("./DatePicker");
+var _datePickerToolbarClasses = require("./datePickerToolbarClasses");

package/node/DateTimePicker/DateTimePickerTabs.js

@@ -19,12 +19,16 @@ var _Tabs = _interopRequireWildcard(require("@mui/material/Tabs"));
 
 var _styles = require("@mui/material/styles");
 
+var _material = require("@mui/material");
+
 var _icons = require("../internals/components/icons");
 
 var _WrapperVariantContext = require("../internals/components/wrappers/WrapperVariantContext");
 
 var _useUtils = require("../internals/hooks/useUtils");
 
+var _dateTimePickerTabsClasses = require("./dateTimePickerTabsClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 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); }
@@ -47,7 +51,21 @@ const tabToView = tab => {
   return 'hours';
 };
 
-const DateTimePickerTabsRoot = (0, _styles.styled)(_Tabs.default)(({
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _dateTimePickerTabsClasses.getDateTimePickerTabsUtilityClass, classes);
+};
+
+const DateTimePickerTabsRoot = (0, _styles.styled)(_Tabs.default, {
+  name: 'MuiDateTimePickerTabs',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   ownerState,
   theme
 }) => (0, _extends2.default)({
@@ -61,7 +79,11 @@ const DateTimePickerTabsRoot = (0, _styles.styled)(_Tabs.default)(({
   }
 }));
 
-const DateTimePickerTabs = props => {
+const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiDateTimePickerTabs'
+  });
   const {
     dateRangeIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DateRange, {}),
     onChange,
@@ -73,6 +95,7 @@ const DateTimePickerTabs = props => {
   const ownerState = (0, _extends2.default)({}, props, {
     wrapperVariant
   });
+  const classes = useUtilityClasses(ownerState);
 
   const handleChange = (event, value) => {
     onChange(tabToView(value));
@@ -83,6 +106,7 @@ const DateTimePickerTabs = props => {
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,
+    className: classes.root,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -106,6 +130,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.default.object,
+
   /**
    * Date tab icon.
    * @default DateRange

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dateTimePickerToolbarClasses = exports.DateTimePickerToolbar = void 0;
+exports.DateTimePickerToolbar = DateTimePickerToolbar;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -21,10 +21,14 @@ var _PickersToolbarText = require("../internals/components/PickersToolbarText");
 
 var _PickersToolbar = require("../internals/components/PickersToolbar");
 
+var _pickersToolbarClasses = require("../internals/components/pickersToolbarClasses");
+
 var _PickersToolbarButton = require("../internals/components/PickersToolbarButton");
 
 var _useUtils = require("../internals/hooks/useUtils");
 
+var _dateTimePickerToolbarClasses = require("./dateTimePickerToolbarClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
@@ -33,8 +37,19 @@ 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 dateTimePickerToolbarClasses = (0, _material.generateUtilityClasses)('MuiDateTimePickerToolbar', ['root', 'dateContainer', 'timeContainer', 'separator']);
-exports.dateTimePickerToolbarClasses = dateTimePickerToolbarClasses;
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    dateContainer: ['dateContainer'],
+    timeContainer: ['timeContainer'],
+    separator: ['separator']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _dateTimePickerToolbarClasses.getDateTimePickerToolbarUtilityClass, classes);
+};
+
 const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToolbar, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Root',
@@ -43,7 +58,7 @@ const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToo
   paddingLeft: 16,
   paddingRight: 16,
   justifyContent: 'space-around',
-  [`& .${_PickersToolbar.pickersToolbarClasses.penIconButton}`]: {
+  [`& .${_pickersToolbarClasses.pickersToolbarClasses.penIconButton}`]: {
     position: 'absolute',
     top: 8,
     right: 8
@@ -77,7 +92,11 @@ const DateTimePickerToolbarSeparator = (0, _styles.styled)(_PickersToolbarText.P
  * @ignore - internal component.
  */
 
-const DateTimePickerToolbar = props => {
+function DateTimePickerToolbar(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiDateTimePickerToolbar'
+  });
   const {
     ampm,
     parsedValue,
@@ -91,8 +110,10 @@ const DateTimePickerToolbar = props => {
     views
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const ownerState = props;
   const utils = (0, _useUtils.useUtils)();
   const localeText = (0, _useUtils.useLocaleText)();
+  const classes = useUtilityClasses(ownerState);
   const toolbarTitle = toolbarTitleProp != null ? toolbarTitleProp : localeText.dateTimePickerDefaultToolbarTitle;
 
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
@@ -108,17 +129,16 @@ const DateTimePickerToolbar = props => {
 
     return utils.format(parsedValue, 'shortDate');
   }, [parsedValue, toolbarFormat, toolbarPlaceholder, utils]);
-  const ownerState = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarRoot, (0, _extends2.default)({
     toolbarTitle: toolbarTitle,
     isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
     toggleMobileKeyboardView: toggleMobileKeyboardView,
-    className: dateTimePickerToolbarClasses.root
+    className: classes.root
   }, other, {
     isLandscape: false,
     ownerState: ownerState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarDateContainer, {
-      className: dateTimePickerToolbarClasses.dateContainer,
+      className: classes.dateContainer,
       ownerState: ownerState,
       children: [views.includes('year') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
         tabIndex: -1,
@@ -134,7 +154,7 @@ const DateTimePickerToolbar = props => {
         value: dateText
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarTimeContainer, {
-      className: dateTimePickerToolbarClasses.timeContainer,
+      className: classes.timeContainer,
       ownerState: ownerState,
       children: [views.includes('hours') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
         variant: "h3",
@@ -145,7 +165,7 @@ const DateTimePickerToolbar = props => {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
           variant: "h3",
           value: ":",
-          className: dateTimePickerToolbarClasses.separator,
+          className: classes.separator,
           ownerState: ownerState
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
           variant: "h3",
@@ -157,7 +177,7 @@ const DateTimePickerToolbar = props => {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
           variant: "h3",
           value: ":",
-          className: dateTimePickerToolbarClasses.separator,
+          className: classes.separator,
           ownerState: ownerState
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
           variant: "h3",
@@ -168,6 +188,4 @@ const DateTimePickerToolbar = props => {
       })]
     })]
   }));
-};
-
-exports.DateTimePickerToolbar = DateTimePickerToolbar;
+}

package/node/DateTimePicker/dateTimePickerTabsClasses.js

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

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/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);

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,

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -31,7 +31,7 @@ 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 {
@@ -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,

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,

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");