@mui/x-date-pickers 6.6.0 → 6.8.0

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -12,15 +12,18 @@ var _utils = require("@mui/base/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _TimeField = require("../TimeField");
 var _shared = require("../TimePicker/shared");
-var _internals = require("../internals");
+var _useUtils = require("../internals/hooks/useUtils");
+var _validateTime = require("../internals/utils/validation/validateTime");
 var _icons = require("../icons");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _timeViewRenderers = require("../timeViewRenderers");
+var _timeUtils = require("../internals/utils/time-utils");
 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 DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  const localeText = (0, _internals.useLocaleText)();
+  const localeText = (0, _useUtils.useLocaleText)();
+  const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = (0, _shared.useTimePickerDefaultizedProps)(inProps, 'MuiDesktopTimePicker');
@@ -49,6 +52,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     ampmInClock,
     timeSteps,
     viewRenderers,
+    format: (0, _timeUtils.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,
@@ -76,7 +80,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
     getOpenDialogAriaText: localeText.openTimePickerDialogue,
-    validator: _internals.validateTime
+    validator: _validateTime.validateTime
   });
   return renderPicker();
 });

package/node/LocalizationProvider/LocalizationProvider.js

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

package/node/MobileDatePicker/MobileDatePicker.js

@@ -16,6 +16,7 @@ var _DateField = require("../DateField");
 var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _dateViewRenderers = require("../dateViewRenderers");
+var _dateUtils = require("../internals/utils/date-utils");
 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 MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
@@ -33,7 +34,7 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
   // Props with the default values specific to the mobile variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
-    format: (0, _shared.getDatePickerFieldFormat)(utils, defaultizedProps),
+    format: (0, _dateUtils.resolveDateFormat)(utils, defaultizedProps, false),
     slots: (0, _extends2.default)({
       field: _DateField.DateField
     }, defaultizedProps.slots),
