@mui/x-date-pickers 5.0.1 → 5.0.2

package/modern/internals/components/PickersPopper.js

@@ -7,16 +7,38 @@ import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import TrapFocus from '@mui/material/Unstable_TrapFocus';
 import { useForkRef, useEventCallback, ownerDocument } from '@mui/material/utils';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { PickersActionBar } from '../../PickersActionBar';
+import { getPickersPopperUtilityClass } from './pickersPopperClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const PickersPopperRoot = styled(Popper)(({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    paper: ['paper']
+  };
+  return composeClasses(slots, getPickersPopperUtilityClass, classes);
+};
+
+const PickersPopperRoot = styled(Popper, {
+  name: 'MuiPickersPopper',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   theme
 }) => ({
   zIndex: theme.zIndex.modal
 }));
-const PickersPopperPaper = styled(Paper)(({
+const PickersPopperPaper = styled(Paper, {
+  name: 'MuiPickersPopper',
+  slot: 'Paper',
+  overridesResolver: (_, styles) => styles.paper
+})(({
   ownerState
 }) => _extends({
   transformOrigin: 'top center',
@@ -145,7 +167,11 @@ function useClickAwayListener(active, onClickAway) {
   return [nodeRef, handleSynthetic, handleSynthetic];
 }
 
-export const PickersPopper = props => {
+export function PickersPopper(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersPopper'
+  });
   const {
     anchorEl,
     children,
@@ -201,6 +227,7 @@ export const PickersPopper = props => {
   const handleRef = useForkRef(paperRef, containerRef);
   const handlePaperRef = useForkRef(handleRef, clickAwayRef);
   const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
 
   const {
     onClick: onPaperClickProp,
@@ -223,8 +250,8 @@ export const PickersPopper = props => {
     role: role,
     open: open,
     anchorEl: anchorEl,
-    ownerState: ownerState,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    className: classes.root
   }, PopperProps, {
     children: ({
       TransitionProps,
@@ -260,7 +287,8 @@ export const PickersPopper = props => {
           },
           ownerState: _extends({}, ownerState, {
             placement
-          })
+          }),
+          className: classes.paper
         }, otherPaperProps, {
           children: /*#__PURE__*/_jsxs(PaperContent, _extends({}, componentsProps?.paperContent, {
             children: [children, /*#__PURE__*/_jsx(ActionBar, _extends({
@@ -275,4 +303,4 @@ export const PickersPopper = props => {
       }))
     }))
   }));
-};
+}

package/modern/internals/components/PickersToolbar.js

@@ -4,13 +4,27 @@ import clsx from 'clsx';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
-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 { Pen, Calendar, Clock } from './icons';
 import { useLocaleText } from '../hooks/useUtils';
+import { getPickersToolbarUtilityClass, pickersToolbarClasses } from './pickersToolbarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const pickersToolbarClasses = generateUtilityClasses('MuiPickersToolbar', ['root', 'content', 'penIconButton', 'penIconButtonLandscape']);
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    isLandscape
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    content: ['content'],
+    penIconButton: ['penIconButton', isLandscape && 'penIconButtonLandscape']
+  };
+  return composeClasses(slots, getPickersToolbarUtilityClass, classes);
+};
+
 const PickersToolbarRoot = styled('div', {
   name: 'MuiPickersToolbar',
   slot: 'Root',
@@ -41,7 +55,9 @@ const PickersToolbarContent = styled(Grid, {
 const PickersToolbarPenIconButton = styled(IconButton, {
   name: 'MuiPickersToolbar',
   slot: 'PenIconButton',
-  overridesResolver: (props, styles) => styles.penIconButton
+  overridesResolver: (props, styles) => [{
+    [`&.${pickersToolbarClasses.penIconButtonLandscape}`]: styles.penIconButtonLandscape
+  }, styles.penIconButton]
 })({});
 
 const getViewTypeIcon = viewType => viewType === 'clock' ? /*#__PURE__*/_jsx(Clock, {
@@ -50,7 +66,11 @@ const getViewTypeIcon = viewType => viewType === 'clock' ? /*#__PURE__*/_jsx(Clo
   color: "inherit"
 });
 
-export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(props, ref) {
+export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersToolbar'
+  });
   const {
     children,
     className,
@@ -64,9 +84,10 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
   } = props;
   const ownerState = props;
   const localeText = useLocaleText();
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(PickersToolbarRoot, {
     ref: ref,
-    className: clsx(pickersToolbarClasses.root, className),
+    className: clsx(classes.root, className),
     ownerState: ownerState,
     children: [/*#__PURE__*/_jsx(Typography, {
       color: "text.secondary",
@@ -75,13 +96,13 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
     }), /*#__PURE__*/_jsxs(PickersToolbarContent, {
       container: true,
       justifyContent: "space-between",
-      className: pickersToolbarClasses.content,
+      className: classes.content,
       ownerState: ownerState,
       direction: isLandscape ? landscapeDirection : 'row',
       alignItems: isLandscape ? 'flex-start' : 'flex-end',
       children: [children, /*#__PURE__*/_jsx(PickersToolbarPenIconButton, {
         onClick: toggleMobileKeyboardView,
-        className: clsx(pickersToolbarClasses.penIconButton, isLandscape && pickersToolbarClasses.penIconButtonLandscape),
+        className: classes.penIconButton,
         ownerState: ownerState,
         color: "inherit",
         "aria-label": getMobileKeyboardInputViewButtonText ? getMobileKeyboardInputViewButtonText(isMobileKeyboardViewOpen, viewType) : localeText.inputModeToggleButtonAriaLabel(isMobileKeyboardViewOpen, viewType),

package/modern/internals/components/PickersToolbarButton.js

@@ -2,16 +2,39 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant"];
 import * as React from 'react';
+import clsx from 'clsx';
 import Button from '@mui/material/Button';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { PickersToolbarText } from './PickersToolbarText';
+import { getPickersToolbarUtilityClass } from './pickersToolbarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const PickersToolbarButtonRoot = styled(Button)({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getPickersToolbarUtilityClass, classes);
+};
+
+const PickersToolbarButtonRoot = styled(Button, {
+  name: 'MuiPickersToolbarButton',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
   padding: 0,
   minWidth: 16,
   textTransform: 'none'
 });
-export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function PickersToolbarButton(props, ref) {
+export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function PickersToolbarButton(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersToolbarButton'
+  });
+
   const {
     align,
     className,
@@ -22,10 +45,11 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const classes = useUtilityClasses(props);
   return /*#__PURE__*/_jsx(PickersToolbarButtonRoot, _extends({
     variant: "text",
     ref: ref,
-    className: className
+    className: clsx(className, classes.root)
   }, other, {
     children: /*#__PURE__*/_jsx(PickersToolbarText, {
       align: align,

package/modern/internals/components/PickersToolbarText.js

@@ -5,29 +5,48 @@ import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/material';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { getPickersToolbarTextUtilityClass, pickersToolbarTextClasses } from './pickersToolbarTextClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const classes = generateUtilityClasses('PrivatePickersToolbarText', ['selected']);
-const PickersToolbarTextRoot = styled(Typography)(({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    selected
+  } = ownerState;
+  const slots = {
+    root: ['root', selected && 'selected']
+  };
+  return composeClasses(slots, getPickersToolbarTextUtilityClass, classes);
+};
+
+const PickersToolbarTextRoot = styled(Typography, {
+  name: 'PrivatePickersToolbarText',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [styles.root, {
+    [`&.${pickersToolbarTextClasses.selected}`]: styles.selected
+  }]
+})(({
   theme
 }) => ({
   transition: theme.transitions.create('color'),
   color: theme.palette.text.secondary,
-  [`&.${classes.selected}`]: {
+  [`&.${pickersToolbarTextClasses.selected}`]: {
     color: theme.palette.text.primary
   }
 }));
 export const PickersToolbarText = /*#__PURE__*/React.forwardRef(function PickersToolbarText(props, ref) {
+  // TODO v6: add 'useThemeProps' once the component class names are aligned
   const {
     className,
-    selected,
     value
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const classes = useUtilityClasses(props);
   return /*#__PURE__*/_jsx(PickersToolbarTextRoot, _extends({
     ref: ref,
-    className: clsx(className, selected && classes.selected),
+    className: clsx(className, classes.root),
     component: "span"
   }, other, {
     children: value

package/modern/internals/components/pickersArrowSwitcherClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getPickersArrowSwitcherUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersArrowSwitcher', slot);
+}
+export const pickersArrowSwitcherClasses = generateUtilityClasses('MuiPickersArrowSwitcher', ['root', 'spacer', 'button']);

package/modern/internals/components/pickersPopperClasses.js

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

package/modern/internals/components/pickersToolbarButtonClasses.js

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

package/modern/internals/components/pickersToolbarClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getPickersToolbarUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersToolbar', slot);
+}
+export const pickersToolbarClasses = generateUtilityClasses('MuiPickersToolbar', ['root', 'content', 'penIconButton', 'penIconButtonLandscape']);

package/modern/internals/components/pickersToolbarTextClasses.js

@@ -0,0 +1,7 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getPickersToolbarTextUtilityClass(slot) {
+  // TODO v6: Rename 'PrivatePickersToolbarText' to 'MuiPickersToolbarText' to follow convention
+  return generateUtilityClass('PrivatePickersToolbarText', slot);
+} // TODO v6: Rename 'PrivatePickersToolbarText' to 'MuiPickersToolbarText' to follow convention
+
+export const pickersToolbarTextClasses = generateUtilityClasses('PrivatePickersToolbarText', ['root', 'selected']);

package/modern/internals/index.js

@@ -1,10 +1,17 @@
 export { DesktopTooltipWrapper } from './components/wrappers/DesktopTooltipWrapper';
 export { MobileWrapper } from './components/wrappers/MobileWrapper';
 export { MobileKeyboardInputView } from './components/CalendarOrClockPicker/CalendarOrClockPicker';
+export { calendarOrClockPickerClasses } from './components/CalendarOrClockPicker/calendarOrClockPickerClasses';
 export { PickersArrowSwitcher } from './components/PickersArrowSwitcher';
 export { PickerStaticWrapper } from './components/PickerStaticWrapper/PickerStaticWrapper';
-export { PickersToolbar, pickersToolbarClasses } from './components/PickersToolbar';
+export { PickersToolbar } from './components/PickersToolbar';
+export { pickersToolbarClasses } from './components/pickersToolbarClasses';
+export { pickersToolbarButtonClasses } from './components/pickersToolbarButtonClasses';
+export { pickersToolbarTextClasses } from './components/pickersToolbarTextClasses';
+export { pickersArrowSwitcherClasses } from './components/pickersArrowSwitcherClasses';
+export { pickersPopperClasses } from './components/pickersPopperClasses';
 export { PickersToolbarButton } from './components/PickersToolbarButton';
+export { pickerStaticWrapperClasses } from './components/PickerStaticWrapper/pickerStaticWrapperClasses';
 export { WrapperVariantContext } from './components/wrappers/WrapperVariantContext';
 export { DAY_MARGIN } from './constants/dimensions';
 export { useMaskedInput } from './hooks/useMaskedInput';

package/modern/locales/deDE.js

@@ -1,9 +1,14 @@
 import { getPickersLocalization } from './utils/getPickersLocalization';
 // maps ClockPickerView to its translation
-const views = {
+const clockViews = {
   hours: 'Stunden',
   minutes: 'Minuten',
   seconds: 'Sekunden'
+}; // maps PickersToolbar["viewType"] to its translation
+
+const pickerViews = {
+  calendar: 'Kalenderansicht',
+  clock: 'Uhransicht'
 };
 const deDEPickers = {
   // Calendar navigation
@@ -13,7 +18,7 @@ const deDEPickers = {
   openPreviousView: 'Letzte Ansicht öffnen',
   openNextView: 'Nächste Ansicht öffnen',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'Jahresansicht ist geöffnet, zur Kalenderansicht wechseln' : 'Kalenderansicht ist geöffnet, zur Jahresansicht wechseln',
-  // inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') => isKeyboardInputOpen ? `text input view is open, go to ${viewType} view` : `${viewType} view is open, go to text input view`,
+  inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) => isKeyboardInputOpen ? `Texteingabeansicht ist geöffnet, zur ${pickerViews[viewType]} wechseln` : `${pickerViews[viewType]} ist geöffnet, zur Texteingabeansicht wechseln`,
   // DateRange placeholders
   start: 'Beginn',
   end: 'Ende',
@@ -23,15 +28,15 @@ const deDEPickers = {
   okButtonLabel: 'OK',
   todayButtonLabel: 'Heute',
   // Toolbar titles
-  // datePickerDefaultToolbarTitle: 'Select date',
-  // dateTimePickerDefaultToolbarTitle: 'Select date & time',
-  // timePickerDefaultToolbarTitle: 'Select time',
-  // dateRangePickerDefaultToolbarTitle: 'Select date range',
+  datePickerDefaultToolbarTitle: 'Datum auswählen',
+  dateTimePickerDefaultToolbarTitle: 'Datum & Uhrzeit auswählen',
+  timePickerDefaultToolbarTitle: 'Uhrzeit auswählen',
+  dateRangePickerDefaultToolbarTitle: 'Datumsbereich auswählen',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${views[view] ?? view} auswählen. ${time === null ? 'Keine Uhrzeit ausgewählt' : `Gewählte Uhrzeit ist ${adapter.format(time, 'fullTime')}`}`,
-  hoursClockNumberText: hours => `${hours} ${views.hours}`,
-  minutesClockNumberText: minutes => `${minutes} ${views.minutes}`,
-  secondsClockNumberText: seconds => `${seconds}  ${views.seconds}`,
+  clockLabelText: (view, time, adapter) => `${clockViews[view] ?? view} auswählen. ${time === null ? 'Keine Uhrzeit ausgewählt' : `Gewählte Uhrzeit ist ${adapter.format(time, 'fullTime')}`}`,
+  hoursClockNumberText: hours => `${hours} ${clockViews.hours}`,
+  minutesClockNumberText: minutes => `${minutes} ${clockViews.minutes}`,
+  secondsClockNumberText: seconds => `${seconds}  ${clockViews.seconds}`,
   // Open picker labels
   openDatePickerDialogue: (rawValue, utils) => rawValue && utils.isValid(utils.date(rawValue)) ? `Datum auswählen, gewähltes Datum ist ${utils.format(utils.date(rawValue), 'fullDate')}` : 'Datum auswählen',
   openTimePickerDialogue: (rawValue, utils) => rawValue && utils.isValid(utils.date(rawValue)) ? `Uhrzeit auswählen, gewählte Uhrzeit ist ${utils.format(utils.date(rawValue), 'fullTime')}` : 'Uhrzeit auswählen',

package/modern/locales/index.js

@@ -11,4 +11,5 @@ export * from './svSE';
 export * from './itIT';
 export * from './zhCN';
 export * from './koKR';
+export * from './isIS';
 export * from './utils/pickersLocaleTextApi';

package/modern/locales/isIS.js

@@ -0,0 +1,40 @@
+import { getPickersLocalization } from './utils/getPickersLocalization';
+// This object is not Partial<PickersLocaleText> because it is the default values
+const isISPickers = {
+  // Calendar navigation
+  previousMonth: 'Fyrri mánuður',
+  nextMonth: 'Næsti mánuður',
+  // View navigation
+  openPreviousView: 'opna fyrri skoðun',
+  openNextView: 'opna næstu skoðun',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'ársskoðun er opin, skipta yfir í dagatalsskoðun' : 'dagatalsskoðun er opin, skipta yfir í ársskoðun',
+  inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) => {
+    const viewTypeTranslated = viewType === 'calendar' ? 'dagatals' : 'klukku';
+    return isKeyboardInputOpen ? `textainnsláttur er opinn, fara í ${viewTypeTranslated}skoðun` : `${viewTypeTranslated}skoðun er opin, opna fyrir textainnslátt`;
+  },
+  // DateRange placeholders
+  start: 'Upphaf',
+  end: 'Endir',
+  // Action bar
+  cancelButtonLabel: 'Hætta við',
+  clearButtonLabel: 'Hreinsa',
+  okButtonLabel: 'OK',
+  todayButtonLabel: 'Í dag',
+  // Toolbar titles
+  datePickerDefaultToolbarTitle: 'Velja dagsetningu',
+  dateTimePickerDefaultToolbarTitle: 'Velja dagsetningu og tíma',
+  timePickerDefaultToolbarTitle: 'Velja tíma',
+  dateRangePickerDefaultToolbarTitle: 'Velja tímabil',
+  // Clock labels
+  clockLabelText: (view, time, adapter) => `Select ${view}. ${time === null ? 'Enginn tími valinn' : `Valinn tími er ${adapter.format(time, 'fullTime')}`}`,
+  hoursClockNumberText: hours => `${hours} klukkustundir`,
+  minutesClockNumberText: minutes => `${minutes} mínútur`,
+  secondsClockNumberText: seconds => `${seconds} sekúndur`,
+  // Open picker labels
+  openDatePickerDialogue: (rawValue, utils) => rawValue && utils.isValid(utils.date(rawValue)) ? `Velja dagsetningu, valin dagsetning er ${utils.format(utils.date(rawValue), 'fullDate')}` : 'Velja dagsetningu',
+  openTimePickerDialogue: (rawValue, utils) => rawValue && utils.isValid(utils.date(rawValue)) ? `Velja tíma, valinn tími er ${utils.format(utils.date(rawValue), 'fullTime')}` : 'Velja tíma',
+  // Table labels
+  timeTableLabel: 'velja tíma',
+  dateTableLabel: 'velja dagsetningu'
+};
+export const isIS = getPickersLocalization(isISPickers);

package/node/CalendarPicker/CalendarPicker.js

@@ -49,7 +49,7 @@ var _calendarPickerClasses = require("./calendarPickerClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["autoFocus", "onViewChange", "date", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange"];
+const _excluded = ["autoFocus", "onViewChange", "date", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "classes"];
 
 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); }
 

package/node/CalendarPicker/DayPicker.js

@@ -15,6 +15,10 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _styles = require("@mui/material/styles");
 
+var _material = require("@mui/material");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _PickersDay = require("../PickersDay/PickersDay");
 
 var _useUtils = require("../internals/hooks/useUtils");
@@ -27,21 +31,46 @@ var _useDateValidation = require("../internals/hooks/validation/useDateValidatio
 
 var _dateUtils = require("../internals/utils/date-utils");
 
+var _dayPickerClasses = require("./dayPickerClasses");
+
 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 useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    header: ['header'],
+    weekDayLabel: ['weekDayLabel'],
+    loadingContainer: ['loadingContainer'],
+    slideTransition: ['slideTransition'],
+    monthContainer: ['monthContainer'],
+    weekContainer: ['weekContainer']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _dayPickerClasses.getDayPickerUtilityClass, classes);
+};
+
 const defaultDayOfWeekFormatter = day => day.charAt(0).toUpperCase();
 
 const weeksContainerHeight = (_dimensions.DAY_SIZE + _dimensions.DAY_MARGIN * 2) * 6;
-const PickersCalendarDayHeader = (0, _styles.styled)('div')({
+const PickersCalendarDayHeader = (0, _styles.styled)('div', {
+  name: 'MuiDayPicker',
+  slot: 'Header',
+  overridesResolver: (_, styles) => styles.header
+})({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center'
 });
-const PickersCalendarWeekDayLabel = (0, _styles.styled)(_Typography.default)(({
+const PickersCalendarWeekDayLabel = (0, _styles.styled)(_Typography.default, {
+  name: 'MuiDayPicker',
+  slot: 'WeekDayLabel',
+  overridesResolver: (_, styles) => styles.weekDayLabel
+})(({
   theme
 }) => ({
   width: 36,
@@ -53,19 +82,35 @@ const PickersCalendarWeekDayLabel = (0, _styles.styled)(_Typography.default)(({
   alignItems: 'center',
   color: theme.palette.text.secondary
 }));
-const PickersCalendarLoadingContainer = (0, _styles.styled)('div')({
+const PickersCalendarLoadingContainer = (0, _styles.styled)('div', {
+  name: 'MuiDayPicker',
+  slot: 'LoadingContainer',
+  overridesResolver: (_, styles) => styles.loadingContainer
+})({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   minHeight: weeksContainerHeight
 });
-const PickersCalendarSlideTransition = (0, _styles.styled)(_PickersSlideTransition.PickersSlideTransition)({
+const PickersCalendarSlideTransition = (0, _styles.styled)(_PickersSlideTransition.PickersSlideTransition, {
+  name: 'MuiDayPicker',
+  slot: 'SlideTransition',
+  overridesResolver: (_, styles) => styles.slideTransition
+})({
   minHeight: weeksContainerHeight
 });
-const PickersCalendarWeekContainer = (0, _styles.styled)('div')({
+const PickersCalendarWeekContainer = (0, _styles.styled)('div', {
+  name: 'MuiDayPicker',
+  slot: 'MonthContainer',
+  overridesResolver: (_, styles) => styles.monthContainer
+})({
   overflow: 'hidden'
 });
-const PickersCalendarWeek = (0, _styles.styled)('div')({
+const PickersCalendarWeek = (0, _styles.styled)('div', {
+  name: 'MuiDayPicker',
+  slot: 'WeekContainer',
+  overridesResolver: (_, styles) => styles.weekContainer
+})({
   margin: `${_dimensions.DAY_MARGIN}px 0`,
   display: 'flex',
   justifyContent: 'center'
@@ -74,9 +119,14 @@ const PickersCalendarWeek = (0, _styles.styled)('div')({
  * @ignore - do not document.
  */
 
-function DayPicker(props) {
+function DayPicker(inProps) {
   const now = (0, _useUtils.useNow)();
   const utils = (0, _useUtils.useUtils)();
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiDayPicker'
+  });
+  const classes = useUtilityClasses(props);
   const {
     onFocusedDayChange,
     className,
@@ -246,6 +296,7 @@ function DayPicker(props) {
     "aria-labelledby": gridLabelId,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarDayHeader, {
       role: "row",
+      className: classes.header,
       children: utils.getWeekdays().map((day, i) => {
         var _dayOfWeekFormatter;
 
@@ -253,24 +304,28 @@ function DayPicker(props) {
           variant: "caption",
           role: "columnheader",
           "aria-label": utils.format(utils.addDays(startOfCurrentWeek, i), 'weekday'),
+          className: classes.weekDayLabel,
           children: (_dayOfWeekFormatter = dayOfWeekFormatter == null ? void 0 : dayOfWeekFormatter(day)) != null ? _dayOfWeekFormatter : day
         }, day + i.toString());
       })
     }), loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarLoadingContainer, {
+      className: classes.loadingContainer,
       children: renderLoading()
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarSlideTransition, (0, _extends2.default)({
       transKey: transitionKey,
       onExited: onMonthSwitchingAnimationEnd,
       reduceAnimations: reduceAnimations,
       slideDirection: slideDirection,
-      className: className
+      className: (0, _clsx.default)(className, classes.slideTransition)
     }, TransitionProps, {
       nodeRef: slideNodeRef,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeekContainer, {
         ref: slideNodeRef,
         role: "rowgroup",
+        className: classes.monthContainer,
         children: utils.getWeekArray(currentMonth).map(week => /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeek, {
           role: "row",
+          className: classes.weekContainer,
           children: week.map(day => {
             const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
             const isSelected = validSelectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));