@mui/x-date-pickers-pro 6.8.0 → 6.9.0

package/legacy/StaticDateRangePicker/StaticDateRangePicker.js

@@ -252,6 +252,14 @@ StaticDateRangePicker.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/legacy/dateRangeViewRenderers/dateRangeViewRenderers.js

@@ -40,7 +40,8 @@ export var renderDateRangeViewCalendar = function renderDateRangeViewCalendar(_r
     autoFocus = _ref.autoFocus,
     fixedWeekNumber = _ref.fixedWeekNumber,
     disableDragEditing = _ref.disableDragEditing,
-    displayWeekNumber = _ref.displayWeekNumber;
+    displayWeekNumber = _ref.displayWeekNumber,
+    timezone = _ref.timezone;
   return /*#__PURE__*/_jsx(DateRangeCalendar, {
     value: value,
     defaultValue: defaultValue,
@@ -76,6 +77,7 @@ export var renderDateRangeViewCalendar = function renderDateRangeViewCalendar(_r
     autoFocus: autoFocus,
     fixedWeekNumber: fixedWeekNumber,
     disableDragEditing: disableDragEditing,
-    displayWeekNumber: displayWeekNumber
+    displayWeekNumber: displayWeekNumber,
+    timezone: timezone
   });
 };

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.8.0
+ * @mui/x-date-pickers-pro v6.9.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -24,6 +24,7 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
     sx = props.sx,
     format = props.format,
     formatDensity = props.formatDensity,
+    timezone = props.timezone,
     label = props.label,
     inputRef = props.inputRef,
     readOnly = props.readOnly,
@@ -73,6 +74,7 @@ export var useDesktopRangePicker = function useDesktopRangePicker(_ref) {
       sx: sx,
       format: format,
       formatDensity: formatDensity,
+      timezone: timezone,
       autoFocus: autoFocus && !props.open,
       ref: fieldContainerRef
     }, fieldType === 'single-input' && {

package/legacy/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -25,6 +25,7 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
     sx = props.sx,
     format = props.format,
     formatDensity = props.formatDensity,
+    timezone = props.timezone,
     label = props.label,
     inputRef = props.inputRef,
     readOnly = props.readOnly,
@@ -62,7 +63,8 @@ export var useMobileRangePicker = function useMobileRangePicker(_ref) {
       className: className,
       sx: sx,
       format: format,
-      formatDensity: formatDensity
+      formatDensity: formatDensity,
+      timezone: timezone
     }, fieldType === 'single-input' && {
       inputRef: inputRef
     }),

package/legacy/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -1,15 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
-import { useLocalizationContext, useValidation } from '@mui/x-date-pickers/internals';
-import useControlled from '@mui/utils/useControlled';
+import { useLocalizationContext, useValidation, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
 import { useDefaultizedDateRangeFieldProps } from '../../../SingleInputDateRangeField/useSingleInputDateRangeField';
 import { validateDateRange } from '../../utils/validation/validateDateRange';
 import { rangeValueManager } from '../../utils/valueManagers';
 export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_ref) {
-  var _firstDefaultValue$cu;
   var inSharedProps = _ref.sharedProps,
     startTextFieldProps = _ref.startTextFieldProps,
     startInputRef = _ref.startInputRef,
@@ -28,37 +24,41 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
     disabled = sharedProps.disabled,
     readOnly = sharedProps.readOnly,
     selectedSections = sharedProps.selectedSections,
-    onSelectedSectionsChange = sharedProps.onSelectedSectionsChange;
-  var firstDefaultValue = React.useRef(defaultValue);
-  var _useControlled = useControlled({
+    onSelectedSectionsChange = sharedProps.onSelectedSectionsChange,
+    timezoneProp = sharedProps.timezone;
+  var _useControlledValueWi = useControlledValueWithTimezone({
       name: 'useMultiInputDateRangeField',
-      state: 'value',
-      controlled: valueProp,
-      default: (_firstDefaultValue$cu = firstDefaultValue.current) != null ? _firstDefaultValue$cu : rangeValueManager.emptyValue
+      timezone: timezoneProp,
+      value: valueProp,
+      defaultValue: defaultValue,
+      onChange: onChange,
+      valueManager: rangeValueManager
     }),
-    _useControlled2 = _slicedToArray(_useControlled, 2),
-    value = _useControlled2[0],
-    setValue = _useControlled2[1];
+    value = _useControlledValueWi.value,
+    handleValueChange = _useControlledValueWi.handleValueChange,
+    timezone = _useControlledValueWi.timezone;
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
   var buildChangeHandler = function buildChangeHandler(index) {
     return function (newDate, rawContext) {
       var newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
-      setValue(newDateRange);
       var context = _extends({}, rawContext, {
         validationError: validateDateRange({
           adapter: adapter,
           value: newDateRange,
-          props: sharedProps
+          props: _extends({}, sharedProps, {
+            timezone: timezone
+          })
         })
       });
-      onChange == null ? void 0 : onChange(newDateRange, context);
+      handleValueChange(newDateRange, context);
     };
   };
   var handleStartDateChange = useEventCallback(buildChangeHandler(0));
   var handleEndDateChange = useEventCallback(buildChangeHandler(1));
   var validationError = useValidation(_extends({}, sharedProps, {
-    value: value
+    value: value,
+    timezone: timezone
   }), validateDateRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
   var startFieldProps = _extends({
     error: !!validationError[0]
@@ -68,6 +68,7 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
     format: format,
     formatDensity: formatDensity,
     shouldRespectLeadingZeros: shouldRespectLeadingZeros,
+    timezone: timezone,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -83,6 +84,7 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
     shouldRespectLeadingZeros: shouldRespectLeadingZeros,
     disabled: disabled,
     readOnly: readOnly,
+    timezone: timezone,
     unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],

package/legacy/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -1,10 +1,7 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-pickers/DateTimeField';
-import { applyDefaultDate, useDefaultDates, useLocalizationContext, useUtils, useValidation } from '@mui/x-date-pickers/internals';
-import useControlled from '@mui/utils/useControlled';
+import { applyDefaultDate, useDefaultDates, useLocalizationContext, useUtils, useValidation, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
 import { validateDateTimeRange } from '../../utils/validation/validateDateTimeRange';
 import { rangeValueManager } from '../../utils/valueManagers';
 export var useDefaultizedDateTimeRangeFieldProps = function useDefaultizedDateTimeRangeFieldProps(props) {
@@ -25,7 +22,6 @@ export var useDefaultizedDateTimeRangeFieldProps = function useDefaultizedDateTi
   });
 };
 export var useMultiInputDateTimeRangeField = function useMultiInputDateTimeRangeField(_ref) {
-  var _firstDefaultValue$cu;
   var inSharedProps = _ref.sharedProps,
     startTextFieldProps = _ref.startTextFieldProps,
     startInputRef = _ref.startInputRef,
@@ -39,39 +35,43 @@ export var useMultiInputDateTimeRangeField = function useMultiInputDateTimeRange
     defaultValue = sharedProps.defaultValue,
     format = sharedProps.format,
     shouldRespectLeadingZeros = sharedProps.shouldRespectLeadingZeros,
+    timezoneProp = sharedProps.timezone,
     onChange = sharedProps.onChange,
     disabled = sharedProps.disabled,
     readOnly = sharedProps.readOnly;
-  var firstDefaultValue = React.useRef(defaultValue);
-  var _useControlled = useControlled({
-      name: 'useMultiInputDateTimeRangeField',
-      state: 'value',
-      controlled: valueProp,
-      default: (_firstDefaultValue$cu = firstDefaultValue.current) != null ? _firstDefaultValue$cu : rangeValueManager.emptyValue
+  var _useControlledValueWi = useControlledValueWithTimezone({
+      name: 'useMultiInputDateRangeField',
+      timezone: timezoneProp,
+      value: valueProp,
+      defaultValue: defaultValue,
+      onChange: onChange,
+      valueManager: rangeValueManager
     }),
-    _useControlled2 = _slicedToArray(_useControlled, 2),
-    value = _useControlled2[0],
-    setValue = _useControlled2[1];
+    value = _useControlledValueWi.value,
+    handleValueChange = _useControlledValueWi.handleValueChange,
+    timezone = _useControlledValueWi.timezone;
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
   var buildChangeHandler = function buildChangeHandler(index) {
     return function (newDate, rawContext) {
       var newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
-      setValue(newDateRange);
       var context = _extends({}, rawContext, {
         validationError: validateDateTimeRange({
           adapter: adapter,
           value: newDateRange,
-          props: sharedProps
+          props: _extends({}, sharedProps, {
+            timezone: timezone
+          })
         })
       });
-      onChange == null ? void 0 : onChange(newDateRange, context);
+      handleValueChange(newDateRange, context);
     };
   };
   var handleStartDateChange = useEventCallback(buildChangeHandler(0));
   var handleEndDateChange = useEventCallback(buildChangeHandler(1));
   var validationError = useValidation(_extends({}, sharedProps, {
-    value: value
+    value: value,
+    timezone: timezone
   }), validateDateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
   var startFieldProps = _extends({
     error: !!validationError[0]
@@ -80,6 +80,7 @@ export var useMultiInputDateTimeRangeField = function useMultiInputDateTimeRange
     shouldRespectLeadingZeros: shouldRespectLeadingZeros,
     disabled: disabled,
     readOnly: readOnly,
+    timezone: timezone,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -92,6 +93,7 @@ export var useMultiInputDateTimeRangeField = function useMultiInputDateTimeRange
     shouldRespectLeadingZeros: shouldRespectLeadingZeros,
     disabled: disabled,
     readOnly: readOnly,
+    timezone: timezone,
     unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],

package/legacy/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -1,10 +1,7 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useTimeField as useTimeField } from '@mui/x-date-pickers/TimeField';
-import { useLocalizationContext, useUtils, useValidation } from '@mui/x-date-pickers/internals';
-import useControlled from '@mui/utils/useControlled';
+import { useLocalizationContext, useUtils, useValidation, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
 import { validateTimeRange } from '../../utils/validation/validateTimeRange';
 import { rangeValueManager } from '../../utils/valueManagers';
 export var useDefaultizedTimeRangeFieldProps = function useDefaultizedTimeRangeFieldProps(props) {
@@ -19,7 +16,6 @@ export var useDefaultizedTimeRangeFieldProps = function useDefaultizedTimeRangeF
   });
 };
 export var useMultiInputTimeRangeField = function useMultiInputTimeRangeField(_ref) {
-  var _firstDefaultValue$cu;
   var inSharedProps = _ref.sharedProps,
     startTextFieldProps = _ref.startTextFieldProps,
     startInputRef = _ref.startInputRef,
@@ -33,39 +29,43 @@ export var useMultiInputTimeRangeField = function useMultiInputTimeRangeField(_r
     defaultValue = sharedProps.defaultValue,
     format = sharedProps.format,
     shouldRespectLeadingZeros = sharedProps.shouldRespectLeadingZeros,
+    timezoneProp = sharedProps.timezone,
     onChange = sharedProps.onChange,
     disabled = sharedProps.disabled,
     readOnly = sharedProps.readOnly;
-  var firstDefaultValue = React.useRef(defaultValue);
-  var _useControlled = useControlled({
-      name: 'useMultiInputTimeRangeField',
-      state: 'value',
-      controlled: valueProp,
-      default: (_firstDefaultValue$cu = firstDefaultValue.current) != null ? _firstDefaultValue$cu : rangeValueManager.emptyValue
+  var _useControlledValueWi = useControlledValueWithTimezone({
+      name: 'useMultiInputDateRangeField',
+      timezone: timezoneProp,
+      value: valueProp,
+      defaultValue: defaultValue,
+      onChange: onChange,
+      valueManager: rangeValueManager
     }),
-    _useControlled2 = _slicedToArray(_useControlled, 2),
-    value = _useControlled2[0],
-    setValue = _useControlled2[1];
+    value = _useControlledValueWi.value,
+    handleValueChange = _useControlledValueWi.handleValueChange,
+    timezone = _useControlledValueWi.timezone;
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
   var buildChangeHandler = function buildChangeHandler(index) {
     return function (newDate, rawContext) {
       var newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
-      setValue(newDateRange);
       var context = _extends({}, rawContext, {
         validationError: validateTimeRange({
           adapter: adapter,
           value: newDateRange,
-          props: sharedProps
+          props: _extends({}, sharedProps, {
+            timezone: timezone
+          })
         })
       });
-      onChange == null ? void 0 : onChange(newDateRange, context);
+      handleValueChange(newDateRange, context);
     };
   };
   var handleStartDateChange = useEventCallback(buildChangeHandler(0));
   var handleEndDateChange = useEventCallback(buildChangeHandler(1));
   var validationError = useValidation(_extends({}, sharedProps, {
-    value: value
+    value: value,
+    timezone: timezone
   }), validateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
   var startFieldProps = _extends({
     error: !!validationError[0]
@@ -74,6 +74,7 @@ export var useMultiInputTimeRangeField = function useMultiInputTimeRangeField(_r
     shouldRespectLeadingZeros: shouldRespectLeadingZeros,
     disabled: disabled,
     readOnly: readOnly,
+    timezone: timezone,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -86,6 +87,7 @@ export var useMultiInputTimeRangeField = function useMultiInputTimeRangeField(_r
     shouldRespectLeadingZeros: shouldRespectLeadingZeros,
     disabled: disabled,
     readOnly: readOnly,
+    timezone: timezone,
     unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],

package/legacy/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY4Njg2MjgwMDAwMA==";
+  var releaseInfo = "MTY4NzM4MTIwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/legacy/internal/utils/valueManagers.js

@@ -7,8 +7,8 @@ import { replaceInvalidDateByNull, addPositionPropertiesToSections, createDateSt
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export var rangeValueManager = {
   emptyValue: [null, null],
-  getTodayValue: function getTodayValue(utils, valueType) {
-    return [getTodayDate(utils, valueType), getTodayDate(utils, valueType)];
+  getTodayValue: function getTodayValue(utils, timezone, valueType) {
+    return [getTodayDate(utils, timezone, valueType), getTodayDate(utils, timezone, valueType)];
   },
   getInitialReferenceValue: function getInitialReferenceValue(_ref) {
     var value = _ref.value,
@@ -44,6 +44,9 @@ export var rangeValueManager = {
       throw new Error('MUI: The timezone of the start and the end date should be the same');
     }
     return timezoneStart != null ? timezoneStart : timezoneEnd;
+  },
+  setTimezone: function setTimezone(utils, timezone, value) {
+    return [value[0] == null ? null : utils.setTimezone(value[0], timezone), value[1] == null ? null : utils.setTimezone(value[1], timezone)];
   }
 };
 export var rangeFieldValueManager = {

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -1,18 +1,17 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber"],
+const _excluded = ["value", "defaultValue", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import useEventCallback from '@mui/utils/useEventCallback';
-import useControlled from '@mui/utils/useControlled';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { resolveComponentProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
-import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, useNow, uncapitalizeObjectKeys, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, useNow, uncapitalizeObjectKeys, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internal/utils/releaseInfo';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internal/utils/date-utils';
@@ -40,7 +39,7 @@ const DateRangeCalendarMonthContainer = styled('div', {
   theme
 }) => ({
   '&:not(:last-of-type)': {
-    borderRight: `2px solid ${(theme.vars || theme).palette.divider}`
+    borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
   }
 }));
 const DateRangeCalendarArrowSwitcher = styled(PickersArrowSwitcher)({
@@ -108,9 +107,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDateRangeCalendarUtilityClass, classes);
 };
 const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
-  const utils = useUtils();
-  const localeText = useLocaleText();
-  const now = useNow();
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   const shouldHavePreview = useMediaQuery(DEFAULT_DESKTOP_MODE_MEDIA_QUERY, {
     defaultMatches: false
@@ -148,17 +144,27 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       autoFocus,
       fixedWeekNumber,
       disableDragEditing,
-      displayWeekNumber
+      displayWeekNumber,
+      timezone: timezoneProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const slots = innerSlots ?? uncapitalizeObjectKeys(components);
-  const slotProps = innerSlotProps ?? componentsProps;
-  const [value, setValue] = useControlled({
-    controlled: valueProp,
-    default: defaultValue ?? rangeValueManager.emptyValue,
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
     name: 'DateRangeCalendar',
-    state: 'value'
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: rangeValueManager
   });
+  const utils = useUtils();
+  const localeText = useLocaleText();
+  const now = useNow(timezone);
+  const slots = innerSlots ?? uncapitalizeObjectKeys(components);
+  const slotProps = innerSlotProps ?? componentsProps;
   const {
     rangePosition,
     onRangePositionChange
@@ -185,8 +191,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     });
     onRangePositionChange(nextSelection);
     const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
-    setValue(newRange);
-    onChange?.(newRange, isFullRangeSelected ? 'finish' : 'partial');
+    handleValueChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
   });
   const handleDrop = useEventCallback(newDate => {
     handleSelectedDayChange(newDate, undefined, true);
@@ -201,7 +206,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       onDrop: handleDrop,
       onDatePositionChange: handleDatePositionChange,
       utils,
-      dateRange: valueDayRange
+      dateRange: valueDayRange,
+      timezone
     }),
     {
       isDragging,
@@ -248,7 +254,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     minDate,
     onMonthChange,
     reduceAnimations,
-    shouldDisableDate: wrappedShouldDisableDate
+    shouldDisableDate: wrappedShouldDisableDate,
+    timezone
   });
   const prevValue = React.useRef(null);
   React.useEffect(() => {
@@ -283,11 +290,13 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   }, [changeMonth, calendarState.currentMonth, utils]);
   const isNextMonthDisabled = useNextMonthDisabled(calendarState.currentMonth, {
     disableFuture,
-    maxDate
+    maxDate,
+    timezone
   });
   const isPreviousMonthDisabled = usePreviousMonthDisabled(calendarState.currentMonth, {
     disablePast,
-    minDate
+    minDate,
+    timezone
   });
   const baseDateValidationProps = {
     disablePast,
@@ -415,7 +424,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         disableFuture: disableFuture,
         reduceAnimations: reduceAnimations,
         slots: slots,
-        slotProps: slotProps
+        slotProps: slotProps,
+        timezone: timezone
       }) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
         onGoToPrevious: selectPreviousMonth,
         onGoToNext: selectNextMonth,
@@ -447,7 +457,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         slotProps: slotPropsForDayCalendar,
         autoFocus: month === focusedMonth,
         fixedWeekNumber: fixedWeekNumber,
-        displayWeekNumber: displayWeekNumber
+        displayWeekNumber: displayWeekNumber,
+        timezone: timezone
       }), index)]
     }, month))]
   }));
@@ -636,6 +647,14 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.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/DateRangeCalendar/useDragRange.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { isEndOfRange, isStartOfRange } from '../internal/utils/date-utils';
-const resolveDateFromTarget = (target, utils) => {
+const resolveDateFromTarget = (target, utils, timezone) => {
   const timestampString = target.dataset.timestamp;
   if (!timestampString) {
     return null;
   }
   const timestamp = +timestampString;
-  return utils.date(new Date(timestamp));
+  return utils.dateWithTimezone(new Date(timestamp).toISOString(), timezone);
 };
 const isSameAsDraggingDate = event => {
   const timestampString = event.target.dataset.timestamp;
@@ -48,7 +48,8 @@ const useDragRangeEvents = ({
   onDatePositionChange,
   onDrop,
   disableDragEditing,
-  dateRange
+  dateRange,
+  timezone
 }) => {
   const emptyDragImgRef = React.useRef(null);
   React.useEffect(() => {
@@ -66,7 +67,7 @@ const useDragRangeEvents = ({
     return shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
   };
   const handleDragStart = useEventCallback(event => {
-    const newDate = resolveDateFromTarget(event.target, utils);
+    const newDate = resolveDateFromTarget(event.target, utils, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -90,7 +91,7 @@ const useDragRangeEvents = ({
     if (!target) {
       return;
     }
-    const newDate = resolveDateFromTarget(target, utils);
+    const newDate = resolveDateFromTarget(target, utils, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -109,14 +110,14 @@ const useDragRangeEvents = ({
     event.preventDefault();
     event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
-    setRangeDragDay(resolveDateFromTarget(event.target, utils));
+    setRangeDragDay(resolveDateFromTarget(event.target, utils, timezone));
   });
   const handleTouchMove = useEventCallback(event => {
     const target = resolveElementFromTouch(event);
     if (!isDragging || !target) {
       return;
     }
-    const newDate = resolveDateFromTarget(target, utils);
+    const newDate = resolveDateFromTarget(target, utils, timezone);
     if (newDate) {
       setRangeDragDay(newDate);
     }
@@ -149,7 +150,7 @@ const useDragRangeEvents = ({
 
     // make sure the focused element is the element where touch ended
     target.focus();
-    const newDate = resolveDateFromTarget(target, utils);
+    const newDate = resolveDateFromTarget(target, utils, timezone);
     if (newDate) {
       onDrop(newDate);
     }
@@ -176,7 +177,7 @@ const useDragRangeEvents = ({
     if (isSameAsDraggingDate(event)) {
       return;
     }
-    const newDate = resolveDateFromTarget(event.target, utils);
+    const newDate = resolveDateFromTarget(event.target, utils, timezone);
     if (newDate) {
       onDrop(newDate);
     }
@@ -198,7 +199,8 @@ export const useDragRange = ({
   utils,
   onDatePositionChange,
   onDrop,
-  dateRange
+  dateRange,
+  timezone
 }) => {
   const [isDragging, setIsDragging] = React.useState(false);
   const [rangeDragDay, setRangeDragDay] = React.useState(null);
@@ -227,7 +229,8 @@ export const useDragRange = ({
     isDragging,
     setRangeDragDay: handleRangeDragDayChange,
     disableDragEditing,
-    dateRange
+    dateRange,
+    timezone
   });
   return React.useMemo(() => _extends({
     isDragging,

package/modern/DateRangePicker/DateRangePicker.js

@@ -307,6 +307,14 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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.