@mui/x-date-pickers 6.10.2 → 6.11.0

package/modern/DateCalendar/DateCalendar.js

@@ -4,6 +4,7 @@ const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "refere
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { useSlotProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useCalendarState } from './useCalendarState';
@@ -13,10 +14,10 @@ import { DayCalendar } from './DayCalendar';
 import { MonthCalendar } from '../MonthCalendar';
 import { YearCalendar } from '../YearCalendar';
 import { useViews } from '../internals/hooks/useViews';
-import { PickersCalendarHeader } from './PickersCalendarHeader';
+import { PickersCalendarHeader } from '../PickersCalendarHeader';
 import { findClosestEnabledDate, applyDefaultDate, mergeDateAndTime } from '../internals/utils/date-utils';
 import { PickerViewRoot } from '../internals/components/PickerViewRoot';
-import { defaultReduceAnimations } from '../internals/utils/defaultReduceAnimations';
+import { useDefaultReduceAnimations } from '../internals/hooks/useDefaultReduceAnimations';
 import { getDateCalendarUtilityClass } from './dateCalendarClasses';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
@@ -35,21 +36,21 @@ const useUtilityClasses = ownerState => {
 function useDateCalendarDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
+  const defaultReduceAnimations = useDefaultReduceAnimations();
   const themeProps = useThemeProps({
     props,
     name
   });
-  return _extends({
-    loading: false,
-    disablePast: false,
-    disableFuture: false,
-    openTo: 'day',
-    views: ['year', 'day'],
-    reduceAnimations: defaultReduceAnimations,
-    renderLoading: () => /*#__PURE__*/_jsx("span", {
+  return _extends({}, themeProps, {
+    loading: themeProps.loading ?? false,
+    disablePast: themeProps.disablePast ?? false,
+    disableFuture: themeProps.disableFuture ?? false,
+    openTo: themeProps.openTo ?? 'day',
+    views: themeProps.views ?? ['year', 'day'],
+    reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
+    renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/_jsx("span", {
       children: "..."
-    })
-  }, themeProps, {
+    })),
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -173,6 +174,38 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     disableFuture,
     timezone
   });
+
+  // When disabled, limit the view to the selected date
+  const minDateWithDisabled = disabled && value || minDate;
+  const maxDateWithDisabled = disabled && value || maxDate;
+  const gridLabelId = `${id}-grid-label`;
+  const hasFocus = focusedView !== null;
+  const CalendarHeader = slots?.calendarHeader ?? components?.CalendarHeader ?? PickersCalendarHeader;
+  const calendarHeaderProps = useSlotProps({
+    elementType: CalendarHeader,
+    externalSlotProps: slotProps?.calendarHeader ?? componentsProps?.calendarHeader,
+    additionalProps: {
+      views,
+      view,
+      currentMonth: calendarState.currentMonth,
+      onViewChange: setView,
+      onMonthChange: (newMonth, direction) => handleChangeMonth({
+        newMonth,
+        direction
+      }),
+      minDate: minDateWithDisabled,
+      maxDate: maxDateWithDisabled,
+      disabled,
+      disablePast,
+      disableFuture,
+      reduceAnimations,
+      timezone,
+      labelId: gridLabelId,
+      slots,
+      slotProps
+    },
+    ownerState: props
+  });
   const handleDateMonthChange = useEventCallback(newDate => {
     const startOfMonth = utils.startOfMonth(newDate);
     const endOfMonth = utils.endOfMonth(newDate);
@@ -238,18 +271,12 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     maxDate,
     minDate
   };
-
-  // When disabled, limit the view to the selected date
-  const minDateWithDisabled = disabled && value || minDate;
-  const maxDateWithDisabled = disabled && value || maxDate;
   const commonViewProps = {
     disableHighlightToday,
     readOnly,
     disabled,
     timezone
   };
-  const gridLabelId = `${id}-grid-label`;
-  const hasFocus = focusedView !== null;
   const prevOpenViewRef = React.useRef(view);
   React.useEffect(() => {
     // If the view change and the focus was on the previous view
@@ -268,26 +295,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: [/*#__PURE__*/_jsx(PickersCalendarHeader, {
-      views: views,
-      view: view,
-      currentMonth: calendarState.currentMonth,
-      onViewChange: setView,
-      onMonthChange: (newMonth, direction) => handleChangeMonth({
-        newMonth,
-        direction
-      }),
-      minDate: minDateWithDisabled,
-      maxDate: maxDateWithDisabled,
-      disabled: disabled,
-      disablePast: disablePast,
-      disableFuture: disableFuture,
-      reduceAnimations: reduceAnimations,
-      labelId: gridLabelId,
-      slots: slots,
-      slotProps: slotProps,
-      timezone: timezone
-    }), /*#__PURE__*/_jsx(DateCalendarViewTransitionContainer, {
+    children: [/*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps)), /*#__PURE__*/_jsx(DateCalendarViewTransitionContainer, {
       reduceAnimations: reduceAnimations,
       className: classes.viewTransitionContainer,
       transKey: view,

package/modern/DateCalendar/index.js

@@ -1,6 +1,7 @@
 export { DateCalendar } from './DateCalendar';
 export { getDateCalendarUtilityClass, dateCalendarClasses } from './dateCalendarClasses';
 export { dayPickerClasses } from './dayCalendarClasses';
-export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
 export { pickersFadeTransitionGroupClasses } from './pickersFadeTransitionGroupClasses';
-export { pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
+export { pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
+// TODO v7: Remove and export the `PickersCalendarHeader` folder from the root instead.
+export * from '../PickersCalendarHeader';

package/modern/DateField/DateField.js

@@ -38,8 +38,8 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref)
     textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
 
   // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
-  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
+  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
+  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   const _useDateField = useDateField({
       props: textFieldProps,
       inputRef: externalInputRef

package/modern/DateTimeField/DateTimeField.js

@@ -38,8 +38,8 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
     textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
 
   // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
-  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
+  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
+  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   const _useDateTimeField = useDateTimeField({
       props: textFieldProps,
       inputRef: externalInputRef

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -47,7 +47,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
     validator: validateDate
   });
   return renderPicker();

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -83,7 +83,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
     validator: validateDateTime
   });
   return renderPicker();

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -70,7 +70,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: localeText.openTimePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? localeText.openTimePickerDialogue,
     validator: validateTime
   });
   return renderPicker();

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -44,7 +44,7 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
     validator: validateDate
   });
   return renderPicker();

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -55,7 +55,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
     validator: validateDateTime
   });
   return renderPicker();

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -48,7 +48,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: localeText.openTimePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? localeText.openTimePickerDialogue,
     validator: validateTime
   });
   return renderPicker();

package/modern/{DateCalendar → PickersCalendarHeader}/PickersCalendarHeader.js

@@ -1,14 +1,17 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["ownerState"];
+const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone"],
+  _excluded2 = ["ownerState"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import Fade from '@mui/material/Fade';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
-import { PickersFadeTransitionGroup } from './PickersFadeTransitionGroup';
+import { PickersFadeTransitionGroup } from '../DateCalendar/PickersFadeTransitionGroup';
 import { ArrowDropDownIcon } from '../icons';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
 import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internals/hooks/date-helpers-hooks';
@@ -91,11 +94,7 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
   transition: theme.transitions.create('transform'),
   transform: 'rotate(0deg)'
 }));
-
-/**
- * @ignore - do not document.
- */
-export function PickersCalendarHeader(inProps) {
+const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
   const localeText = useLocaleText();
   const utils = useUtils();
   const props = useThemeProps({
@@ -103,22 +102,24 @@ export function PickersCalendarHeader(inProps) {
     name: 'MuiPickersCalendarHeader'
   });
   const {
-    slots,
-    slotProps,
-    currentMonth: month,
-    disabled,
-    disableFuture,
-    disablePast,
-    maxDate,
-    minDate,
-    onMonthChange,
-    onViewChange,
-    view,
-    reduceAnimations,
-    views,
-    labelId,
-    timezone
-  } = props;
+      slots,
+      slotProps,
+      currentMonth: month,
+      disabled,
+      disableFuture,
+      disablePast,
+      maxDate,
+      minDate,
+      onMonthChange,
+      onViewChange,
+      view,
+      reduceAnimations,
+      views,
+      labelId,
+      className,
+      timezone
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(props);
   const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
@@ -140,7 +141,7 @@ export function PickersCalendarHeader(inProps) {
       ownerState: undefined,
       className: classes.switchViewIcon
     }),
-    switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+    switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1), 'left');
   const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1), 'right');
   const isNextMonthDisabled = useNextMonthDisabled(month, {
@@ -170,9 +171,10 @@ export function PickersCalendarHeader(inProps) {
   if (views.length === 1 && views[0] === 'year') {
     return null;
   }
-  return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, {
+  return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, _extends({}, other, {
     ownerState: ownerState,
-    className: classes.root,
+    className: clsx(className, classes.root),
+    ref: ref,
     children: [/*#__PURE__*/_jsxs(PickersCalendarHeaderLabelContainer, {
       role: "presentation",
       onClick: handleToggleView,
@@ -206,5 +208,47 @@ export function PickersCalendarHeader(inProps) {
         nextLabel: localeText.nextMonth
       })
     })]
-  });
-}
+  }));
+});
+process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * className applied to the root element.
+   */
+  className: PropTypes.string,
+  currentMonth: PropTypes.any.isRequired,
+  disabled: PropTypes.bool,
+  disableFuture: PropTypes.bool,
+  disablePast: PropTypes.bool,
+  labelId: PropTypes.string,
+  maxDate: PropTypes.any.isRequired,
+  minDate: PropTypes.any.isRequired,
+  onMonthChange: PropTypes.func.isRequired,
+  onViewChange: PropTypes.func,
+  reduceAnimations: PropTypes.bool.isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  timezone: PropTypes.string.isRequired,
+  view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
+} : void 0;
+export { PickersCalendarHeader };