@@ -99,7 +100,7 @@ MobileDatePicker.propTypes = {
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: _propTypes.default.any,
   /**

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -12,15 +12,18 @@ var _utils = require("@mui/base/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _DateTimeField = require("../DateTimeField");
 var _shared = require("../DateTimePicker/shared");
-var _internals = require("../internals");
+var _useUtils = require("../internals/hooks/useUtils");
+var _validateDateTime = require("../internals/utils/validation/validateDateTime");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _timeViewRenderers = require("../timeViewRenderers");
+var _dateTimeUtils = require("../internals/utils/date-time-utils");
 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 MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
-  const localeText = (0, _internals.useLocaleText)();
+  const localeText = (0, _useUtils.useLocaleText)();
+  const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = (0, _shared.useDateTimePickerDefaultizedProps)(inProps, 'MuiMobileDateTimePicker');
@@ -37,6 +40,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
   // Props with the default values specific to the mobile variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
+    format: (0, _dateTimeUtils.resolveDateTimeFormat)(utils, defaultizedProps),
     ampmInClock,
     slots: (0, _extends2.default)({
       field: _DateTimeField.DateTimeField
@@ -61,7 +65,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date-time',
     getOpenDialogAriaText: localeText.openDatePickerDialogue,
-    validator: _internals.validateDateTime
+    validator: _validateDateTime.validateDateTime
   });
   return renderPicker();
 });
@@ -117,7 +121,7 @@ MobileDateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: _propTypes.default.any,
   /**

package/node/MobileTimePicker/MobileTimePicker.js

@@ -12,14 +12,17 @@ var _utils = require("@mui/base/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _TimeField = require("../TimeField");
 var _shared = require("../TimePicker/shared");
-var _internals = require("../internals");
+var _useUtils = require("../internals/hooks/useUtils");
+var _validateTime = require("../internals/utils/validation/validateTime");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _timeViewRenderers = require("../timeViewRenderers");
+var _timeUtils = require("../internals/utils/time-utils");
 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 MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
-  const localeText = (0, _internals.useLocaleText)();
+  const localeText = (0, _useUtils.useLocaleText)();
+  const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = (0, _shared.useTimePickerDefaultizedProps)(inProps, 'MuiMobileTimePicker');
@@ -34,6 +37,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
   const props = (0, _extends2.default)({}, defaultizedProps, {
     ampmInClock,
     viewRenderers,
+    format: (0, _timeUtils.resolveTimeFormat)(utils, defaultizedProps),
     slots: (0, _extends2.default)({
       field: _TimeField.TimeField
     }, defaultizedProps.slots),
@@ -54,7 +58,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
     getOpenDialogAriaText: localeText.openTimePickerDialogue,
-    validator: _internals.validateTime
+    validator: _validateTime.validateTime
   });
   return renderPicker();
 });

package/node/MonthCalendar/MonthCalendar.js

@@ -18,8 +18,10 @@ var _PickersMonth = require("./PickersMonth");
 var _useUtils = require("../internals/hooks/useUtils");
 var _monthCalendarClasses = require("./monthCalendarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
+var _valueManagers = require("../internals/utils/valueManagers");
+var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDate");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "value", "defaultValue", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow"];
+const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow"];
 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 => {
@@ -66,6 +68,7 @@ const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inPro
       className,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disabled,
       disableFuture,
       disablePast,
@@ -90,8 +93,16 @@ const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inPro
     controlled: valueProp,
     default: defaultValue ?? null
   });
+  const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
+    value,
+    utils,
+    props,
+    referenceDate: referenceDateProp,
+    granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.month
+  }), [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
   const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);
-  const selectedDateOrStartOfMonth = React.useMemo(() => value ?? utils.startOfMonth(now), [now, utils, value]);
   const selectedMonth = React.useMemo(() => {
     if (value != null) {
       return utils.getMonth(value);
@@ -99,8 +110,8 @@ const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inPro
     if (disableHighlightToday) {
       return null;
     }
-    return utils.getMonth(now);
-  }, [now, value, utils, disableHighlightToday]);
+    return utils.getMonth(referenceDate);
+  }, [value, utils, disableHighlightToday, referenceDate]);
   const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || todayMonth);
   const [internalHasFocus, setInternalHasFocus] = (0, _utils.unstable_useControlled)({
     name: 'MonthCalendar',
@@ -114,30 +125,31 @@ const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inPro
       onFocusedViewChange(newHasFocus);
     }
   });
-  const isMonthDisabled = React.useCallback(month => {
+  const isMonthDisabled = React.useCallback(dateToValidate => {
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
-    if (utils.isBefore(month, firstEnabledMonth)) {
+    const monthToValidate = utils.startOfMonth(dateToValidate);
+    if (utils.isBefore(monthToValidate, firstEnabledMonth)) {
       return true;
     }
-    if (utils.isAfter(month, lastEnabledMonth)) {
+    if (utils.isAfter(monthToValidate, lastEnabledMonth)) {
       return true;
     }
     if (!shouldDisableMonth) {
       return false;
     }
-    return shouldDisableMonth(month);
+    return shouldDisableMonth(monthToValidate);
   }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, utils]);
   const handleMonthSelection = (0, _utils.unstable_useEventCallback)((event, month) => {
     if (readOnly) {
       return;
     }
-    const newDate = utils.setMonth(selectedDateOrStartOfMonth, month);
+    const newDate = utils.setMonth(value ?? referenceDate, month);
     setValue(newDate);
     onChange?.(newDate);
   });
   const focusMonth = (0, _utils.unstable_useEventCallback)(month => {
-    if (!isMonthDisabled(utils.setMonth(selectedDateOrStartOfMonth, month))) {
+    if (!isMonthDisabled(utils.setMonth(value ?? referenceDate, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
       if (onMonthFocus) {
@@ -185,7 +197,7 @@ const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inPro
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: (0, _dateUtils.getMonthsInYear)(utils, selectedDateOrStartOfMonth).map(month => {
+    children: (0, _dateUtils.getMonthsInYear)(utils, value ?? referenceDate).map(month => {
       const monthNumber = utils.getMonth(month);
       const monthText = utils.format(month, 'monthShort');
       const isSelected = monthNumber === selectedMonth;
@@ -272,6 +284,11 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * If `true` picker is readonly
    */
   readOnly: _propTypes.default.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid month using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate: _propTypes.default.any,
   /**
    * Disable specific month.
    * @template TDate

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

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

package/node/PickersLayout/PickersLayout.js

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

package/node/PickersLayout/usePickerLayout.js

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

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,
   /**

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,
   /**

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.
    */

package/node/YearCalendar/YearCalendar.js

@@ -17,8 +17,10 @@ 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 _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"];
 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 => {
@@ -69,6 +71,7 @@ const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps
       className,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disabled,
       disableFuture,
       disablePast,
@@ -92,7 +95,15 @@ const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps
     controlled: valueProp,
     default: defaultValue ?? null
   });
