@mui/x-date-pickers 5.0.0 → 5.0.2

package/CHANGELOG.md

@@ -3,6 +3,100 @@
 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_
+
+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://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.
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📃 Add support for column grouping when exporting to Excel (#5895) @alexfauquette
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.2` / `@mui/x-data-grid-pro@v5.17.2` / `@mui/x-data-grid-premium@v5.17.2`
+
+#### Changes
+
+- [DataGrid] Revert mode if cell/row couldn't be saved due to validation error (#5897) @m4theushw
+- [DataGridPremium] Export column grouping in Excel (#5895) @alexfauquette
+
+### `@mui/x-date-pickers@v5.0.1` / `@mui/x-date-pickers-pro@v5.0.1`
+
+#### Changes
+
+- [DateTimePicker] Remove circular import (#6087) @flaviendelangle
+- [pickers] Add `sx` prop to the equality check of `PickersDay` (#6030) @TheUnlocked
+- [pickers] Add warning when `openTo` is invalid based on available `views` (#6042) @LukasTy
+- [pickers] Allow keyboard navigation to ignore disabled date for left / right arrow (#6082) @alexfauquette
+- [pickers] Fix mobile picker not opening on label click (#6074) @LukasTy
+
+### Docs
+
+- [docs] Add Recipes section
+
+### Core
+
+- [core] Add `yarn release:tag` script (#5169) @DanailH
+- [core] Upgrade monorepo (#6072) @m4theushw
+
+## 5.17.1
+
+_Sep 5, 2022_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.1` / `@mui/x-data-grid-pro@v5.17.1` / `@mui/x-data-grid-premium@v5.17.1`
+
+#### Changes
+
+- [DataGrid] Fix cells being focused on mouseUp (#5980) @cherniavskii
+- [DataGrid] Fix focused cell if column is spanned and new editing API is used (#5962) @m4theushw
+- [DataGridPro] Fix import in lazy-loading causing a bundling error (#6031) @flaviendelangle
+
 ## 5.17.0
 
 _Sep 2, 2022_

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,
@@ -128,14 +175,36 @@ export function DayPicker(props) {
         break;
 
       case 'ArrowLeft':
-        focusDay(utils.addDays(day, theme.direction === 'ltr' ? -1 : 1));
-        event.preventDefault();
-        break;
+        {
+          const newFocusedDayDefault = utils.addDays(day, theme.direction === 'ltr' ? -1 : 1);
+          const nextAvailableMonth = theme.direction === 'ltr' ? utils.getPreviousMonth(day) : utils.getNextMonth(day);
+          const closestDayToFocus = findClosestEnabledDate({
+            utils,
+            date: newFocusedDayDefault,
+            minDate: theme.direction === 'ltr' ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            maxDate: theme.direction === 'ltr' ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
+            isDateDisabled
+          });
+          focusDay(closestDayToFocus || newFocusedDayDefault);
+          event.preventDefault();
+          break;
+        }
 
       case 'ArrowRight':
-        focusDay(utils.addDays(day, theme.direction === 'ltr' ? 1 : -1));
-        event.preventDefault();
-        break;
+        {
+          const newFocusedDayDefault = utils.addDays(day, theme.direction === 'ltr' ? 1 : -1);
+          const nextAvailableMonth = theme.direction === 'ltr' ? utils.getNextMonth(day) : utils.getPreviousMonth(day);
+          const closestDayToFocus = findClosestEnabledDate({
+            utils,
+            date: newFocusedDayDefault,
+            minDate: theme.direction === 'ltr' ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
+            maxDate: theme.direction === 'ltr' ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            isDateDisabled
+          });
+          focusDay(closestDayToFocus || newFocusedDayDefault);
+          event.preventDefault();
+          break;
+        }
 
       case 'Home':
         focusDay(utils.startOfWeek(day));
@@ -202,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;
 
@@ -209,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;