@mui/x-date-pickers 7.0.0-alpha.8 → 7.0.0-beta.0

package/modern/locales/plPL.js

@@ -10,12 +10,17 @@ const plPLPickers = {
   previousMonth: 'Poprzedni miesiąc',
   nextMonth: 'Następny miesiąc',
   // View navigation
-  openPreviousView: 'otwórz poprzedni widok',
-  openNextView: 'otwórz następny widok',
+  openPreviousView: 'Otwórz poprzedni widok',
+  openNextView: 'Otwórz następny widok',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'otwarty jest widok roku, przełącz na widok kalendarza' : 'otwarty jest widok kalendarza, przełącz na widok roku',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Początek',
   end: 'Koniec',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'Anuluj',
   clearButtonLabel: 'Wyczyść',

package/modern/locales/ptBR.js

@@ -13,9 +13,14 @@ const ptBRPickers = {
   openPreviousView: 'Abrir próxima seleção',
   openNextView: 'Abrir seleção anterior',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'Seleção de ano está aberta, alternando para seleção de calendário' : 'Seleção de calendários está aberta, alternando para seleção de ano',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Início',
   end: 'Fim',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'Cancelar',
   clearButtonLabel: 'Limpar',

package/modern/locales/roRO.js

@@ -14,9 +14,14 @@ const roROPickers = {
   openPreviousView: 'Deschideți vizualizarea anterioară',
   openNextView: 'Deschideți vizualizarea următoare',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'Vizualizarea anuală este deschisă, comutați la vizualizarea calendarului' : 'Vizualizarea calendarului este deschisă, comutați la vizualizarea anuală',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Început',
   end: 'Sfârșit',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'Anulare',
   clearButtonLabel: 'Ștergere',

package/modern/locales/ruRU.js

@@ -11,12 +11,17 @@ const ruRUPickers = {
   previousMonth: 'Предыдущий месяц',
   nextMonth: 'Следующий месяц',
   // View navigation
-  openPreviousView: 'открыть предыдущий вид',
-  openNextView: 'открыть следующий вид',
+  openPreviousView: 'Открыть предыдущий вид',
+  openNextView: 'Открыть следующий вид',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'открыт годовой вид, переключить на календарный вид' : 'открыт календарный вид, переключить на годовой вид',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Начало',
   end: 'Конец',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'Отмена',
   clearButtonLabel: 'Очистить',

package/modern/locales/skSK.js

@@ -11,12 +11,17 @@ const skSKPickers = {
   previousMonth: 'Ďalší mesiac',
   nextMonth: 'Predchádzajúci mesiac',
   // View navigation
-  openPreviousView: 'otvoriť predchádzajúce zobrazenie',
-  openNextView: 'otvoriť ďalšie zobrazenie',
+  openPreviousView: 'Otvoriť predchádzajúce zobrazenie',
+  openNextView: 'Otvoriť ďalšie zobrazenie',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'ročné zobrazenie otvorené, prepnite do zobrazenia kalendára' : 'zobrazenie kalendára otvorené, prepnite do zobrazenia roka',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Začiatok',
   end: 'Koniec',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'Zrušiť',
   clearButtonLabel: 'Vymazať',

package/modern/locales/svSE.js

@@ -10,12 +10,17 @@ const svSEPickers = {
   previousMonth: 'Föregående månad',
   nextMonth: 'Nästa månad',
   // View navigation
-  openPreviousView: 'öppna föregående vy',
-  openNextView: 'öppna nästa vy',
+  openPreviousView: 'Öppna föregående vy',
+  openNextView: 'Öppna nästa vy',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'årsvyn är öppen, byt till kalendervy' : 'kalendervyn är öppen, byt till årsvy',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Start',
   end: 'Slut',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'Avbryt',
   clearButtonLabel: 'Rensa',

package/modern/locales/trTR.js

@@ -10,12 +10,17 @@ const trTRPickers = {
   previousMonth: 'Önceki ay',
   nextMonth: 'Sonraki ay',
   // View navigation
-  openPreviousView: 'sonraki görünüm',
-  openNextView: 'önceki görünüm',
+  openPreviousView: 'Sonraki görünüm',
+  openNextView: 'Önceki görünüm',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'yıl görünümü açık, takvim görünümüne geç' : 'takvim görünümü açık, yıl görünümüne geç',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Başlangıç',
   end: 'Bitiş',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'iptal',
   clearButtonLabel: 'Temizle',

package/modern/locales/ukUA.js

@@ -10,12 +10,17 @@ const ukUAPickers = {
   previousMonth: 'Попередній місяць',
   nextMonth: 'Наступний місяць',
   // View navigation
-  openPreviousView: 'відкрити попередній вигляд',
-  openNextView: 'відкрити наступний вигляд',
+  openPreviousView: 'Відкрити попередній вигляд',
+  openNextView: 'Відкрити наступний вигляд',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'річний вигляд відкрито, перейти до календарного вигляду' : 'календарний вигляд відкрито, перейти до річного вигляду',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Початок',
   end: 'Кінець',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'Відміна',
   clearButtonLabel: 'Очистити',

package/modern/locales/urPK.js

@@ -13,9 +13,14 @@ const urPKPickers = {
   openPreviousView: 'پچھلا ویو کھولیں',
   openNextView: 'اگلا ویو کھولیں',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'سال والا ویو کھلا ہے۔ کیلنڈر والا ویو کھولیں' : 'کیلنڈر والا ویو کھلا ہے۔ سال والا ویو کھولیں',
-  // DateRange placeholders
+  // DateRange labels
   start: 'شروع',
   end: 'ختم',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'کینسل',
   clearButtonLabel: 'کلئیر',

package/modern/locales/viVN.js

@@ -10,12 +10,17 @@ const viVNPickers = {
   previousMonth: 'Tháng trước',
   nextMonth: 'Tháng sau',
   // View navigation
-  openPreviousView: 'mở xem trước',
-  openNextView: 'mở xem sau',
+  openPreviousView: 'Mở xem trước',
+  openNextView: 'Mở xem sau',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'đang mở xem năm, chuyển sang xem lịch' : 'đang mở xem lịch, chuyển sang xem năm',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Bắt đầu',
   end: 'Kết thúc',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'Hủy',
   clearButtonLabel: 'Xóa',

package/modern/locales/zhCN.js

@@ -13,9 +13,14 @@ const zhCNPickers = {
   openPreviousView: '前一个视图',
   openNextView: '下一个视图',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? '年视图已打开，切换为日历视图' : '日历视图已打开，切换为年视图',
-  // DateRange placeholders
+  // DateRange labels
   start: '开始',
   end: '结束',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: '取消',
   clearButtonLabel: '清除',

package/modern/locales/zhHK.js

@@ -13,9 +13,14 @@ const zhHKPickers = {
   openPreviousView: '前一個檢視表',
   openNextView: '下一個檢視表',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? '年份檢視表已打開，切換以檢視日曆' : '日曆檢視表已打開，切換以檢視年份',
-  // DateRange placeholders
+  // DateRange labels
   start: '開始',
   end: '結束',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: '取消',
   clearButtonLabel: '清除',

package/node/AdapterLuxon/AdapterLuxon.js

@@ -345,10 +345,7 @@ class AdapterLuxon {
       return value.startOf('month');
     };
     this.startOfWeek = value => {
-      return value.startOf('week',
-      // TODO: remove when `@types/luxon` add support for the parameter.
-      // @ts-ignore
-      {
+      return value.startOf('week', {
         useLocaleWeeks: true
       });
     };
@@ -362,10 +359,7 @@ class AdapterLuxon {
       return value.endOf('month');
     };
     this.endOfWeek = value => {
-      return value.endOf('week',
-      // TODO: remove when `@types/luxon` add support for the parameter.
-      // @ts-ignore
-      {
+      return value.endOf('week', {
         useLocaleWeeks: true
       });
     };
@@ -487,9 +481,7 @@ class AdapterLuxon {
       return weeks;
     };
     this.getWeekNumber = value => {
-      // TODO: remove when `@types/luxon` add support for the parameter.
-      // @ts-ignore
-      return value.localeWeekNumber ?? value.weekNumber;
+      return value.localWeekNumber ?? value.weekNumber;
     };
     this.getYearRange = ([start, end]) => {
       const startDate = this.startOfYear(start);

package/node/DatePicker/DatePicker.js

@@ -64,9 +64,6 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/node/DatePicker/DatePickerToolbar.js

@@ -102,9 +102,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
-  /**
-   * className applied to the root component.
-   */
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   /**

package/node/DateTimePicker/DateTimePicker.js

@@ -74,9 +74,6 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/node/DateTimePicker/DateTimePickerTabs.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DateTimePickerTabs = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
 var _Tabs = _interopRequireWildcard(require("@mui/material/Tabs"));
 var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _icons = require("../icons");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dateTimePickerTabsClasses = require("./dateTimePickerTabsClasses");
@@ -37,7 +38,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _dateTimePickerTabsClasses.getDateTimePickerTabsUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _dateTimePickerTabsClasses.getDateTimePickerTabsUtilityClass, classes);
 };
 const DateTimePickerTabsRoot = (0, _styles.styled)(_Tabs.default, {
   name: 'MuiDateTimePickerTabs',
@@ -76,7 +77,8 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
     onViewChange,
     timeIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.TimeIcon, {}),
     view,
-    hidden = typeof window === 'undefined' || window.innerHeight < 667
+    hidden = typeof window === 'undefined' || window.innerHeight < 667,
+    className
   } = props;
   const localeText = (0, _useUtils.useLocaleText)();
   const classes = useUtilityClasses(props);
@@ -91,7 +93,7 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,
-    className: classes.root,
+    className: (0, _clsx.default)(className, classes.root),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -116,6 +118,7 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
+  className: _propTypes.default.string,
   /**
    * Date tab icon.
    * @default DateRange
@@ -127,7 +130,7 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    */
   hidden: _propTypes.default.bool,
   /**
-   * Callback called when a tab is clicked
+   * Callback called when a tab is clicked.
    * @template TView
    * @param {TView} view The view to open
    */

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -10,7 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _PickersToolbarText = require("../internals/components/PickersToolbarText");
 var _PickersToolbar = require("../internals/components/PickersToolbar");
 var _PickersToolbarButton = require("../internals/components/PickersToolbarButton");
@@ -19,8 +20,10 @@ var _dateTimePickerToolbarClasses = require("./dateTimePickerToolbarClasses");
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _dimensions = require("../internals/constants/dimensions");
 var _dateUtils = require("../internals/utils/date-utils");
+var _pickersToolbarTextClasses = require("../internals/components/pickersToolbarTextClasses");
+var _internals = require("../internals");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant"];
+const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant", "toolbarTitle", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -38,7 +41,7 @@ const useUtilityClasses = ownerState => {
     ampmSelection: ['ampmSelection', isLandscape && 'ampmLandscape'],
     ampmLabel: ['ampmLabel']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _dateTimePickerToolbarClasses.getDateTimePickerToolbarUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _dateTimePickerToolbarClasses.getDateTimePickerToolbarUtilityClass, classes);
 };
 const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToolbar, {
   name: 'MuiDateTimePickerToolbar',
@@ -47,13 +50,18 @@ const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToo
 })(({
   theme,
   ownerState
-}) => ({
+}) => (0, _extends2.default)({
   paddingLeft: ownerState.toolbarVariant === 'desktop' && !ownerState.isLandscape ? 24 : 16,
   paddingRight: ownerState.toolbarVariant === 'desktop' && !ownerState.isLandscape ? 0 : 16,
   borderBottom: ownerState.toolbarVariant === 'desktop' ? `1px solid ${(theme.vars || theme).palette.divider}` : undefined,
   borderRight: ownerState.toolbarVariant === 'desktop' && ownerState.isLandscape ? `1px solid ${(theme.vars || theme).palette.divider}` : undefined,
   justifyContent: 'space-around',
   position: 'relative'
+}, ownerState.toolbarVariant === 'desktop' && {
+  [`& .${_internals.pickersToolbarClasses.content} .${_pickersToolbarTextClasses.pickersToolbarTextClasses.selected}`]: {
+    color: (theme.vars || theme).palette.primary.main,
+    fontWeight: theme.typography.fontWeightBold
+  }
 }));
 DateTimePickerToolbarRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -190,7 +198,9 @@ function DateTimePickerToolbar(inProps) {
       views,
       disabled,
       readOnly,
-      toolbarVariant = 'mobile'
+      toolbarVariant = 'mobile',
+      toolbarTitle: inToolbarTitle,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = props;
@@ -206,6 +216,7 @@ function DateTimePickerToolbar(inProps) {
   const classes = useUtilityClasses((0, _extends2.default)({}, ownerState, {
     theme
   }));
+  const toolbarTitle = inToolbarTitle ?? localeText.dateTimePickerToolbarTitle;
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
   const dateText = React.useMemo(() => {
     if (!value) {
@@ -217,9 +228,9 @@ function DateTimePickerToolbar(inProps) {
     return utils.format(value, 'shortDate');
   }, [value, toolbarFormat, toolbarPlaceholder, utils]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarRoot, (0, _extends2.default)({
-    toolbarTitle: localeText.dateTimePickerToolbarTitle,
     isLandscape: isLandscape,
-    className: classes.root
+    className: (0, _clsx.default)(classes.root, className),
+    toolbarTitle: toolbarTitle
   }, other, {
     ownerState: ownerState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarDateContainer, {
@@ -244,14 +255,14 @@ function DateTimePickerToolbar(inProps) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarTimeDigitsContainer, {
         className: classes.timeDigitsContainer,
         ownerState: ownerState,
-        children: [views.includes('hours') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
-          variant: isDesktop ? 'h5' : 'h3',
-          width: isDesktop && !isLandscape ? _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
-          onClick: () => onViewChange('hours'),
-          selected: view === 'hours',
-          value: value ? formatHours(value) : '--'
-        }), views.includes('minutes') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
+        children: [views.includes('hours') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+            variant: isDesktop ? 'h5' : 'h3',
+            width: isDesktop && !isLandscape ? _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
+            onClick: () => onViewChange('hours'),
+            selected: view === 'hours',
+            value: value ? formatHours(value) : '--'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
             variant: isDesktop ? 'h5' : 'h3',
             value: ":",
             className: classes.separator,
@@ -260,8 +271,9 @@ function DateTimePickerToolbar(inProps) {
             variant: isDesktop ? 'h5' : 'h3',
             width: isDesktop && !isLandscape ? _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH : undefined,
             onClick: () => onViewChange('minutes'),
-            selected: view === 'minutes',
-            value: value ? utils.format(value, 'minutes') : '--'
+            selected: view === 'minutes' || !views.includes('minutes') && view === 'hours',
+            value: value ? utils.format(value, 'minutes') : '--',
+            disabled: !views.includes('minutes')
           })]
         }), views.includes('seconds') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
@@ -316,9 +328,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
-  /**
-   * className applied to the root component.
-   */
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   /**
@@ -346,11 +355,15 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: _propTypes.default.node,
+  /**
+   * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
+   */
+  toolbarTitle: _propTypes.default.node,
   toolbarVariant: _propTypes.default.oneOf(['desktop', 'mobile']),
   value: _propTypes.default.any,
   /**
    * Currently visible picker view.
    */
-  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired,
+  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
 } : void 0;

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -85,9 +85,6 @@ DesktopDatePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -133,9 +133,6 @@ DesktopDateTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -116,9 +116,6 @@ DesktopTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/node/MobileDatePicker/MobileDatePicker.js

@@ -82,9 +82,6 @@ MobileDatePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -102,9 +102,6 @@ MobileDateTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/node/MobileTimePicker/MobileTimePicker.js

@@ -95,9 +95,6 @@ MobileTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/node/MonthCalendar/MonthCalendar.js

@@ -249,9 +249,6 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
-  /**
-   * className applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * The default selected value.

package/node/PickersCalendarHeader/PickersCalendarHeader.js

@@ -238,9 +238,6 @@ process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
-  /**
-   * className applied to the root element.
-   */
   className: _propTypes.default.string,
   currentMonth: _propTypes.default.any.isRequired,
   disabled: _propTypes.default.bool,

package/node/PickersLayout/pickersLayoutClasses.js

@@ -1,12 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPickersLayoutUtilityClass = getPickersLayoutUtilityClass;
 exports.pickersLayoutClasses = void 0;
-var _utils = require("@mui/utils");
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getPickersLayoutUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiPickersLayout', slot);
+  return (0, _generateUtilityClass.default)('MuiPickersLayout', slot);
 }
-const pickersLayoutClasses = exports.pickersLayoutClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'shortcuts']);
+const pickersLayoutClasses = exports.pickersLayoutClasses = (0, _generateUtilityClasses.default)('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'tabs', 'shortcuts']);

package/node/PickersLayout/usePickerLayout.js

@@ -113,7 +113,8 @@ const usePickerLayout = props => {
   const Tabs = slots?.tabs;
   const tabs = view && Tabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs, (0, _extends2.default)({
     view: view,
-    onViewChange: onViewChange
+    onViewChange: onViewChange,
+    className: classes.tabs
   }, slotProps?.tabs)) : null;
 
   // Shortcuts