@mui/x-date-pickers 6.7.0 → 6.9.0

package/node/PickersShortcuts/PickersShortcuts.js

@@ -14,12 +14,13 @@ var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["items", "isLandscape", "onChange", "isValid"];
+const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"];
 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; }
 function PickersShortcuts(props) {
   const {
       items,
+      changeImportance,
       onChange,
       isValid
     } = props,
@@ -34,7 +35,7 @@ function PickersShortcuts(props) {
     return {
       label: item.label,
       onClick: () => {
-        onChange(newValue);
+        onChange(newValue, changeImportance);
       },
       disabled: !isValid(newValue)
     };
@@ -59,6 +60,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.default.oneOf(['accept', 'set']),
   className: _propTypes.default.string,
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used for

package/node/StaticDatePicker/StaticDatePicker.js

@@ -83,7 +83,7 @@ StaticDatePicker.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,
   /**
@@ -266,6 +266,14 @@ StaticDatePicker.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/StaticDateTimePicker/StaticDateTimePicker.js

@@ -103,7 +103,7 @@ StaticDateTimePicker.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,
   /**
@@ -330,6 +330,14 @@ StaticDateTimePicker.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/StaticTimePicker/StaticTimePicker.js

@@ -214,6 +214,14 @@ StaticTimePicker.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/TimeClock/TimeClock.js

@@ -12,7 +12,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useUtils = require("../internals/hooks/useUtils");
 var _PickersArrowSwitcher = require("../internals/components/PickersArrowSwitcher");
 var _timeUtils = require("../internals/utils/time-utils");
@@ -22,9 +21,11 @@ var _PickerViewRoot = require("../internals/components/PickerViewRoot");
 var _timeClockClasses = require("./timeClockClasses");
 var _Clock = require("./Clock");
 var _ClockNumbers = require("./ClockNumbers");
+var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
+var _valueManagers = require("../internals/utils/valueManagers");
 var _slotsMigration = require("../internals/utils/slots-migration");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly"];
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "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 => {
@@ -62,8 +63,6 @@ const TimeClockArrowSwitcher = (0, _styles.styled)(_PickersArrowSwitcher.Pickers
  * - [TimeClock API](https://mui.com/x/api/date-pickers/time-clock/)
  */
 const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref) {
-  const localeText = (0, _useUtils.useLocaleText)();
-  const now = (0, _useUtils.useNow)();
   const utils = (0, _useUtils.useUtils)();
   const props = (0, _styles.useThemeProps)({
     props: inProps,
@@ -97,21 +96,26 @@ const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref)
       onFocusedViewChange,
       className,
       disabled,
-      readOnly
+      readOnly,
+      timezone: timezoneProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const slots = innerSlots ?? (0, _slotsMigration.uncapitalizeObjectKeys)(components);
   const slotProps = innerSlotProps ?? componentsProps;
-  const [value, setValue] = (0, _utils.unstable_useControlled)({
-    name: 'DateCalendar',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue ?? null
-  });
-  const handleValueChange = (0, _useEventCallback.default)((newValue, selectionState) => {
-    setValue(newValue);
-    onChange?.(newValue, selectionState);
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = (0, _useValueWithTimezone.useControlledValueWithTimezone)({
+    name: 'TimeClock',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: _valueManagers.singleItemValueManager
   });
+  const localeText = (0, _useUtils.useLocaleText)();
+  const now = (0, _useUtils.useNow)(timezone);
   const {
     view,
     setView,
@@ -456,6 +460,14 @@ process.env.NODE_ENV !== "production" ? TimeClock.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/TimeField/TimeField.js

@@ -256,7 +256,7 @@ process.env.NODE_ENV !== "production" ? TimeField.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.
    */
@@ -329,6 +329,14 @@ process.env.NODE_ENV !== "production" ? TimeField.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/TimePicker/TimePicker.js

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

@@ -17,8 +17,11 @@ var _PickersYear = require("./PickersYear");
 var _useUtils = require("../internals/hooks/useUtils");
 var _yearCalendarClasses = require("./yearCalendarClasses");
 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 = ["autoFocus", "className", "value", "defaultValue", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow"];
+const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "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 => {
@@ -60,15 +63,13 @@ const YearCalendarRoot = (0, _styles.styled)('div', {
   maxHeight: 304
 });
 const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps, ref) {
-  const now = (0, _useUtils.useNow)();
-  const theme = (0, _system.useTheme)();
-  const utils = (0, _useUtils.useUtils)();
   const props = useYearCalendarDefaultizedProps(inProps, 'MuiYearCalendar');
   const {
       autoFocus,
       className,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disabled,
       disableFuture,
       disablePast,
@@ -81,18 +82,37 @@ const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps
       onYearFocus,
       hasFocus,
       onFocusedViewChange,
-      yearsPerRow = 3
+      yearsPerRow = 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: 'YearCalendar',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue ?? null
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange: onChange,
+    valueManager: _valueManagers.singleItemValueManager
   });
-  const selectedDateOrStartOfYear = React.useMemo(() => value ?? utils.startOfYear(now), [now, utils, value]);
+  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.year
+  }), [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
   const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);
   const selectedYear = React.useMemo(() => {
     if (value != null) {
@@ -101,8 +121,8 @@ const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps
     if (disableHighlightToday) {
       return null;
     }
-    return utils.getYear(now);
-  }, [now, value, utils, disableHighlightToday]);
+    return utils.getYear(referenceDate);
+  }, [value, utils, disableHighlightToday, referenceDate]);
   const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || todayYear);
   const [internalHasFocus, setInternalHasFocus] = (0, _utils.unstable_useControlled)({
     name: 'YearCalendar',
@@ -129,21 +149,21 @@ const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps
     if (maxDate && utils.isAfterYear(dateToValidate, maxDate)) {
       return true;
     }
-    if (shouldDisableYear && shouldDisableYear(dateToValidate)) {
-      return true;
+    if (!shouldDisableYear) {
+      return false;
     }
-    return false;
+    const yearToValidate = utils.startOfYear(dateToValidate);
+    return shouldDisableYear(yearToValidate);
   }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, utils]);
   const handleYearSelection = (0, _utils.unstable_useEventCallback)((event, year) => {
     if (readOnly) {
       return;
     }
-    const newDate = utils.setYear(selectedDateOrStartOfYear, year);
-    setValue(newDate);
-    onChange?.(newDate);
+    const newDate = utils.setYear(value ?? referenceDate, year);
+    handleValueChange(newDate);
   });
   const focusYear = (0, _utils.unstable_useEventCallback)(year => {
-    if (!isYearDisabled(utils.setYear(selectedDateOrStartOfYear, year))) {
+    if (!isYearDisabled(utils.setYear(value ?? referenceDate, year))) {
       setFocusedYear(year);
       changeHasFocus(true);
       onYearFocus?.(year);
@@ -282,7 +302,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.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,
@@ -291,6 +311,11 @@ process.env.NODE_ENV !== "production" ? YearCalendar.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 year using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate: _propTypes.default.any,
   /**
    * Disable specific year.
    * @template TDate
@@ -302,6 +327,14 @@ process.env.NODE_ENV !== "production" ? YearCalendar.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/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -62,6 +62,7 @@ const renderDesktopDateTimeView = ({
   autoFocus,
   fixedWeekNumber,
   displayWeekNumber,
+  timezone,
   disableIgnoringDatePartForTimeValidation,
   timeSteps,
   skipDisabled,
@@ -108,7 +109,8 @@ const renderDesktopDateTimeView = ({
         sx: sx,
         autoFocus: autoFocus,
         fixedWeekNumber: fixedWeekNumber,
-        displayWeekNumber: displayWeekNumber
+        displayWeekNumber: displayWeekNumber,
+        timezone: timezone
       }), timeViewsCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
           orientation: "vertical"
@@ -147,7 +149,8 @@ const renderDesktopDateTimeView = ({
           autoFocus: autoFocus,
           disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
           timeSteps: timeSteps,
-          skipDisabled: skipDisabled
+          skipDisabled: skipDisabled,
+          timezone: timezone
         })]
       })]
     }), isActionBarVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {})]

package/node/dateViewRenderers/dateViewRenderers.js

@@ -48,7 +48,8 @@ const renderDateViewCalendar = ({
   sx,
   autoFocus,
   fixedWeekNumber,
-  displayWeekNumber
+  displayWeekNumber,
+  timezone
 }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateCalendar.DateCalendar, {
   view: view,
   onViewChange: onViewChange,
@@ -87,6 +88,7 @@ const renderDateViewCalendar = ({
   sx: sx,
   autoFocus: autoFocus,
   fixedWeekNumber: fixedWeekNumber,
-  displayWeekNumber: displayWeekNumber
+  displayWeekNumber: displayWeekNumber,
+  timezone: timezone
 });
 exports.renderDateViewCalendar = renderDateViewCalendar;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.7.0
+ * @mui/x-date-pickers v6.9.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/hooks/date-helpers-hooks.js

@@ -13,25 +13,27 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 function useNextMonthDisabled(month, {
   disableFuture,
-  maxDate
+  maxDate,
+  timezone
 }) {
   const utils = (0, _useUtils.useUtils)();
   return React.useMemo(() => {
-    const now = utils.date();
+    const now = utils.dateWithTimezone(undefined, timezone);
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
     return !utils.isAfter(lastEnabledMonth, month);
-  }, [disableFuture, maxDate, month, utils]);
+  }, [disableFuture, maxDate, month, utils, timezone]);
 }
 function usePreviousMonthDisabled(month, {
   disablePast,
-  minDate
+  minDate,
+  timezone
 }) {
   const utils = (0, _useUtils.useUtils)();
   return React.useMemo(() => {
-    const now = utils.date();
+    const now = utils.dateWithTimezone(undefined, timezone);
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     return !utils.isBefore(firstEnabledMonth, month);
-  }, [disablePast, minDate, month, utils]);
+  }, [disablePast, minDate, month, utils, timezone]);
 }
 function useMeridiemMode(date, ampm, onChange, selectionState) {
   const utils = (0, _useUtils.useUtils)();

package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -43,6 +43,7 @@ const useDesktopPicker = _ref => {
     sx,
     format,
     formatDensity,
+    timezone,
     label,
     inputRef,
     readOnly,
@@ -107,6 +108,7 @@ const useDesktopPicker = _ref => {
       sx,
       format,
       formatDensity,
+      timezone,
       label,
       autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined

package/node/internals/hooks/useField/useField.js

@@ -33,14 +33,16 @@ const useField = params => {
     updateValueFromValueStr,
     setTempAndroidValueStr,
     sectionsValueBoundaries,
-    placeholder
+    placeholder,
+    timezone
   } = (0, _useFieldState.useFieldState)(params);
   const {
       inputRef: inputRefProp,
       internalProps,
       internalProps: {
         readOnly = false,
-        unstableFieldRef
+        unstableFieldRef,
+        minutesStep
       },
       forwardedProps: {
         onClick,
@@ -63,7 +65,8 @@ const useField = params => {
     sections: state.sections,
     updateSectionValue,
     sectionsValueBoundaries,
-    setTempAndroidValueStr
+    setTempAndroidValueStr,
+    timezone
   });
   const inputRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(inputRefProp, inputRef);
@@ -104,7 +107,7 @@ const useField = params => {
     onFocus?.(...args);
     // The ref is guaranteed to be resolved at this point.
     const input = inputRef.current;
-    clearTimeout(focusTimeoutRef.current);
+    window.clearTimeout(focusTimeoutRef.current);
     focusTimeoutRef.current = setTimeout(() => {
       // The ref changed, the component got remounted, the focus event is no longer relevant.
       if (!input || input !== inputRef.current) {
@@ -151,6 +154,7 @@ const useField = params => {
       }
     }
     event.preventDefault();
+    resetCharacterQuery();
     updateValueFromValueStr(pastedValue);
   });
   const handleInputChange = (0, _useEventCallback.default)(event => {
@@ -275,7 +279,9 @@ const useField = params => {
           }
           const activeSection = state.sections[selectedSectionIndexes.startIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = (0, _useField.adjustSectionValue)(utils, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date);
+          const newSectionValue = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date, {
+            minutesStep
+          });
           updateSectionValue({
             activeSection,
             newSectionValue,
@@ -286,6 +292,9 @@ const useField = params => {
     }
   });
   (0, _useEnhancedEffect.default)(() => {
+    if (!inputRef.current) {
+      return;
+    }
     if (selectedSectionIndexes == null) {
       if (inputRef.current.scrollLeft) {
         // Ensure that input content is not marked as selected.
@@ -309,7 +318,7 @@ const useField = params => {
       // On multi input range pickers we want to update selection range only for the active input
       // This helps avoiding the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
       // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
-      if (inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document)) {
+      if (inputRef.current === (0, _utils.getActiveElement)(document)) {
         inputRef.current.setSelectionRange(selectionStart, selectionEnd);
       }
       // Even reading this variable seems to do the trick, but also setting it just to make use of it
@@ -317,7 +326,8 @@ const useField = params => {
     }
   });
   const validationError = (0, _useValidation.useValidation)((0, _extends2.default)({}, internalProps, {
-    value: state.value
+    value: state.value,
+    timezone
   }), validator, valueManager.isSameError, valueManager.defaultErrorState);
   const inputError = React.useMemo(() => {
     // only override when `error` is undefined.
@@ -327,6 +337,12 @@ const useField = params => {
     }
     return valueManager.hasError(validationError);
   }, [valueManager, validationError, error]);
+  React.useEffect(() => {
+    if (!inputError && !selectedSectionIndexes) {
+      resetCharacterQuery();
+    }
+  }, [state.referenceValue, selectedSectionIndexes, inputError]); // eslint-disable-line react-hooks/exhaustive-deps
+
   React.useEffect(() => {
     // Select the right section when focused on mount (`autoFocus = true` on the input)
     if (inputRef.current && inputRef.current === document.activeElement) {