@mui/x-date-pickers 6.8.0 → 6.9.0

package/node/DateCalendar/DateCalendar.js

@@ -24,8 +24,10 @@ var _dateUtils = require("../internals/utils/date-utils");
 var _PickerViewRoot = require("../internals/components/PickerViewRoot");
 var _defaultReduceAnimations = require("../internals/utils/defaultReduceAnimations");
 var _dateCalendarClasses = require("./dateCalendarClasses");
+var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
+var _valueManagers = require("../internals/utils/valueManagers");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow"];
+const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow", "timezone"];
 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 useUtilityClasses = ownerState => {
@@ -125,18 +127,21 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
       renderLoading,
       displayWeekNumber,
       yearsPerRow,
-      monthsPerRow
+      monthsPerRow,
+      timezone: timezoneProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [value, setValue] = (0, _utils.unstable_useControlled)({
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = (0, _useValueWithTimezone.useControlledValueWithTimezone)({
     name: 'DateCalendar',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue ?? null
-  });
-  const handleValueChange = (0, _utils.unstable_useEventCallback)((newValue, selectionState) => {
-    setValue(newValue);
-    onChange?.(newValue, selectionState);
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: _valueManagers.singleItemValueManager
   });
   const {
     view,
@@ -173,7 +178,8 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
     maxDate,
     shouldDisableDate,
     disablePast,
-    disableFuture
+    disableFuture,
+    timezone
   });
   const handleDateMonthChange = (0, _utils.unstable_useEventCallback)(newDate => {
     const startOfMonth = utils.startOfMonth(newDate);
@@ -185,7 +191,8 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
       maxDate: utils.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
       disablePast,
       disableFuture,
-      isDateDisabled
+      isDateDisabled,
+      timezone
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
@@ -206,7 +213,8 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
       maxDate: utils.isAfter(maxDate, endOfYear) ? endOfYear : maxDate,
       disablePast,
       disableFuture,
-      isDateDisabled
+      isDateDisabled,
+      timezone
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
@@ -245,7 +253,8 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
   const commonViewProps = {
     disableHighlightToday,
     readOnly,
-    disabled
+    disabled,
+    timezone
   };
   const gridLabelId = `${id}-grid-label`;
   const hasFocus = focusedView !== null;
@@ -284,7 +293,8 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
       reduceAnimations: reduceAnimations,
       labelId: gridLabelId,
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      timezone: timezone
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateCalendarViewTransitionContainer, {
       reduceAnimations: reduceAnimations,
       className: classes.viewTransitionContainer,
@@ -536,6 +546,14 @@ process.env.NODE_ENV !== "production" ? DateCalendar.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/DateCalendar/DayCalendar.js

@@ -146,8 +146,6 @@ function WrappedDay(_ref) {
       isViewFocused
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  const utils = (0, _useUtils.useUtils)();
-  const now = (0, _useUtils.useNow)();
   const {
     disabled,
     disableHighlightToday,
@@ -156,8 +154,11 @@ function WrappedDay(_ref) {
     components,
     componentsProps,
     slots,
-    slotProps
+    slotProps,
+    timezone
   } = parentProps;
+  const utils = (0, _useUtils.useUtils)();
+  const now = (0, _useUtils.useNow)(timezone);
   const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
   const isSelected = selectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
   const isToday = utils.isSameDay(day, now);
@@ -215,15 +216,10 @@ function WrappedDay(_ref) {
  * @ignore - do not document.
  */
 function DayCalendar(inProps) {
-  const now = (0, _useUtils.useNow)();
-  const utils = (0, _useUtils.useUtils)();
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDayCalendar'
   });
-  const classes = useUtilityClasses(props);
-  const theme = (0, _styles.useTheme)();
-  const isRTL = theme.direction === 'rtl';
   const {
     onFocusedDayChange,
     className,
@@ -253,8 +249,14 @@ function DayCalendar(inProps) {
     gridLabelId,
     displayWeekNumber,
     fixedWeekNumber,
-    autoFocus
+    autoFocus,
+    timezone
   } = props;
+  const now = (0, _useUtils.useNow)(timezone);
+  const utils = (0, _useUtils.useUtils)();
+  const classes = useUtilityClasses(props);
+  const theme = (0, _styles.useTheme)();
+  const isRTL = theme.direction === 'rtl';
   const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
     shouldDisableDate,
     shouldDisableMonth,
@@ -262,7 +264,8 @@ function DayCalendar(inProps) {
     minDate,
     maxDate,
     disablePast,
-    disableFuture
+    disableFuture,
+    timezone
   });
   const localeText = (0, _useUtils.useLocaleText)();
   const [internalHasFocus, setInternalHasFocus] = (0, _utils2.unstable_useControlled)({
@@ -305,7 +308,8 @@ function DayCalendar(inProps) {
             date: newFocusedDayDefault,
             minDate: isRTL ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
             maxDate: isRTL ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
-            isDateDisabled
+            isDateDisabled,
+            timezone
           });
           focusDay(closestDayToFocus || newFocusedDayDefault);
           event.preventDefault();
@@ -320,7 +324,8 @@ function DayCalendar(inProps) {
             date: newFocusedDayDefault,
             minDate: isRTL ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
             maxDate: isRTL ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
-            isDateDisabled
+            isDateDisabled,
+            timezone
           });
           focusDay(closestDayToFocus || newFocusedDayDefault);
           event.preventDefault();
@@ -371,14 +376,16 @@ function DayCalendar(inProps) {
         maxDate: endOfMonth,
         disablePast,
         disableFuture,
-        isDateDisabled
+        isDateDisabled,
+        timezone
       });
     }
     return internalFocusedDay;
-  }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils]);
+  }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils, timezone]);
   const weeksToDisplay = React.useMemo(() => {
-    const toDisplay = utils.getWeekArray(currentMonth);
-    let nextMonth = utils.addMonths(currentMonth, 1);
+    const currentMonthWithTimezone = utils.setTimezone(currentMonth, timezone);
+    const toDisplay = utils.getWeekArray(currentMonthWithTimezone);
+    let nextMonth = utils.addMonths(currentMonthWithTimezone, 1);
     while (fixedWeekNumber && toDisplay.length < fixedWeekNumber) {
       const additionalWeeks = utils.getWeekArray(nextMonth);
       const hasCommonWeek = utils.isSameDay(toDisplay[toDisplay.length - 1][0], additionalWeeks[0][0]);
@@ -390,7 +397,7 @@ function DayCalendar(inProps) {
       nextMonth = utils.addMonths(nextMonth, 1);
     }
     return toDisplay;
-  }, [currentMonth, fixedWeekNumber, utils]);
+  }, [currentMonth, fixedWeekNumber, utils, timezone]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     role: "grid",
     "aria-labelledby": gridLabelId,

