@mui/x-date-pickers 5.0.1 → 5.0.3

package/modern/ClockPicker/ClockPicker.js

@@ -363,7 +363,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -380,7 +380,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {string} hours The hours to format.
    * @returns {string} the formatted hours text.
    * @default (hours: string) => `${hours} hours`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getHoursClockNumberText: PropTypes.func,
 
@@ -389,7 +389,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {string} minutes The minutes to format.
    * @returns {string} the formatted minutes text.
    * @default (minutes: string) => `${minutes} minutes`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getMinutesClockNumberText: PropTypes.func,
 
@@ -398,14 +398,14 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    * @param {string} seconds The seconds to format.
    * @returns {string} the formatted seconds text.
    * @default (seconds: string) => `${seconds} seconds`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getSecondsClockNumberText: PropTypes.func,
 
   /**
    * Left arrow icon aria-label text.
    * @default 'open previous view'
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   leftArrowButtonText: PropTypes.string,
 
@@ -453,7 +453,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
   /**
    * Right arrow icon aria-label text.
    * @default 'open next view'
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   rightArrowButtonText: PropTypes.string,
 

package/modern/ClockPicker/ClockPointer.js

@@ -2,10 +2,29 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "hasSelected", "isInner", "type", "value"];
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
+import { getClockPointerUtilityClass } from './clockPointerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ClockPointerRoot = styled('div')(({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    thumb: ['thumb']
+  };
+  return composeClasses(slots, getClockPointerUtilityClass, classes);
+};
+
+const ClockPointerRoot = styled('div', {
+  name: 'MuiClockPointer',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   theme,
   ownerState
 }) => _extends({
@@ -15,10 +34,14 @@ const ClockPointerRoot = styled('div')(({
   left: 'calc(50% - 1px)',
   bottom: '50%',
   transformOrigin: 'center bottom 0px'
-}, ownerState.toAnimateTransform && {
+}, ownerState.shouldAnimate && {
   transition: theme.transitions.create(['transform', 'height'])
 }));
-const ClockPointerThumb = styled('div')(({
+const ClockPointerThumb = styled('div', {
+  name: 'MuiClockPointer',
+  slot: 'Thumb',
+  overridesResolver: (_, styles) => styles.thumb
+})(({
   theme,
   ownerState
 }) => _extends({
@@ -36,67 +59,55 @@ const ClockPointerThumb = styled('div')(({
 }));
 /**
  * @ignore - internal component.
- * TODO: Remove class
  */
 
-export 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 = _objectWithoutPropertiesLoose(_this$props, _excluded);
+export function ClockPointer(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiClockPointer'
+  });
 
