@mui/x-date-pickers 6.7.0 → 6.9.0

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -143,7 +143,7 @@ DesktopDateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -434,6 +434,14 @@ DesktopDateTimePicker.propTypes = {
     minutes: PropTypes.number,
     seconds: PropTypes.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.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/DesktopTimePicker/DesktopTimePicker.js

@@ -318,6 +318,14 @@ DesktopTimePicker.propTypes = {
     minutes: PropTypes.number,
     seconds: PropTypes.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.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/DigitalClock/DigitalClock.js

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
-import useControlled from '@mui/utils/useControlled';
 import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import useForkRef from '@mui/utils/useForkRef';
@@ -17,6 +16,8 @@ import { PickerViewRoot } from '../internals/components/PickerViewRoot';
 import { getDigitalClockUtilityClass } from './digitalClockClasses';
 import { useViews } from '../internals/hooks/useViews';
 import { DIGITAL_CLOCK_VIEW_HEIGHT } from '../internals/constants/dimensions';
+import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -76,11 +77,9 @@ const DigitalClockItem = styled(MenuItem, {
 }));
 export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(inProps, ref) {
   var _ref, _slots$digitalClockIt, _slotProps$digitalClo;
-  const now = useNow();
   const utils = useUtils();
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
-  const localeText = useLocaleText();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiDigitalClock'
@@ -113,25 +112,31 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
       disabled,
       readOnly,
       views = ['hours'],
-      skipDisabled = false
+      skipDisabled = false,
+      timezone: timezoneProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    value,
+    handleValueChange: handleRawValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
+    name: 'DigitalClock',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: singleItemValueManager
+  });
+  const localeText = useLocaleText();
+  const now = useNow(timezone);
   const ownerState = React.useMemo(() => _extends({}, props, {
     alreadyRendered: !!containerRef.current
   }), [props]);
   const classes = useUtilityClasses(ownerState);
   const ClockItem = (_ref = (_slots$digitalClockIt = slots == null ? void 0 : slots.digitalClockItem) != null ? _slots$digitalClockIt : components == null ? void 0 : components.DigitalClockItem) != null ? _ref : DigitalClockItem;
   const clockItemProps = (_slotProps$digitalClo = slotProps == null ? void 0 : slotProps.digitalClockItem) != null ? _slotProps$digitalClo : componentsProps == null ? void 0 : componentsProps.digitalClockItem;
