@mui/x-date-pickers 7.0.0-beta.7 → 7.1.0

package/internals/hooks/useValueWithTimezone.js

@@ -14,10 +14,9 @@ export const useValueWithTimezone = ({
   onChange,
   valueManager
 }) => {
-  var _ref, _ref2;
   const utils = useUtils();
   const firstDefaultValue = React.useRef(defaultValue);
-  const inputValue = (_ref = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref : valueManager.emptyValue;
+  const inputValue = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
   const inputTimezone = React.useMemo(() => valueManager.getTimezone(utils, inputValue), [utils, valueManager, inputValue]);
   const setInputTimezone = useEventCallback(newValue => {
     if (inputTimezone == null) {
@@ -25,11 +24,11 @@ export const useValueWithTimezone = ({
     }
     return valueManager.setTimezone(utils, inputTimezone, newValue);
   });
-  const timezoneToRender = (_ref2 = timezoneProp != null ? timezoneProp : inputTimezone) != null ? _ref2 : 'default';
+  const timezoneToRender = timezoneProp ?? inputTimezone ?? 'default';
   const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, inputValue), [valueManager, utils, timezoneToRender, inputValue]);
   const handleValueChange = useEventCallback((newValue, ...otherParams) => {
     const newValueWithInputTimezone = setInputTimezone(newValue);
-    onChange == null || onChange(newValueWithInputTimezone, ...otherParams);
+    onChange?.(newValueWithInputTimezone, ...otherParams);
   });
   return {
     value: valueWithTimezoneToRender,
@@ -53,11 +52,11 @@ export const useControlledValueWithTimezone = ({
     name,
     state: 'value',
     controlled: valueProp,
-    default: defaultValue != null ? defaultValue : valueManager.emptyValue
+    default: defaultValue ?? valueManager.emptyValue
   });
   const onChange = useEventCallback((newValue, ...otherParams) => {
     setValue(newValue);
-    onChangeProp == null || onChangeProp(newValue, ...otherParams);
+    onChangeProp?.(newValue, ...otherParams);
   });
   return useValueWithTimezone({
     timezone: timezoneProp,

package/internals/hooks/useViews.js

@@ -12,7 +12,6 @@ export function useViews({
   focusedView: inFocusedView,
   onFocusedViewChange
 }) {
-  var _views, _views2;
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceNotValidView) {
       if (inView != null && !views.includes(inView)) {
@@ -50,8 +49,8 @@ export function useViews({
     }
   }, [openTo, setView, view, views]);
   const viewIndex = views.indexOf(view);
-  const previousView = (_views = views[viewIndex - 1]) != null ? _views : null;
-  const nextView = (_views2 = views[viewIndex + 1]) != null ? _views2 : null;
+  const previousView = views[viewIndex - 1] ?? null;
+  const nextView = views[viewIndex + 1] ?? null;
   const handleFocusedViewChange = useEventCallback((viewToFocus, hasFocus) => {
     if (hasFocus) {
       // Focus event
@@ -61,7 +60,7 @@ export function useViews({
       setFocusedView(prevFocusedView => viewToFocus === prevFocusedView ? null : prevFocusedView // If false the blur is due to view switching
       );
     }
-    onFocusedViewChange == null || onFocusedViewChange(viewToFocus, hasFocus);
+    onFocusedViewChange?.(viewToFocus, hasFocus);
   });
   const handleChangeView = useEventCallback(newView => {
     // always keep the focused view in sync

package/internals/index.d.ts

@@ -27,7 +27,7 @@ export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6
 export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { usePicker } from './hooks/usePicker';
-export type { UsePickerResponse, UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, } from './hooks/usePicker';
+export type { UsePickerResponse, UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, PickerViewsRendererProps, } from './hooks/usePicker';
 export type { UsePickerValueNonStaticProps, PickerValueManager, PickerSelectionState, } from './hooks/usePicker/usePickerValue.types';
 export type { UsePickerViewsNonStaticProps, PickerViewRendererLookup, PickerViewRenderer, UsePickerViewsProps, } from './hooks/usePicker/usePickerViews';
 export { useStaticPicker } from './hooks/useStaticPicker';

package/internals/models/validation.d.ts

@@ -71,7 +71,7 @@ export interface DayValidationProps<TDate extends PickerValidDate> {
     /**
      * Disable specific date.
      *
-     * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+     * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
      *
      * @template TDate
      * @param {TDate} day The date to test.

package/internals/utils/convertFieldResponseIntoMuiTextFieldProps.js

@@ -15,7 +15,7 @@ export const convertFieldResponseIntoMuiTextFieldProps = _ref => {
       } = fieldResponse,
       other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2);
     return _extends({}, other, {
-      InputProps: _extends({}, InputProps != null ? InputProps : {}, {
+      InputProps: _extends({}, InputProps ?? {}, {
         readOnly
       })
     });
@@ -31,10 +31,10 @@ export const convertFieldResponseIntoMuiTextFieldProps = _ref => {
     } = fieldResponse,
     other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3);
   return _extends({}, other, {
-    InputProps: _extends({}, InputProps != null ? InputProps : {}, {
+    InputProps: _extends({}, InputProps ?? {}, {
       readOnly
     }),
-    inputProps: _extends({}, inputProps != null ? inputProps : {}, {
+    inputProps: _extends({}, inputProps ?? {}, {
       inputMode,
       onPaste,
       onKeyDown,

package/internals/utils/date-time-utils.js

@@ -45,17 +45,14 @@ const resolveViews = (ampm, views, shouldUseSingleColumn) => {
   }
   return ampm ? [...views, 'meridiem'] : views;
 };
-const resolveShouldRenderTimeInASingleColumn = (timeSteps, threshold) => {
-  var _timeSteps$hours, _timeSteps$minutes;
-  return 24 * 60 / (((_timeSteps$hours = timeSteps.hours) != null ? _timeSteps$hours : 1) * ((_timeSteps$minutes = timeSteps.minutes) != null ? _timeSteps$minutes : 5)) <= threshold;
-};
+const resolveShouldRenderTimeInASingleColumn = (timeSteps, threshold) => 24 * 60 / ((timeSteps.hours ?? 1) * (timeSteps.minutes ?? 5)) <= threshold;
 export function resolveTimeViewsResponse({
   thresholdToRenderTimeInASingleColumn: inThreshold,
   ampm,
   timeSteps: inTimeSteps,
   views
 }) {
-  const thresholdToRenderTimeInASingleColumn = inThreshold != null ? inThreshold : 24;
+  const thresholdToRenderTimeInASingleColumn = inThreshold ?? 24;
   const timeSteps = _extends({
     hours: 1,
     minutes: 5,

package/internals/utils/fields.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from './validation/extractValidationProps';
-const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly'];
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator'];
 export const splitFieldInternalAndForwardedProps = (props, valueType) => {
   const forwardedProps = _extends({}, props);
   const internalProps = {};

package/internals/utils/getDefaultReferenceDate.js

@@ -9,10 +9,7 @@ export const SECTION_TYPE_GRANULARITY = {
   seconds: 6,
   milliseconds: 7
 };
-export const getSectionTypeGranularity = sections => Math.max(...sections.map(section => {
-  var _SECTION_TYPE_GRANULA;
-  return (_SECTION_TYPE_GRANULA = SECTION_TYPE_GRANULARITY[section.type]) != null ? _SECTION_TYPE_GRANULA : 1;
-}));
+export const getSectionTypeGranularity = sections => Math.max(...sections.map(section => SECTION_TYPE_GRANULARITY[section.type] ?? 1));
 const roundDate = (utils, granularity, date) => {
   if (granularity === SECTION_TYPE_GRANULARITY.year) {
     return utils.startOfYear(date);
@@ -44,7 +41,6 @@ export const getDefaultReferenceDate = ({
   timezone,
   getTodayDate: inGetTodayDate
 }) => {
-  var _props$disableIgnorin;
   let referenceDate = inGetTodayDate ? inGetTodayDate() : roundDate(utils, granularity, getTodayDate(utils, timezone));
   if (props.minDate != null && utils.isAfterDay(props.minDate, referenceDate)) {
     referenceDate = roundDate(utils, granularity, props.minDate);
@@ -52,7 +48,7 @@ export const getDefaultReferenceDate = ({
   if (props.maxDate != null && utils.isBeforeDay(props.maxDate, referenceDate)) {
     referenceDate = roundDate(utils, granularity, props.maxDate);
   }
-  const isAfter = createIsAfterIgnoreDatePart((_props$disableIgnorin = props.disableIgnoringDatePartForTimeValidation) != null ? _props$disableIgnorin : false, utils);
+  const isAfter = createIsAfterIgnoreDatePart(props.disableIgnoringDatePartForTimeValidation ?? false, utils);
   if (props.minTime != null && isAfter(props.minTime, referenceDate)) {
     referenceDate = roundDate(utils, granularity, props.disableIgnoringDatePartForTimeValidation ? props.minTime : mergeDateAndTime(utils, referenceDate, props.minTime));
   }

package/internals/utils/views.js

@@ -10,7 +10,7 @@ export const applyDefaultViewProps = ({
   views,
   defaultViews
 }) => {
-  const viewsWithDefault = views != null ? views : defaultViews;
+  const viewsWithDefault = views ?? defaultViews;
   let openToWithDefault;
   if (openTo != null) {
     openToWithDefault = openTo;

package/locales/csCZ.js

@@ -33,10 +33,7 @@ const csCZPickers = {
   timePickerToolbarTitle: 'Vyberte čas',
   dateRangePickerToolbarTitle: 'Vyberete rozmezí dat',
   // Clock labels
-  clockLabelText: (view, time, adapter) => {
-    var _timeViews$view;
-    return `${(_timeViews$view = timeViews[view]) != null ? _timeViews$view : view} vybrány. ${time === null ? 'Není vybrán čas' : `Vybraný čas je ${adapter.format(time, 'fullTime')}`}`;
-  },
+  clockLabelText: (view, time, adapter) => `${timeViews[view] ?? view} vybrány. ${time === null ? 'Není vybrán čas' : `Vybraný čas je ${adapter.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} hodin`,
   minutesClockNumberText: minutes => `${minutes} minut`,
   secondsClockNumberText: seconds => `${seconds} sekund`,

package/locales/daDK.js

@@ -33,10 +33,7 @@ const daDKPickers = {
   timePickerToolbarTitle: 'Vælg tidspunkt',
   dateRangePickerToolbarTitle: 'Vælg datointerval',
   // Clock labels
-  clockLabelText: (view, time, adapter) => {
-    var _timeViews$view;
-    return `Vælg ${(_timeViews$view = timeViews[view]) != null ? _timeViews$view : view}. ${time === null ? 'Intet tidspunkt valgt' : `Valgte tidspunkt er ${adapter.format(time, 'fullTime')}`}`;
-  },
+  clockLabelText: (view, time, adapter) => `Vælg ${timeViews[view] ?? view}. ${time === null ? 'Intet tidspunkt valgt' : `Valgte tidspunkt er ${adapter.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} timer`,
   minutesClockNumberText: minutes => `${minutes} minutter`,
   secondsClockNumberText: seconds => `${seconds} sekunder`,

package/locales/deDE.js

@@ -33,10 +33,7 @@ const deDEPickers = {
   timePickerToolbarTitle: 'Uhrzeit auswählen',
   dateRangePickerToolbarTitle: 'Datumsbereich auswählen',
   // Clock labels
-  clockLabelText: (view, time, adapter) => {
-    var _timeViews$view;
-    return `${(_timeViews$view = timeViews[view]) != null ? _timeViews$view : view} auswählen. ${time === null ? 'Keine Uhrzeit ausgewählt' : `Gewählte Uhrzeit ist ${adapter.format(time, 'fullTime')}`}`;
-  },
+  clockLabelText: (view, time, adapter) => `${timeViews[view] ?? view} auswählen. ${time === null ? 'Keine Uhrzeit ausgewählt' : `Gewählte Uhrzeit ist ${adapter.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} ${timeViews.hours}`,
   minutesClockNumberText: minutes => `${minutes} ${timeViews.minutes}`,
   secondsClockNumberText: seconds => `${seconds}  ${timeViews.seconds}`,

package/locales/huHU.js

@@ -33,10 +33,7 @@ const huHUPickers = {
   timePickerToolbarTitle: 'Idő kiválasztása',
   dateRangePickerToolbarTitle: 'Dátumhatárok kiválasztása',
   // Clock labels
-  clockLabelText: (view, time, adapter) => {
-    var _timeViews$view;
-    return `${(_timeViews$view = timeViews[view]) != null ? _timeViews$view : view} kiválasztása. ${time === null ? 'Nincs kiválasztva idő' : `A kiválasztott idő ${adapter.format(time, 'fullTime')}`}`;
-  },
+  clockLabelText: (view, time, adapter) => `${timeViews[view] ?? view} kiválasztása. ${time === null ? 'Nincs kiválasztva idő' : `A kiválasztott idő ${adapter.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} ${timeViews.hours.toLowerCase()}`,
   minutesClockNumberText: minutes => `${minutes} ${timeViews.minutes.toLowerCase()}`,
   secondsClockNumberText: seconds => `${seconds}  ${timeViews.seconds.toLowerCase()}`,

package/locales/itIT.js

@@ -16,11 +16,10 @@ const itITPickers = {
   // DateRange labels
   start: 'Inizio',
   end: 'Fine',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Data di inizio',
+  startTime: 'Ora di inizio',
+  endDate: 'Data di fine',
+  endTime: 'Ora di fine',
   // Action bar
   cancelButtonLabel: 'Cancellare',
   clearButtonLabel: 'Sgomberare',
@@ -46,8 +45,7 @@ const itITPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Scegli la data, la data selezionata è ${utils.format(value, 'fullDate')}` : 'Scegli la data',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Scegli l'ora, l'ora selezionata è ${utils.format(value, 'fullTime')}` : "Scegli l'ora",
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'Cancella valore',
   // Table labels
   timeTableLabel: "scegli un'ora",
   dateTableLabel: 'scegli una data',
@@ -55,23 +53,21 @@ const itITPickers = {
   fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
   fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
   fieldDayPlaceholder: () => 'GG',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'GGGG' : 'GG',
   fieldHoursPlaceholder: () => 'hh',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'Anno',
+  month: 'Mese',
+  day: 'Giorno',
+  weekDay: 'Giorno della settimana',
+  hours: 'Ore',
+  minutes: 'Minuti',
+  seconds: 'Secondi',
+  meridiem: 'Meridiano',
   // Common
-  // empty: 'Empty',
+  empty: 'Vuoto'
 };
 export const itIT = getPickersLocalization(itITPickers);

package/locales/jaJP.js

@@ -32,10 +32,7 @@ const jaJPPickers = {
   timePickerToolbarTitle: '時間を選択',
   dateRangePickerToolbarTitle: '日付の範囲を選択',
   // Clock labels
-  clockLabelText: (view, time, adapter) => {
-    var _timeViews$view;
-    return `${(_timeViews$view = timeViews[view]) != null ? _timeViews$view : view}を選択してください ${time === null ? '時間が選択されていません' : `選択した時間は ${adapter.format(time, 'fullTime')} です`}`;
-  },
+  clockLabelText: (view, time, adapter) => `${timeViews[view] ?? view}を選択してください ${time === null ? '時間が選択されていません' : `選択した時間は ${adapter.format(time, 'fullTime')} です`}`,
   hoursClockNumberText: hours => `${hours} ${timeViews.hours}`,
   minutesClockNumberText: minutes => `${minutes} ${timeViews.minutes}`,
   secondsClockNumberText: seconds => `${seconds} ${timeViews.seconds}`,

package/locales/roRO.js

@@ -33,10 +33,7 @@ const roROPickers = {
   timePickerToolbarTitle: 'Selectați ora',
   dateRangePickerToolbarTitle: 'Selectați intervalul de date',
   // Clock labels
-  clockLabelText: (view, time, adapter) => {
-    var _timeViews$view;
-    return `Selectați ${(_timeViews$view = timeViews[view]) != null ? _timeViews$view : view}. ${time === null ? 'Nicio oră selectată' : `Ora selectată este ${adapter.format(time, 'fullTime')}`}`;
-  },
+  clockLabelText: (view, time, adapter) => `Selectați ${timeViews[view] ?? view}. ${time === null ? 'Nicio oră selectată' : `Ora selectată este ${adapter.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} ${timeViews.hours}`,
   minutesClockNumberText: minutes => `${minutes} ${timeViews.minutes}`,
   secondsClockNumberText: seconds => `${seconds}  ${timeViews.seconds}`,

package/locales/skSK.js

@@ -33,10 +33,7 @@ const skSKPickers = {
   timePickerToolbarTitle: 'Vyberte čas',
   dateRangePickerToolbarTitle: 'Vyberete rozmedzie dátumov',
   // Clock labels
-  clockLabelText: (view, time, adapter) => {
-    var _timeViews$view;
-    return `${(_timeViews$view = timeViews[view]) != null ? _timeViews$view : view} vybraný. ${time === null ? 'Nie je vybraný čas' : `Vybraný čas je ${adapter.format(time, 'fullTime')}`}`;
-  },
+  clockLabelText: (view, time, adapter) => `${timeViews[view] ?? view} vybraný. ${time === null ? 'Nie je vybraný čas' : `Vybraný čas je ${adapter.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} hodín`,
   minutesClockNumberText: minutes => `${minutes} minút`,
   secondsClockNumberText: seconds => `${seconds} sekúnd`,

package/locales/zhHK.js

@@ -16,11 +16,10 @@ const zhHKPickers = {
   // DateRange labels
   start: '開始',
   end: '結束',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: '開始日期',
+  startTime: '開始時間',
+  endDate: '結束日期',
+  endTime: '結束時間',
   // Action bar
   cancelButtonLabel: '取消',
   clearButtonLabel: '清除',
@@ -59,19 +58,17 @@ const zhHKPickers = {
   fieldHoursPlaceholder: () => 'hh',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: '年',
+  month: '月',
+  day: '日',
+  weekDay: '星期',
+  hours: '小時',
+  minutes: '分鐘',
+  seconds: '秒',
+  meridiem: '子午線',
   // Common
-  // empty: 'Empty',
+  empty: '空值'
 };
 export const zhHK = getPickersLocalization(zhHKPickers);

package/modern/AdapterLuxon/AdapterLuxon.js

@@ -240,6 +240,10 @@ export class AdapterLuxon {
       // Extract escaped section to avoid extending them
       const catchEscapedSectionsRegexp = /''|'(''|[^'])+('|$)|[^']*/g;
 
+      // This RegExp tests if a string is only mad of supported tokens
+      const validTokens = [...Object.keys(this.formatTokenMap), 'yyyyy'];
+      const isWordComposedOfTokens = new RegExp(`^(${validTokens.join('|')})+$`);
+
       // Extract words to test if they are a token or a word to escape.
       const catchWordsRegexp = /(?:^|[^a-z])([a-z]+)(?:[^a-z]|$)|([a-z]+)/gi;
       return format.match(catchEscapedSectionsRegexp).map(token => {
@@ -250,12 +254,13 @@ export class AdapterLuxon {
         const expandedToken = DateTime.expandFormat(token, {
           locale: this.locale
         });
-        return expandedToken.replace(catchWordsRegexp, (correspondance, g1, g2) => {
+        return expandedToken.replace(catchWordsRegexp, (substring, g1, g2) => {
           const word = g1 || g2; // words are either in group 1 or group 2
-          if (word === 'yyyyy' || formatTokenMap[word] !== undefined) {
-            return correspondance;
+
+          if (isWordComposedOfTokens.test(word)) {
+            return substring;
           }
-          return `'${correspondance}'`;
+          return `'${substring}'`;
         });
       }).join('')
       // The returned format can contain `yyyyy` which means year between 4 and 6 digits.

package/modern/DateCalendar/DateCalendar.js

@@ -487,7 +487,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/modern/DateField/DateField.js

@@ -241,7 +241,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/modern/DatePicker/DatePicker.js

@@ -266,7 +266,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/modern/DatePicker/DatePickerToolbar.js

@@ -1,5 +1,5 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className", "onViewChange", "view"];
 import * as React from 'react';
 import clsx from 'clsx';
@@ -31,11 +31,16 @@ const DatePickerToolbarTitle = styled(Typography, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
   overridesResolver: (_, styles) => styles.title
-})(({
-  ownerState
-}) => _extends({}, ownerState.isLandscape && {
-  margin: 'auto 16px auto auto'
-}));
+})({
+  variants: [{
+    props: {
+      isLandscape: true
+    },
+    style: {
+      margin: 'auto 16px auto auto'
+    }
+  }]
+});
 /**
  * Demos:
  *

package/modern/DateTimeField/DateTimeField.js

@@ -274,7 +274,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/modern/DateTimePicker/DateTimePicker.js

@@ -304,7 +304,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.