@mui/x-date-pickers 6.19.0 → 6.19.2

package/legacy/DateTimePicker/DateTimePickerTabs.js

@@ -1,10 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { TimeIcon, DateRangeIcon } from '../icons';
 import { useLocaleText } from '../internals/hooks/useUtils';
 import { getDateTimePickerTabsUtilityClass } from './dateTimePickerTabsClasses';
@@ -71,7 +72,8 @@ var DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     timeIcon = _props$timeIcon === void 0 ? /*#__PURE__*/_jsx(TimeIcon, {}) : _props$timeIcon,
     view = props.view,
     _props$hidden = props.hidden,
-    hidden = _props$hidden === void 0 ? typeof window === 'undefined' || window.innerHeight < 667 : _props$hidden;
+    hidden = _props$hidden === void 0 ? typeof window === 'undefined' || window.innerHeight < 667 : _props$hidden,
+    className = props.className;
   var localeText = useLocaleText();
   var classes = useUtilityClasses(props);
   var handleChange = function handleChange(event, value) {
@@ -85,7 +87,7 @@ var DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,
-    className: classes.root,
+    className: clsx(className, classes.root),
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -110,6 +112,7 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * Date tab icon.
    * @default DateRange

package/legacy/DigitalClock/DigitalClock.js

@@ -455,6 +455,7 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   view: PropTypes.oneOf(['hours']),
   /**
    * Available views.
+   * @default ['hours']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours']))
 } : void 0;

package/legacy/MonthCalendar/MonthCalendar.js

@@ -113,7 +113,6 @@ export var MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(
     });
   }, [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   var ownerState = props;
   var classes = useUtilityClasses(ownerState);
   var todayMonth = React.useMemo(function () {

package/legacy/MonthCalendar/PickersMonth.js

@@ -39,14 +39,13 @@ var PickersMonthButton = styled('button', {
     return [styles.monthButton, _defineProperty({}, "&.".concat(pickersMonthClasses.disabled), styles.disabled), _defineProperty({}, "&.".concat(pickersMonthClasses.selected), styles.selected)];
   }
 })(function (_ref4) {
-  var _extends2;
   var theme = _ref4.theme;
   return _extends({
     color: 'unset',
     backgroundColor: 'transparent',
     border: 0,
     outline: 0
-  }, theme.typography.subtitle1, (_extends2 = {
+  }, theme.typography.subtitle1, _defineProperty(_defineProperty({
     margin: '8px 0',
     height: 36,
     width: 72,
@@ -62,15 +61,15 @@ var PickersMonthButton = styled('button', {
       cursor: 'auto',
       pointerEvents: 'none'
     }
-  }, _defineProperty(_extends2, "&.".concat(pickersMonthClasses.disabled), {
+  }, "&.".concat(pickersMonthClasses.disabled), {
     color: (theme.vars || theme).palette.text.secondary
-  }), _defineProperty(_extends2, "&.".concat(pickersMonthClasses.selected), {
+  }), "&.".concat(pickersMonthClasses.selected), {
     color: (theme.vars || theme).palette.primary.contrastText,
     backgroundColor: (theme.vars || theme).palette.primary.main,
     '&:focus, &:hover': {
       backgroundColor: (theme.vars || theme).palette.primary.dark
     }
-  }), _extends2));
+  }));
 });
 
 /**

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -534,6 +534,7 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Available views.
+   * @default ['hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/legacy/PickersDay/PickersDay.js

@@ -29,10 +29,9 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getPickersDayUtilityClass, classes);
 };
 var styleArg = function styleArg(_ref) {
-  var _extends2;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
-  return _extends({}, theme.typography.caption, (_extends2 = {
+  return _extends({}, theme.typography.caption, _defineProperty(_defineProperty(_defineProperty({
     width: DAY_SIZE,
     height: DAY_SIZE,
     borderRadius: '50%',
@@ -54,7 +53,7 @@ var styleArg = function styleArg(_ref) {
       willChange: 'background-color',
       backgroundColor: (theme.vars || theme).palette.primary.dark
     })
-  }, _defineProperty(_extends2, "&.".concat(pickersDayClasses.selected), {
+  }, "&.".concat(pickersDayClasses.selected), {
     color: (theme.vars || theme).palette.primary.contrastText,
     backgroundColor: (theme.vars || theme).palette.primary.main,
     fontWeight: theme.typography.fontWeightMedium,
@@ -62,11 +61,11 @@ var styleArg = function styleArg(_ref) {
       willChange: 'background-color',
       backgroundColor: (theme.vars || theme).palette.primary.dark
     }
-  }), _defineProperty(_extends2, "&.".concat(pickersDayClasses.disabled, ":not(.").concat(pickersDayClasses.selected, ")"), {
+  }), "&.".concat(pickersDayClasses.disabled, ":not(.").concat(pickersDayClasses.selected, ")"), {
     color: (theme.vars || theme).palette.text.disabled
-  }), _defineProperty(_extends2, "&.".concat(pickersDayClasses.disabled, "&.").concat(pickersDayClasses.selected), {
+  }), "&.".concat(pickersDayClasses.disabled, "&.").concat(pickersDayClasses.selected), {
     opacity: 0.6
-  }), _extends2), !ownerState.disableMargin && {
+  }), !ownerState.disableMargin && {
     margin: "0 ".concat(DAY_MARGIN, "px")
   }, ownerState.outsideCurrentMonth && ownerState.showDaysOutsideCurrentMonth && {
     color: (theme.vars || theme).palette.text.secondary

package/legacy/PickersLayout/PickersLayout.js

@@ -24,29 +24,28 @@ var PickersLayoutRoot = styled('div', {
     return styles.root;
   }
 })(function (_ref) {
-  var _ref2;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
-  return _ref2 = {
+  return _defineProperty(_defineProperty(_defineProperty({
     display: 'grid',
     gridAutoColumns: 'max-content auto max-content',
     gridAutoRows: 'max-content auto max-content'
-  }, _defineProperty(_ref2, "& .".concat(pickersLayoutClasses.toolbar), ownerState.isLandscape ? {
+  }, "& .".concat(pickersLayoutClasses.toolbar), ownerState.isLandscape ? {
     gridColumn: theme.direction === 'rtl' ? 3 : 1,
     gridRow: '2 / 3'
   } : {
     gridColumn: '2 / 4',
     gridRow: 1
-  }), _defineProperty(_ref2, ".".concat(pickersLayoutClasses.shortcuts), ownerState.isLandscape ? {
+  }), ".".concat(pickersLayoutClasses.shortcuts), ownerState.isLandscape ? {
     gridColumn: '2 / 4',
     gridRow: 1
   } : {
     gridColumn: theme.direction === 'rtl' ? 3 : 1,
     gridRow: '2 / 3'
-  }), _defineProperty(_ref2, "& .".concat(pickersLayoutClasses.actionBar), {
+  }), "& .".concat(pickersLayoutClasses.actionBar), {
     gridColumn: '1 / 4',
     gridRow: 3
-  }), _ref2;
+  });
 });
 PickersLayoutRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/legacy/PickersLayout/pickersLayoutClasses.js

@@ -1,5 +1,6 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getPickersLayoutUtilityClass(slot) {
   return generateUtilityClass('MuiPickersLayout', slot);
 }
-export var pickersLayoutClasses = generateUtilityClasses('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'shortcuts']);
+export var pickersLayoutClasses = generateUtilityClasses('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'tabs', 'shortcuts']);

package/legacy/PickersLayout/usePickerLayout.js

@@ -103,7 +103,8 @@ var usePickerLayout = function usePickerLayout(props) {
   var Tabs = slots == null ? void 0 : slots.tabs;
   var tabs = view && Tabs ? /*#__PURE__*/_jsx(Tabs, _extends({
     view: view,
-    onViewChange: onViewChange
+    onViewChange: onViewChange,
+    className: classes.tabs
   }, slotProps == null ? void 0 : slotProps.tabs)) : null;
 
   // Shortcuts

package/legacy/TimeClock/Clock.js

@@ -293,7 +293,6 @@ export function Clock(inProps) {
       // do nothing
     }
   };