package/modern/PickersCalendarHeader/index.js

@@ -0,0 +1,2 @@
+export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
+export { PickersCalendarHeader } from './PickersCalendarHeader';

package/modern/TimeField/TimeField.js

@@ -38,8 +38,8 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
     textFieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
 
   // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
-  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
+  textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
+  textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
   const _useTimeField = useTimeField({
       props: textFieldProps,
       inputRef: externalInputRef

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.10.2
+ * @mui/x-date-pickers v6.11.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/hooks/useDefaultReduceAnimations.js

@@ -0,0 +1,9 @@
+import useMediaQuery from '@mui/material/useMediaQuery';
+const PREFERS_REDUCED_MOTION = '@media (prefers-reduced-motion: reduce)';
+export const defaultReduceAnimations = typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent);
+export const useDefaultReduceAnimations = () => {
+  const prefersReduced = useMediaQuery(PREFERS_REDUCED_MOTION, {
+    defaultMatches: false
+  });
+  return prefersReduced || defaultReduceAnimations;
+};

package/modern/internals/hooks/useField/useField.js

@@ -152,13 +152,18 @@ export const useField = params => {
     if (readOnly) {
       return;
     }
-    const valueStr = event.target.value;
+    const targetValue = event.target.value;
+    const eventData = event.nativeEvent.data;
+    // Calling `.fill(04/11/2022)` in playwright will trigger a change event with the requested content to insert in `event.nativeEvent.data`
+    // usual changes have only the currently typed character in the `event.nativeEvent.data`
+    const shouldUseEventData = eventData && eventData.length > 1;
+    const valueStr = shouldUseEventData ? eventData : targetValue;
     const cleanValueStr = cleanString(valueStr);
 
-    // If no section is selected, we just try to parse the new value
+    // If no section is selected or eventData should be used, we just try to parse the new value
     // This line is mostly triggered by imperative code / application tests.
-    if (selectedSectionIndexes == null) {
-      updateValueFromValueStr(cleanValueStr);
+    if (selectedSectionIndexes == null || shouldUseEventData) {
+      updateValueFromValueStr(shouldUseEventData ? eventData : cleanValueStr);
       return;
     }
     let keyPressed;

package/modern/internals/hooks/useField/useField.utils.js

@@ -96,7 +96,7 @@ export const cleanDigitSectionValue = (utils, timezone, value, sectionBoundaries
   }
   return valueStr;
 };
-export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, activeDate, stepsAttribues) => {
+export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, activeDate, stepsAttributes) => {
   const delta = getDeltaFromKeyCode(keyCode);
   const isStart = keyCode === 'Home';
   const isEnd = keyCode === 'End';
@@ -108,7 +108,7 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
       contentType: section.contentType
     });
     const getCleanValue = value => cleanDigitSectionValue(utils, timezone, value, sectionBoundaries, section);
