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

package/modern/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 => {
@@ -38,37 +36,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.current ?? 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?.(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]
@@ -77,6 +83,7 @@ export const useMultiInputDateTimeRangeField = ({
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
+    timezone,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -89,6 +96,7 @@ export const useMultiInputDateTimeRangeField = ({
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
+    timezone,
     unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],

package/modern/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 => {
@@ -32,37 +30,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.current ?? 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?.(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]
@@ -71,6 +77,7 @@ export const useMultiInputTimeRangeField = ({
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
+    timezone,
     unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -83,6 +90,7 @@ export const useMultiInputTimeRangeField = ({
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
+    timezone,
     unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],

package/modern/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4NjI2MTYwMDAwMA==";
+  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/modern/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 ?? 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/node/DateRangeCalendar/DateRangeCalendar.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _utils = require("@mui/base/utils");
 var _styles = require("@mui/material/styles");
@@ -27,7 +26,7 @@ var _valueManagers = require("../internal/utils/valueManagers");
 var _useDragRange2 = require("./useDragRange");
 var _useRangePosition = require("../internal/hooks/useRangePosition");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -48,7 +47,7 @@ const DateRangeCalendarMonthContainer = (0, _styles.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 = (0, _styles.styled)(_internals.PickersArrowSwitcher)({
@@ -116,9 +115,6 @@ const useUtilityClasses = ownerState => {
   return (0, _utils2.unstable_composeClasses)(slots, _dateRangeCalendarClasses.getDateRangeCalendarUtilityClass, classes);
 };
 const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
-  const utils = (0, _internals.useUtils)();
-  const localeText = (0, _internals.useLocaleText)();
-  const now = (0, _internals.useNow)();
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   const shouldHavePreview = (0, _useMediaQuery.default)(_internals.DEFAULT_DESKTOP_MODE_MEDIA_QUERY, {
     defaultMatches: false
@@ -156,17 +152,27 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       autoFocus,
       fixedWeekNumber,
       disableDragEditing,
-      displayWeekNumber
+      displayWeekNumber,
+      timezone: timezoneProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const slots = innerSlots ?? (0, _internals.uncapitalizeObjectKeys)(components);
-  const slotProps = innerSlotProps ?? componentsProps;
-  const [value, setValue] = (0, _useControlled.default)({
-    controlled: valueProp,
-    default: defaultValue ?? _valueManagers.rangeValueManager.emptyValue,
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = (0, _internals.useControlledValueWithTimezone)({
     name: 'DateRangeCalendar',
-    state: 'value'
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: _valueManagers.rangeValueManager
   });
+  const utils = (0, _internals.useUtils)();
+  const localeText = (0, _internals.useLocaleText)();
+  const now = (0, _internals.useNow)(timezone);
+  const slots = innerSlots ?? (0, _internals.uncapitalizeObjectKeys)(components);
+  const slotProps = innerSlotProps ?? componentsProps;
   const {
     rangePosition,
     onRangePositionChange
@@ -193,8 +199,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     });
     onRangePositionChange(nextSelection);
     const isFullRangeSelected = rangePosition === 'end' && (0, _dateUtils.isRangeValid)(utils, newRange);
-    setValue(newRange);
-    onChange?.(newRange, isFullRangeSelected ? 'finish' : 'partial');
+    handleValueChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
   });
   const handleDrop = (0, _useEventCallback.default)(newDate => {
     handleSelectedDayChange(newDate, undefined, true);
@@ -209,7 +214,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       onDrop: handleDrop,
       onDatePositionChange: handleDatePositionChange,
       utils,
-      dateRange: valueDayRange
+      dateRange: valueDayRange,
+      timezone
     }),
     {
       isDragging,
@@ -256,7 +262,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     minDate,
     onMonthChange,
     reduceAnimations,
-    shouldDisableDate: wrappedShouldDisableDate
+    shouldDisableDate: wrappedShouldDisableDate,
+    timezone
   });
   const prevValue = React.useRef(null);
   React.useEffect(() => {
@@ -291,11 +298,13 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   }, [changeMonth, calendarState.currentMonth, utils]);
   const isNextMonthDisabled = (0, _internals.useNextMonthDisabled)(calendarState.currentMonth, {
     disableFuture,
-    maxDate
+    maxDate,
+    timezone
   });
   const isPreviousMonthDisabled = (0, _internals.usePreviousMonthDisabled)(calendarState.currentMonth, {
     disablePast,
-    minDate
+    minDate,
+    timezone
   });
   const baseDateValidationProps = {
     disablePast,
@@ -423,7 +432,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         disableFuture: disableFuture,
         reduceAnimations: reduceAnimations,
         slots: slots,
-        slotProps: slotProps
+        slotProps: slotProps,
+        timezone: timezone
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeCalendarArrowSwitcher, {
         onGoToPrevious: selectPreviousMonth,
         onGoToNext: selectNextMonth,
@@ -455,7 +465,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         slotProps: slotPropsForDayCalendar,
         autoFocus: month === focusedMonth,
         fixedWeekNumber: fixedWeekNumber,
-        displayWeekNumber: displayWeekNumber
+        displayWeekNumber: displayWeekNumber,
+        timezone: timezone
       }), index)]
     }, month))]
   }));
@@ -645,6 +656,14 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/node/DateRangeCalendar/useDragRange.js

@@ -11,13 +11,13 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _dateUtils = require("../internal/utils/date-utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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;
@@ -57,7 +57,8 @@ const useDragRangeEvents = ({
   onDatePositionChange,
   onDrop,
   disableDragEditing,
-  dateRange
+  dateRange,
+  timezone
 }) => {
   const emptyDragImgRef = React.useRef(null);
   React.useEffect(() => {
@@ -75,7 +76,7 @@ const useDragRangeEvents = ({
     return shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
   };
   const handleDragStart = (0, _useEventCallback.default)(event => {
-    const newDate = resolveDateFromTarget(event.target, utils);
+    const newDate = resolveDateFromTarget(event.target, utils, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -99,7 +100,7 @@ const useDragRangeEvents = ({
     if (!target) {
       return;
     }
-    const newDate = resolveDateFromTarget(target, utils);
+    const newDate = resolveDateFromTarget(target, utils, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -118,14 +119,14 @@ const useDragRangeEvents = ({
     event.preventDefault();
     event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
-    setRangeDragDay(resolveDateFromTarget(event.target, utils));
+    setRangeDragDay(resolveDateFromTarget(event.target, utils, timezone));
   });
   const handleTouchMove = (0, _useEventCallback.default)(event => {
     const target = resolveElementFromTouch(event);
     if (!isDragging || !target) {
       return;
     }
-    const newDate = resolveDateFromTarget(target, utils);
+    const newDate = resolveDateFromTarget(target, utils, timezone);
     if (newDate) {
       setRangeDragDay(newDate);
     }
@@ -158,7 +159,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);
     }
@@ -185,7 +186,7 @@ const useDragRangeEvents = ({
     if (isSameAsDraggingDate(event)) {
       return;
     }
-    const newDate = resolveDateFromTarget(event.target, utils);
+    const newDate = resolveDateFromTarget(event.target, utils, timezone);
     if (newDate) {
       onDrop(newDate);
     }
@@ -207,7 +208,8 @@ const useDragRange = ({
   utils,
   onDatePositionChange,
   onDrop,
-  dateRange
+  dateRange,
+  timezone
 }) => {
   const [isDragging, setIsDragging] = React.useState(false);
   const [rangeDragDay, setRangeDragDay] = React.useState(null);
@@ -236,7 +238,8 @@ const useDragRange = ({
     isDragging,
     setRangeDragDay: handleRangeDragDayChange,
     disableDragEditing,
-    dateRange
+    dateRange,
+    timezone
   });
   return React.useMemo(() => (0, _extends2.default)({
     isDragging,

package/node/DateRangePicker/DateRangePicker.js

@@ -317,6 +317,14 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -322,6 +322,14 @@ DesktopDateRangePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/node/MobileDateRangePicker/MobileDateRangePicker.js

@@ -325,6 +325,14 @@ MobileDateRangePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/node/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -245,7 +245,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    */
   readOnly: _propTypes.default.bool,
   /**
-   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
@@ -306,6 +306,14 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.string,
   unstableEndFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   unstableStartFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**

package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -278,7 +278,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    */
   readOnly: _propTypes.default.bool,
   /**
-   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
@@ -355,6 +355,14 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.string,
   unstableEndFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   unstableStartFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**

package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -262,7 +262,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    */
   readOnly: _propTypes.default.bool,
   /**
-   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
@@ -331,6 +331,14 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.string,
   unstableEndFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   unstableStartFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**

package/node/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -240,7 +240,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    */
   readOnly: _propTypes.default.bool,
   /**
-   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
@@ -305,6 +305,14 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.string,
   /**
    * The ref object used to imperatively interact with the field.
    */

package/node/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -273,7 +273,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    */
   readOnly: _propTypes.default.bool,
   /**
-   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
@@ -354,6 +354,14 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.string,
   /**
    * The ref object used to imperatively interact with the field.
    */

package/node/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -257,7 +257,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    */
   readOnly: _propTypes.default.bool,
   /**
-   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
@@ -330,6 +330,14 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.string,
   /**
    * The ref object used to imperatively interact with the field.
    */