@mui/x-date-pickers 6.7.0 → 6.9.0

package/modern/DateCalendar/DateCalendar.js

@@ -1,11 +1,11 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow"];
+const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow", "timezone"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_useEventCallback as useEventCallback, unstable_useControlled as useControlled } from '@mui/utils';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useCalendarState } from './useCalendarState';
 import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
 import { PickersFadeTransitionGroup } from './PickersFadeTransitionGroup';
@@ -18,6 +18,8 @@ import { findClosestEnabledDate, applyDefaultDate, mergeDateAndTime } from '../i
 import { PickerViewRoot } from '../internals/components/PickerViewRoot';
 import { defaultReduceAnimations } from '../internals/utils/defaultReduceAnimations';
 import { getDateCalendarUtilityClass } from './dateCalendarClasses';
+import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -84,6 +86,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       onViewChange,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disableFuture,
       disablePast,
       defaultCalendarMonth,
@@ -116,18 +119,21 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       renderLoading,
       displayWeekNumber,
       yearsPerRow,
-      monthsPerRow
+      monthsPerRow,
+      timezone: timezoneProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [value, setValue] = useControlled({
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
     name: 'DateCalendar',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue ?? null
-  });
-  const handleValueChange = useEventCallback((newValue, selectionState) => {
-    setValue(newValue);
-    onChange?.(newValue, selectionState);
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: singleItemValueManager
   });
   const {
     view,
@@ -147,6 +153,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     onFocusedViewChange
   });
   const {
+    referenceDate,
     calendarState,
     changeFocusedDay,
     changeMonth,
@@ -156,13 +163,15 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   } = useCalendarState({
     value,
     defaultCalendarMonth,
+    referenceDate: referenceDateProp,
     reduceAnimations,
     onMonthChange,
     minDate,
     maxDate,
     shouldDisableDate,
     disablePast,
-    disableFuture
+    disableFuture,
+    timezone
   });
   const handleDateMonthChange = useEventCallback(newDate => {
     const startOfMonth = utils.startOfMonth(newDate);
@@ -174,7 +183,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       maxDate: utils.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
       disablePast,
       disableFuture,
-      isDateDisabled
+      isDateDisabled,
+      timezone
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
@@ -195,7 +205,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       maxDate: utils.isAfter(maxDate, endOfYear) ? endOfYear : maxDate,
       disablePast,
       disableFuture,
-      isDateDisabled
+      isDateDisabled,
+      timezone
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
@@ -207,9 +218,9 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     changeFocusedDay(closestEnabledDate, true);
   });
   const handleSelectedDayChange = useEventCallback(day => {
-    if (value && day) {
+    if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange(mergeDateAndTime(utils, day, value), 'finish');
+      return handleValueChange(mergeDateAndTime(utils, day, value ?? referenceDate), 'finish');
     }
     return handleValueChange(day, 'finish');
   });
@@ -234,7 +245,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   const commonViewProps = {
     disableHighlightToday,
     readOnly,
-    disabled
+    disabled,
+    timezone
   };
   const gridLabelId = `${id}-grid-label`;
   const hasFocus = focusedView !== null;
@@ -273,7 +285,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       reduceAnimations: reduceAnimations,
       labelId: gridLabelId,
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      timezone: timezone
     }), /*#__PURE__*/_jsx(DateCalendarViewTransitionContainer, {
       reduceAnimations: reduceAnimations,
       className: classes.viewTransitionContainer,
@@ -286,7 +299,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
           onFocusedViewChange: isViewFocused => setFocusedView('year', isViewFocused),
-          yearsPerRow: yearsPerRow
+          yearsPerRow: yearsPerRow,
+          referenceDate: referenceDate
         })), view === 'month' && /*#__PURE__*/_jsx(MonthCalendar, _extends({}, baseDateValidationProps, commonViewProps, {
           hasFocus: hasFocus,
           className: className,
@@ -294,7 +308,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           onChange: handleDateMonthChange,
           shouldDisableMonth: shouldDisableMonth,
           onFocusedViewChange: isViewFocused => setFocusedView('month', isViewFocused),
-          monthsPerRow: monthsPerRow
+          monthsPerRow: monthsPerRow,
+          referenceDate: referenceDate
         })), view === 'day' && /*#__PURE__*/_jsx(DayCalendar, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
           onFocusedDayChange: changeFocusedDay,
@@ -356,7 +371,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -465,6 +480,11 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -517,6 +537,14 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * 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]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/DateCalendar/DayCalendar.js

