@mui/x-date-pickers 5.0.1 → 5.0.2

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.3
+
+_Sep 16, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📝 Fix lost characters when typing into fields in the DataGrid (#5646) @m4theushw
+- 🌏 New locale and improvements for pickers
+- 🎁 Improve support to theme augmentation for pickers
+
+### `@mui/x-data-grid@v5.17.3` / `@mui/x-data-grid-pro@v5.17.3` / `@mui/x-data-grid-premium@v5.17.3`
+
+#### Changes
+
+- [DataGrid] Only update input with value prop if debounce is off (#5646) @m4theushw
+
+### `@mui/x-date-pickers@v5.0.2` / `@mui/x-date-pickers-pro@v5.0.2`
+
+#### Changes
+
+- [pickers] Add Icelandic (is-IS) locale (#6137) @elvatli
+- [pickers] Fix `@mui/x-date-pickers` theme augmentation and style overriding (#6156) @LukasTy
+- [pickers] Fix `@mui/x-date-pickers-pro` theme augmentation (#6096) @LukasTy
+- [pickers] Improve German (de-DE) locale (#6138) @alexfauquette
+
+### Docs
+
+- [docs] Improve main demo to show new functionalities (#5292) @joserodolfofreitas
+
+### Core
+
+- [core] Update to typescript 4.8.3 (#6136) @flaviendelangle
+- [core] Update RFC template (#6100) @bytasv
+
 ## 5.17.2
 
 _Sep 9, 2022_
@@ -11,7 +45,7 @@ This release will the last regular release for our `v5` packages.
 From now on, we'll be focusing on developing MUI X v6.
 You can check the [roadmap](https://github.com/mui/mui-x/projects/1) for more details on what's coming next.
 
-And if you'd like to help, please consider volunteering to give us a [user interview](https://docs.google.com/forms/d/11L_zxL7oD_B-ZrZDuSyIkUzJLzOTUU2M4vHXxMVtWhU/edit).
+And if you'd like to help, please consider volunteering to give us a [user interview](https://forms.gle/vsBv6CLPz9h57xg8A).
 We'd love to know more about your use cases, pain points and expectations for the future.
 
 The `v5` packages will only get new versions to patch critical bug fixes.

package/CalendarPicker/CalendarPicker.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

package/CalendarPicker/DayPicker.d.ts

@@ -3,6 +3,7 @@ import { PickersDayProps } from '../PickersDay/PickersDay';
 import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { SlideDirection, SlideTransitionProps } from './PickersSlideTransition';
 import { BaseDateValidationProps, DayValidationProps } from '../internals/hooks/validation/models';
+import { DayPickerClasses } from './dayPickerClasses';
 export interface ExportedDayPickerProps<TDate> extends Pick<PickersDayProps<TDate>, 'disableHighlightToday' | 'showDaysOutsideCurrentMonth'> {
     /**
      * If `true` renders `LoadingComponent` in calendar instead of calendar view.
@@ -51,8 +52,9 @@ export interface DayPickerProps<TDate> extends ExportedDayPickerProps<TDate>, Da
     hasFocus?: boolean;
     onFocusedViewChange?: (newHasFocus: boolean) => void;
     gridLabelId?: string;
+    classes?: Partial<DayPickerClasses>;
 }
 /**
  * @ignore - do not document.
  */
-export declare function DayPicker<TDate>(props: DayPickerProps<TDate>): JSX.Element;
+export declare function DayPicker<TDate>(inProps: DayPickerProps<TDate>): JSX.Element;

package/CalendarPicker/DayPicker.js

@@ -1,25 +1,51 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import { styled, useTheme } from '@mui/material/styles';
+import { styled, useTheme, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import clsx from 'clsx';
 import { PickersDay } from '../PickersDay/PickersDay';
 import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
 import { PickersSlideTransition } from './PickersSlideTransition';
 import { useIsDayDisabled } from '../internals/hooks/validation/useDateValidation';
 import { findClosestEnabledDate } from '../internals/utils/date-utils';
+import { getDayPickerUtilityClass } from './dayPickerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    header: ['header'],
+    weekDayLabel: ['weekDayLabel'],
+    loadingContainer: ['loadingContainer'],
+    slideTransition: ['slideTransition'],
+    monthContainer: ['monthContainer'],
+    weekContainer: ['weekContainer']
+  };
+  return composeClasses(slots, getDayPickerUtilityClass, classes);
+};
+
 const defaultDayOfWeekFormatter = day => day.charAt(0).toUpperCase();
 
 const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 2) * 6;
-const PickersCalendarDayHeader = styled('div')({
+const PickersCalendarDayHeader = styled('div', {
+  name: 'MuiDayPicker',
+  slot: 'Header',
+  overridesResolver: (_, styles) => styles.header
+})({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center'
 });
-const PickersCalendarWeekDayLabel = styled(Typography)(({
+const PickersCalendarWeekDayLabel = styled(Typography, {
+  name: 'MuiDayPicker',
+  slot: 'WeekDayLabel',
+  overridesResolver: (_, styles) => styles.weekDayLabel
+})(({
   theme
 }) => ({
   width: 36,
@@ -31,19 +57,35 @@ const PickersCalendarWeekDayLabel = styled(Typography)(({
   alignItems: 'center',
   color: theme.palette.text.secondary
 }));
-const PickersCalendarLoadingContainer = styled('div')({
+const PickersCalendarLoadingContainer = styled('div', {
+  name: 'MuiDayPicker',
+  slot: 'LoadingContainer',
+  overridesResolver: (_, styles) => styles.loadingContainer
+})({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   minHeight: weeksContainerHeight
 });
-const PickersCalendarSlideTransition = styled(PickersSlideTransition)({
+const PickersCalendarSlideTransition = styled(PickersSlideTransition, {
+  name: 'MuiDayPicker',
+  slot: 'SlideTransition',
+  overridesResolver: (_, styles) => styles.slideTransition
+})({
   minHeight: weeksContainerHeight
 });
-const PickersCalendarWeekContainer = styled('div')({
+const PickersCalendarWeekContainer = styled('div', {
+  name: 'MuiDayPicker',
+  slot: 'MonthContainer',
+  overridesResolver: (_, styles) => styles.monthContainer
+})({
   overflow: 'hidden'
 });
-const PickersCalendarWeek = styled('div')({
+const PickersCalendarWeek = styled('div', {
+  name: 'MuiDayPicker',
+  slot: 'WeekContainer',
+  overridesResolver: (_, styles) => styles.weekContainer
+})({
   margin: `${DAY_MARGIN}px 0`,
   display: 'flex',
   justifyContent: 'center'
@@ -52,9 +94,14 @@ const PickersCalendarWeek = styled('div')({
  * @ignore - do not document.
  */
 
-export function DayPicker(props) {
+export function DayPicker(inProps) {
   const now = useNow();
   const utils = useUtils();
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDayPicker'
+  });
+  const classes = useUtilityClasses(props);
   const {
     onFocusedDayChange,
     className,
@@ -224,6 +271,7 @@ export function DayPicker(props) {
     "aria-labelledby": gridLabelId,
     children: [/*#__PURE__*/_jsx(PickersCalendarDayHeader, {
       role: "row",
+      className: classes.header,
       children: utils.getWeekdays().map((day, i) => {
         var _dayOfWeekFormatter;
 
@@ -231,24 +279,28 @@ export 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__*/_jsx(PickersCalendarLoadingContainer, {
+      className: classes.loadingContainer,
       children: renderLoading()
     }) : /*#__PURE__*/_jsx(PickersCalendarSlideTransition, _extends({
       transKey: transitionKey,
       onExited: onMonthSwitchingAnimationEnd,
       reduceAnimations: reduceAnimations,
       slideDirection: slideDirection,
-      className: className
+      className: clsx(className, classes.slideTransition)
     }, TransitionProps, {
       nodeRef: slideNodeRef,
       children: /*#__PURE__*/_jsx(PickersCalendarWeekContainer, {
         ref: slideNodeRef,
         role: "rowgroup",
+        className: classes.monthContainer,
         children: utils.getWeekArray(currentMonth).map(week => /*#__PURE__*/_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));

package/CalendarPicker/PickersCalendarHeader.d.ts

@@ -4,7 +4,8 @@ import { SlideDirection } from './PickersSlideTransition';
 import { ExportedDateValidationProps } from '../internals/hooks/validation/useDateValidation';
 import { ExportedArrowSwitcherProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
 import { CalendarPickerView } from '../internals/models';
-export declare type ExportedCalendarHeaderProps<TDate> = Pick<PickersCalendarHeaderProps<TDate>, 'getViewSwitchingButtonText' | 'leftArrowButtonText' | 'rightArrowButtonText'>;
+import { PickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
+export declare type ExportedCalendarHeaderProps<TDate> = Pick<PickersCalendarHeaderProps<TDate>, 'getViewSwitchingButtonText' | 'leftArrowButtonText' | 'rightArrowButtonText' | 'classes'>;
 export interface PickersCalendarHeaderSlotsComponent extends PickersArrowSwitcherSlotsComponent {
     /**
      * Button displayed to switch between different calendar views.
@@ -48,8 +49,9 @@ export interface PickersCalendarHeaderProps<TDate> extends ExportedArrowSwitcher
     reduceAnimations: boolean;
     onViewChange?: (view: CalendarPickerView) => void;
     labelId?: string;
+    classes?: Partial<PickersCalendarHeaderClasses>;
 }
 /**
  * @ignore - do not document.
  */
-export declare function PickersCalendarHeader<TDate>(props: PickersCalendarHeaderProps<TDate>): JSX.Element | null;
+export declare function PickersCalendarHeader<TDate>(inProps: PickersCalendarHeaderProps<TDate>): JSX.Element | null;

package/CalendarPicker/PickersCalendarHeader.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Fade from '@mui/material/Fade';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { PickersFadeTransitionGroup } from './PickersFadeTransitionGroup';
@@ -9,9 +10,29 @@ import { ArrowDropDown } from '../internals/components/icons';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
 import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internals/hooks/date-helpers-hooks';
 import { buildDeprecatedPropsWarning } from '../internals/utils/warning';
+import { getPickersCalendarHeaderUtilityClass } from './pickersCalendarHeaderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const PickersCalendarHeaderRoot = styled('div')({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    labelContainer: ['labelContainer'],
+    label: ['label'],
+    switchViewButton: ['switchViewButton'],
+    switchViewIcon: ['switchViewIcon']
+  };
+  return composeClasses(slots, getPickersCalendarHeaderUtilityClass, classes);
+};
+
+const PickersCalendarHeaderRoot = styled('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
   display: 'flex',
   alignItems: 'center',
   marginTop: 16,
@@ -22,7 +43,11 @@ const PickersCalendarHeaderRoot = styled('div')({
   maxHeight: 30,
   minHeight: 30
 });
-const PickersCalendarHeaderLabel = styled('div')(({
+const PickersCalendarHeaderLabelContainer = styled('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'LabelContainer',
+  overridesResolver: (_, styles) => styles.labelContainer
+})(({
   theme
 }) => _extends({
   display: 'flex',
@@ -34,13 +59,25 @@ const PickersCalendarHeaderLabel = styled('div')(({
 }, theme.typography.body1, {
   fontWeight: theme.typography.fontWeightMedium
 }));
-const PickersCalendarHeaderLabelItem = styled('div')({
+const PickersCalendarHeaderLabel = styled('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'Label',
+  overridesResolver: (_, styles) => styles.label
+})({
   marginRight: 6
 });
-const PickersCalendarHeaderSwitchViewButton = styled(IconButton)({
+const PickersCalendarHeaderSwitchViewButton = styled(IconButton, {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'SwitchViewButton',
+  overridesResolver: (_, styles) => styles.switchViewButton
+})({
   marginRight: 'auto'
 });
-const PickersCalendarHeaderSwitchView = styled(ArrowDropDown)(({
+const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDown, {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'SwitchViewIcon',
+  overridesResolver: (_, styles) => styles.switchViewIcon
+})(({
   theme,
   ownerState
 }) => _extends({
@@ -55,7 +92,11 @@ const deprecatedPropsWarning = buildDeprecatedPropsWarning('Props for translatio
  * @ignore - do not document.
  */
 
-export function PickersCalendarHeader(props) {
+export function PickersCalendarHeader(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersCalendarHeader'
+  });
   const {
     components = {},
     componentsProps = {},
@@ -85,6 +126,7 @@ export function PickersCalendarHeader(props) {
   const rightArrowButtonText = rightArrowButtonTextProp != null ? rightArrowButtonTextProp : localeText.nextMonth;
   const getViewSwitchingButtonText = getViewSwitchingButtonTextProp != null ? getViewSwitchingButtonTextProp : localeText.calendarViewSwitchingButtonAriaLabel;
   const utils = useUtils();
+  const classes = useUtilityClasses(props);
   const switchViewButtonProps = componentsProps.switchViewButton || {};
 
   const selectNextMonth = () => onMonthChange(utils.getNextMonth(month), 'left');
@@ -122,28 +164,33 @@ export function PickersCalendarHeader(props) {
   const ownerState = props;
   return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, {
     ownerState: ownerState,
-    children: [/*#__PURE__*/_jsxs(PickersCalendarHeaderLabel, {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsxs(PickersCalendarHeaderLabelContainer, {
       role: "presentation",
       onClick: handleToggleView,
       ownerState: ownerState // putting this on the label item element below breaks when using transition
       ,
       "aria-live": "polite",
+      className: classes.labelContainer,
       children: [/*#__PURE__*/_jsx(PickersFadeTransitionGroup, {
         reduceAnimations: reduceAnimations,
         transKey: utils.format(month, 'monthAndYear'),
-        children: /*#__PURE__*/_jsx(PickersCalendarHeaderLabelItem, {
+        children: /*#__PURE__*/_jsx(PickersCalendarHeaderLabel, {
           id: labelId,
           ownerState: ownerState,
+          className: classes.label,
           children: utils.format(month, 'monthAndYear')
         })
       }), views.length > 1 && !disabled && /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewButton, _extends({
         size: "small",
         as: components.SwitchViewButton,
-        "aria-label": getViewSwitchingButtonText(currentView)
+        "aria-label": getViewSwitchingButtonText(currentView),
+        className: classes.switchViewButton
       }, switchViewButtonProps, {
-        children: /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchView, {
+        children: /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewIcon, {
           as: components.SwitchViewIcon,
-          ownerState: ownerState
+          ownerState: ownerState,
+          className: classes.switchViewIcon
         })
       }))]
     }), /*#__PURE__*/_jsx(Fade, {

package/CalendarPicker/PickersFadeTransitionGroup.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-interface FadeTransitionProps {
+import { PickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
+export interface PickersFadeTransitionGroupProps {
     children: React.ReactElement;
     className?: string;
     reduceAnimations: boolean;
     transKey: React.Key;
+    classes?: Partial<PickersFadeTransitionGroupClasses>;
 }
 /**
  * @ignore - do not document.
  */
-export declare const PickersFadeTransitionGroup: ({ children, className, reduceAnimations, transKey, }: FadeTransitionProps) => JSX.Element;
-export {};
+export declare function PickersFadeTransitionGroup(inProps: PickersFadeTransitionGroupProps): JSX.Element;

package/CalendarPicker/PickersFadeTransitionGroup.js

@@ -1,13 +1,28 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Fade from '@mui/material/Fade';
-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 { TransitionGroup } from 'react-transition-group';
+import { getPickersFadeTransitionGroupUtilityClass } from './pickersFadeTransitionGroupClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['root']);
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getPickersFadeTransitionGroupUtilityClass, classes);
+};
+
 const animationDuration = 500;
-const PickersFadeTransitionGroupRoot = styled(TransitionGroup)({
+const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
+  name: 'MuiPickersFadeTransitionGroup',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
   display: 'block',
   position: 'relative'
 });
@@ -15,12 +30,19 @@ const PickersFadeTransitionGroupRoot = styled(TransitionGroup)({
  * @ignore - do not document.
  */
 
-export const PickersFadeTransitionGroup = ({
-  children,
-  className,
-  reduceAnimations,
-  transKey
-}) => {
+export function PickersFadeTransitionGroup(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersFadeTransitionGroup'
+  });
+  const {
+    children,
+    className,
+    reduceAnimations,
+    transKey
+  } = props;
+  const classes = useUtilityClasses(props);
+
   if (reduceAnimations) {
     return children;
   }
@@ -39,4 +61,4 @@ export const PickersFadeTransitionGroup = ({
       children: children
     }, transKey)
   });
-};
+}

package/CalendarPicker/PickersSlideTransition.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { PickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
 export declare type SlideDirection = 'right' | 'left';
 export interface SlideTransitionProps extends Omit<CSSTransitionProps, 'timeout'> {
     children: React.ReactElement;
@@ -7,9 +8,10 @@ export interface SlideTransitionProps extends Omit<CSSTransitionProps, 'timeout'
     reduceAnimations: boolean;
     slideDirection: SlideDirection;
     transKey: React.Key;
+    classes?: Partial<PickersSlideTransitionClasses>;
 }
 export declare const slideAnimationDuration = 350;
 /**
  * @ignore - do not document.
  */
-export declare const PickersSlideTransition: ({ children, className, reduceAnimations, slideDirection, transKey, ...other }: SlideTransitionProps) => JSX.Element;
+export declare const PickersSlideTransition: (props: SlideTransitionProps) => JSX.Element;

package/CalendarPicker/PickersSlideTransition.js

@@ -4,12 +4,39 @@ const _excluded = ["children", "className", "reduceAnimations", "slideDirection"
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/material';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { getPickersSlideTransitionUtilityClass, pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const classes = generateUtilityClasses('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getPickersSlideTransitionUtilityClass, classes);
+};
+
 export const slideAnimationDuration = 350;
-const PickersSlideTransitionRoot = styled(TransitionGroup)(({
+const PickersSlideTransitionRoot = styled(TransitionGroup, {
+  name: 'PrivatePickersSlideTransition',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [styles.root, {
+    [`.${pickersSlideTransitionClasses['slideEnter-left']}`]: styles['slideEnter-left']
+  }, {
+    [`.${pickersSlideTransitionClasses['slideEnter-right']}`]: styles['slideEnter-right']
+  }, {
+    [`.${pickersSlideTransitionClasses.slideEnterActive}`]: styles.slideEnterActive
+  }, {
+    [`.${pickersSlideTransitionClasses.slideExit}`]: styles.slideExit
+  }, {
+    [`.${pickersSlideTransitionClasses['slideExitActiveLeft-left']}`]: styles['slideExitActiveLeft-left']
+  }, {
+    [`.${pickersSlideTransitionClasses['slideExitActiveLeft-right']}`]: styles['slideExitActiveLeft-right']
+  }]
+})(({
   theme
 }) => {
   const slideTransition = theme.transitions.create('transform', {
@@ -26,30 +53,30 @@ const PickersSlideTransitionRoot = styled(TransitionGroup)(({
       right: 0,
       left: 0
     },
-    [`& .${classes['slideEnter-left']}`]: {
+    [`& .${pickersSlideTransitionClasses['slideEnter-left']}`]: {
       willChange: 'transform',
       transform: 'translate(100%)',
       zIndex: 1
     },
-    [`& .${classes['slideEnter-right']}`]: {
+    [`& .${pickersSlideTransitionClasses['slideEnter-right']}`]: {
       willChange: 'transform',
       transform: 'translate(-100%)',
       zIndex: 1
     },
-    [`& .${classes.slideEnterActive}`]: {
+    [`& .${pickersSlideTransitionClasses.slideEnterActive}`]: {
       transform: 'translate(0%)',
       transition: slideTransition
     },
-    [`& .${classes.slideExit}`]: {
+    [`& .${pickersSlideTransitionClasses.slideExit}`]: {
       transform: 'translate(0%)'
     },
-    [`& .${classes['slideExitActiveLeft-left']}`]: {
+    [`& .${pickersSlideTransitionClasses['slideExitActiveLeft-left']}`]: {
       willChange: 'transform',
       transform: 'translate(-100%)',
       transition: slideTransition,
       zIndex: 0
     },
-    [`& .${classes['slideExitActiveLeft-right']}`]: {
+    [`& .${pickersSlideTransitionClasses['slideExitActiveLeft-right']}`]: {
       willChange: 'transform',
       transform: 'translate(100%)',
       transition: slideTransition,
@@ -61,15 +88,18 @@ const PickersSlideTransitionRoot = styled(TransitionGroup)(({
  * @ignore - do not document.
  */
 
-export const PickersSlideTransition = _ref => {
-  let {
+export const PickersSlideTransition = props => {
+  // TODO v6: add 'useThemeProps' once the component class names are aligned
+  const {
     children,
     className,
     reduceAnimations,
     slideDirection,
     transKey
-  } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const classes = useUtilityClasses(props);
 
   if (reduceAnimations) {
     return /*#__PURE__*/_jsx("div", {
@@ -79,10 +109,10 @@ export const PickersSlideTransition = _ref => {
   }
 
   const transitionClasses = {
-    exit: classes.slideExit,
-    enterActive: classes.slideEnterActive,
-    enter: classes[`slideEnter-${slideDirection}`],
-    exitActive: classes[`slideExitActiveLeft-${slideDirection}`]
+    exit: pickersSlideTransitionClasses.slideExit,
+    enterActive: pickersSlideTransitionClasses.slideEnterActive,
+    enter: pickersSlideTransitionClasses[`slideEnter-${slideDirection}`],
+    exitActive: pickersSlideTransitionClasses[`slideExitActiveLeft-${slideDirection}`]
   };
   return /*#__PURE__*/_jsx(PickersSlideTransitionRoot, {
     className: clsx(classes.root, className),

package/CalendarPicker/dayPickerClasses.d.ts

@@ -0,0 +1,17 @@
+export interface DayPickerClasses {
+    /** Styles applied to the header element. */
+    header: string;
+    /** Styles applied to the week day label element. */
+    weekDayLabel: string;
+    /** Styles applied to the loading container element. */
+    loadingContainer: string;
+    /** Styles applied to the slide transition element. */
+    slideTransition: string;
+    /** Styles applied to the month container element. */
+    monthContainer: string;
+    /** Styles applied to the week container element. */
+    weekContainer: string;
+}
+export declare type DayPickerClassKey = keyof DayPickerClasses;
+export declare const getDayPickerUtilityClass: (slot: string) => string;
+export declare const dayPickerClasses: DayPickerClasses;

package/CalendarPicker/dayPickerClasses.js

@@ -0,0 +1,3 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export const getDayPickerUtilityClass = slot => generateUtilityClass('MuiDayPicker', slot);
+export const dayPickerClasses = generateUtilityClasses('MuiDayPicker', ['header', 'weekDayLabel', 'loadingContainer', 'slideTransition', 'monthContainer', 'weekContainer']);

package/CalendarPicker/index.d.ts

@@ -2,4 +2,13 @@ export { CalendarPicker } from './CalendarPicker';
 export type { CalendarPickerProps, CalendarPickerSlotsComponent, CalendarPickerSlotsComponentsProps, } from './CalendarPicker';
 export { getCalendarPickerUtilityClass, calendarPickerClasses } from './calendarPickerClasses';
 export type { CalendarPickerClassKey, CalendarPickerClasses } from './calendarPickerClasses';
+export { dayPickerClasses } from './dayPickerClasses';
+export type { DayPickerClassKey, DayPickerClasses } from './dayPickerClasses';
+export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
+export type { PickersCalendarHeaderClassKey, PickersCalendarHeaderClasses, } from './pickersCalendarHeaderClasses';
+export type { PickersFadeTransitionGroupProps } from './PickersFadeTransitionGroup';
+export { pickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
+export type { PickersFadeTransitionGroupClassKey, PickersFadeTransitionGroupClasses, } from './pickersFadeTransitionGroupClasses';
+export { pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
+export type { PickersSlideTransitionClassKey, PickersSlideTransitionClasses, } from './pickersSlideTransitionClasses';
 export type { CalendarPickerView } from '../internals/models';

package/CalendarPicker/index.js

@@ -1,2 +1,6 @@
 export { CalendarPicker } from './CalendarPicker';
-export { getCalendarPickerUtilityClass, calendarPickerClasses } from './calendarPickerClasses';
+export { getCalendarPickerUtilityClass, calendarPickerClasses } from './calendarPickerClasses';
+export { dayPickerClasses } from './dayPickerClasses';
+export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
+export { pickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
+export { pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';