-    const step = section.type === 'minutes' && stepsAttribues?.minutesStep ? stepsAttribues.minutesStep : 1;
+    const step = section.type === 'minutes' && stepsAttributes?.minutesStep ? stepsAttributes.minutesStep : 1;
     const currentSectionValue = parseInt(section.value, 10);
     let newSectionValueNumber = currentSectionValue + delta * step;
     if (shouldSetAbsolute) {
@@ -470,6 +470,7 @@ export const createDateStrForInputFromSections = (sections, isRTL) => {
 export const getSectionsBoundaries = (utils, timezone) => {
   const today = utils.dateWithTimezone(undefined, timezone);
   const endOfYear = utils.endOfYear(today);
+  const endOfDay = utils.endOfDay(today);
   const {
     maxDaysInMonth,
     longestMonth
@@ -524,7 +525,7 @@ export const getSectionsBoundaries = (utils, timezone) => {
     hours: ({
       format
     }) => {
-      const lastHourInDay = utils.getHours(endOfYear);
+      const lastHourInDay = utils.getHours(endOfDay);
       const hasMeridiem = utils.formatByString(utils.endOfDay(today), format) !== lastHourInDay.toString();
       if (hasMeridiem) {
         return {
@@ -540,12 +541,12 @@ export const getSectionsBoundaries = (utils, timezone) => {
     minutes: () => ({
       minimum: 0,
       // Assumption: All years have the same amount of minutes
-      maximum: utils.getMinutes(endOfYear)
+      maximum: utils.getMinutes(endOfDay)
     }),
     seconds: () => ({
       minimum: 0,
       // Assumption: All years have the same amount of seconds
-      maximum: utils.getSeconds(endOfYear)
+      maximum: utils.getSeconds(endOfDay)
     }),
     meridiem: () => ({
       minimum: 0,

package/modern/internals/index.js

@@ -20,13 +20,12 @@ export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
-export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
+export { useDefaultReduceAnimations } from './hooks/useDefaultReduceAnimations';
 export { extractValidationProps } from './utils/validation/extractValidationProps';
 export { validateDate } from './utils/validation/validateDate';
 export { validateDateTime } from './utils/validation/validateDateTime';
 export { validateTime } from './utils/validation/validateTime';
 export { buildDeprecatedPropsWarning, buildWarning } from './utils/warning';
 export { uncapitalizeObjectKeys } from './utils/slots-migration';
-export { PickersCalendarHeader } from '../DateCalendar/PickersCalendarHeader';
 export { DayCalendar } from '../DateCalendar/DayCalendar';
 export { useCalendarState } from '../DateCalendar/useCalendarState';

package/modern/internals/utils/valueManagers.js

@@ -25,7 +25,7 @@ export const singleItemValueManager = {
   isSameError: (a, b) => a === b,
   hasError: error => error != null,
   defaultErrorState: null,
-  getTimezone: (utils, value) => value == null ? null : utils.getTimezone(value),
+  getTimezone: (utils, value) => value == null || !utils.isValid(value) ? null : utils.getTimezone(value),
   setTimezone: (utils, timezone, value) => value == null ? null : utils.setTimezone(value, timezone)
 };
 export const singleItemFieldValueManager = {

package/modern/tests/describeGregorianAdapter/testCalculations.js

@@ -1,6 +1,17 @@
 import { expect } from 'chai';
 import { getDateOffset } from 'test/utils/pickers-utils';
 import { TEST_DATE_ISO_STRING, TEST_DATE_LOCALE_STRING } from './describeGregorianAdapter.utils';
+
+/**
+ * To check if the date has the right offset even after changing it's date parts,
+ * we convert it to a different timezone that always has the same offset,
+ * then we check that both dates have the same hour value.
+ */
+// We change to
+const expectSameTimeInMonacoTZ = (adapter, value) => {
+  const valueInMonacoTz = adapter.setTimezone(value, 'Europe/Monaco');
+  expect(adapter.getHours(value)).to.equal(adapter.getHours(valueInMonacoTz));
+};
 export const testCalculations = ({
   adapter,
   adapterTZ,
@@ -9,6 +20,7 @@ export const testCalculations = ({
   getLocaleFromDate
 }) => {
   const testDateIso = adapter.date(TEST_DATE_ISO_STRING);
+  const testDateLastNonDSTDay = adapterTZ.isTimezoneCompatible ? adapterTZ.dateWithTimezone('2022-03-27', 'Europe/Paris') : adapterTZ.date('2022-03-27');
   const testDateLocale = adapter.date(TEST_DATE_LOCALE_STRING);
   describe('Method: date', () => {
     it('should parse strings', () => {
@@ -484,10 +496,19 @@ export const testCalculations = ({
     expect(adapter.endOfYear(testDateIso)).toEqualDateTime(expected);
     expect(adapter.endOfYear(testDateLocale)).toEqualDateTime(expected);
   });
-  it('Method: endOfMonth', () => {
-    const expected = '2018-10-31T23:59:59.999Z';
-    expect(adapter.endOfMonth(testDateIso)).toEqualDateTime(expected);
-    expect(adapter.endOfMonth(testDateLocale)).toEqualDateTime(expected);
+  describe('Method: endOfMonth', () => {
+    it('should handle basic usecases', () => {
+      const expected = '2018-10-31T23:59:59.999Z';
+      expect(adapter.endOfMonth(testDateIso)).toEqualDateTime(expected);
+      expect(adapter.endOfMonth(testDateLocale)).toEqualDateTime(expected);
+    });
+    it('should update the offset when entering DST', function test() {
+      if (!adapterTZ.isTimezoneCompatible) {
+        this.skip();
+      }
+      expectSameTimeInMonacoTZ(adapterTZ, testDateLastNonDSTDay);
+      expectSameTimeInMonacoTZ(adapterTZ, adapterTZ.endOfMonth(testDateLastNonDSTDay));
+    });
   });
   it('Method: endOfWeek', () => {
     const expected = adapter.lib === 'luxon' ? '2018-11-04T23:59:59.999Z' : '2018-11-03T23:59:59.999Z';
@@ -503,18 +524,45 @@ export const testCalculations = ({
     expect(adapter.addYears(testDateIso, 2)).toEqualDateTime('2020-10-30T11:44:00.000Z');
     expect(adapter.addYears(testDateIso, -2)).toEqualDateTime('2016-10-30T11:44:00.000Z');
   });
-  it('Method: addMonths', () => {
-    expect(adapter.addMonths(testDateIso, 2)).toEqualDateTime('2018-12-30T11:44:00.000Z');
-    expect(adapter.addMonths(testDateIso, -2)).toEqualDateTime('2018-08-30T11:44:00.000Z');
-    expect(adapter.addMonths(testDateIso, 3)).toEqualDateTime('2019-01-30T11:44:00.000Z');
+  describe('Method: addMonths', () => {
+    it('should handle basic usecases', () => {
+      expect(adapter.addMonths(testDateIso, 2)).toEqualDateTime('2018-12-30T11:44:00.000Z');
+      expect(adapter.addMonths(testDateIso, -2)).toEqualDateTime('2018-08-30T11:44:00.000Z');
+      expect(adapter.addMonths(testDateIso, 3)).toEqualDateTime('2019-01-30T11:44:00.000Z');
+    });
+    it('should update the offset when entering DST', function test() {
+      if (!adapterTZ.isTimezoneCompatible) {
+        this.skip();
+      }
+      expectSameTimeInMonacoTZ(adapterTZ, testDateLastNonDSTDay);
+      expectSameTimeInMonacoTZ(adapterTZ, adapterTZ.addMonths(testDateLastNonDSTDay, 1));
+    });
   });
-  it('Method: addWeeks', () => {
-    expect(adapter.addWeeks(testDateIso, 2)).toEqualDateTime('2018-11-13T11:44:00.000Z');
-    expect(adapter.addWeeks(testDateIso, -2)).toEqualDateTime('2018-10-16T11:44:00.000Z');
+  describe('Method: addWeeks', () => {
+    it('should handle basic usecases', () => {
+      expect(adapter.addWeeks(testDateIso, 2)).toEqualDateTime('2018-11-13T11:44:00.000Z');
+      expect(adapter.addWeeks(testDateIso, -2)).toEqualDateTime('2018-10-16T11:44:00.000Z');
+    });
+    it('should update the offset when entering DST', function test() {
+      if (!adapterTZ.isTimezoneCompatible) {
+        this.skip();
+      }
+      expectSameTimeInMonacoTZ(adapterTZ, testDateLastNonDSTDay);
+      expectSameTimeInMonacoTZ(adapterTZ, adapterTZ.addWeeks(testDateLastNonDSTDay, 1));
+    });
   });
-  it('Method: addDays', () => {
-    expect(adapter.addDays(testDateIso, 2)).toEqualDateTime('2018-11-01T11:44:00.000Z');
-    expect(adapter.addDays(testDateIso, -2)).toEqualDateTime('2018-10-28T11:44:00.000Z');
+  describe('Method: addWeeks', () => {
+    it('should handle basic usecases', () => {
+      expect(adapter.addDays(testDateIso, 2)).toEqualDateTime('2018-11-01T11:44:00.000Z');
+      expect(adapter.addDays(testDateIso, -2)).toEqualDateTime('2018-10-28T11:44:00.000Z');
+    });
+    it('should update the offset when entering DST', function test() {
+      if (!adapterTZ.isTimezoneCompatible) {
+        this.skip();
+      }
+      expectSameTimeInMonacoTZ(adapterTZ, testDateLastNonDSTDay);
+      expectSameTimeInMonacoTZ(adapterTZ, adapterTZ.addDays(testDateLastNonDSTDay, 1));
+    });
   });
   it('Method: addHours', () => {
     expect(adapter.addHours(testDateIso, 2)).toEqualDateTime('2018-10-30T13:44:00.000Z');
@@ -624,14 +672,13 @@ export const testCalculations = ({
       const referenceDate = adapterTZ.dateWithTimezone('2022-03-17', 'Europe/Paris');
       const weekArray = adapterTZ.getWeekArray(referenceDate);
       let expectedDate = adapter.startOfWeek(adapter.startOfMonth(referenceDate));
-      const lastNonDSTDay = adapterTZ.dateWithTimezone('2022-03-27', 'Europe/Paris');
       expect(weekArray).to.have.length(5);
       weekArray.forEach(week => {
         expect(week).to.have.length(7);
         week.forEach(day => {
           expect(adapterTZ.startOfDay(day)).toEqualDateTime(adapterTZ.startOfDay(expectedDate));
           expectedDate = adapterTZ.addDays(expectedDate, 1);
-          expect(getDateOffset(adapterTZ, day)).to.equal(adapterTZ.isAfter(day, lastNonDSTDay) ? 120 : 60);
+          expect(getDateOffset(adapterTZ, day)).to.equal(adapterTZ.isAfter(day, testDateLastNonDSTDay) ? 120 : 60);
         });
       });
     });