-
   return /*#__PURE__*/_jsxs(ClockRoot, {
     className: clsx(className, classes.root),
     children: [/*#__PURE__*/_jsxs(ClockClock, {

package/legacy/TimeClock/ClockNumber.js

@@ -25,10 +25,9 @@ var ClockNumberRoot = styled('span', {
     return [styles.root, _defineProperty({}, "&.".concat(clockNumberClasses.disabled), styles.disabled), _defineProperty({}, "&.".concat(clockNumberClasses.selected), styles.selected)];
   }
 })(function (_ref3) {
-  var _extends2;
   var theme = _ref3.theme,
     ownerState = _ref3.ownerState;
-  return _extends((_extends2 = {
+  return _extends(_defineProperty(_defineProperty({
     height: CLOCK_HOUR_WIDTH,
     width: CLOCK_HOUR_WIDTH,
     position: 'absolute',
@@ -42,12 +41,12 @@ var ClockNumberRoot = styled('span', {
     '&:focused': {
       backgroundColor: (theme.vars || theme).palette.background.paper
     }
-  }, _defineProperty(_extends2, "&.".concat(clockNumberClasses.selected), {
+  }, "&.".concat(clockNumberClasses.selected), {
     color: (theme.vars || theme).palette.primary.contrastText
-  }), _defineProperty(_extends2, "&.".concat(clockNumberClasses.disabled), {
+  }), "&.".concat(clockNumberClasses.disabled), {
     pointerEvents: 'none',
     color: (theme.vars || theme).palette.text.disabled
-  }), _extends2), ownerState.inner && _extends({}, theme.typography.body2, {
+  }), ownerState.inner && _extends({}, theme.typography.body2, {
     color: (theme.vars || theme).palette.text.secondary
   }));
 });

package/legacy/TimeClock/ClockPointer.js

@@ -88,7 +88,6 @@ export function ClockPointer(inProps) {
     if (type === 'hours' && viewValue > 12) {
       angle -= 360; // round up angle to max 360 degrees
     }
-
     return {
       height: Math.round((isInner ? 0.26 : 0.4) * CLOCK_WIDTH),
       transform: "rotateZ(".concat(angle, "deg)")

package/legacy/TimeClock/TimeClock.js

@@ -504,6 +504,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
    * Available views.
+   * @default ['hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/legacy/TimePicker/TimePickerToolbar.js

@@ -51,8 +51,7 @@ var TimePickerToolbarHourMinuteLabel = styled('div', {
   name: 'MuiTimePickerToolbar',
   slot: 'HourMinuteLabel',
   overridesResolver: function overridesResolver(props, styles) {
-    var _ref;
-    return [(_ref = {}, _defineProperty(_ref, "&.".concat(timePickerToolbarClasses.hourMinuteLabelLandscape), styles.hourMinuteLabelLandscape), _defineProperty(_ref, "&.".concat(timePickerToolbarClasses.hourMinuteLabelReverse), styles.hourMinuteLabelReverse), _ref), styles.hourMinuteLabel];
+    return [_defineProperty(_defineProperty({}, "&.".concat(timePickerToolbarClasses.hourMinuteLabelLandscape), styles.hourMinuteLabelLandscape), "&.".concat(timePickerToolbarClasses.hourMinuteLabelReverse), styles.hourMinuteLabelReverse), styles.hourMinuteLabel];
   }
 })(function (_ref2) {
   var theme = _ref2.theme,

package/legacy/YearCalendar/PickersYear.js

@@ -40,14 +40,13 @@ var PickersYearButton = styled('button', {
     return [styles.yearButton, _defineProperty({}, "&.".concat(pickersYearClasses.disabled), styles.disabled), _defineProperty({}, "&.".concat(pickersYearClasses.selected), styles.selected)];
   }
 })(function (_ref4) {
-  var _extends2;
   var theme = _ref4.theme;
   return _extends({
     color: 'unset',
     backgroundColor: 'transparent',
     border: 0,
     outline: 0
-  }, theme.typography.subtitle1, (_extends2 = {
+  }, theme.typography.subtitle1, _defineProperty(_defineProperty({
     margin: '6px 0',
     height: 36,
     width: 72,
@@ -63,15 +62,15 @@ var PickersYearButton = styled('button', {
       cursor: 'auto',
       pointerEvents: 'none'
     }
-  }, _defineProperty(_extends2, "&.".concat(pickersYearClasses.disabled), {
+  }, "&.".concat(pickersYearClasses.disabled), {
     color: (theme.vars || theme).palette.text.secondary
-  }), _defineProperty(_extends2, "&.".concat(pickersYearClasses.selected), {
+  }), "&.".concat(pickersYearClasses.selected), {
     color: (theme.vars || theme).palette.primary.contrastText,
     backgroundColor: (theme.vars || theme).palette.primary.main,
     '&:focus, &:hover': {
       backgroundColor: (theme.vars || theme).palette.primary.dark
     }
-  }), _extends2));
+  }));
 });
 
 /**

package/legacy/YearCalendar/YearCalendar.js

@@ -117,7 +117,6 @@ export var YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(in
     });
   }, [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   var ownerState = props;
   var classes = useUtilityClasses(ownerState);
   var todayYear = React.useMemo(function () {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.19.0
+ * @mui/x-date-pickers v6.19.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/components/PickersModalDialog.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _styled;
 import * as React from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import Fade from '@mui/material/Fade';
@@ -8,12 +7,12 @@ import MuiDialog, { dialogClasses } from '@mui/material/Dialog';
 import { styled } from '@mui/material/styles';
 import { DIALOG_WIDTH } from '../constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
-var PickersModalDialogRoot = styled(MuiDialog)((_styled = {}, _defineProperty(_styled, "& .".concat(dialogClasses.container), {
+var PickersModalDialogRoot = styled(MuiDialog)(_defineProperty(_defineProperty({}, "& .".concat(dialogClasses.container), {
   outline: 0
-}), _defineProperty(_styled, "& .".concat(dialogClasses.paper), {
+}), "& .".concat(dialogClasses.paper), {
   outline: 0,
   minWidth: DIALOG_WIDTH
-}), _styled));
+}));
 var PickersModalDialogContent = styled(DialogContent)({
   '&:first-of-type': {
     padding: 0

package/legacy/internals/hooks/useClockReferenceDate.js

@@ -24,6 +24,5 @@ export var useClockReferenceDate = function useClockReferenceDate(_ref) {
   // We only want to compute the reference date on mount.
   [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   return value != null ? value : referenceDate;
 };

package/legacy/internals/hooks/useField/useField.utils.js

@@ -133,7 +133,6 @@ export var adjustSectionValue = function adjustSectionValue(utils, timezone, sec
       if (delta < 0 || isStart) {
         newSectionValueNumber += step - (step + newSectionValueNumber) % step; // for JS -3 % 5 = -3 (should be 2)
       }
-
       if (delta > 0 || isEnd) {
         newSectionValueNumber -= newSectionValueNumber % step;
       }
@@ -414,7 +413,6 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, tim
   }) // Sort to put longest word first
   .join('|'), ")"), 'g') // used to get access to lastIndex state
   ;
-
   var currentTokenValue = '';
   var _loop = function _loop(_i) {
     var escapedPartOfCurrentChar = escapedParts.find(function (escapeIndex) {

package/legacy/internals/hooks/useViews.js

@@ -71,7 +71,6 @@ export function useViews(_ref) {
       } // If false the blur is due to view switching
       );
     }
-
     onFocusedViewChange == null || onFocusedViewChange(viewToFocus, hasFocus);
   });
   var handleChangeView = useEventCallback(function (newView) {

package/legacy/locales/plPL.js

@@ -77,5 +77,4 @@ var plPLPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export var plPL = getPickersLocalization(plPLPickers);

package/legacy/locales/svSE.js

@@ -77,5 +77,4 @@ var svSEPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export var svSE = getPickersLocalization(svSEPickers);

package/legacy/locales/urPK.js

@@ -77,5 +77,4 @@ var urPKPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export var urPK = getPickersLocalization(urPKPickers);

package/locales/plPL.js

@@ -57,5 +57,4 @@ const plPLPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export const plPL = getPickersLocalization(plPLPickers);

package/locales/svSE.js

@@ -57,5 +57,4 @@ const svSEPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export const svSE = getPickersLocalization(svSEPickers);

package/locales/urPK.js

@@ -57,5 +57,4 @@ const urPKPickers = {
   // fieldSecondsPlaceholder: () => 'ss',
   // fieldMeridiemPlaceholder: () => 'aa',
 };
-
 export const urPK = getPickersLocalization(urPKPickers);

package/modern/AdapterDateFnsV3/AdapterDateFnsV3.js

@@ -59,6 +59,7 @@ import { isWithinInterval } from 'date-fns/isWithinInterval';
 import { enUS } from 'date-fns/locale/en-US';
 // date-fns v2 does not export types
 // @ts-ignore TODO remove when date-fns-v3 is the default
+
 import { AdapterDateFnsBase } from '../AdapterDateFnsBase';
 
 /**

package/modern/AdapterLuxon/AdapterLuxon.js

@@ -265,7 +265,6 @@ export class AdapterLuxon {
       if (typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {
         return true; // Luxon defaults to en-US if Intl not found
       }
-
       return Boolean(new Intl.DateTimeFormat(this.locale, {
         hour: 'numeric'
       })?.resolvedOptions()?.hour12);

package/modern/DateCalendar/useCalendarState.js

@@ -70,7 +70,6 @@ export const useCalendarState = params => {
     });
   }, [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: utils.isValid(value) ? value : now,

package/modern/DatePicker/DatePickerToolbar.js

@@ -26,10 +26,6 @@ const DatePickerToolbarRoot = styled(PickersToolbar, {
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
 })({});
-
-/**
- * @ignore - do not document.
- */
 const DatePickerToolbarTitle = styled(Typography, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
@@ -49,7 +45,7 @@ const DatePickerToolbarTitle = styled(Typography, {
  *
  * - [DatePickerToolbar API](https://mui.com/x/api/date-pickers/date-picker-toolbar/)
  */
-const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(inProps, ref) {
+export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiDatePickerToolbar'
@@ -133,5 +129,4 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    */
   view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
-} : void 0;
-export { DatePickerToolbar };
+} : void 0;

package/modern/DateTimePicker/DateTimePickerTabs.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { TimeIcon, DateRangeIcon } from '../icons';
 import { useLocaleText } from '../internals/hooks/useUtils';
 import { getDateTimePickerTabsUtilityClass } from './dateTimePickerTabsClasses';
@@ -68,7 +69,8 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     onViewChange,
     timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
     view,
-    hidden = typeof window === 'undefined' || window.innerHeight < 667
+    hidden = typeof window === 'undefined' || window.innerHeight < 667,
+    className
   } = props;
   const localeText = useLocaleText();
   const classes = useUtilityClasses(props);
@@ -83,7 +85,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,
-    className: classes.root,
+    className: clsx(className, classes.root),
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -108,6 +110,7 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * Date tab icon.
    * @default DateRange

package/modern/DigitalClock/DigitalClock.js

@@ -437,6 +437,7 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   view: PropTypes.oneOf(['hours']),
   /**
    * Available views.
+   * @default ['hours']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours']))
 } : void 0;

package/modern/MonthCalendar/MonthCalendar.js

@@ -111,7 +111,6 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     granularity: SECTION_TYPE_GRANULARITY.month
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -509,6 +509,7 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Available views.
+   * @default ['hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/modern/PickersLayout/pickersLayoutClasses.js

@@ -1,5 +1,6 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getPickersLayoutUtilityClass(slot) {
   return generateUtilityClass('MuiPickersLayout', slot);
 }
-export const pickersLayoutClasses = generateUtilityClasses('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'shortcuts']);
+export const pickersLayoutClasses = generateUtilityClasses('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'tabs', 'shortcuts']);

package/modern/PickersLayout/usePickerLayout.js

@@ -109,7 +109,8 @@ const usePickerLayout = props => {
   const Tabs = slots?.tabs;
   const tabs = view && Tabs ? /*#__PURE__*/_jsx(Tabs, _extends({
     view: view,
-    onViewChange: onViewChange
+    onViewChange: onViewChange,
+    className: classes.tabs
   }, slotProps?.tabs)) : null;
 
   // Shortcuts

package/modern/TimeClock/Clock.js

@@ -276,7 +276,6 @@ export function Clock(inProps) {
       // do nothing
     }
   };
-
   return /*#__PURE__*/_jsxs(ClockRoot, {
     className: clsx(className, classes.root),
     children: [/*#__PURE__*/_jsxs(ClockClock, {

package/modern/TimeClock/ClockPointer.js

@@ -85,7 +85,6 @@ export function ClockPointer(inProps) {
     if (type === 'hours' && viewValue > 12) {
       angle -= 360; // round up angle to max 360 degrees
     }
-
     return {
       height: Math.round((isInner ? 0.26 : 0.4) * CLOCK_WIDTH),
       transform: `rotateZ(${angle}deg)`

package/modern/TimeClock/TimeClock.js

@@ -492,6 +492,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
    * Available views.
+   * @default ['hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/modern/YearCalendar/YearCalendar.js

@@ -116,7 +116,6 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     granularity: SECTION_TYPE_GRANULARITY.year
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.19.0
+ * @mui/x-date-pickers v6.19.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/hooks/useClockReferenceDate.js

@@ -21,6 +21,5 @@ export const useClockReferenceDate = ({
   // We only want to compute the reference date on mount.
   [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   return value ?? referenceDate;
 };

package/modern/internals/hooks/useField/useField.utils.js

@@ -125,7 +125,6 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
       if (delta < 0 || isStart) {
         newSectionValueNumber += step - (step + newSectionValueNumber) % step; // for JS -3 % 5 = -3 (should be 2)
       }
-
       if (delta > 0 || isEnd) {
         newSectionValueNumber -= newSectionValueNumber % step;
       }
@@ -401,7 +400,6 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
   const isTokenStartRegExp = new RegExp(`^(${Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length) // Sort to put longest word first
   .join('|')})`, 'g') // used to get access to lastIndex state
   ;
-
   let currentTokenValue = '';
   for (let i = 0; i < expandedFormat.length; i += 1) {
     const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);