package/node/DateCalendar/PickersCalendarHeader.js

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

package/node/DateCalendar/useCalendarState.js

@@ -56,9 +56,10 @@ const useCalendarState = params => {
     minDate,
     onMonthChange,
     reduceAnimations,
-    shouldDisableDate
+    shouldDisableDate,
+    timezone
   } = params;
-  const now = (0, _useUtils.useNow)();
+  const now = (0, _useUtils.useNow)(timezone);
   const utils = (0, _useUtils.useUtils)();
   const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
   const referenceDate = React.useMemo(() => {
@@ -72,6 +73,7 @@ const useCalendarState = params => {
     return _valueManagers.singleItemValueManager.getInitialReferenceValue({
       value,
       utils,
+      timezone,
       props: params,
       referenceDate: externalReferenceDate,
       granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.day
@@ -108,7 +110,8 @@ const useCalendarState = params => {
     minDate,
     maxDate,
     disableFuture,
-    disablePast
+    disablePast,
+    timezone
   });
   const onMonthSwitchingAnimationEnd = React.useCallback(() => {
     dispatch({

package/node/DateCalendar/useIsDateDisabled.js

@@ -16,7 +16,8 @@ const useIsDateDisabled = ({
   minDate,
   maxDate,
   disableFuture,
-  disablePast
+  disablePast,
+  timezone
 }) => {
   const adapter = (0, _useUtils.useLocalizationContext)();
   return React.useCallback(day => (0, _validateDate.validateDate)({
@@ -29,8 +30,9 @@ const useIsDateDisabled = ({
       minDate,
       maxDate,
       disableFuture,
-      disablePast
+      disablePast,
+      timezone
     }
-  }) !== null, [adapter, shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast]);
+  }) !== null, [adapter, shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast, timezone]);
 };
 exports.useIsDateDisabled = useIsDateDisabled;

package/node/DateField/DateField.js

@@ -317,6 +317,14 @@ process.env.NODE_ENV !== "production" ? DateField.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/DatePicker/DatePicker.js

@@ -320,6 +320,14 @@ process.env.NODE_ENV !== "production" ? DatePicker.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/DateTimeField/DateTimeField.js

@@ -366,6 +366,14 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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/DateTimePicker/DateTimePicker.js

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

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -334,6 +334,14 @@ DesktopDatePicker.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/DesktopDateTimePicker/DesktopDateTimePicker.js

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

package/node/DesktopTimePicker/DesktopTimePicker.js

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

package/node/DigitalClock/DigitalClock.js

@@ -13,7 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
@@ -23,8 +22,10 @@ var _PickerViewRoot = require("../internals/components/PickerViewRoot");
 var _digitalClockClasses = require("./digitalClockClasses");
 var _useViews = require("../internals/hooks/useViews");
 var _dimensions = require("../internals/constants/dimensions");
+var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
+var _valueManagers = require("../internals/utils/valueManagers");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "timeStep", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "defaultValue", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled"];
+const _excluded = ["ampm", "timeStep", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "defaultValue", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
 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 useUtilityClasses = ownerState => {
@@ -84,11 +85,9 @@ const DigitalClockItem = (0, _styles.styled)(_MenuItem.default, {
   }
 }));
 const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(inProps, ref) {
-  const now = (0, _useUtils.useNow)();
   const utils = (0, _useUtils.useUtils)();
   const containerRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, containerRef);
-  const localeText = (0, _useUtils.useLocaleText)();
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDigitalClock'
@@ -121,25 +120,31 @@ const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(inProps
       disabled,
       readOnly,
       views = ['hours'],
-      skipDisabled = false
+      skipDisabled = false,
+      timezone: timezoneProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    value,
+    handleValueChange: handleRawValueChange,
+    timezone
+  } = (0, _useValueWithTimezone.useControlledValueWithTimezone)({
+    name: 'DigitalClock',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: _valueManagers.singleItemValueManager
+  });
+  const localeText = (0, _useUtils.useLocaleText)();
+  const now = (0, _useUtils.useNow)(timezone);
   const ownerState = React.useMemo(() => (0, _extends2.default)({}, props, {
     alreadyRendered: !!containerRef.current
   }), [props]);
   const classes = useUtilityClasses(ownerState);
   const ClockItem = slots?.digitalClockItem ?? components?.DigitalClockItem ?? DigitalClockItem;
   const clockItemProps = slotProps?.digitalClockItem ?? componentsProps?.digitalClockItem;
-  const [value, setValue] = (0, _useControlled.default)({
-    name: 'DigitalClock',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue ?? null
-  });
-  const handleValueChange = (0, _useEventCallback.default)(newValue => {
-    setValue(newValue);
-    onChange?.(newValue, 'finish');
-  });
+  const handleValueChange = (0, _useEventCallback.default)(newValue => handleRawValueChange(newValue, 'finish'));
   const {
     setValueAndGoToNextView
   } = (0, _useViews.useViews)({
@@ -388,6 +393,14 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
    * @default 30
    */
   timeStep: _propTypes.default.number,
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: _propTypes.default.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/node/MobileDatePicker/MobileDatePicker.js

@@ -331,6 +331,14 @@ MobileDatePicker.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/MobileDateTimePicker/MobileDateTimePicker.js

@@ -396,6 +396,14 @@ MobileDateTimePicker.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/MobileTimePicker/MobileTimePicker.js

@@ -281,6 +281,14 @@ MobileTimePicker.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.