@mui/x-date-pickers 6.6.0 → 6.8.0

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -3,13 +3,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { getDatePickerFieldFormat, useDatePickerDefaultizedProps } from '../DatePicker/shared';
+import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
 import { useLocaleText, useUtils, validateDate } from '../internals';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { CalendarIcon } from '../icons';
 import { DateField } from '../DateField';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDateViewCalendar } from '../dateViewRenderers';
+import { resolveDateFormat } from '../internals/utils/date-utils';
 var DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
   var _defaultizedProps$yea, _defaultizedProps$slo2;
   var localeText = useLocaleText();
@@ -26,7 +27,7 @@ var DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker
   // Props with the default values specific to the desktop variant
   var props = _extends({}, defaultizedProps, {
     viewRenderers: viewRenderers,
-    format: getDatePickerFieldFormat(utils, defaultizedProps),
+    format: resolveDateFormat(utils, defaultizedProps, false),
     yearsPerRow: (_defaultizedProps$yea = defaultizedProps.yearsPerRow) != null ? _defaultizedProps$yea : 4,
     slots: _extends({
       openPickerIcon: CalendarIcon,
@@ -95,7 +96,7 @@ DesktopDatePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -8,13 +8,16 @@ import { DateTimeField } from '../DateTimeField';
 import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
 import { renderDateViewCalendar } from '../dateViewRenderers/dateViewRenderers';
 import { renderDesktopDateTimeView } from '../dateTimeViewRenderers';
-import { useLocaleText, validateDateTime } from '../internals';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 import { CalendarIcon } from '../icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
+import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
 var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3, _defaultizedProps$slo4;
   var localeText = useLocaleText();
+  var utils = useUtils();
 
   // Props with the default values common to all date time pickers
   var defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiDesktopDateTimePicker');
@@ -50,6 +53,7 @@ var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTi
   // Props with the default values specific to the desktop variant
   var props = _extends({}, defaultizedProps, {
     viewRenderers: viewRenderers,
+    format: resolveDateTimeFormat(utils, defaultizedProps),
     views: defaultizedProps.ampm ? [].concat(_toConsumableArray(defaultizedProps.views), ['meridiem']) : defaultizedProps.views,
     yearsPerRow: (_defaultizedProps$yea = defaultizedProps.yearsPerRow) != null ? _defaultizedProps$yea : 4,
     ampmInClock: ampmInClock,
@@ -139,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,
   /**

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -6,14 +6,17 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { useLocaleText, validateTime } from '../internals';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateTime } from '../internals/utils/validation/validateTime';
 import { ClockIcon } from '../icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
+import { resolveTimeFormat } from '../internals/utils/time-utils';
 var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
   var _defaultizedProps$thr, _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3;
   var localeText = useLocaleText();
+  var utils = useUtils();
 
   // Props with the default values common to all time pickers
   var defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiDesktopTimePicker');
@@ -42,6 +45,7 @@ var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker
     ampmInClock: ampmInClock,
     timeSteps: timeSteps,
     viewRenderers: viewRenderers,
+    format: resolveTimeFormat(utils, defaultizedProps),
     // Setting only `hours` time view in case of single column time picker
     // Allows for easy view lifecycle management
     views: shouldRenderTimeInASingleColumn ? ['hours'] : views,

package/legacy/LocalizationProvider/LocalizationProvider.js

@@ -109,6 +109,7 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
     keyboardDateTime: PropTypes.string,
     keyboardDateTime12h: PropTypes.string,
     keyboardDateTime24h: PropTypes.string,
+    meridiem: PropTypes.string,
     minutes: PropTypes.string,
     month: PropTypes.string,
     monthAndDate: PropTypes.string,

package/legacy/MobileDatePicker/MobileDatePicker.js

@@ -3,12 +3,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { resolveComponentProps } from '@mui/base/utils';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
-import { getDatePickerFieldFormat, useDatePickerDefaultizedProps } from '../DatePicker/shared';
+import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
 import { useLocaleText, useUtils, validateDate } from '../internals';
 import { DateField } from '../DateField';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { renderDateViewCalendar } from '../dateViewRenderers';
+import { resolveDateFormat } from '../internals/utils/date-utils';
 var MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
   var _defaultizedProps$slo2;
   var localeText = useLocaleText();
@@ -25,7 +26,7 @@ var MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(i
   // Props with the default values specific to the mobile variant
   var props = _extends({}, defaultizedProps, {
     viewRenderers: viewRenderers,
-    format: getDatePickerFieldFormat(utils, defaultizedProps),
+    format: resolveDateFormat(utils, defaultizedProps, false),
     slots: _extends({
       field: DateField
     }, defaultizedProps.slots),
@@ -92,7 +93,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,
   /**

package/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -5,14 +5,17 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { DateTimeField } from '../DateTimeField';
 import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
-import { useLocaleText, validateDateTime } from '../internals';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { renderTimeViewClock } from '../timeViewRenderers';
+import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
 var MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$slo2, _defaultizedProps$slo3;
   var localeText = useLocaleText();
+  var utils = useUtils();
 
   // Props with the default values common to all date time pickers
   var defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiMobileDateTimePicker');
@@ -29,6 +32,7 @@ var MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTime
   // Props with the default values specific to the mobile variant
   var props = _extends({}, defaultizedProps, {
     viewRenderers: viewRenderers,
+    format: resolveDateTimeFormat(utils, defaultizedProps),
     ampmInClock: ampmInClock,
     slots: _extends({
       field: DateTimeField
@@ -110,7 +114,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,
   /**

package/legacy/MobileTimePicker/MobileTimePicker.js

@@ -5,13 +5,16 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { useLocaleText, validateTime } from '../internals';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateTime } from '../internals/utils/validation/validateTime';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderTimeViewClock } from '../timeViewRenderers';
+import { resolveTimeFormat } from '../internals/utils/time-utils';
 var MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$slo2;
   var localeText = useLocaleText();
+  var utils = useUtils();
 
   // Props with the default values common to all time pickers
   var defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiMobileTimePicker');
@@ -26,6 +29,7 @@ var MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(i
   var props = _extends({}, defaultizedProps, {
     ampmInClock: ampmInClock,
     viewRenderers: viewRenderers,
+    format: resolveTimeFormat(utils, defaultizedProps),
     slots: _extends({
       field: TimeField
     }, defaultizedProps.slots),

package/legacy/MonthCalendar/MonthCalendar.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["className", "value", "defaultValue", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow"];
+var _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,6 +12,8 @@ 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 { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -56,6 +58,7 @@ export var MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(
   var className = props.className,
     valueProp = props.value,
     defaultValue = props.defaultValue,
+    referenceDateProp = props.referenceDate,
     disabled = props.disabled,
     disableFuture = props.disableFuture,
     disablePast = props.disablePast,
@@ -84,12 +87,20 @@ export var MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(
     _useControlled2 = _slicedToArray(_useControlled, 2),
     value = _useControlled2[0],
     setValue = _useControlled2[1];
+  var referenceDate = React.useMemo(function () {
+    return singleItemValueManager.getInitialReferenceValue({
+      value: value,
+      utils: utils,
+      props: props,
+      referenceDate: referenceDateProp,
+      granularity: SECTION_TYPE_GRANULARITY.month
+    });
+  }, [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
   var todayMonth = React.useMemo(function () {
     return utils.getMonth(now);
   }, [utils, now]);
-  var selectedDateOrStartOfMonth = React.useMemo(function () {
-    return value != null ? value : utils.startOfMonth(now);
-  }, [now, utils, value]);
   var selectedMonth = React.useMemo(function () {
     if (value != null) {
       return utils.getMonth(value);
@@ -97,8 +108,8 @@ export var MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(
     if (disableHighlightToday) {
       return null;
     }
-    return utils.getMonth(now);
-  }, [now, value, utils, disableHighlightToday]);
+    return utils.getMonth(referenceDate);
+  }, [value, utils, disableHighlightToday, referenceDate]);
   var _React$useState = React.useState(function () {
       return selectedMonth || todayMonth;
     }),
@@ -120,30 +131,31 @@ export var MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(
       onFocusedViewChange(newHasFocus);
     }
   });
-  var isMonthDisabled = React.useCallback(function (month) {
+  var isMonthDisabled = React.useCallback(function (dateToValidate) {
     var firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     var lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
-    if (utils.isBefore(month, firstEnabledMonth)) {
+    var 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]);
   var handleMonthSelection = useEventCallback(function (event, month) {
     if (readOnly) {
       return;
     }
-    var newDate = utils.setMonth(selectedDateOrStartOfMonth, month);
+    var newDate = utils.setMonth(value != null ? value : referenceDate, month);
     setValue(newDate);
     onChange == null ? void 0 : onChange(newDate);
   });
   var focusMonth = useEventCallback(function (month) {
-    if (!isMonthDisabled(utils.setMonth(selectedDateOrStartOfMonth, month))) {
+    if (!isMonthDisabled(utils.setMonth(value != null ? value : referenceDate, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
       if (onMonthFocus) {
@@ -193,7 +205,7 @@ export var MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: getMonthsInYear(utils, selectedDateOrStartOfMonth).map(function (month) {
+    children: getMonthsInYear(utils, value != null ? value : referenceDate).map(function (month) {
       var monthNumber = utils.getMonth(month);
       var monthText = utils.format(month, 'monthShort');
       var isSelected = monthNumber === selectedMonth;
@@ -279,6 +291,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

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -142,7 +142,7 @@ export var MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(funct
           return !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/legacy/PickersLayout/PickersLayout.js

@@ -135,6 +135,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/legacy/PickersLayout/usePickerLayout.js

@@ -37,6 +37,7 @@ var usePickerLayout = function usePickerLayout(props) {
     onViewChange = _ref.onViewChange,
     value = _ref.value,
     onChange = _ref.onChange,
+    onSelectShortcut = _ref.onSelectShortcut,
     isValid = _ref.isValid,
     isLandscape = _ref.isLandscape,
     disabled = _ref.disabled,
@@ -114,13 +115,13 @@ var usePickerLayout = function usePickerLayout(props) {
     additionalProps: {
       isValid: isValid,
       isLandscape: isLandscape,
-      onChange: onChange,
+      onChange: onSelectShortcut,
       className: classes.shortcuts
     },
     ownerState: {
       isValid: isValid,
       isLandscape: isLandscape,
-      onChange: onChange,
+      onChange: onSelectShortcut,
       className: classes.shortcuts,
       wrapperVariant: wrapperVariant
     }

package/legacy/PickersShortcuts/PickersShortcuts.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["items", "isLandscape", "onChange", "isValid"];
+var _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 { VIEW_HEIGHT } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 function PickersShortcuts(props) {
   var items = props.items,
+    changeImportance = props.changeImportance,
     isLandscape = props.isLandscape,
     onChange = props.onChange,
     isValid = props.isValid,
@@ -25,7 +26,7 @@ function PickersShortcuts(props) {
     return {
       label: item.label,
       onClick: function 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/legacy/StaticDatePicker/StaticDatePicker.js

@@ -73,7 +73,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,
   /**

package/legacy/StaticDateTimePicker/StaticDateTimePicker.js

@@ -93,7 +93,7 @@ StaticDateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**

package/legacy/TimeField/TimeField.js

@@ -241,7 +241,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   readOnly: PropTypes.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.
    */

package/legacy/YearCalendar/YearCalendar.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["autoFocus", "className", "value", "defaultValue", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow"];
+var _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,6 +12,8 @@ import { PickersYear } from './PickersYear';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
 import { getYearCalendarUtilityClass } from './yearCalendarClasses';
 import { applyDefaultDate } from '../internals/utils/date-utils';
+import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -60,6 +62,7 @@ export var YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(in
     className = props.className,
     valueProp = props.value,
     defaultValue = props.defaultValue,
+    referenceDateProp = props.referenceDate,
     disabled = props.disabled,
     disableFuture = props.disableFuture,
     disablePast = props.disablePast,
@@ -86,9 +89,17 @@ export var YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(in
     _useControlled2 = _slicedToArray(_useControlled, 2),
     value = _useControlled2[0],
     setValue = _useControlled2[1];
-  var selectedDateOrStartOfYear = React.useMemo(function () {
-    return value != null ? value : utils.startOfYear(now);
-  }, [now, utils, value]);
+  var referenceDate = React.useMemo(function () {
+    return singleItemValueManager.getInitialReferenceValue({
+      value: value,
+      utils: utils,
+      props: props,
+      referenceDate: referenceDateProp,
+      granularity: SECTION_TYPE_GRANULARITY.year
+    });
+  }, [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
   var todayYear = React.useMemo(function () {
     return utils.getYear(now);
   }, [utils, now]);
@@ -99,8 +110,8 @@ export var YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(in
     if (disableHighlightToday) {
       return null;
     }
-    return utils.getYear(now);
-  }, [now, value, utils, disableHighlightToday]);
+    return utils.getYear(referenceDate);
+  }, [value, utils, disableHighlightToday, referenceDate]);
   var _React$useState = React.useState(function () {
       return selectedYear || todayYear;
     }),
@@ -135,21 +146,22 @@ export var YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(in
     if (maxDate && utils.isAfterYear(dateToValidate, maxDate)) {
       return true;
     }
-    if (shouldDisableYear && shouldDisableYear(dateToValidate)) {
-      return true;
+    if (!shouldDisableYear) {
+      return false;
     }
-    return false;
+    var yearToValidate = utils.startOfYear(dateToValidate);
+    return shouldDisableYear(yearToValidate);
   }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, utils]);
   var handleYearSelection = useEventCallback(function (event, year) {
     if (readOnly) {
       return;
     }
-    var newDate = utils.setYear(selectedDateOrStartOfYear, year);
+    var newDate = utils.setYear(value != null ? value : referenceDate, year);
     setValue(newDate);
     onChange == null ? void 0 : onChange(newDate);
   });
   var focusYear = useEventCallback(function (year) {
-    if (!isYearDisabled(utils.setYear(selectedDateOrStartOfYear, year))) {
+    if (!isYearDisabled(utils.setYear(value != null ? value : referenceDate, year))) {
       setFocusedYear(year);
       changeHasFocus(true);
       onYearFocus == null ? void 0 : onYearFocus(year);
@@ -298,6 +310,11 @@ process.env.NODE_ENV !== "production" ? YearCalendar.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 year using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Disable specific year.
    * @template TDate

package/legacy/index.js

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

package/legacy/internals/hooks/useField/useFieldState.js

@@ -58,7 +58,6 @@ export var useFieldState = function useFieldState(params) {
       var referenceValue = valueManager.getInitialReferenceValue({
         referenceDate: referenceDateProp,
         value: valueFromTheOutside,
-        valueType: valueType,
         utils: utils,
         props: internalProps,
         granularity: granularity

package/legacy/internals/hooks/usePicker/usePickerValue.js

@@ -37,6 +37,14 @@ var shouldPublishValue = function shouldPublishValue(params) {
     }
     return hasChanged(dateState.lastPublishedValue);
   }
+  if (action.name === 'setValueFromShortcut' && action.changeImportance === 'accept') {
+    // On the first view,
+    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onChange`
+    if (isCurrentValueTheDefaultValue) {
+      return true;
+    }
+    return hasChanged(dateState.lastPublishedValue);
+  }
   return false;
 };
 
@@ -68,6 +76,9 @@ var shouldCommitValue = function shouldCommitValue(params) {
     }
     return hasChanged(dateState.lastCommittedValue);
   }
+  if (action.name === 'setValueFromShortcut') {
+    return action.changeImportance === 'accept' && hasChanged(dateState.lastCommittedValue);
+  }
   return false;
 };
 
@@ -83,6 +94,9 @@ var shouldClosePicker = function shouldClosePicker(params) {
   if (action.name === 'setValueFromView') {
     return action.selectionState === 'finish' && closeOnSelect;
   }
+  if (action.name === 'setValueFromShortcut') {
+    return action.changeImportance === 'accept';
+  }
   return false;
 };
 
@@ -263,7 +277,14 @@ export var usePickerValue = function usePickerValue(_ref) {
       selectionState: selectionState
     });
   });
-  var handleChangeField = useEventCallback(function (newValue, context) {
+  var handleSelectShortcut = useEventCallback(function (newValue, changeImportance) {
+    return updateDate({
+      name: 'setValueFromShortcut',
+      value: newValue,
+      changeImportance: changeImportance != null ? changeImportance : 'accept'
+    });
+  });
+  var handleChangeFromField = useEventCallback(function (newValue, context) {
     return updateDate({
       name: 'setValueFromField',
       value: newValue,
@@ -285,7 +306,7 @@ export var usePickerValue = function usePickerValue(_ref) {
   };
   var fieldResponse = {
     value: dateState.draft,
-    onChange: handleChangeField,
+    onChange: handleChangeFromField,
     selectedSections: selectedSections,
     onSelectedSectionsChange: handleFieldSelectedSectionsChange
   };
@@ -312,6 +333,7 @@ export var usePickerValue = function usePickerValue(_ref) {
   var layoutResponse = _extends({}, actions, {
     value: viewValue,
     onChange: handleChange,
+    onSelectShortcut: handleSelectShortcut,
     isValid: isValid
   });
   return {