@@ -138,8 +138,6 @@ function WrappedDay(_ref) {
       isViewFocused
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const utils = useUtils();
-  const now = useNow();
   const {
     disabled,
     disableHighlightToday,
@@ -148,8 +146,11 @@ function WrappedDay(_ref) {
     components,
     componentsProps,
     slots,
-    slotProps
+    slotProps,
+    timezone
   } = parentProps;
+  const utils = useUtils();
+  const now = useNow(timezone);
   const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
   const isSelected = selectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
   const isToday = utils.isSameDay(day, now);
@@ -207,15 +208,10 @@ function WrappedDay(_ref) {
  * @ignore - do not document.
  */
 export function DayCalendar(inProps) {
-  const now = useNow();
-  const utils = useUtils();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiDayCalendar'
   });
-  const classes = useUtilityClasses(props);
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
   const {
     onFocusedDayChange,
     className,
@@ -245,8 +241,14 @@ export function DayCalendar(inProps) {
     gridLabelId,
     displayWeekNumber,
     fixedWeekNumber,
-    autoFocus
+    autoFocus,
+    timezone
   } = props;
+  const now = useNow(timezone);
+  const utils = useUtils();
+  const classes = useUtilityClasses(props);
+  const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
   const isDateDisabled = useIsDateDisabled({
     shouldDisableDate,
     shouldDisableMonth,
@@ -254,7 +256,8 @@ export function DayCalendar(inProps) {
     minDate,
     maxDate,
     disablePast,
-    disableFuture
+    disableFuture,
+    timezone
   });
   const localeText = useLocaleText();
   const [internalHasFocus, setInternalHasFocus] = useControlled({
@@ -297,7 +300,8 @@ export function DayCalendar(inProps) {
             date: newFocusedDayDefault,
             minDate: isRTL ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
             maxDate: isRTL ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
-            isDateDisabled
+            isDateDisabled,
+            timezone
           });
           focusDay(closestDayToFocus || newFocusedDayDefault);
           event.preventDefault();
@@ -312,7 +316,8 @@ export function DayCalendar(inProps) {
             date: newFocusedDayDefault,
             minDate: isRTL ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
             maxDate: isRTL ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
-            isDateDisabled
+            isDateDisabled,
+            timezone
           });
           focusDay(closestDayToFocus || newFocusedDayDefault);
           event.preventDefault();
@@ -363,14 +368,16 @@ export function DayCalendar(inProps) {
         maxDate: endOfMonth,
         disablePast,
         disableFuture,
-        isDateDisabled
+        isDateDisabled,
+        timezone
       });
     }
     return internalFocusedDay;
-  }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils]);
+  }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils, timezone]);
   const weeksToDisplay = React.useMemo(() => {
-    const toDisplay = utils.getWeekArray(currentMonth);
-    let nextMonth = utils.addMonths(currentMonth, 1);
+    const currentMonthWithTimezone = utils.setTimezone(currentMonth, timezone);
+    const toDisplay = utils.getWeekArray(currentMonthWithTimezone);
+    let nextMonth = utils.addMonths(currentMonthWithTimezone, 1);
     while (fixedWeekNumber && toDisplay.length < fixedWeekNumber) {
       const additionalWeeks = utils.getWeekArray(nextMonth);
       const hasCommonWeek = utils.isSameDay(toDisplay[toDisplay.length - 1][0], additionalWeeks[0][0]);
@@ -382,7 +389,7 @@ export function DayCalendar(inProps) {
       nextMonth = utils.addMonths(nextMonth, 1);
     }
     return toDisplay;
-  }, [currentMonth, fixedWeekNumber, utils]);
+  }, [currentMonth, fixedWeekNumber, utils, timezone]);
   return /*#__PURE__*/_jsxs("div", {
     role: "grid",
     "aria-labelledby": gridLabelId,

package/modern/DateCalendar/PickersCalendarHeader.js

@@ -116,7 +116,8 @@ export function PickersCalendarHeader(inProps) {
     view,
     reduceAnimations,
     views,
-    labelId
+    labelId,
+    timezone
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(props);
@@ -144,11 +145,13 @@ export function PickersCalendarHeader(inProps) {
   const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1), 'right');
   const isNextMonthDisabled = useNextMonthDisabled(month, {
     disableFuture,
-    maxDate
+    maxDate,
+    timezone
   });
   const isPreviousMonthDisabled = usePreviousMonthDisabled(month, {
     disablePast,
-    minDate
+    minDate,
+    timezone
   });
   const handleToggleView = () => {
     if (views.length === 1 || !onViewChange || disabled) {

package/modern/DateCalendar/useCalendarState.js

@@ -3,7 +3,8 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useIsDateDisabled } from './useIsDateDisabled';
 import { useUtils, useNow } from '../internals/hooks/useUtils';
-import { clamp } from '../internals/utils/date-utils';
+import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
   switch (action.type) {
     case 'changeMonth':
@@ -33,25 +34,47 @@ export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMont
       throw new Error('missing support');
   }
 };
-export const useCalendarState = ({
-  value,
-  defaultCalendarMonth,
-  disableFuture,
-  disablePast,
-  disableSwitchToMonthOnDayFocus = false,
-  maxDate,
-  minDate,
-  onMonthChange,
-  reduceAnimations,
-  shouldDisableDate
-}) => {
-  const now = useNow();
+export const useCalendarState = params => {
+  const {
+    value,
+    referenceDate: referenceDateProp,
+    defaultCalendarMonth,
+    disableFuture,
+    disablePast,
+    disableSwitchToMonthOnDayFocus = false,
+    maxDate,
+    minDate,
+    onMonthChange,
+    reduceAnimations,
+    shouldDisableDate,
+    timezone
+  } = params;
+  const now = useNow(timezone);
   const utils = useUtils();
   const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
+  const referenceDate = React.useMemo(() => {
+    let externalReferenceDate = null;
+    if (referenceDateProp) {
+      externalReferenceDate = referenceDateProp;
+    } else if (defaultCalendarMonth) {
+      // For `defaultCalendarMonth`, we just want to keep the month and the year to avoid a behavior change.
+      externalReferenceDate = utils.startOfMonth(defaultCalendarMonth);
+    }
+    return singleItemValueManager.getInitialReferenceValue({
+      value,
+      utils,
+      timezone,
+      props: params,
+      referenceDate: externalReferenceDate,
+      granularity: SECTION_TYPE_GRANULARITY.day
+    });
+  }, [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: value || now,
-    currentMonth: utils.startOfMonth(value ?? defaultCalendarMonth ?? clamp(utils, now, minDate, maxDate)),
+    currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
   const handleChangeMonth = React.useCallback(payload => {
@@ -77,7 +100,8 @@ export const useCalendarState = ({
     minDate,
     maxDate,
     disableFuture,
-    disablePast
+    disablePast,
+    timezone
   });
   const onMonthSwitchingAnimationEnd = React.useCallback(() => {
     dispatch({
@@ -94,6 +118,7 @@ export const useCalendarState = ({
     }
   });
   return {
+    referenceDate,
     calendarState,
     changeMonth,
     changeFocusedDay,

package/modern/DateCalendar/useIsDateDisabled.js

@@ -8,7 +8,8 @@ export const useIsDateDisabled = ({
   minDate,
   maxDate,
   disableFuture,
-  disablePast
+  disablePast,
+  timezone
 }) => {
   const adapter = useLocalizationContext();
   return React.useCallback(day => validateDate({
@@ -21,7 +22,8 @@ export const useIsDateDisabled = ({
       minDate,
       maxDate,
       disableFuture,
-      disablePast
+      disablePast,
+      timezone
     }
-  }) !== null, [adapter, shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast]);
+  }) !== null, [adapter, shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast, timezone]);
 };

package/modern/DateField/DateField.js

@@ -229,7 +229,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
@@ -307,6 +307,14 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * 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]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The ref object used to imperatively interact with the field.
    */

package/modern/DatePicker/DatePicker.js

@@ -73,7 +73,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -310,6 +310,14 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * 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]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/DateTimeField/DateTimeField.js

@@ -262,7 +262,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
@@ -356,6 +356,14 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * 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]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The ref object used to imperatively interact with the field.
    */

package/modern/DateTimePicker/DateTimePicker.js

@@ -83,7 +83,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -380,6 +380,14 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
     minutes: PropTypes.number,
     seconds: PropTypes.number
   }),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -93,7 +93,7 @@ DesktopDatePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -324,6 +324,14 @@ DesktopDatePicker.propTypes = {
    * 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]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -139,7 +139,7 @@ DesktopDateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -430,6 +430,14 @@ DesktopDateTimePicker.propTypes = {
     minutes: PropTypes.number,
     seconds: PropTypes.number
   }),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -314,6 +314,14 @@ DesktopTimePicker.propTypes = {
     minutes: PropTypes.number,
     seconds: PropTypes.number
   }),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.