-  const selectedDateOrStartOfYear = React.useMemo(() => value ?? utils.startOfYear(now), [now, utils, value]);
+  const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
+    value,
+    utils,
+    props,
+    referenceDate: referenceDateProp,
+    granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.year
+  }), [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
   const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);
   const selectedYear = React.useMemo(() => {
     if (value != null) {
@@ -101,8 +112,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 +140,22 @@ 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);
+    const newDate = utils.setYear(value ?? referenceDate, year);
     setValue(newDate);
     onChange?.(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);
@@ -291,6 +303,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

package/node/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/node/internals/hooks/useField/useFieldState.js

@@ -56,7 +56,6 @@ const useFieldState = params => {
     const referenceValue = valueManager.getInitialReferenceValue({
       referenceDate: referenceDateProp,
       value: valueFromTheOutside,
-      valueType,
       utils,
       props: internalProps,
       granularity

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

@@ -47,6 +47,14 @@ const 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;
 };
 
@@ -80,6 +88,9 @@ const shouldCommitValue = params => {
     }
     return hasChanged(dateState.lastCommittedValue);
   }
+  if (action.name === 'setValueFromShortcut') {
+    return action.changeImportance === 'accept' && hasChanged(dateState.lastCommittedValue);
+  }
   return false;
 };
 
@@ -97,6 +108,9 @@ const shouldClosePicker = params => {
   if (action.name === 'setValueFromView') {
     return action.selectionState === 'finish' && closeOnSelect;
   }
+  if (action.name === 'setValueFromShortcut') {
+    return action.changeImportance === 'accept';
+  }
   return false;
 };
 
@@ -263,7 +277,12 @@ const usePickerValue = ({
     value: newValue,
     selectionState
   }));
-  const handleChangeField = (0, _useEventCallback.default)((newValue, context) => updateDate({
+  const handleSelectShortcut = (0, _useEventCallback.default)((newValue, changeImportance) => updateDate({
+    name: 'setValueFromShortcut',
+    value: newValue,
+    changeImportance: changeImportance ?? 'accept'
+  }));
+  const handleChangeFromField = (0, _useEventCallback.default)((newValue, context) => updateDate({
     name: 'setValueFromField',
     value: newValue,
     context
@@ -283,7 +302,7 @@ const usePickerValue = ({
   };
   const fieldResponse = {
     value: dateState.draft,
-    onChange: handleChangeField,
+    onChange: handleChangeFromField,
     selectedSections,
     onSelectedSectionsChange: handleFieldSelectedSectionsChange
   };
@@ -308,6 +327,7 @@ const usePickerValue = ({
   const layoutResponse = (0, _extends2.default)({}, actions, {
     value: viewValue,
     onChange: handleChange,
+    onSelectShortcut: handleSelectShortcut,
     isValid
   });
   return {

package/node/internals/utils/date-time-utils.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveDateTimeFormat = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _timeUtils = require("./time-utils");
+var _dateUtils = require("./date-utils");
+const _excluded = ["views", "format"];
+const resolveDateTimeFormat = (utils, _ref) => {
+  let {
+      views,
+      format
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  if (format) {
+    return format;
+  }
+  const dateViews = [];
+  const timeViews = [];
+  views.forEach(view => {
+    if ((0, _timeUtils.isTimeView)(view)) {
+      timeViews.push(view);
+    } else {
+      dateViews.push(view);
+    }
+  });
+  if (timeViews.length === 0) {
+    return (0, _dateUtils.resolveDateFormat)(utils, (0, _extends2.default)({
+      views: dateViews
+    }, other), false);
+  }
+  if (dateViews.length === 0) {
+    return (0, _timeUtils.resolveTimeFormat)(utils, (0, _extends2.default)({
+      views: timeViews
+    }, other));
+  }
+  const timeFormat = (0, _timeUtils.resolveTimeFormat)(utils, (0, _extends2.default)({
+    views: timeViews
+  }, other));
+  const dateFormat = (0, _dateUtils.resolveDateFormat)(utils, (0, _extends2.default)({
+    views: dateViews
+  }, other), false);
+  return `${dateFormat} ${timeFormat}`;
+};
+exports.resolveDateTimeFormat = resolveDateTimeFormat;