@mui/x-date-pickers 5.0.1 → 5.0.2

package/node/ClockPicker/Clock.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
@@ -27,13 +29,35 @@ var _WrapperVariantContext = require("../internals/components/wrappers/WrapperVa
 
 var _shared = require("./shared");
 
+var _clockClasses = require("./clockClasses");
+
 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); }
 
 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 ClockRoot = (0, _styles.styled)('div')(({
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    clock: ['clock'],
+    wrapper: ['wrapper'],
+    squareMask: ['squareMask'],
+    pin: ['pin'],
+    amButton: ['amButton'],
+    pmButton: ['pmButton']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _clockClasses.getClockUtilityClass, classes);
+};
+
+const ClockRoot = (0, _styles.styled)('div', {
+  name: 'MuiClock',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   theme
 }) => ({
   display: 'flex',
@@ -41,7 +65,11 @@ const ClockRoot = (0, _styles.styled)('div')(({
   alignItems: 'center',
   margin: theme.spacing(2)
 }));
-const ClockClock = (0, _styles.styled)('div')({
+const ClockClock = (0, _styles.styled)('div', {
+  name: 'MuiClock',
+  slot: 'Clock',
+  overridesResolver: (_, styles) => styles.clock
+})({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
   height: 220,
@@ -50,12 +78,20 @@ const ClockClock = (0, _styles.styled)('div')({
   position: 'relative',
   pointerEvents: 'none'
 });
-const ClockWrapper = (0, _styles.styled)('div')({
+const ClockWrapper = (0, _styles.styled)('div', {
+  name: 'MuiClock',
+  slot: 'Wrapper',
+  overridesResolver: (_, styles) => styles.wrapper
+})({
   '&:focus': {
     outline: 'none'
   }
 });
-const ClockSquareMask = (0, _styles.styled)('div')(({
+const ClockSquareMask = (0, _styles.styled)('div', {
+  name: 'MuiClock',
+  slot: 'SquareMask',
+  overridesResolver: (_, styles) => styles.squareMask
+})(({
   ownerState
 }) => (0, _extends2.default)({
   width: '100%',
@@ -75,7 +111,11 @@ const ClockSquareMask = (0, _styles.styled)('div')(({
     cursor: 'move'
   }
 }));
-const ClockPin = (0, _styles.styled)('div')(({
+const ClockPin = (0, _styles.styled)('div', {
+  name: 'MuiClock',
+  slot: 'Pin',
+  overridesResolver: (_, styles) => styles.pin
+})(({
   theme
 }) => ({
   width: 6,
@@ -87,7 +127,11 @@ const ClockPin = (0, _styles.styled)('div')(({
   left: '50%',
   transform: 'translate(-50%, -50%)'
 }));
-const ClockAmButton = (0, _styles.styled)(_IconButton.default)(({
+const ClockAmButton = (0, _styles.styled)(_IconButton.default, {
+  name: 'MuiClock',
+  slot: 'AmButton',
+  overridesResolver: (_, styles) => styles.amButton
+})(({
   theme,
   ownerState
 }) => (0, _extends2.default)({
@@ -102,7 +146,11 @@ const ClockAmButton = (0, _styles.styled)(_IconButton.default)(({
     backgroundColor: theme.palette.primary.light
   }
 }));
-const ClockPmButton = (0, _styles.styled)(_IconButton.default)(({
+const ClockPmButton = (0, _styles.styled)(_IconButton.default, {
+  name: 'MuiClock',
+  slot: 'PmButton',
+  overridesResolver: (_, styles) => styles.pmButton
+})(({
   theme,
   ownerState
 }) => (0, _extends2.default)({
@@ -121,7 +169,11 @@ const ClockPmButton = (0, _styles.styled)(_IconButton.default)(({
  * @ignore - internal component.
  */
 
-function Clock(props) {
+function Clock(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiClock'
+  });
   const {
     ampm,
     ampmInClock,
@@ -138,12 +190,14 @@ function Clock(props) {
     type,
     value,
     disabled,
-    readOnly
+    readOnly,
+    className
   } = props;
   const ownerState = props;
   const utils = (0, _useUtils.useUtils)();
   const wrapperVariant = React.useContext(_WrapperVariantContext.WrapperVariantContext);
   const isMoving = React.useRef(false);
+  const classes = useUtilityClasses(ownerState);
   const isSelectedTimeDisabled = isTimeDisabled(value, type);
   const isPointerInner = !ampm && type === 'hours' && (value < 1 || value > 12);
 
@@ -254,7 +308,9 @@ function Clock(props) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ClockRoot, {
+    className: (0, _clsx.default)(className, classes.root),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ClockClock, {
+      className: classes.clock,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ClockSquareMask, {
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd,
@@ -262,9 +318,12 @@ function Clock(props) {
         onMouseMove: handleMouseMove,
         ownerState: {
           disabled
-        }
+        },
+        className: classes.squareMask
       }), !isSelectedTimeDisabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ClockPin, {}), date && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClockPointer.ClockPointer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ClockPin, {
+          className: classes.pin
+        }), date && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClockPointer.ClockPointer, {
           type: type,
           value: value,
           isInner: isPointerInner,
@@ -277,6 +336,7 @@ function Clock(props) {
         role: "listbox",
         onKeyDown: handleKeyDown,
         tabIndex: 0,
+        className: classes.wrapper,
         children: children
       })]
     }), ampm && (wrapperVariant === 'desktop' || ampmInClock) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -284,6 +344,7 @@ function Clock(props) {
         onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
         disabled: disabled || meridiemMode === null,
         ownerState: ownerState,
+        className: classes.amButton,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: "caption",
           children: "AM"
@@ -292,6 +353,7 @@ function Clock(props) {
         disabled: disabled || meridiemMode === null,
         onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
         ownerState: ownerState,
+        className: classes.pmButton,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: "caption",
           children: "PM"

package/node/ClockPicker/ClockNumber.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ClockNumber = ClockNumber;
-exports.classes = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -22,6 +21,8 @@ var _material = require("@mui/material");
 
 var _shared = require("./shared");
 
+var _clockNumberClasses = require("./clockNumberClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["className", "disabled", "index", "inner", "label", "selected"];
@@ -30,9 +31,27 @@ 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)('PrivateClockNumber', ['selected', 'disabled']);
-exports.classes = classes;
-const ClockNumberRoot = (0, _styles.styled)('span')(({
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    selected,
+    disabled
+  } = ownerState;
+  const slots = {
+    root: ['root', selected && 'selected', disabled && 'disabled']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _clockNumberClasses.getClockNumberUtilityClass, classes);
+};
+
+const ClockNumberRoot = (0, _styles.styled)('span', {
+  name: 'MuiClockNumber',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [styles.root, {
+    [`&.${_clockNumberClasses.clockNumberClasses.disabled}`]: styles.disabled
+  }, {
+    [`&.${_clockNumberClasses.clockNumberClasses.selected}`]: styles.selected
+  }]
+})(({
   theme,
   ownerState
 }) => (0, _extends2.default)({
@@ -49,10 +68,10 @@ const ClockNumberRoot = (0, _styles.styled)('span')(({
   '&:focused': {
     backgroundColor: theme.palette.background.paper
   },
-  [`&.${classes.selected}`]: {
+  [`&.${_clockNumberClasses.clockNumberClasses.selected}`]: {
     color: theme.palette.primary.contrastText
   },
-  [`&.${classes.disabled}`]: {
+  [`&.${_clockNumberClasses.clockNumberClasses.disabled}`]: {
     pointerEvents: 'none',
     color: theme.palette.text.disabled
   }
@@ -63,7 +82,11 @@ const ClockNumberRoot = (0, _styles.styled)('span')(({
  * @ignore - internal component.
  */
 
-function ClockNumber(props) {
+function ClockNumber(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiClockNumber'
+  });
   const {
     className,
     disabled,
@@ -74,12 +97,13 @@ function ClockNumber(props) {
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
   const angle = index % 12 / 12 * Math.PI * 2 - Math.PI / 2;
   const length = (_shared.CLOCK_WIDTH - _shared.CLOCK_HOUR_WIDTH - 2) / 2 * (inner ? 0.65 : 1);
   const x = Math.round(Math.cos(angle) * length);
   const y = Math.round(Math.sin(angle) * length);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockNumberRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(className, selected && classes.selected, disabled && classes.disabled),
+    className: (0, _clsx.default)(className, classes.root),
     "aria-disabled": disabled ? true : undefined,
     "aria-selected": selected ? true : undefined,
     role: "option",

package/node/ClockPicker/ClockPointer.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ClockPointer = void 0;
+exports.ClockPointer = ClockPointer;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -13,10 +13,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _styles = require("@mui/material/styles");
 
+var _material = require("@mui/material");
+
 var _shared = require("./shared");
 
+var _clockPointerClasses = require("./clockPointerClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["className", "hasSelected", "isInner", "type", "value"];
@@ -25,7 +31,22 @@ 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 ClockPointerRoot = (0, _styles.styled)('div')(({
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    thumb: ['thumb']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _clockPointerClasses.getClockPointerUtilityClass, classes);
+};
+
+const ClockPointerRoot = (0, _styles.styled)('div', {
+  name: 'MuiClockPointer',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   theme,
   ownerState
 }) => (0, _extends2.default)({
@@ -35,10 +56,14 @@ const ClockPointerRoot = (0, _styles.styled)('div')(({
   left: 'calc(50% - 1px)',
   bottom: '50%',
   transformOrigin: 'center bottom 0px'
-}, ownerState.toAnimateTransform && {
+}, ownerState.shouldAnimate && {
   transition: theme.transitions.create(['transform', 'height'])
 }));
-const ClockPointerThumb = (0, _styles.styled)('div')(({
+const ClockPointerThumb = (0, _styles.styled)('div', {
+  name: 'MuiClockPointer',
+  slot: 'Thumb',
+  overridesResolver: (_, styles) => styles.thumb
+})(({
   theme,
   ownerState
 }) => (0, _extends2.default)({
@@ -56,68 +81,51 @@ const ClockPointerThumb = (0, _styles.styled)('div')(({
 }));
 /**
  * @ignore - internal component.
- * TODO: Remove class
  */
 
-class ClockPointer extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      toAnimateTransform: false,
-      previousType: undefined
-    };
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      className,
-      isInner,
-      type,
-      value
-    } = _this$props,
-          other = (0, _objectWithoutPropertiesLoose2.default)(_this$props, _excluded);
-    const ownerState = (0, _extends2.default)({}, this.props, this.state);
-
-    const getAngleStyle = () => {
-      const max = type === 'hours' ? 12 : 60;
-      let angle = 360 / max * value;
-
-      if (type === 'hours' && value > 12) {
-        angle -= 360; // round up angle to max 360 degrees
-      }
-
-      return {
-        height: Math.round((isInner ? 0.26 : 0.4) * _shared.CLOCK_WIDTH),
-        transform: `rotateZ(${angle}deg)`
-      };
-    };
+function ClockPointer(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiClockPointer'
+  });
+  const {
+    className,
+    isInner,
+    type,
+    value
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const previousType = React.useRef(type);
+  React.useEffect(() => {
+    previousType.current = type;
+  }, [type]);
+  const ownerState = (0, _extends2.default)({}, props, {
+    shouldAnimate: previousType.current !== type
+  });
+  const classes = useUtilityClasses(ownerState);
+
+  const getAngleStyle = () => {
+    const max = type === 'hours' ? 12 : 60;
+    let angle = 360 / max * value;
+
+    if (type === 'hours' && value > 12) {
+      angle -= 360; // round up angle to max 360 degrees
+    }
 
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockPointerRoot, (0, _extends2.default)({
-      style: getAngleStyle(),
-      className: className,
-      ownerState: ownerState
-    }, other, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockPointerThumb, {
-        ownerState: ownerState
-      })
-    }));
-  }
-
-}
-
-exports.ClockPointer = ClockPointer;
-
-ClockPointer.getDerivedStateFromProps = (nextProps, state) => {
-  if (nextProps.type !== state.previousType) {
     return {
-      toAnimateTransform: true,
-      previousType: nextProps.type
+      height: Math.round((isInner ? 0.26 : 0.4) * _shared.CLOCK_WIDTH),
+      transform: `rotateZ(${angle}deg)`
     };
-  }
-
-  return {
-    toAnimateTransform: false,
-    previousType: nextProps.type
   };
-};
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockPointerRoot, (0, _extends2.default)({
+    style: getAngleStyle(),
+    className: (0, _clsx.default)(className, classes.root),
+    ownerState: ownerState
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockPointerThumb, {
+      ownerState: ownerState,
+      className: classes.thumb
+    })
+  }));
+}

package/node/ClockPicker/clockClasses.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clockClasses = void 0;
+exports.getClockUtilityClass = getClockUtilityClass;
+
+var _material = require("@mui/material");
+
+function getClockUtilityClass(slot) {
+  return (0, _material.generateUtilityClass)('MuiClock', slot);
+}
+
+const clockClasses = (0, _material.generateUtilityClasses)('MuiClock', ['root', 'clock', 'wrapper', 'squareMask', 'pin', 'amButton', 'pmButton']);
+exports.clockClasses = clockClasses;

package/node/ClockPicker/clockNumberClasses.js

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

package/node/ClockPicker/clockPointerClasses.js

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

package/node/ClockPicker/index.js

@@ -9,12 +9,30 @@ Object.defineProperty(exports, "ClockPicker", {
     return _ClockPicker.ClockPicker;
   }
 });
+Object.defineProperty(exports, "clockClasses", {
+  enumerable: true,
+  get: function () {
+    return _clockClasses.clockClasses;
+  }
+});
+Object.defineProperty(exports, "clockNumberClasses", {
+  enumerable: true,
+  get: function () {
+    return _clockNumberClasses.clockNumberClasses;
+  }
+});
 Object.defineProperty(exports, "clockPickerClasses", {
   enumerable: true,
   get: function () {
     return _clockPickerClasses.clockPickerClasses;
   }
 });
+Object.defineProperty(exports, "clockPointerClasses", {
+  enumerable: true,
+  get: function () {
+    return _clockPointerClasses.clockPointerClasses;
+  }
+});
 Object.defineProperty(exports, "getClockPickerUtilityClass", {
   enumerable: true,
   get: function () {
@@ -24,4 +42,10 @@ Object.defineProperty(exports, "getClockPickerUtilityClass", {
 
 var _ClockPicker = require("./ClockPicker");
 
-var _clockPickerClasses = require("./clockPickerClasses");
+var _clockClasses = require("./clockClasses");
+
+var _clockNumberClasses = require("./clockNumberClasses");
+
+var _clockPickerClasses = require("./clockPickerClasses");
+
+var _clockPointerClasses = require("./clockPointerClasses");

package/node/DatePicker/DatePickerToolbar.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.datePickerToolbarClasses = exports.DatePickerToolbar = void 0;
+exports.DatePickerToolbar = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -21,10 +21,14 @@ var _material = require("@mui/material");
 
 var _PickersToolbar = require("../internals/components/PickersToolbar");
 
+var _pickersToolbarClasses = require("../internals/components/pickersToolbarClasses");
+
 var _useUtils = require("../internals/hooks/useUtils");
 
 var _shared = require("./shared");
 
+var _datePickerToolbarClasses = require("./datePickerToolbarClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["parsedValue", "isLandscape", "isMobileKeyboardViewOpen", "onChange", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
@@ -33,14 +37,23 @@ 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 datePickerToolbarClasses = (0, _material.generateUtilityClasses)('MuiDatePickerToolbar', ['root', 'title']);
-exports.datePickerToolbarClasses = datePickerToolbarClasses;
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    title: ['title']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _datePickerToolbarClasses.getDatePickerToolbarUtilityClass, classes);
+};
+
 const DatePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToolbar, {
   name: 'MuiDatePickerToolbar',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (_, styles) => styles.root
 })({
-  [`& .${_PickersToolbar.pickersToolbarClasses.penIconButton}`]: {
+  [`& .${_pickersToolbarClasses.pickersToolbarClasses.penIconButton}`]: {
     position: 'relative',
     top: 4
   }
@@ -48,7 +61,7 @@ const DatePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToolbar
 const DatePickerToolbarTitle = (0, _styles.styled)(_Typography.default, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
-  overridesResolver: (props, styles) => styles.title
+  overridesResolver: (_, styles) => styles.title
 })(({
   ownerState
 }) => (0, _extends2.default)({}, ownerState.isLandscape && {
@@ -58,7 +71,11 @@ const DatePickerToolbarTitle = (0, _styles.styled)(_Typography.default, {
 /**
  * @ignore - internal component.
  */
-const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(props, ref) {
+const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiDatePickerToolbar'
+  });
   const {
     parsedValue,
     isLandscape,
@@ -72,6 +89,7 @@ const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolb
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
   const localeText = (0, _useUtils.useLocaleText)();
+  const classes = useUtilityClasses(props);
   const toolbarTitle = toolbarTitleProp != null ? toolbarTitleProp : localeText.datePickerDefaultToolbarTitle;
   const dateText = React.useMemo(() => {
     if (!parsedValue) {
@@ -103,13 +121,13 @@ const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolb
     toggleMobileKeyboardView: toggleMobileKeyboardView,
     isLandscape: isLandscape,
     ownerState: ownerState,
-    className: datePickerToolbarClasses.root
+    className: classes.root
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerToolbarTitle, {
       variant: "h4",
       align: isLandscape ? 'left' : 'center',
       ownerState: ownerState,
-      className: datePickerToolbarClasses.title,
+      className: classes.title,
       children: dateText
     })
   }));

package/node/DatePicker/datePickerToolbarClasses.js

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