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

package/modern/locales/kzKZ.js

@@ -14,9 +14,14 @@ const kzKZPickers = {
   openPreviousView: 'Алдыңғы көріністі ашу',
   openNextView: 'Келесі көріністі ашу',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'жылдық көріністі ашу, күнтізбе көрінісіне ауысу' : 'күнтізбе көрінісін ашу, жылдық көрінісіне ауысу',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Бастау',
   end: 'Cоңы',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'Бас тарту',
   clearButtonLabel: 'Тазарту',

package/modern/locales/mk.js

@@ -10,9 +10,14 @@ const mkPickers = {
   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/nbNO.js

@@ -10,12 +10,17 @@ const nbNOPickers = {
   previousMonth: 'Forrige måned',
   nextMonth: 'Neste måned',
   // View navigation
-  openPreviousView: 'åpne forrige visning',
-  openNextView: 'åpne neste visning',
+  openPreviousView: 'Åpne forrige visning',
+  openNextView: 'Åpne neste visning',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'årsvisning er åpen, bytt til kalendervisning' : 'kalendervisning er åpen, bytt til årsvisning',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Start',
   end: 'Slutt',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'Avbryt',
   clearButtonLabel: 'Fjern',

package/modern/locales/nlNL.js

@@ -10,12 +10,17 @@ const nlNLPickers = {
   previousMonth: 'Vorige maand',
   nextMonth: 'Volgende maand',
   // View navigation
-  openPreviousView: 'open vorige view',
-  openNextView: 'open volgende view',
+  openPreviousView: 'Open vorige view',
+  openNextView: 'Open volgende view',
   calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'jaarweergave is geopend, schakel over naar kalenderweergave' : 'kalenderweergave is geopend, switch naar jaarweergave',
-  // DateRange placeholders
+  // DateRange labels
   start: 'Start',
   end: 'Einde',
+  // startDate: 'Start date',
+  // startTime: 'Start time',
+  // endDate: 'End date',
+  // endTime: 'End time',
+
   // Action bar
   cancelButtonLabel: 'Annuleren',
   clearButtonLabel: 'Resetten',

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/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, {
@@ -343,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/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

package/node/TimeClock/TimeClock.js

@@ -226,7 +226,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
         {
           const handleHoursChange = (hourValue, isFinish) => {
             const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(hourValue, meridiemMode, ampm);
-            setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish);
+            setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
           };
           return {
             onChange: handleHoursChange,
@@ -246,7 +246,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
         {
           const minutesValue = utils.getMinutes(valueOrReferenceDate);
           const handleMinutesChange = (minuteValue, isFinish) => {
-            setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minuteValue), isFinish);
+            setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minuteValue), isFinish, 'minutes');
           };
           return {
             viewValue: minutesValue,
@@ -265,7 +265,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
         {
           const secondsValue = utils.getSeconds(valueOrReferenceDate);
           const handleSecondsChange = (secondValue, isFinish) => {
-            setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, secondValue), isFinish);
+            setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, secondValue), isFinish, 'seconds');
           };
           return {
             viewValue: secondsValue,

package/node/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -146,23 +146,23 @@ const renderDesktopDateTimeView = ({
           view: 'hours',
           views: ['hours'],
           focusedView: focusedView && (0, _timeUtils.isInternalTimeView)(focusedView) ? 'hours' : null,
-          sx: (0, _extends2.default)({
+          sx: [{
             width: 'auto',
             [`&.${_DigitalClock.digitalClockClasses.root}`]: {
               maxHeight: _dimensions.VIEW_HEIGHT
             }
-          }, Array.isArray(sx) ? sx : [sx])
+          }, ...(Array.isArray(sx) ? sx : [sx])]
         })) : (0, _timeViewRenderers.renderMultiSectionDigitalClockTimeView)((0, _extends2.default)({}, commonTimeProps, {
           view: (0, _timeUtils.isInternalTimeView)(view) ? view : 'hours',
           views: views.filter(_timeUtils.isInternalTimeView),
           focusedView: focusedView && (0, _timeUtils.isInternalTimeView)(focusedView) ? focusedView : null,
-          sx: (0, _extends2.default)({
+          sx: [{
             borderBottom: 0,
             width: 'auto',
             [`.${_MultiSectionDigitalClock.multiSectionDigitalClockSectionClasses.root}`]: {
               maxHeight: '100%'
             }
-          }, Array.isArray(sx) ? sx : [sx])
+          }, ...(Array.isArray(sx) ? sx : [sx])]
         }))]
       })]
     }), isActionBarVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {})]

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.9
+ * @mui/x-date-pickers v7.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/hooks/usePicker/usePicker.js

@@ -17,7 +17,8 @@ const usePicker = ({
   inputRef,
   additionalViewProps,
   validator,
-  autoFocusView
+  autoFocusView,
+  rendererInterceptor
 }) => {
   if (process.env.NODE_ENV !== 'production') {
     if (props.renderInput != null) {
@@ -36,7 +37,8 @@ const usePicker = ({
     inputRef,
     additionalViewProps,
     autoFocusView,
-    propsFromPickerValue: pickerValueResponse.viewProps
+    propsFromPickerValue: pickerValueResponse.viewProps,
+    rendererInterceptor
   });
   const pickerLayoutResponse = (0, _usePickerLayoutProps.usePickerLayoutProps)({
     props,