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

package/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)({
@@ -109,9 +108,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
@@ -149,17 +145,27 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       autoFocus,
       fixedWeekNumber,
       disableDragEditing,
-      displayWeekNumber
+      displayWeekNumber,
+      timezone: timezoneProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
-  const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
-  const [value, setValue] = useControlled({
-    controlled: valueProp,
-    default: defaultValue != null ? 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 != null ? innerSlots : uncapitalizeObjectKeys(components);
+  const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   const {
     rangePosition,
     onRangePositionChange
@@ -186,8 +192,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     });
     onRangePositionChange(nextSelection);
     const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
-    setValue(newRange);
-    onChange == null ? void 0 : onChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
+    handleValueChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
   });
   const handleDrop = useEventCallback(newDate => {
     handleSelectedDayChange(newDate, undefined, true);
@@ -202,7 +207,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       onDrop: handleDrop,
       onDatePositionChange: handleDatePositionChange,
       utils,
-      dateRange: valueDayRange
+      dateRange: valueDayRange,
+      timezone
     }),
     {
       isDragging,
@@ -249,7 +255,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     minDate,
     onMonthChange,
     reduceAnimations,
-    shouldDisableDate: wrappedShouldDisableDate
+    shouldDisableDate: wrappedShouldDisableDate,
+    timezone
   });
   const prevValue = React.useRef(null);
   React.useEffect(() => {
@@ -285,11 +292,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,
@@ -419,7 +428,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,
@@ -451,7 +461,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         slotProps: slotPropsForDayCalendar,
         autoFocus: month === focusedMonth,
         fixedWeekNumber: fixedWeekNumber,
-        displayWeekNumber: displayWeekNumber
+        displayWeekNumber: displayWeekNumber,
+        timezone: timezone
       }), index)]
     }, month))]
   }));
@@ -640,6 +651,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/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base';
 import { Theme } from '@mui/material/styles';
+import { TimezoneProps } from '@mui/x-date-pickers/models';
 import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, PickerSelectionState, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, DayCalendarProps, ExportedUseViewsOptions, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { DateRange, DayRangeValidationProps } from '../internal/models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
@@ -22,7 +23,7 @@ export interface DateRangeCalendarSlotsComponentsProps<TDate> extends PickersArr
         selected: boolean;
     }>;
 }
