@mui/x-date-pickers 6.7.0 → 6.9.0

package/node/DateField/DateField.js

@@ -239,7 +239,7 @@ process.env.NODE_ENV !== "production" ? DateField.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.
    */
@@ -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

@@ -83,7 +83,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: _propTypes.default.any,
   /**
@@ -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

@@ -272,7 +272,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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.
    */
@@ -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

@@ -93,7 +93,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: _propTypes.default.any,
   /**
@@ -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

@@ -103,7 +103,7 @@ DesktopDatePicker.propTypes = {
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: _propTypes.default.any,
   /**
@@ -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

@@ -149,7 +149,7 @@ DesktopDateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: _propTypes.default.any,
   /**
@@ -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

@@ -100,7 +100,7 @@ MobileDatePicker.propTypes = {
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: _propTypes.default.any,
   /**
@@ -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

@@ -121,7 +121,7 @@ MobileDateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: _propTypes.default.any,
   /**
@@ -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.

package/node/MonthCalendar/MonthCalendar.js

@@ -18,8 +18,11 @@ var _PickersMonth = require("./PickersMonth");
 var _useUtils = require("../internals/hooks/useUtils");
 var _monthCalendarClasses = require("./monthCalendarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
+var _valueManagers = require("../internals/utils/valueManagers");
+var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDate");
+var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "value", "defaultValue", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow"];
+const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "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 => {
@@ -58,14 +61,12 @@ const MonthCalendarRoot = (0, _styles.styled)('div', {
   width: 320
 });
 const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inProps, ref) {
-  const now = (0, _useUtils.useNow)();
-  const theme = (0, _system.useTheme)();
-  const utils = (0, _useUtils.useUtils)();
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');
   const {
       className,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disabled,
       disableFuture,
       disablePast,
@@ -79,19 +80,38 @@ const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inPro
       onMonthFocus,
       hasFocus,
       onFocusedViewChange,
-      monthsPerRow = 3
+      monthsPerRow = 3,
+      timezone: timezoneProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
-  const [value, setValue] = (0, _utils.unstable_useControlled)({
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = (0, _useValueWithTimezone.useControlledValueWithTimezone)({
     name: 'MonthCalendar',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue ?? null
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange: onChange,
+    valueManager: _valueManagers.singleItemValueManager
   });
+  const now = (0, _useUtils.useNow)(timezone);
+  const theme = (0, _system.useTheme)();
+  const utils = (0, _useUtils.useUtils)();
+  const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
+    value,
+    utils,
+    props,
+    timezone,
+    referenceDate: referenceDateProp,
+    granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.month
+  }), [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
   const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);
-  const selectedDateOrStartOfMonth = React.useMemo(() => value ?? utils.startOfMonth(now), [now, utils, value]);
   const selectedMonth = React.useMemo(() => {
     if (value != null) {
       return utils.getMonth(value);
@@ -99,8 +119,8 @@ const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inPro
     if (disableHighlightToday) {
       return null;
     }
-    return utils.getMonth(now);
-  }, [now, value, utils, disableHighlightToday]);
+    return utils.getMonth(referenceDate);
+  }, [value, utils, disableHighlightToday, referenceDate]);
   const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || todayMonth);
   const [internalHasFocus, setInternalHasFocus] = (0, _utils.unstable_useControlled)({
     name: 'MonthCalendar',
@@ -114,30 +134,30 @@ const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inPro
       onFocusedViewChange(newHasFocus);
     }
   });
-  const isMonthDisabled = React.useCallback(month => {
+  const isMonthDisabled = React.useCallback(dateToValidate => {
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
-    if (utils.isBefore(month, firstEnabledMonth)) {
+    const monthToValidate = utils.startOfMonth(dateToValidate);
+    if (utils.isBefore(monthToValidate, firstEnabledMonth)) {
       return true;
     }
-    if (utils.isAfter(month, lastEnabledMonth)) {
+    if (utils.isAfter(monthToValidate, lastEnabledMonth)) {
       return true;
     }
     if (!shouldDisableMonth) {
       return false;
     }
-    return shouldDisableMonth(month);
+    return shouldDisableMonth(monthToValidate);
   }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, utils]);
   const handleMonthSelection = (0, _utils.unstable_useEventCallback)((event, month) => {
     if (readOnly) {
       return;
     }
-    const newDate = utils.setMonth(selectedDateOrStartOfMonth, month);
-    setValue(newDate);
-    onChange?.(newDate);
+    const newDate = utils.setMonth(value ?? referenceDate, month);
+    handleValueChange(newDate);
   });
   const focusMonth = (0, _utils.unstable_useEventCallback)(month => {
-    if (!isMonthDisabled(utils.setMonth(selectedDateOrStartOfMonth, month))) {
+    if (!isMonthDisabled(utils.setMonth(value ?? referenceDate, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
       if (onMonthFocus) {
@@ -185,7 +205,7 @@ const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inPro
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: (0, _dateUtils.getMonthsInYear)(utils, selectedDateOrStartOfMonth).map(month => {
+    children: (0, _dateUtils.getMonthsInYear)(utils, value ?? referenceDate).map(month => {
       const monthNumber = utils.getMonth(month);
       const monthText = utils.format(month, 'monthShort');
       const isSelected = monthNumber === selectedMonth;
@@ -263,7 +283,7 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
   /**
    * Callback fired when the value changes.
    * @template TDate
-   * @param {TDate | null} value The new value.
+   * @param {TDate} value The new value.
    */
   onChange: _propTypes.default.func,
   onFocusedViewChange: _propTypes.default.func,
