@mui/x-date-pickers 7.0.0-beta.6 → 7.0.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/date-utils.d.ts

@@ -1,5 +1,6 @@
 import { DateView, FieldValueType, MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../models';
 import { DateOrTimeViewWithMeridiem } from '../models';
+export declare const mergeDateAndTime: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, dateParam: TDate, timeParam: TDate) => TDate;
 interface FindClosestDateParams<TDate extends PickerValidDate> {
     date: TDate;
     disableFuture?: boolean;
@@ -15,7 +16,6 @@ export declare const replaceInvalidDateByNull: <TDate extends PickerValidDate>(u
 export declare const applyDefaultDate: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, value: TDate | null | undefined, defaultValue: TDate) => TDate;
 export declare const areDatesEqual: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, a: TDate, b: TDate) => boolean;
 export declare const getMonthsInYear: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, year: TDate) => TDate[];
-export declare const mergeDateAndTime: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, dateParam: TDate, timeParam: TDate) => TDate;
 export declare const getTodayDate: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, valueType?: FieldValueType) => TDate;
 export declare const formatMeridiem: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate, any>, meridiem: 'am' | 'pm') => string;
 export declare const isDatePickerView: (view: DateOrTimeViewWithMeridiem) => view is DateView;

package/internals/utils/date-utils.js

@@ -1,4 +1,11 @@
 import { areViewsEqual } from './views';
+export const mergeDateAndTime = (utils, dateParam, timeParam) => {
+  let mergedDate = dateParam;
+  mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));
+  mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
+  mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
+  return mergedDate;
+};
 export const findClosestEnabledDate = ({
   date,
   disableFuture,
@@ -9,7 +16,7 @@ export const findClosestEnabledDate = ({
   utils,
   timezone
 }) => {
-  const today = utils.startOfDay(utils.date(undefined, timezone));
+  const today = mergeDateAndTime(utils, utils.date(undefined, timezone), date);
   if (disablePast && utils.isBefore(minDate, today)) {
     minDate = today;
   }
@@ -72,13 +79,6 @@ export const getMonthsInYear = (utils, year) => {
   }
   return months;
 };
-export const mergeDateAndTime = (utils, dateParam, timeParam) => {
-  let mergedDate = dateParam;
-  mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));
-  mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
-  mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
-  return mergedDate;
-};
 export const getTodayDate = (utils, timezone, valueType) => valueType === 'date' ? utils.startOfDay(utils.date(undefined, timezone)) : utils.date(undefined, timezone);
 export const formatMeridiem = (utils, meridiem) => {
   const date = utils.setHours(utils.date(), meridiem === 'am' ? 2 : 14);

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/jaJP.js

@@ -17,11 +17,10 @@ const jaJPPickers = {
   // DateRange labels
   start: '開始',
   end: '終了',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: '開始日',
+  startTime: '開始時間',
+  endDate: '終了日',
+  endTime: '終了時間',
   // Action bar
   cancelButtonLabel: 'キャンセル',
   clearButtonLabel: 'クリア',
@@ -33,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}`,
@@ -50,8 +46,7 @@ const jaJPPickers = {
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `日付を選択してください。選択した日付は ${utils.format(value, 'fullDate')} です` : '日付を選択してください',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `時間を選択してください。選択した時間は ${utils.format(value, 'fullTime')} です` : '時間を選択してください',
-  // fieldClearLabel: 'Clear value',
-
+  fieldClearLabel: 'クリア',
   // Table labels
   timeTableLabel: '時間を選択',
   dateTableLabel: '日付を選択',
@@ -63,19 +58,17 @@ const jaJPPickers = {
   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 jaJP = getPickersLocalization(jaJPPickers);

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/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/DateCalendar/DayCalendar.js

@@ -353,10 +353,11 @@ export function DayCalendar(inProps) {
     }
   });
   const currentMonthNumber = utils.getMonth(currentMonth);
+  const currentYearNumber = utils.getYear(currentMonth);
   const validSelectedDays = React.useMemo(() => selectedDays.filter(day => !!day).map(day => utils.startOfDay(day)), [utils, selectedDays]);
 
   // need a new ref whenever the `key` of the transition changes: https://reactcommunity.org/react-transition-group/transition/#Transition-prop-nodeRef.
-  const transitionKey = currentMonthNumber;
+  const transitionKey = `${currentYearNumber}-${currentMonthNumber}`;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const slideNodeRef = React.useMemo(() => /*#__PURE__*/React.createRef(), [transitionKey]);
   const startOfCurrentWeek = utils.startOfWeek(now);

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/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.

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -281,7 +281,7 @@ DesktopDatePicker.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.