-  const [value, setValue] = useControlled({
-    name: 'DigitalClock',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue != null ? defaultValue : null
-  });
-  const handleValueChange = useEventCallback(newValue => {
-    setValue(newValue);
-    onChange == null ? void 0 : onChange(newValue, 'finish');
-  });
+  const handleValueChange = useEventCallback(newValue => handleRawValueChange(newValue, 'finish'));
   const {
     setValueAndGoToNextView
   } = useViews({
@@ -379,6 +384,14 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
    * @default 30
    */
   timeStep: PropTypes.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.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/MobileDatePicker/MobileDatePicker.js

@@ -94,7 +94,7 @@ MobileDatePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -325,6 +325,14 @@ MobileDatePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -115,7 +115,7 @@ MobileDateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -390,6 +390,14 @@ MobileDateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/MobileTimePicker/MobileTimePicker.js

@@ -275,6 +275,14 @@ MobileTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/MonthCalendar/MonthCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,6 +11,9 @@ import { PickersMonth } from './PickersMonth';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
 import { getMonthCalendarUtilityClass } from './monthCalendarClasses';
 import { applyDefaultDate, getMonthsInYear } from '../internals/utils/date-utils';
+import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
+import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -48,14 +51,12 @@ const MonthCalendarRoot = styled('div', {
   width: 320
 });
 export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inProps, ref) {
-  const now = useNow();
-  const theme = useTheme();
-  const utils = useUtils();
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');
   const {
       className,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disabled,
       disableFuture,
       disablePast,
@@ -69,19 +70,38 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       onMonthFocus,
       hasFocus,
       onFocusedViewChange,
-      monthsPerRow = 3
+      monthsPerRow = 3,
+      timezone: timezoneProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
-  const [value, setValue] = useControlled({
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
     name: 'MonthCalendar',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue != null ? defaultValue : null
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange: onChange,
+    valueManager: singleItemValueManager
   });
+  const now = useNow(timezone);
+  const theme = useTheme();
+  const utils = useUtils();
+  const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
+    value,
+    utils,
+    props,
+    timezone,
+    referenceDate: referenceDateProp,
+    granularity: 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 != null ? value : utils.startOfMonth(now), [now, utils, value]);
   const selectedMonth = React.useMemo(() => {
     if (value != null) {
       return utils.getMonth(value);
@@ -89,8 +109,8 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     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] = useControlled({
     name: 'MonthCalendar',
@@ -104,30 +124,30 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       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 = useEventCallback((event, month) => {
     if (readOnly) {
       return;
     }
-    const newDate = utils.setMonth(selectedDateOrStartOfMonth, month);
-    setValue(newDate);
-    onChange == null ? void 0 : onChange(newDate);
+    const newDate = utils.setMonth(value != null ? value : referenceDate, month);
+    handleValueChange(newDate);
   });
   const focusMonth = useEventCallback(month => {
-    if (!isMonthDisabled(utils.setMonth(selectedDateOrStartOfMonth, month))) {
+    if (!isMonthDisabled(utils.setMonth(value != null ? value : referenceDate, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
       if (onMonthFocus) {
@@ -175,7 +195,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: getMonthsInYear(utils, selectedDateOrStartOfMonth).map(month => {
+    children: getMonthsInYear(utils, value != null ? value : referenceDate).map(month => {
       const monthNumber = utils.getMonth(month);
       const monthText = utils.format(month, 'monthShort');
       const isSelected = monthNumber === selectedMonth;
@@ -252,7 +272,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.func,
   onFocusedViewChange: PropTypes.func,
@@ -261,6 +281,11 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * If `true` picker is readonly
    */
   readOnly: PropTypes.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.any,
   /**
    * Disable specific month.
    * @template TDate
@@ -272,6 +297,14 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/MonthCalendar/MonthCalendar.types.d.ts

@@ -2,6 +2,7 @@ import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { MonthCalendarClasses } from './monthCalendarClasses';
 import { BaseDateValidationProps, MonthValidationProps } from '../internals/models/validation';
+import { TimezoneProps } from '../models';
 export interface ExportedMonthCalendarProps {
     /**
      * Months rendered per row.
@@ -9,7 +10,7 @@ export interface ExportedMonthCalendarProps {
      */
     monthsPerRow?: 3 | 4;
 }
-export interface MonthCalendarProps<TDate> extends ExportedMonthCalendarProps, MonthValidationProps<TDate>, BaseDateValidationProps<TDate> {
+export interface MonthCalendarProps<TDate> extends ExportedMonthCalendarProps, MonthValidationProps<TDate>, BaseDateValidationProps<TDate>, TimezoneProps {
     autoFocus?: boolean;
     /**
      * className applied to the root element.
@@ -35,10 +36,15 @@ export interface MonthCalendarProps<TDate> extends ExportedMonthCalendarProps, M
      * Used when the component is not controlled.
      */
     defaultValue?: TDate | null;
+    /**
+     * 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?: TDate;
     /**
      * Callback fired when the value changes.
      * @template TDate
-     * @param {TDate | null} value The new value.
+     * @param {TDate} value The new value.
      */
     onChange?: (value: TDate) => void;
     /** If `true` picker is readonly */

package/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
-import useControlled from '@mui/utils/useControlled';
 import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
 import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
 import { useViews } from '../internals/hooks/useViews';
@@ -16,6 +15,8 @@ import { PickerViewRoot } from '../internals/components/PickerViewRoot';
 import { getMultiSectionDigitalClockUtilityClass } from './multiSectionDigitalClockClasses';
 import { MultiSectionDigitalClockSection } from './MultiSectionDigitalClockSection';
 import { getHourSectionOptions, getTimeSectionOptions } from './MultiSectionDigitalClock.utils';
+import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -39,9 +40,7 @@ const MultiSectionDigitalClockRoot = styled(PickerViewRoot, {
   borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
 }));
 export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClock(inProps, ref) {
-  const now = useNow();
   const utils = useUtils();
-  const localeText = useLocaleText();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMultiSectionDigitalClock'
@@ -74,24 +73,30 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       className,
       disabled,
       readOnly,
-      skipDisabled = false
+      skipDisabled = false,
+      timezone: timezoneProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    value,
+    handleValueChange: handleRawValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
+    name: 'MultiSectionDigitalClock',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: singleItemValueManager
+  });
+  const localeText = useLocaleText();
+  const now = useNow(timezone);
   const timeSteps = React.useMemo(() => _extends({
     hours: 1,
     minutes: 5,
     seconds: 5
   }, inTimeSteps), [inTimeSteps]);
-  const [value, setValue] = useControlled({
-    name: 'MultiSectionDigitalClock',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue != null ? defaultValue : null
-  });
-  const handleValueChange = useEventCallback((newValue, selectionState, selectedView) => {
-    setValue(newValue);
-    onChange == null ? void 0 : onChange(newValue, selectionState, selectedView);
-  });
+  const handleValueChange = useEventCallback((newValue, selectionState, selectedView) => handleRawValueChange(newValue, selectionState, selectedView));
   const views = React.useMemo(() => {
     if (!ampm || !inViews.includes('hours')) {
       return inViews;
@@ -461,6 +466,14 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
     minutes: PropTypes.number,
     seconds: PropTypes.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.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -136,7 +136,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       return /*#__PURE__*/_jsx(DigitalClockSectionItem, _extends({
         onClick: () => !readOnly && onChange(option.value),
         selected: isSelected,
-        disabled: disabled != null ? disabled : (_option$isDisabled2 = option.isDisabled) == null ? void 0 : _option$isDisabled2.call(option, option.value),
+        disabled: disabled || ((_option$isDisabled2 = option.isDisabled) == null ? void 0 : _option$isDisabled2.call(option, option.value)),
         disableRipple: readOnly,
         role: "option"
         // aria-readonly is not supported here and does not have any effect

package/PickersLayout/PickersLayout.js

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

package/PickersLayout/usePickerLayout.js

@@ -39,6 +39,7 @@ const usePickerLayout = props => {
     onViewChange,
     value,
     onChange,
+    onSelectShortcut,
     isValid,
     isLandscape,
     disabled,
@@ -51,7 +52,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 != null ? innerSlots : uncapitalizeObjectKeys(components);
   const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
@@ -121,13 +122,13 @@ const usePickerLayout = props => {
     additionalProps: {
       isValid,
       isLandscape,
-      onChange,
+      onChange: onSelectShortcut,
       className: classes.shortcuts
     },
     ownerState: {
       isValid,
       isLandscape,
-      onChange,
+      onChange: onSelectShortcut,
       className: classes.shortcuts,
       wrapperVariant
     }

package/PickersShortcuts/PickersShortcuts.d.ts

@@ -7,15 +7,25 @@ export interface PickersShortcutsItem<TValue> {
     label: string;
     getValue: (params: PickersShortcutsItemGetValueParams<TValue>) => TValue;
 }
-export interface PickersShortcutsProps<TValue> extends Omit<ListProps, 'onChange'> {
+export type PickerShortcutChangeImportance = 'set' | 'accept';
+export interface ExportedPickersShortcutProps<TValue> extends Omit<ListProps, 'onChange'> {
     /**
      * Ordered array of shortcuts to display.
      * If empty, does not display the shortcuts.
      * @default `[]`
      */
     items?: PickersShortcutsItem<TValue>[];
+    /**
+     * Importance of the change when picking a shortcut:
+     * - "accept": fires `onChange`, fires `onAccept` and closes the picker.
+     * - "set": fires `onChange` but do not fire `onAccept` and does not close the picker.
+     * @default "accept"
+     */
+    changeImportance?: PickerShortcutChangeImportance;
+}
+export interface PickersShortcutsProps<TValue> extends ExportedPickersShortcutProps<TValue> {
     isLandscape: boolean;
-    onChange: (newValue: TValue) => void;
+    onChange: (newValue: TValue, changeImportance?: PickerShortcutChangeImportance) => void;
     isValid: (value: TValue) => boolean;
 }
 declare function PickersShortcuts<TValue>(props: PickersShortcutsProps<TValue>): React.JSX.Element | null;

package/PickersShortcuts/PickersShortcuts.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["items", "isLandscape", "onChange", "isValid"];
+const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import List from '@mui/material/List';
@@ -11,6 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function PickersShortcuts(props) {
   const {
       items,
+      changeImportance,
       onChange,
       isValid
     } = props,
@@ -25,7 +26,7 @@ function PickersShortcuts(props) {
     return {
       label: item.label,
       onClick: () => {
-        onChange(newValue);
+        onChange(newValue, changeImportance);
       },
       disabled: !isValid(newValue)
     };
@@ -50,6 +51,13 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Importance of the change when picking a shortcut:
+   * - "accept": fires `onChange`, fires `onAccept` and closes the picker.
+   * - "set": fires `onChange` but do not fire `onAccept` and does not close the picker.
+   * @default "accept"
+   */
+  changeImportance: PropTypes.oneOf(['accept', 'set']),
   className: PropTypes.string,
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used for

package/PickersShortcuts/index.d.ts

@@ -1,2 +1,2 @@
 export { PickersShortcuts } from './PickersShortcuts';
-export type { PickersShortcutsProps, PickersShortcutsItem } from './PickersShortcuts';
+export type { PickersShortcutsProps, PickersShortcutsItem, PickerShortcutChangeImportance, } from './PickersShortcuts';

package/StaticDatePicker/StaticDatePicker.js

@@ -74,7 +74,7 @@ StaticDatePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -257,6 +257,14 @@ StaticDatePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
   /**
    * The selected value.
    * Used when the component is controlled.