@@ -272,6 +292,11 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * If `true` picker is readonly
    */
   readOnly: _propTypes.default.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid month using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate: _propTypes.default.any,
   /**
    * Disable specific month.
    * @template TDate
@@ -283,6 +308,14 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.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/MultiSectionDigitalClock/MultiSectionDigitalClock.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 _useUtils = require("../internals/hooks/useUtils");
 var _timeUtils = require("../internals/utils/time-utils");
 var _useViews = require("../internals/hooks/useViews");
@@ -22,8 +21,10 @@ var _PickerViewRoot = require("../internals/components/PickerViewRoot");
 var _multiSectionDigitalClockClasses = require("./multiSectionDigitalClockClasses");
 var _MultiSectionDigitalClockSection = require("./MultiSectionDigitalClockSection");
 var _MultiSectionDigitalClock = require("./MultiSectionDigitalClock.utils");
+var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
+var _valueManagers = require("../internals/utils/valueManagers");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "timeSteps", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled"];
+const _excluded = ["ampm", "timeSteps", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "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 => {
@@ -48,9 +49,7 @@ const MultiSectionDigitalClockRoot = (0, _styles.styled)(_PickerViewRoot.PickerV
   borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
 }));
 const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClock(inProps, ref) {
-  const now = (0, _useUtils.useNow)();
   const utils = (0, _useUtils.useUtils)();
-  const localeText = (0, _useUtils.useLocaleText)();
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiMultiSectionDigitalClock'
@@ -83,24 +82,30 @@ const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function MultiSec
       className,
       disabled,
       readOnly,
-      skipDisabled = false
+      skipDisabled = false,
+      timezone: timezoneProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    value,
+    handleValueChange: handleRawValueChange,
+    timezone
+  } = (0, _useValueWithTimezone.useControlledValueWithTimezone)({
+    name: 'MultiSectionDigitalClock',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: _valueManagers.singleItemValueManager
+  });
+  const localeText = (0, _useUtils.useLocaleText)();
+  const now = (0, _useUtils.useNow)(timezone);
   const timeSteps = React.useMemo(() => (0, _extends2.default)({
     hours: 1,
     minutes: 5,
     seconds: 5
   }, inTimeSteps), [inTimeSteps]);
-  const [value, setValue] = (0, _useControlled.default)({
-    name: 'MultiSectionDigitalClock',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue ?? null
-  });
-  const handleValueChange = (0, _useEventCallback.default)((newValue, selectionState, selectedView) => {
-    setValue(newValue);
-    onChange?.(newValue, selectionState, selectedView);
-  });
+  const handleValueChange = (0, _useEventCallback.default)((newValue, selectionState, selectedView) => handleRawValueChange(newValue, selectionState, selectedView));
   const views = React.useMemo(() => {
     if (!ampm || !inViews.includes('hours')) {
       return inViews;
@@ -471,6 +476,14 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.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/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -143,7 +143,7 @@ const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(function M
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(DigitalClockSectionItem, (0, _extends2.default)({
         onClick: () => !readOnly && onChange(option.value),
         selected: isSelected,
-        disabled: disabled ?? option.isDisabled?.(option.value),
+        disabled: disabled || option.isDisabled?.(option.value),
         disableRipple: readOnly,
         role: "option"
         // aria-readonly is not supported here and does not have any effect

package/node/PickersLayout/PickersLayout.js

@@ -146,6 +146,7 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   onClose: _propTypes.default.func.isRequired,
   onDismiss: _propTypes.default.func.isRequired,
   onOpen: _propTypes.default.func.isRequired,
+  onSelectShortcut: _propTypes.default.func.isRequired,
   onSetToday: _propTypes.default.func.isRequired,
   onViewChange: _propTypes.default.func.isRequired,
   /**

package/node/PickersLayout/usePickerLayout.js

@@ -47,6 +47,7 @@ const usePickerLayout = props => {
     onViewChange,
     value,
     onChange,
+    onSelectShortcut,
     isValid,
     isLandscape,
     disabled,
@@ -59,7 +60,7 @@ const usePickerLayout = props => {
     // TODO: Remove this "as" hack. It get introduced to mark `value` prop in PickersLayoutProps as not required.
     // The true type should be
     // - For pickers value: TDate | null
-    // - For rangepickers value: [TDate | null, TDate | null]
+    // - For range pickers value: [TDate | null, TDate | null]
   } = props;
   const slots = innerSlots ?? (0, _slotsMigration.uncapitalizeObjectKeys)(components);
   const slotProps = innerSlotProps ?? componentsProps;
@@ -129,13 +130,13 @@ const usePickerLayout = props => {
     additionalProps: {
       isValid,
       isLandscape,
-      onChange,
+      onChange: onSelectShortcut,
       className: classes.shortcuts
     },
     ownerState: {
       isValid,
       isLandscape,
-      onChange,
+      onChange: onSelectShortcut,
       className: classes.shortcuts,
       wrapperVariant
     }