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

package/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -1,9 +1,7 @@
 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 const useDefaultizedDateTimeRangeFieldProps = props => {
@@ -32,7 +30,6 @@ export const useMultiInputDateTimeRangeField = ({
   endInputRef,
   unstableEndFieldRef
 }) => {
-  var _firstDefaultValue$cu;
   const sharedProps = useDefaultizedDateTimeRangeFieldProps(inSharedProps);
   const adapter = useLocalizationContext();
   const {
@@ -40,37 +37,45 @@ export const useMultiInputDateTimeRangeField = ({
     defaultValue,
     format,
     shouldRespectLeadingZeros,
+    timezone: timezoneProp,
     onChange,
     disabled,
     readOnly
   } = sharedProps;
-  const firstDefaultValue = React.useRef(defaultValue);
-  const [value, setValue] = useControlled({
-    name: 'useMultiInputDateTimeRangeField',
-    state: 'value',
-    controlled: valueProp,
-    default: (_firstDefaultValue$cu = firstDefaultValue.current) != null ? _firstDefaultValue$cu : rangeValueManager.emptyValue
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
+    name: 'useMultiInputDateRangeField',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: rangeValueManager
   });
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
   const buildChangeHandler = index => {
     return (newDate, rawContext) => {
       const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
-      setValue(newDateRange);
       const context = _extends({}, rawContext, {
         validationError: validateDateTimeRange({
           adapter,
           value: newDateRange,
-          props: sharedProps
+          props: _extends({}, sharedProps, {
+            timezone
+          })
         })
       });
-      onChange == null ? void 0 : onChange(newDateRange, context);
+      handleValueChange(newDateRange, context);
     };
   };
   const handleStartDateChange = useEventCallback(buildChangeHandler(0));
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
   const validationError = useValidation(_extends({}, sharedProps, {
-    value
+    value,
+    timezone
   }), validateDateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
   const startFieldProps = _extends({
     error: !!validationError[0]
@@ -79,6 +84,7 @@ export const useMultiInputDateTimeRangeField = ({
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
+    timezone,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -91,6 +97,7 @@ export const useMultiInputDateTimeRangeField = ({
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
+    timezone,
     unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],

package/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -1,9 +1,7 @@
 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 const useDefaultizedTimeRangeFieldProps = props => {
@@ -26,7 +24,6 @@ export const useMultiInputTimeRangeField = ({
   endInputRef,
   unstableEndFieldRef
 }) => {
-  var _firstDefaultValue$cu;
   const sharedProps = useDefaultizedTimeRangeFieldProps(inSharedProps);
   const adapter = useLocalizationContext();
   const {
@@ -34,37 +31,45 @@ export const useMultiInputTimeRangeField = ({
     defaultValue,
     format,
     shouldRespectLeadingZeros,
+    timezone: timezoneProp,
     onChange,
     disabled,
     readOnly
   } = sharedProps;
-  const firstDefaultValue = React.useRef(defaultValue);
-  const [value, setValue] = useControlled({
-    name: 'useMultiInputTimeRangeField',
-    state: 'value',
-    controlled: valueProp,
-    default: (_firstDefaultValue$cu = firstDefaultValue.current) != null ? _firstDefaultValue$cu : rangeValueManager.emptyValue
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
+    name: 'useMultiInputDateRangeField',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: rangeValueManager
   });
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
   const buildChangeHandler = index => {
     return (newDate, rawContext) => {
       const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
-      setValue(newDateRange);
       const context = _extends({}, rawContext, {
         validationError: validateTimeRange({
           adapter,
           value: newDateRange,
-          props: sharedProps
+          props: _extends({}, sharedProps, {
+            timezone
+          })
         })
       });
-      onChange == null ? void 0 : onChange(newDateRange, context);
+      handleValueChange(newDateRange, context);
     };
   };
   const handleStartDateChange = useEventCallback(buildChangeHandler(0));
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
   const validationError = useValidation(_extends({}, sharedProps, {
-    value
+    value,
+    timezone
   }), validateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
   const startFieldProps = _extends({
     error: !!validationError[0]
@@ -73,6 +78,7 @@ export const useMultiInputTimeRangeField = ({
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
+    timezone,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -85,6 +91,7 @@ export const useMultiInputTimeRangeField = ({
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
+    timezone,
     unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],

package/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4Njg2MjgwMDAwMA==";
+  const 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/internal/utils/validation/validateDateRange.d.ts

@@ -1,6 +1,7 @@
-import { Validator, BaseDateValidationProps } from '@mui/x-date-pickers/internals';
+import { TimezoneProps } from '@mui/x-date-pickers/models';
+import { Validator, BaseDateValidationProps, DefaultizedProps } from '@mui/x-date-pickers/internals';
 import { DateRange, DayRangeValidationProps } from '../../models';
 import { DateRangeValidationError } from '../../../models';
-export interface DateRangeComponentValidationProps<TDate> extends DayRangeValidationProps<TDate>, Required<BaseDateValidationProps<TDate>> {
+export interface DateRangeComponentValidationProps<TDate> extends DayRangeValidationProps<TDate>, Required<BaseDateValidationProps<TDate>>, DefaultizedProps<TimezoneProps, 'timezone'> {
 }
 export declare const validateDateRange: Validator<DateRange<any>, any, DateRangeValidationError, DateRangeComponentValidationProps<any>>;

package/internal/utils/validation/validateDateTimeRange.d.ts

@@ -1,7 +1,8 @@
-import { Validator, BaseDateValidationProps, TimeValidationProps } from '@mui/x-date-pickers/internals';
+import { TimezoneProps } from '@mui/x-date-pickers/models';
+import { Validator, BaseDateValidationProps, TimeValidationProps, DefaultizedProps } from '@mui/x-date-pickers/internals';
 import { DayRangeValidationProps } from '../../models/dateRange';
 import { DateRange } from '../../models/range';
 import { DateTimeRangeValidationError } from '../../../models';
-export interface DateTimeRangeComponentValidationProps<TDate> extends DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, Required<BaseDateValidationProps<TDate>> {
+export interface DateTimeRangeComponentValidationProps<TDate> extends DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, Required<BaseDateValidationProps<TDate>>, DefaultizedProps<TimezoneProps, 'timezone'> {
 }
 export declare const validateDateTimeRange: Validator<DateRange<any>, any, DateTimeRangeValidationError, DateTimeRangeComponentValidationProps<any>>;

package/internal/utils/validation/validateTimeRange.d.ts

@@ -1,6 +1,7 @@
-import { Validator, BaseTimeValidationProps } from '@mui/x-date-pickers/internals';
+import { TimezoneProps } from '@mui/x-date-pickers/models';
+import { Validator, BaseTimeValidationProps, DefaultizedProps } from '@mui/x-date-pickers/internals';
 import { DateRange } from '../../models/range';
 import { TimeRangeValidationError } from '../../../models';
-export interface TimeRangeComponentValidationProps extends Required<BaseTimeValidationProps> {
+export interface TimeRangeComponentValidationProps extends Required<BaseTimeValidationProps>, DefaultizedProps<TimezoneProps, 'timezone'> {
 }
 export declare const validateTimeRange: Validator<DateRange<any>, any, TimeRangeValidationError, TimeRangeComponentValidationProps>;

package/internal/utils/valueManagers.js

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

package/legacy/DateRangeCalendar/DateRangeCalendar.js

@@ -2,19 +2,18 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _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"],
+var _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';
@@ -46,7 +45,7 @@ var DateRangeCalendarMonthContainer = styled('div', {
   var theme = _ref.theme;
   return {
     '&:not(:last-of-type)': {
-      borderRight: "2px solid ".concat((theme.vars || theme).palette.divider)
+      borderRight: "1px solid ".concat((theme.vars || theme).palette.divider)
     }
   };
 });
@@ -113,9 +112,6 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDateRangeCalendarUtilityClass, classes);
 };
 var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
-  var utils = useUtils();
-  var localeText = useLocaleText();
-  var now = useNow();
   var props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   var shouldHavePreview = useMediaQuery(DEFAULT_DESKTOP_MODE_MEDIA_QUERY, {
     defaultMatches: false
@@ -154,18 +150,24 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
     fixedWeekNumber = props.fixedWeekNumber,
     disableDragEditing = props.disableDragEditing,
     displayWeekNumber = props.displayWeekNumber,
+    timezoneProp = props.timezone,
     other = _objectWithoutProperties(props, _excluded);
-  var slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  var slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
-  var _useControlled = useControlled({
-      controlled: valueProp,
-      default: defaultValue != null ? defaultValue : rangeValueManager.emptyValue,
+  var _useControlledValueWi = useControlledValueWithTimezone({
       name: 'DateRangeCalendar',
-      state: 'value'
+      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;
+  var utils = useUtils();
+  var localeText = useLocaleText();
+  var now = useNow(timezone);
+  var slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
+  var slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   var _useRangePosition = useRangePosition({
       rangePosition: rangePositionProp,
       defaultRangePosition: inDefaultRangePosition,
@@ -191,8 +193,7 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
       newRange = _calculateRangeChange.newRange;
     onRangePositionChange(nextSelection);
     var isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
-    setValue(newRange);
-    onChange == null ? void 0 : onChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
+    handleValueChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
   });
   var handleDrop = useEventCallback(function (newDate) {
     handleSelectedDayChange(newDate, undefined, true);
@@ -209,7 +210,8 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
       onDrop: handleDrop,
       onDatePositionChange: handleDatePositionChange,
       utils: utils,
-      dateRange: valueDayRange
+      dateRange: valueDayRange,
+      timezone: timezone
     }),
     isDragging = _useDragRange.isDragging,
     rangeDragDay = _useDragRange.rangeDragDay,
@@ -250,7 +252,8 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
       minDate: minDate,
       onMonthChange: onMonthChange,
       reduceAnimations: reduceAnimations,
-      shouldDisableDate: wrappedShouldDisableDate
+      shouldDisableDate: wrappedShouldDisableDate,
+      timezone: timezone
     }),
     calendarState = _useCalendarState.calendarState,
     changeFocusedDay = _useCalendarState.changeFocusedDay,
@@ -291,11 +294,13 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
   }, [changeMonth, calendarState.currentMonth, utils]);
   var isNextMonthDisabled = useNextMonthDisabled(calendarState.currentMonth, {
     disableFuture: disableFuture,
-    maxDate: maxDate
+    maxDate: maxDate,
+    timezone: timezone
   });
   var isPreviousMonthDisabled = usePreviousMonthDisabled(calendarState.currentMonth, {
     disablePast: disablePast,
-    minDate: minDate
+    minDate: minDate,
+    timezone: timezone
   });
   var baseDateValidationProps = {
     disablePast: disablePast,
@@ -445,7 +450,8 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
           disableFuture: disableFuture,
           reduceAnimations: reduceAnimations,
           slots: slots,
-          slotProps: slotProps
+          slotProps: slotProps,
+          timezone: timezone
         }) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
           onGoToPrevious: selectPreviousMonth,
           onGoToNext: selectNextMonth,
@@ -477,7 +483,8 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
           slotProps: slotPropsForDayCalendar,
           autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
-          displayWeekNumber: displayWeekNumber
+          displayWeekNumber: displayWeekNumber,
+          timezone: timezone
         }), index)]
       }, month);
     })]
@@ -667,6 +674,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/legacy/DateRangeCalendar/useDragRange.js

@@ -3,13 +3,13 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { isEndOfRange, isStartOfRange } from '../internal/utils/date-utils';
-var resolveDateFromTarget = function resolveDateFromTarget(target, utils) {
+var resolveDateFromTarget = function resolveDateFromTarget(target, utils, timezone) {
   var timestampString = target.dataset.timestamp;
   if (!timestampString) {
     return null;
   }
   var timestamp = +timestampString;
-  return utils.date(new Date(timestamp));
+  return utils.dateWithTimezone(new Date(timestamp).toISOString(), timezone);
 };
 var isSameAsDraggingDate = function isSameAsDraggingDate(event) {
   var timestampString = event.target.dataset.timestamp;
@@ -50,7 +50,8 @@ var useDragRangeEvents = function useDragRangeEvents(_ref) {
     onDatePositionChange = _ref.onDatePositionChange,
     onDrop = _ref.onDrop,
     disableDragEditing = _ref.disableDragEditing,
-    dateRange = _ref.dateRange;
+    dateRange = _ref.dateRange,
+    timezone = _ref.timezone;
   var emptyDragImgRef = React.useRef(null);
   React.useEffect(function () {
     // Preload the image - required for Safari support: https://stackoverflow.com/a/40923520/3303436
@@ -67,7 +68,7 @@ var useDragRangeEvents = function useDragRangeEvents(_ref) {
     return shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
   };
   var handleDragStart = useEventCallback(function (event) {
-    var newDate = resolveDateFromTarget(event.target, utils);
+    var newDate = resolveDateFromTarget(event.target, utils, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -91,7 +92,7 @@ var useDragRangeEvents = function useDragRangeEvents(_ref) {
     if (!target) {
       return;
     }
-    var newDate = resolveDateFromTarget(target, utils);
+    var newDate = resolveDateFromTarget(target, utils, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -110,14 +111,14 @@ var useDragRangeEvents = function useDragRangeEvents(_ref) {
     event.preventDefault();
     event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
-    setRangeDragDay(resolveDateFromTarget(event.target, utils));
+    setRangeDragDay(resolveDateFromTarget(event.target, utils, timezone));
   });
   var handleTouchMove = useEventCallback(function (event) {
     var target = resolveElementFromTouch(event);
     if (!isDragging || !target) {
       return;
     }
-    var newDate = resolveDateFromTarget(target, utils);
+    var newDate = resolveDateFromTarget(target, utils, timezone);
     if (newDate) {
       setRangeDragDay(newDate);
     }
@@ -150,7 +151,7 @@ var useDragRangeEvents = function useDragRangeEvents(_ref) {
 
     // make sure the focused element is the element where touch ended
     target.focus();
-    var newDate = resolveDateFromTarget(target, utils);
+    var newDate = resolveDateFromTarget(target, utils, timezone);
     if (newDate) {
       onDrop(newDate);
     }
@@ -177,7 +178,7 @@ var useDragRangeEvents = function useDragRangeEvents(_ref) {
     if (isSameAsDraggingDate(event)) {
       return;
     }
-    var newDate = resolveDateFromTarget(event.target, utils);
+    var newDate = resolveDateFromTarget(event.target, utils, timezone);
     if (newDate) {
       onDrop(newDate);
     }
@@ -199,7 +200,8 @@ export var useDragRange = function useDragRange(_ref2) {
     utils = _ref2.utils,
     onDatePositionChange = _ref2.onDatePositionChange,
     onDrop = _ref2.onDrop,
-    dateRange = _ref2.dateRange;
+    dateRange = _ref2.dateRange,
+    timezone = _ref2.timezone;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isDragging = _React$useState2[0],
@@ -235,7 +237,8 @@ export var useDragRange = function useDragRange(_ref2) {
     isDragging: isDragging,
     setRangeDragDay: handleRangeDragDayChange,
     disableDragEditing: disableDragEditing,
-    dateRange: dateRange
+    dateRange: dateRange,
+    timezone: timezone
   });
   return React.useMemo(function () {
     return _extends({

package/legacy/DateRangePicker/DateRangePicker.js

@@ -306,6 +306,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.

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -315,6 +315,14 @@ DesktopDateRangePicker.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/MobileDateRangePicker/MobileDateRangePicker.js

@@ -320,6 +320,14 @@ MobileDateRangePicker.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/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -300,6 +300,14 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * The system prop, which 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,
   unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**

package/legacy/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -349,6 +349,14 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * The system prop, which 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,
   unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**

package/legacy/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -325,6 +325,14 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * The system prop, which 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,
   unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**

package/legacy/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -290,6 +290,14 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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/legacy/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -339,6 +339,14 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.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/legacy/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -315,6 +315,14 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.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.
    */