-    const ownerState = _extends({}, this.props, this.state);
+  const {
+    className,
+    isInner,
+    type,
+    value
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
 
-    const getAngleStyle = () => {
-      const max = type === 'hours' ? 12 : 60;
-      let angle = 360 / max * value;
+  const previousType = React.useRef(type);
+  React.useEffect(() => {
+    previousType.current = type;
+  }, [type]);
 
-      if (type === 'hours' && value > 12) {
-        angle -= 360; // round up angle to max 360 degrees
-      }
+  const ownerState = _extends({}, props, {
+    shouldAnimate: previousType.current !== type
+  });
 
-      return {
-        height: Math.round((isInner ? 0.26 : 0.4) * CLOCK_WIDTH),
-        transform: `rotateZ(${angle}deg)`
-      };
-    };
+  const classes = useUtilityClasses(ownerState);
 
-    return /*#__PURE__*/_jsx(ClockPointerRoot, _extends({
-      style: getAngleStyle(),
-      className: className,
-      ownerState: ownerState
-    }, other, {
-      children: /*#__PURE__*/_jsx(ClockPointerThumb, {
-        ownerState: 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
+    }
 
-ClockPointer.getDerivedStateFromProps = (nextProps, state) => {
-  if (nextProps.type !== state.previousType) {
     return {
-      toAnimateTransform: true,
-      previousType: nextProps.type
+      height: Math.round((isInner ? 0.26 : 0.4) * CLOCK_WIDTH),
+      transform: `rotateZ(${angle}deg)`
     };
-  }
-
-  return {
-    toAnimateTransform: false,
-    previousType: nextProps.type
   };
-};
+
+  return /*#__PURE__*/_jsx(ClockPointerRoot, _extends({
+    style: getAngleStyle(),
+    className: clsx(className, classes.root),
+    ownerState: ownerState
+  }, other, {
+    children: /*#__PURE__*/_jsx(ClockPointerThumb, {
+      ownerState: ownerState,
+      className: classes.thumb
+    })
+  }));
+}

package/modern/ClockPicker/clockClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getClockUtilityClass(slot) {
+  return generateUtilityClass('MuiClock', slot);
+}
+export const clockClasses = generateUtilityClasses('MuiClock', ['root', 'clock', 'wrapper', 'squareMask', 'pin', 'amButton', 'pmButton']);

package/modern/ClockPicker/clockNumberClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getClockNumberUtilityClass(slot) {
+  return generateUtilityClass('MuiClockNumber', slot);
+}
+export const clockNumberClasses = generateUtilityClasses('MuiClockNumber', ['root', 'selected', 'disabled']);

package/modern/ClockPicker/clockPointerClasses.js

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

package/modern/ClockPicker/index.js

@@ -1,2 +1,5 @@
 export { ClockPicker } from './ClockPicker';
-export { clockPickerClasses, getClockPickerUtilityClass } from './clockPickerClasses';
+export { clockClasses } from './clockClasses';
+export { clockNumberClasses } from './clockNumberClasses';
+export { clockPickerClasses, getClockPickerUtilityClass } from './clockPickerClasses';
+export { clockPointerClasses } from './clockPointerClasses';

package/modern/DatePicker/DatePicker.js

@@ -164,7 +164,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,

package/modern/DatePicker/DatePickerToolbar.js

@@ -3,17 +3,30 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["parsedValue", "isLandscape", "isMobileKeyboardViewOpen", "onChange", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/material';
-import { PickersToolbar, pickersToolbarClasses } from '../internals/components/PickersToolbar';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { PickersToolbar } from '../internals/components/PickersToolbar';
+import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
+import { getDatePickerToolbarUtilityClass } from './datePickerToolbarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const datePickerToolbarClasses = generateUtilityClasses('MuiDatePickerToolbar', ['root', 'title']);
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    title: ['title']
+  };
+  return composeClasses(slots, getDatePickerToolbarUtilityClass, classes);
+};
+
 const DatePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDatePickerToolbar',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (_, styles) => styles.root
 })({
   [`& .${pickersToolbarClasses.penIconButton}`]: {
     position: 'relative',
@@ -23,7 +36,7 @@ const DatePickerToolbarRoot = styled(PickersToolbar, {
 const DatePickerToolbarTitle = styled(Typography, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
-  overridesResolver: (props, styles) => styles.title
+  overridesResolver: (_, styles) => styles.title
 })(({
   ownerState
 }) => _extends({}, ownerState.isLandscape && {
@@ -33,7 +46,12 @@ const DatePickerToolbarTitle = styled(Typography, {
 /**
  * @ignore - internal component.
  */
-export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(props, ref) {
+export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDatePickerToolbar'
+  });
+
   const {
     parsedValue,
     isLandscape,
@@ -48,6 +66,7 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
 
   const utils = useUtils();
   const localeText = useLocaleText();
+  const classes = useUtilityClasses(props);
   const toolbarTitle = toolbarTitleProp ?? localeText.datePickerDefaultToolbarTitle;
   const dateText = React.useMemo(() => {
     if (!parsedValue) {
@@ -79,13 +98,13 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     toggleMobileKeyboardView: toggleMobileKeyboardView,
     isLandscape: isLandscape,
     ownerState: ownerState,
-    className: datePickerToolbarClasses.root
+    className: classes.root
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
       variant: "h4",
       align: isLandscape ? 'left' : 'center',
       ownerState: ownerState,
-      className: datePickerToolbarClasses.title,
+      className: classes.title,
       children: dateText
     })
   }));

package/modern/DatePicker/datePickerToolbarClasses.js

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

package/modern/DatePicker/index.js

@@ -1 +1,2 @@
-export { DatePicker } from './DatePicker';
+export { DatePicker } from './DatePicker';
+export { datePickerToolbarClasses } from './datePickerToolbarClasses';

package/modern/DateTimePicker/DateTimePicker.js

@@ -180,7 +180,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -206,7 +206,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
 

package/modern/DateTimePicker/DateTimePickerTabs.js

@@ -3,10 +3,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses } from '@mui/material/Tabs';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { Time, DateRange } from '../internals/components/icons';
 import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
 import { useLocaleText } from '../internals/hooks/useUtils';
+import { getDateTimePickerTabsUtilityClass } from './dateTimePickerTabsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -26,7 +28,21 @@ const tabToView = tab => {
   return 'hours';
 };
 
-const DateTimePickerTabsRoot = styled(Tabs)(({
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getDateTimePickerTabsUtilityClass, classes);
+};
+
+const DateTimePickerTabsRoot = styled(Tabs, {
+  name: 'MuiDateTimePickerTabs',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   ownerState,
   theme
 }) => _extends({
@@ -40,7 +56,11 @@ const DateTimePickerTabsRoot = styled(Tabs)(({
   }
 }));
 
-const DateTimePickerTabs = props => {
+const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateTimePickerTabs'
+  });
   const {
     dateRangeIcon = /*#__PURE__*/_jsx(DateRange, {}),
     onChange,
@@ -54,6 +74,8 @@ const DateTimePickerTabs = props => {
     wrapperVariant
   });
 
+  const classes = useUtilityClasses(ownerState);
+
   const handleChange = (event, value) => {
     onChange(tabToView(value));
   };
@@ -63,6 +85,7 @@ const DateTimePickerTabs = props => {
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,
+    className: classes.root,
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -85,6 +108,11 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
 
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
   /**
    * Date tab icon.
    * @default DateRange

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -2,15 +2,30 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
 import * as React from 'react';
-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 { PickersToolbarText } from '../internals/components/PickersToolbarText';
-import { PickersToolbar, pickersToolbarClasses } from '../internals/components/PickersToolbar';
+import { PickersToolbar } from '../internals/components/PickersToolbar';
+import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { getDateTimePickerToolbarUtilityClass } from './dateTimePickerToolbarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const dateTimePickerToolbarClasses = generateUtilityClasses('MuiDateTimePickerToolbar', ['root', 'dateContainer', 'timeContainer', 'separator']);
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    dateContainer: ['dateContainer'],
+    timeContainer: ['timeContainer'],
+    separator: ['separator']
+  };
+  return composeClasses(slots, getDateTimePickerToolbarUtilityClass, classes);
+};
+
 const DateTimePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Root',
@@ -53,7 +68,12 @@ const DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
  * @ignore - internal component.
  */
 
-export const DateTimePickerToolbar = props => {
+export function DateTimePickerToolbar(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateTimePickerToolbar'
+  });
+
   const {
     ampm,
     parsedValue,
@@ -68,8 +88,10 @@ export const DateTimePickerToolbar = props => {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const ownerState = props;
   const utils = useUtils();
   const localeText = useLocaleText();
+  const classes = useUtilityClasses(ownerState);
   const toolbarTitle = toolbarTitleProp ?? localeText.dateTimePickerDefaultToolbarTitle;
 
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
@@ -85,17 +107,16 @@ export const DateTimePickerToolbar = props => {
 
     return utils.format(parsedValue, 'shortDate');
   }, [parsedValue, toolbarFormat, toolbarPlaceholder, utils]);
-  const ownerState = props;
   return /*#__PURE__*/_jsxs(DateTimePickerToolbarRoot, _extends({
     toolbarTitle: toolbarTitle,
     isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
     toggleMobileKeyboardView: toggleMobileKeyboardView,
-    className: dateTimePickerToolbarClasses.root
+    className: classes.root
   }, other, {
     isLandscape: false,
     ownerState: ownerState,
     children: [/*#__PURE__*/_jsxs(DateTimePickerToolbarDateContainer, {
-      className: dateTimePickerToolbarClasses.dateContainer,
+      className: classes.dateContainer,
       ownerState: ownerState,
       children: [views.includes('year') && /*#__PURE__*/_jsx(PickersToolbarButton, {
         tabIndex: -1,
@@ -111,7 +132,7 @@ export const DateTimePickerToolbar = props => {
         value: dateText
       })]
     }), /*#__PURE__*/_jsxs(DateTimePickerToolbarTimeContainer, {
-      className: dateTimePickerToolbarClasses.timeContainer,
+      className: classes.timeContainer,
       ownerState: ownerState,
       children: [views.includes('hours') && /*#__PURE__*/_jsx(PickersToolbarButton, {
         variant: "h3",
@@ -122,7 +143,7 @@ export const DateTimePickerToolbar = props => {
         children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
           variant: "h3",
           value: ":",
-          className: dateTimePickerToolbarClasses.separator,
+          className: classes.separator,
           ownerState: ownerState
         }), /*#__PURE__*/_jsx(PickersToolbarButton, {
           variant: "h3",
@@ -134,7 +155,7 @@ export const DateTimePickerToolbar = props => {
         children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
           variant: "h3",
           value: ":",
-          className: dateTimePickerToolbarClasses.separator,
+          className: classes.separator,
           ownerState: ownerState
         }), /*#__PURE__*/_jsx(PickersToolbarButton, {
           variant: "h3",
@@ -145,4 +166,4 @@ export const DateTimePickerToolbar = props => {
       })]
     })]
   }));
-};
+}

package/modern/DateTimePicker/dateTimePickerTabsClasses.js

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

package/modern/DateTimePicker/dateTimePickerToolbarClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getDateTimePickerToolbarUtilityClass(slot) {
+  return generateUtilityClass('MuiDateTimePickerToolbar', slot);
+}
+export const dateTimePickerToolbarClasses = generateUtilityClasses('MuiDateTimePickerToolbar', ['root', 'dateContainer', 'timeContainer', 'separator']);

package/modern/DateTimePicker/index.js

@@ -1,2 +1,4 @@
 export { DateTimePicker } from './DateTimePicker';
-export { DateTimePickerTabs } from './DateTimePickerTabs';
+export { DateTimePickerTabs } from './DateTimePickerTabs';
+export { dateTimePickerTabsClasses } from './dateTimePickerTabsClasses';
+export { dateTimePickerToolbarClasses } from './dateTimePickerToolbarClasses';

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -189,7 +189,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -215,7 +215,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
 

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -145,7 +145,7 @@ process.env.NODE_ENV !== "production" ? DesktopTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -189,7 +189,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,
@@ -215,7 +215,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
 

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -145,7 +145,7 @@ process.env.NODE_ENV !== "production" ? MobileTimePicker.propTypes = {
    * @param {TDate | null} time The current time.
    * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
    * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    * @default <TDate extends any>(
    *   view: ClockView,
    *   time: TDate | null,