-export interface ExportedDateRangeCalendarProps<TDate> extends ExportedDayCalendarProps, BaseDateValidationProps<TDate>, DayRangeValidationProps<TDate>, Pick<ExportedUseViewsOptions<'day'>, 'autoFocus'> {
+export interface ExportedDateRangeCalendarProps<TDate> extends ExportedDayCalendarProps, BaseDateValidationProps<TDate>, DayRangeValidationProps<TDate>, TimezoneProps, Pick<ExportedUseViewsOptions<'day'>, 'autoFocus'> {
     /**
      * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
      * @default false

package/DateRangeCalendar/useDragRange.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiPickersAdapter } from '@mui/x-date-pickers/models';
+import { MuiPickersAdapter, PickersTimezone } from '@mui/x-date-pickers/models';
 import { DateRangePosition } from './DateRangeCalendar.types';
 import { DateRange } from '../internal/models';
 interface UseDragRangeParams<TDate> {
@@ -11,6 +11,7 @@ interface UseDragRangeParams<TDate> {
     onDatePositionChange: (position: DateRangePosition) => void;
     onDrop: (newDate: TDate) => void;
     dateRange: DateRange<TDate>;
+    timezone: PickersTimezone;
 }
 interface UseDragRangeEvents {
     onDragStart?: React.DragEventHandler<HTMLButtonElement>;
@@ -28,5 +29,5 @@ interface UseDragRangeResponse<TDate> extends UseDragRangeEvents {
     rangeDragDay: TDate | null;
     draggingDatePosition: DateRangePosition | null;
 }
-export declare const useDragRange: <TDate>({ disableDragEditing, utils, onDatePositionChange, onDrop, dateRange, }: Omit<UseDragRangeParams<TDate>, "isDragging" | "setRangeDragDay" | "setIsDragging">) => UseDragRangeResponse<TDate>;
+export declare const useDragRange: <TDate>({ disableDragEditing, utils, onDatePositionChange, onDrop, dateRange, timezone, }: Omit<UseDragRangeParams<TDate>, "isDragging" | "setRangeDragDay" | "setIsDragging">) => UseDragRangeResponse<TDate>;
 export {};

package/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;
@@ -49,7 +49,8 @@ const useDragRangeEvents = ({
   onDatePositionChange,
   onDrop,
   disableDragEditing,
-  dateRange
+  dateRange,
+  timezone
 }) => {
   const emptyDragImgRef = React.useRef(null);
   React.useEffect(() => {
@@ -67,7 +68,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;
     }
@@ -91,7 +92,7 @@ const useDragRangeEvents = ({
     if (!target) {
       return;
     }
-    const newDate = resolveDateFromTarget(target, utils);
+    const newDate = resolveDateFromTarget(target, utils, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -110,14 +111,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);
     }
@@ -150,7 +151,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);
     }
@@ -177,7 +178,7 @@ const useDragRangeEvents = ({
     if (isSameAsDraggingDate(event)) {
       return;
     }
-    const newDate = resolveDateFromTarget(event.target, utils);
+    const newDate = resolveDateFromTarget(event.target, utils, timezone);
     if (newDate) {
       onDrop(newDate);
     }
@@ -199,7 +200,8 @@ export const useDragRange = ({
   utils,
   onDatePositionChange,
   onDrop,
-  dateRange
+  dateRange,
+  timezone
 }) => {
   const [isDragging, setIsDragging] = React.useState(false);
   const [rangeDragDay, setRangeDragDay] = React.useState(null);
@@ -228,7 +230,8 @@ export const useDragRange = ({
     isDragging,
     setRangeDragDay: handleRangeDragDayChange,
     disableDragEditing,
-    dateRange
+    dateRange,
+    timezone
   });
   return React.useMemo(() => _extends({
     isDragging,

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

package/DesktopDateRangePicker/DesktopDateRangePicker.js

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

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

@@ -301,6 +301,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/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -350,6 +350,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/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts

@@ -67,4 +67,4 @@ export interface MultiInputDateTimeRangeFieldSlotsComponentsProps<TDate> {
     }>;
     separator?: SlotComponentProps<typeof Typography, {}, MultiInputDateTimeRangeFieldOwnerState<TDate>>;
 }
-export type UseMultiInputDateTimeRangeFieldDefaultizedProps<TDate, AdditionalProps extends {}> = UseDateTimeRangeFieldDefaultizedProps<TDate> & AdditionalProps;
+export type UseMultiInputDateTimeRangeFieldDefaultizedProps<TDate, AdditionalProps extends {}> = UseDateTimeRangeFieldDefaultizedProps<TDate> & Omit<AdditionalProps, 'value' | 'defaultValue' | 'onChange'>;

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -326,6 +326,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/MultiInputTimeRangeField/MultiInputTimeRangeField.types.d.ts

@@ -67,4 +67,4 @@ export interface MultiInputTimeRangeFieldSlotsComponentsProps<TDate> {
     }>;
     separator?: SlotComponentProps<typeof Typography, {}, MultiInputTimeRangeFieldOwnerState<TDate>>;
 }
-export type UseMultiInputTimeRangeFieldDefaultizedProps<TDate, AdditionalProps extends {}> = UseTimeRangeFieldDefaultizedProps<TDate> & AdditionalProps;
+export type UseMultiInputTimeRangeFieldDefaultizedProps<TDate, AdditionalProps extends {}> = UseTimeRangeFieldDefaultizedProps<TDate> & Omit<AdditionalProps, 'value' | 'defaultValue' | 'onChange'>;

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -296,6 +296,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/SingleInputDateRangeField/SingleInputDateRangeField.types.d.ts

@@ -9,7 +9,7 @@ export interface UseSingleInputDateRangeFieldParams<TDate, TChildProps extends {
 }
 export interface UseSingleInputDateRangeFieldProps<TDate> extends UseDateRangeFieldProps<TDate> {
 }
-export type UseSingleInputDateRangeFieldDefaultizedProps<TDate, AdditionalProps extends {}> = UseDateRangeFieldDefaultizedProps<TDate> & AdditionalProps;
+export type UseSingleInputDateRangeFieldDefaultizedProps<TDate, AdditionalProps extends {}> = UseDateRangeFieldDefaultizedProps<TDate> & Omit<AdditionalProps, 'value' | 'defaultValue' | 'onChange'>;
 export type UseSingleInputDateRangeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseSingleInputDateRangeFieldProps<TDate>> & UseSingleInputDateRangeFieldProps<TDate>;
 export type SingleInputDateRangeFieldProps<TDate, TChildProps extends {} = FieldsTextFieldProps> = UseSingleInputDateRangeFieldComponentProps<TDate, TChildProps> & {
     /**

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -345,6 +345,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/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -321,6 +321,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.
    */

package/StaticDateRangePicker/StaticDateRangePicker.js

@@ -253,6 +253,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/dateRangeViewRenderers/dateRangeViewRenderers.d.ts

@@ -10,4 +10,4 @@ export interface DateRangeViewRendererProps<TDate, TView extends DateOrTimeViewW
  * We don't pass all the props down to `DateRangeCalendar`,
  * because otherwise some unwanted props would be passed to the HTML element.
  */
-export declare const renderDateRangeViewCalendar: <TDate extends unknown>({ value, defaultValue, onChange, className, classes, 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, sx, autoFocus, fixedWeekNumber, disableDragEditing, displayWeekNumber, }: DateRangeViewRendererProps<TDate, any>) => React.JSX.Element;
+export declare const renderDateRangeViewCalendar: <TDate extends unknown>({ value, defaultValue, onChange, className, classes, 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, sx, autoFocus, fixedWeekNumber, disableDragEditing, displayWeekNumber, timezone, }: DateRangeViewRendererProps<TDate, any>) => React.JSX.Element;

package/dateRangeViewRenderers/dateRangeViewRenderers.js

@@ -40,7 +40,8 @@ export const renderDateRangeViewCalendar = ({
   autoFocus,
   fixedWeekNumber,
   disableDragEditing,
-  displayWeekNumber
+  displayWeekNumber,
+  timezone
 }) => /*#__PURE__*/_jsx(DateRangeCalendar, {
   value: value,
   defaultValue: defaultValue,
@@ -76,5 +77,6 @@ export const renderDateRangeViewCalendar = ({
   autoFocus: autoFocus,
   fixedWeekNumber: fixedWeekNumber,
   disableDragEditing: disableDragEditing,
-  displayWeekNumber: displayWeekNumber
+  displayWeekNumber: displayWeekNumber,
+  timezone: timezone
 });

package/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/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -27,6 +27,7 @@ export const useDesktopRangePicker = _ref => {
     sx,
     format,
     formatDensity,
+    timezone,
     label,
     inputRef,
     readOnly,
@@ -79,6 +80,7 @@ export const useDesktopRangePicker = _ref => {
       sx,
       format,
       formatDensity,
+      timezone,
       autoFocus: autoFocus && !props.open,
       ref: fieldContainerRef
     }, fieldType === 'single-input' && {

package/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -28,6 +28,7 @@ export const useMobileRangePicker = _ref => {
     sx,
     format,
     formatDensity,
+    timezone,
     label,
     inputRef,
     readOnly,
@@ -68,7 +69,8 @@ export const useMobileRangePicker = _ref => {
       className,
       sx,
       format,
-      formatDensity
+      formatDensity,
+      timezone
     }, fieldType === 'single-input' && {
       inputRef
     }),

package/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.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_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';
@@ -16,7 +14,6 @@ export const useMultiInputDateRangeField = ({
   endInputRef,
   unstableEndFieldRef
 }) => {
-  var _firstDefaultValue$cu;
   const sharedProps = useDefaultizedDateRangeFieldProps(inSharedProps);
   const adapter = useLocalizationContext();
   const {
@@ -29,35 +26,43 @@ export const useMultiInputDateRangeField = ({
     disabled,
     readOnly,
     selectedSections,
-    onSelectedSectionsChange
+    onSelectedSectionsChange,
+    timezone: timezoneProp
   } = sharedProps;
-  const firstDefaultValue = React.useRef(defaultValue);
-  const [value, setValue] = useControlled({
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
     name: 'useMultiInputDateRangeField',
-    state: 'value',
-    controlled: valueProp,
-    default: (_firstDefaultValue$cu = firstDefaultValue.current) != null ? _firstDefaultValue$cu : rangeValueManager.emptyValue
+    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: validateDateRange({
           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
   }), validateDateRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
   const startFieldProps = _extends({
     error: !!validationError[0]
@@ -67,6 +72,7 @@ export const useMultiInputDateRangeField = ({
     format,
     formatDensity,
     shouldRespectLeadingZeros,
+    timezone,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -82,6 +88,7 @@ export const useMultiInputDateRangeField = ({
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
+    timezone,
     unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],