mui · LukasTy · Feb 20, 2023 · Feb 14, 2023 · Feb 14, 2023
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -11,6 +11,7 @@ import {
  DateTimePickerToolbarClasses,
  getDateTimePickerToolbarUtilityClass,
 } from './dateTimePickerToolbarClasses';
+import { resolveViewTypeFromView } from './shared';
 
 export interface DateTimePickerToolbarProps<TDate> extends BaseToolbarProps<TDate, TDate | null> {
  classes?: Partial<DateTimePickerToolbarClasses>;
@@ -122,6 +123,7 @@ export function DateTimePickerToolbar<TDate extends unknown>(
  isMobileKeyboardViewOpen={isMobileKeyboardViewOpen}
  toggleMobileKeyboardView={toggleMobileKeyboardView}
  className={classes.root}
+ viewType={resolveViewTypeFromView(openView)}
  {...other}
  isLandscape={false}
  ownerState={ownerState}

diff --git a/packages/x-date-pickers/src/DateTimePicker/shared.ts b/packages/x-date-pickers/src/DateTimePicker/shared.ts
@@ -7,7 +7,7 @@ import { DateTimeValidationError } from '../internals/hooks/validation/useDateTi
 import { ValidationProps } from '../internals/hooks/validation/useValidation';
 import { BasePickerProps } from '../internals/models/props/basePickerProps';
 import { ExportedDateInputProps } from '../internals/components/PureDateInput';
-import { CalendarOrClockPickerView } from '../internals/models';
+import { CalendarOrClockPickerView, ViewType } from '../internals/models';
 import { PickerStateValueManager } from '../internals/hooks/usePickerState';
 import { parsePickerInputValue, parseNonNullablePickerDate } from '../internals/utils/date-utils';
 import { BaseToolbarProps } from '../internals/models/props/baseToolbarProps';
@@ -146,3 +146,14 @@ export const dateTimePickerValueManager: PickerStateValueManager<any, any, any>
  parseInput: parsePickerInputValue,
  areValuesEqual: (utils, a, b) => utils.isEqual(a, b),
 };
+
+export const resolveViewTypeFromView = (view: CalendarOrClockPickerView): ViewType => {
+ switch (view) {
+ case 'year':
+ case 'month':
+ case 'day':
+ return 'calendar';
+ default:
+ return 'clock';
+ }
+};
diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
@@ -13,14 +13,15 @@ import {
  pickersToolbarClasses,
  PickersToolbarClasses,
 } from './pickersToolbarClasses';
+import { ViewType } from '../models';
 
 export interface PickersToolbarProps<TDate, TValue>
  extends Pick<
  BaseToolbarProps<TDate, TValue>,
  'getMobileKeyboardInputViewButtonText' | 'isMobileKeyboardViewOpen' | 'toggleMobileKeyboardView'
  > {
  className?: string;
- viewType?: 'calendar' | 'clock';
+ viewType?: ViewType;
  isLandscape: boolean;
  landscapeDirection?: 'row' | 'column';
  toolbarTitle: React.ReactNode;
@@ -83,7 +84,7 @@ const PickersToolbarPenIconButton = styled(IconButton, {
  ownerState: PickersToolbarProps<any, any>;
 }>({});
 
-const getViewTypeIcon = (viewType: 'calendar' | 'clock') =>
+const getViewTypeIcon = (viewType: ViewType) =>
  viewType === 'clock' ? <Clock color="inherit" /> : <Calendar color="inherit" />;
 
 type PickersToolbarComponent = (<TDate, TValue>(

diff --git a/packages/x-date-pickers/src/internals/models/props/baseToolbarProps.ts b/packages/x-date-pickers/src/internals/models/props/baseToolbarProps.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CalendarOrClockPickerView } from '../views';
+import { CalendarOrClockPickerView, ViewType } from '../views';
 import type { PickerOnChangeFn } from '../../hooks/useViews';
 import type { ExportedCalendarPickerProps } from '../../../CalendarPicker/CalendarPicker';
 import type { ExportedClockPickerProps } from '../../../ClockPicker/ClockPicker';
@@ -15,12 +15,12 @@ export interface BaseToolbarProps<TDate, TValue>
  * Text for aria label of the button switching between input and interactive view.
  * @deprecated Use the translation key `inputModeToggleButtonAriaLabel` instead, see https://mui.com/x/react-date-pickers/localization
  * @param {boolean} isKeyboardInputOpen Indicates if the interface is the keyboard input.
- * @param {'calendar' | 'clock' } viewType Indicates if the interface is about a date or a time.
+ * @param {ViewType} viewType Indicates if the interface is about a date or a time.
  * @returns {string} The arial label
  */
  getMobileKeyboardInputViewButtonText?: (
  isKeyboardInputOpen: boolean,
- viewType: 'calendar' | 'clock',
+ viewType: ViewType,
  ) => string;
  isLandscape: boolean;
  onChange: PickerOnChangeFn<TDate>;

diff --git a/packages/x-date-pickers/src/internals/models/views.ts b/packages/x-date-pickers/src/internals/models/views.ts
@@ -3,3 +3,5 @@ export type CalendarPickerView = 'year' | 'day' | 'month';
 export type ClockPickerView = 'hours' | 'minutes' | 'seconds';
 
 export type CalendarOrClockPickerView = CalendarPickerView | ClockPickerView;
+
+export type ViewType = 'calendar' | 'clock';
diff --git a/packages/x-date-pickers/src/locales/csCZ.ts b/packages/x-date-pickers/src/locales/csCZ.ts
@@ -26,7 +26,7 @@ const csCZPickers: PickersLocaleText<any> = {
  view === 'year'
  ? 'roční zobrazení otevřeno, přepněte do zobrazení kalendáře'
  : 'zobrazení kalendáře otevřeno, přepněte do zobrazení roku',
- inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') =>
+ inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) =>
  isKeyboardInputOpen
  ? `Zobrazení pro zadávání textu je otevřené, přepněte do zobrazení ${pickerViews[viewType]}`
  : `Zobrazení ${pickerViews[viewType]} je otevřené, přepněte do zobrazení textového pole`,

diff --git a/packages/x-date-pickers/src/locales/deDE.ts b/packages/x-date-pickers/src/locales/deDE.ts
@@ -1,6 +1,5 @@
 import { PickersLocaleText } from './utils/pickersLocaleTextApi';
 import { getPickersLocalization } from './utils/getPickersLocalization';
-import { CalendarPickerView } from '../internals/models';
 
 // maps ClockPickerView to its translation
 const clockViews = {
@@ -15,19 +14,19 @@ const pickerViews = {
  clock: 'Uhransicht',
 };
 
-const deDEPickers: Partial<PickersLocaleText<any>> = {
+const deDEPickers: PickersLocaleText<any> = {
  // Calendar navigation
  previousMonth: 'Letzter Monat',
  nextMonth: 'Nächster Monat',
 
  // View navigation
  openPreviousView: 'Letzte Ansicht öffnen',
  openNextView: 'Nächste Ansicht öffnen',
- calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) =>
+ calendarViewSwitchingButtonAriaLabel: (view) =>
  view === 'year'
  ? 'Jahresansicht ist geöffnet, zur Kalenderansicht wechseln'
  : 'Kalenderansicht ist geöffnet, zur Jahresansicht wechseln',
- inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') =>
+ inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) =>
  isKeyboardInputOpen
  ? `Texteingabeansicht ist geöffnet, zur ${pickerViews[viewType]} wechseln`
  : `${pickerViews[viewType]} ist geöffnet, zur Texteingabeansicht wechseln`,

diff --git a/packages/x-date-pickers/src/locales/enUS.ts b/packages/x-date-pickers/src/locales/enUS.ts
@@ -1,6 +1,5 @@
 import { PickersLocaleText } from './utils/pickersLocaleTextApi';
 import { getPickersLocalization } from './utils/getPickersLocalization';
-import { CalendarPickerView } from '../internals/models';
 
 // This object is not Partial<PickersLocaleText> because it is the default values
 
@@ -12,11 +11,11 @@ const enUSPickers: PickersLocaleText<any> = {
  // View navigation
  openPreviousView: 'open previous view',
  openNextView: 'open next view',
- calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) =>
+ calendarViewSwitchingButtonAriaLabel: (view) =>
  view === 'year'
  ? 'year view is open, switch to calendar view'
  : 'calendar view is open, switch to year view',
- inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') =>
+ inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) =>
  isKeyboardInputOpen
  ? `text input view is open, go to ${viewType} view`
  : `${viewType} view is open, go to text input view`,

diff --git a/packages/x-date-pickers/src/locales/esES.ts b/packages/x-date-pickers/src/locales/esES.ts
@@ -1,26 +1,25 @@
 import { PickersLocaleText } from './utils/pickersLocaleTextApi';
 import { getPickersLocalization } from './utils/getPickersLocalization';
-import { CalendarPickerView } from '../internals/models';
 
 const views = {
  hours: 'las horas',
  minutes: 'los minutos',
  seconds: 'los segundos',
 };
 
-const esESPickers: Partial<PickersLocaleText<any>> = {
+const esESPickers: PickersLocaleText<any> = {
  // Calendar navigation
  previousMonth: 'Último mes',
  nextMonth: 'Próximo mes',
 
  // View navigation
  openPreviousView: 'abrir la última vista',
  openNextView: 'abrir la siguiente vista',
- calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) =>
+ calendarViewSwitchingButtonAriaLabel: (view) =>
  view === 'year'
  ? 'la vista del año está abierta, cambie a la vista de calendario'
  : 'la vista de calendario está abierta, cambie a la vista del año',
- inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') =>
+ inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) =>
  isKeyboardInputOpen
  ? `la vista de entrada de texto está abierta, ir a la vista ${viewType}`
  : `la vista ${viewType} está abierta, ir a la vista de entrada de texto`,

diff --git a/packages/x-date-pickers/src/locales/faIR.ts b/packages/x-date-pickers/src/locales/faIR.ts
@@ -1,20 +1,19 @@
 import { PickersLocaleText } from './utils/pickersLocaleTextApi';
 import { getPickersLocalization } from './utils/getPickersLocalization';
-import { CalendarPickerView } from '../internals/models';
 
-const faIRPickers: Partial<PickersLocaleText<any>> = {
+const faIRPickers: PickersLocaleText<any> = {
  // Calendar navigation
  previousMonth: 'ماه گذشته',
  nextMonth: 'ماه آینده',
 
  // View navigation
  openPreviousView: 'نمای قبلی',
  openNextView: 'نمای بعدی',
- calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) =>
+ calendarViewSwitchingButtonAriaLabel: (view) =>
  view === 'year'
  ? 'نمای سال باز است، رفتن به نمای تقویم'
  : 'نمای تقویم باز است، رفتن به نمای سال',
- inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') =>
+ inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) =>
  isKeyboardInputOpen
  ? `نمای ورودی متن باز است، رفتن به نمای ${viewType}`
  : `نمای ${viewType} باز است، رفتن به نمای ورودی متن`,

diff --git a/packages/x-date-pickers/src/locales/fiFI.ts b/packages/x-date-pickers/src/locales/fiFI.ts
@@ -1,6 +1,5 @@
 import { PickersLocaleText } from './utils/pickersLocaleTextApi';
 import { getPickersLocalization } from './utils/getPickersLocalization';
-import { CalendarPickerView } from '../internals/models';
 
 const views = {
  hours: 'tunnit',
@@ -13,19 +12,19 @@ const viewTranslation = {
  clock: 'kello',
 };
 
-const fiFIPickers: Partial<PickersLocaleText<any>> = {
+const fiFIPickers: PickersLocaleText<any> = {
  // Calendar navigation
  previousMonth: 'Edellinen kuukausi',
  nextMonth: 'Seuraava kuukausi',
 
  // View navigation
  openPreviousView: 'avaa edellinen kuukausi',
  openNextView: 'avaa seuraava kuukausi',
- calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) =>
+ calendarViewSwitchingButtonAriaLabel: (view) =>
  view === 'year'
  ? 'vuosinäkymä on auki, vaihda kalenterinäkymään'
  : 'kalenterinäkymä on auki, vaihda vuosinäkymään',
- inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') =>
+ inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) =>
  isKeyboardInputOpen
  ? `tekstikenttä on auki, mene ${viewTranslation[viewType]}näkymään`
  : `${viewTranslation[viewType]}näkymä on auki, mene tekstikenttään`,

diff --git a/packages/x-date-pickers/src/locales/frFR.ts b/packages/x-date-pickers/src/locales/frFR.ts
@@ -1,6 +1,5 @@
 import { PickersLocaleText } from './utils/pickersLocaleTextApi';
 import { getPickersLocalization } from './utils/getPickersLocalization';
-import { CalendarPickerView } from '../internals/models';
 
 const views = {
  hours: 'heures',
@@ -21,11 +20,11 @@ const frFRPickers: Partial<PickersLocaleText<any>> = {
  // View navigation
  openPreviousView: 'Ouvrir la vue précédente',
  openNextView: 'Ouvrir la vue suivante',
- calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) =>
+ calendarViewSwitchingButtonAriaLabel: (view) =>
  view === 'year'
  ? 'La vue année est ouverte, ouvrir la vue calendrier'
  : 'La vue calendrier est ouverte, ouvrir la vue année',
- inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') =>
+ inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) =>
  isKeyboardInputOpen
  ? `passer du champ text au ${viewTranslation[viewType]}`
  : `passer du ${viewTranslation[viewType]} au champ text`,

diff --git a/packages/x-date-pickers/src/locales/isIS.ts b/packages/x-date-pickers/src/locales/isIS.ts
@@ -1,23 +1,19 @@
 import { PickersLocaleText } from './utils/pickersLocaleTextApi';
 import { getPickersLocalization } from './utils/getPickersLocalization';
-import { CalendarPickerView } from '../internals/models';
 
-const isISPickers: Partial<PickersLocaleText<any>> = {
+const isISPickers: PickersLocaleText<any> = {
  // Calendar navigation
  previousMonth: 'Fyrri mánuður',
  nextMonth: 'Næsti mánuður',
 
  // View navigation
  openPreviousView: 'opna fyrri skoðun',
  openNextView: 'opna næstu skoðun',
- calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) =>
+ calendarViewSwitchingButtonAriaLabel: (view) =>
  view === 'year'
  ? 'ársskoðun er opin, skipta yfir í dagatalsskoðun'
  : 'dagatalsskoðun er opin, skipta yfir í ársskoðun',
- inputModeToggleButtonAriaLabel: (
- isKeyboardInputOpen: boolean,
- viewType: 'calendar' | 'clock',
- ) => {
+ inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) => {
  const viewTypeTranslated = viewType === 'calendar' ? 'dagatals' : 'klukku';
  return isKeyboardInputOpen
  ? `textainnsláttur er opinn, fara í ${viewTypeTranslated}skoðun`

diff --git a/packages/x-date-pickers/src/locales/itIT.ts b/packages/x-date-pickers/src/locales/itIT.ts
@@ -1,26 +1,25 @@
 import { PickersLocaleText } from './utils/pickersLocaleTextApi';
 import { getPickersLocalization } from './utils/getPickersLocalization';
-import { CalendarPickerView } from '../internals/models';
 
 const views = {
  hours: 'le ore',
  minutes: 'i minuti',
  seconds: 'i secondi',
 };
 
-const itITPickers: Partial<PickersLocaleText<any>> = {
+const itITPickers: PickersLocaleText<any> = {
  // Calendar navigation
  previousMonth: 'Mese precedente',
  nextMonth: 'Mese successivo',
 
  // View navigation
  openPreviousView: 'apri la vista precedente',
  openNextView: 'apri la vista successiva',
- calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) =>
+ calendarViewSwitchingButtonAriaLabel: (view) =>
  view === 'year'
  ? "la vista dell'anno è aperta, passare alla vista del calendario"
  : "la vista dell'calendario è aperta, passare alla vista dell'anno",
- inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') =>
+ inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) =>
  isKeyboardInputOpen
  ? `la vista del campo di testo è aperta, passare alla vista ${viewType}`
  : `la vista aperta è: ${viewType}, vai alla vista del campo di testo`,

diff --git a/packages/x-date-pickers/src/locales/jaJP.ts b/packages/x-date-pickers/src/locales/jaJP.ts
@@ -1,6 +1,5 @@
 import { PickersLocaleText } from './utils/pickersLocaleTextApi';
 import { getPickersLocalization } from './utils/getPickersLocalization';
-import { CalendarPickerView } from '../internals/models';
 
 // maps ClockPickerView to its translation
 const clockViews = {
@@ -15,19 +14,19 @@ const pickerViews = {
  clock: '時計表示',
 };
 
-const jaJPPickers: Partial<PickersLocaleText<any>> = {
+const jaJPPickers: PickersLocaleText<any> = {
  // Calendar navigation
  previousMonth: '先月',
  nextMonth: '来月',
 
  // View navigation
  openPreviousView: '前の表示を開く',
  openNextView: '次の表示を開く',
- calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) =>
+ calendarViewSwitchingButtonAriaLabel: (view) =>
  view === 'year'
  ? '年選択表示からカレンダー表示に切り替える'
  : 'カレンダー表示から年選択表示に切り替える',
- inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') =>
+ inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) =>
  isKeyboardInputOpen
  ? `テキスト入力表示から${pickerViews[viewType]}に切り替える`
  : `${pickerViews[viewType]}からテキスト入力表示に切り替える`,

diff --git a/packages/x-date-pickers/src/locales/nbNO.ts b/packages/x-date-pickers/src/locales/nbNO.ts
@@ -1,6 +1,5 @@
 import { PickersLocaleText } from './utils/pickersLocaleTextApi';
 import { getPickersLocalization } from './utils/getPickersLocalization';
-import { CalendarPickerView } from '../internals/models';
 
 const nbNOPickers: Partial<PickersLocaleText<any>> = {
  // Calendar navigation
@@ -10,11 +9,11 @@ const nbNOPickers: Partial<PickersLocaleText<any>> = {
  // View navigation
  openPreviousView: 'åpne forrige visning',
  openNextView: 'åpne neste visning',
- calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) =>
+ calendarViewSwitchingButtonAriaLabel: (view) =>
  view === 'year'
  ? 'årsvisning er åpen, bytt til kalendervisning'
  : 'kalendervisning er åpen, bytt til årsvisning',
- // inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') => isKeyboardInputOpen ? `text input view is open, go to ${viewType} view` : `${viewType} view is open, go to text input view`,
+ // inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) => isKeyboardInputOpen ? `text input view is open, go to ${viewType} view` : `${viewType} view is open, go to text input view`,
 
  // DateRange placeholders
  start: 'Start',

diff --git a/packages/x-date-pickers/src/locales/nlNL.ts b/packages/x-date-pickers/src/locales/nlNL.ts
@@ -1,6 +1,5 @@
 import { PickersLocaleText } from './utils/pickersLocaleTextApi';
 import { getPickersLocalization } from './utils/getPickersLocalization';
-import { CalendarPickerView } from '../internals/models';
 
 const nlNLPickers: Partial<PickersLocaleText<any>> = {
  // Calendar navigation
@@ -10,11 +9,11 @@ const nlNLPickers: Partial<PickersLocaleText<any>> = {
  // View navigation
  openPreviousView: 'open vorige view',
  openNextView: 'open volgende view',
- calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) =>
+ calendarViewSwitchingButtonAriaLabel: (view) =>
  view === 'year'
  ? 'jaarweergave is geopend, schakel over naar kalenderweergave'
  : 'kalenderweergave is geopend, switch naar jaarweergave',
- // inputModeToggleButtonAriaLabel: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') => isKeyboardInputOpen ? `text input view is open, go to ${viewType} view` : `${viewType} view is open, go to text input view`,
+ // inputModeToggleButtonAriaLabel: (isKeyboardInputOpen, viewType) => isKeyboardInputOpen ? `text input view is open, go to ${viewType} view` : `${viewType} view is open, go to text input view`,
 
  // DateRange placeholders
  start: 'Start',