@mui/x-date-pickers 6.7.0 → 6.8.0

package/PickersShortcuts/PickersShortcuts.d.ts

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

package/PickersShortcuts/PickersShortcuts.js

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

package/PickersShortcuts/index.d.ts

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

package/StaticDatePicker/StaticDatePicker.js

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

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -94,7 +94,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/TimeField/TimeField.js

@@ -247,7 +247,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/YearCalendar/YearCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,6 +11,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";
 const useUtilityClasses = ownerState => {
   const {
@@ -60,6 +62,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       className,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disabled,
       disableFuture,
       disablePast,
@@ -83,7 +86,15 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : null
   });
-  const selectedDateOrStartOfYear = React.useMemo(() => value != null ? value : utils.startOfYear(now), [now, utils, value]);
+  const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
+    value,
+    utils,
+    props,
+    referenceDate: referenceDateProp,
+    granularity: 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) {
@@ -92,8 +103,8 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     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] = useControlled({
     name: 'YearCalendar',
@@ -120,21 +131,22 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     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 = useEventCallback((event, year) => {
     if (readOnly) {
       return;
     }
-    const newDate = utils.setYear(selectedDateOrStartOfYear, year);
+    const newDate = utils.setYear(value != null ? value : referenceDate, year);
     setValue(newDate);
     onChange == null ? void 0 : onChange(newDate);
   });
   const focusYear = useEventCallback(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);
@@ -281,6 +293,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/YearCalendar/YearCalendar.types.d.ts

@@ -35,6 +35,11 @@ export interface YearCalendarProps<TDate> extends ExportedYearCalendarProps, Yea
      * Used when the component is not controlled.
      */
     defaultValue?: TDate | null;
+    /**
+     * The date used to generate the new value when both `value` and `defaultValue` are empty.
+     * @default The closest valid year using the validation props, except callbacks such as `shouldDisableDate`.
+     */
+    referenceDate?: TDate;
     /**
      * Callback fired when the value changes.
      * @template TDate

package/index.js

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

package/internals/hooks/useField/useField.types.d.ts

@@ -22,7 +22,7 @@ export interface UseFieldInternalProps<TValue, TDate, TSection extends FieldSect
      */
     defaultValue?: TValue;
     /**
-     * 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/internals/hooks/useField/useFieldState.js

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

package/internals/hooks/usePicker/usePickerValue.js

@@ -38,6 +38,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;
 };
 
@@ -71,6 +79,9 @@ const shouldCommitValue = params => {
     }
     return hasChanged(dateState.lastCommittedValue);
   }
+  if (action.name === 'setValueFromShortcut') {
+    return action.changeImportance === 'accept' && hasChanged(dateState.lastCommittedValue);
+  }
   return false;
 };
 
@@ -88,6 +99,9 @@ const shouldClosePicker = params => {
   if (action.name === 'setValueFromView') {
     return action.selectionState === 'finish' && closeOnSelect;
   }
+  if (action.name === 'setValueFromShortcut') {
+    return action.changeImportance === 'accept';
+  }
   return false;
 };
 
@@ -254,7 +268,12 @@ export const usePickerValue = ({
     value: newValue,
     selectionState
   }));
-  const handleChangeField = useEventCallback((newValue, context) => updateDate({
+  const handleSelectShortcut = useEventCallback((newValue, changeImportance) => updateDate({
+    name: 'setValueFromShortcut',
+    value: newValue,
+    changeImportance: changeImportance != null ? changeImportance : 'accept'
+  }));
+  const handleChangeFromField = useEventCallback((newValue, context) => updateDate({
     name: 'setValueFromField',
     value: newValue,
     context
@@ -274,7 +293,7 @@ export const usePickerValue = ({
   };
   const fieldResponse = {
     value: dateState.draft,
-    onChange: handleChangeField,
+    onChange: handleChangeFromField,
     selectedSections,
     onSelectedSectionsChange: handleFieldSelectedSectionsChange
   };
@@ -299,6 +318,7 @@ export const usePickerValue = ({
   const layoutResponse = _extends({}, actions, {
     value: viewValue,
     onChange: handleChange,
+    onSelectShortcut: handleSelectShortcut,
     isValid
   });
   return {

package/internals/hooks/usePicker/usePickerValue.types.d.ts

@@ -4,6 +4,7 @@ import { UseFieldValidationProps } from '../useField/useField.types';
 import { WrapperVariant } from '../../models/common';
 import { FieldSection, FieldSelectedSections, FieldValueType, MuiPickersAdapter } from '../../../models';
 import { GetDefaultReferenceDateProps } from '../../utils/getDefaultReferenceDate';
+import { PickerShortcutChangeImportance } from '../../../PickersShortcuts';
 export interface PickerValueManager<TValue, TDate, TError> {
     /**
      * Determines if two values are equal.
@@ -34,7 +35,6 @@ export interface PickerValueManager<TValue, TDate, TError> {
      * @param {TValue} params.value The value provided by the user.
      * @param {GetDefaultReferenceDateProps<TDate>} params.props The validation props needed to compute the reference value.
      * @param {MuiPickersAdapter<TDate>} params.utils The adapter.
-     * @param {FieldValueType} params.valueType The type of the value being edited.
      * @param {granularity} params.granularity The granularity of the selection possible on this component.
      * @returns {TValue} The reference value to use for non-provided dates.
      */
@@ -43,7 +43,6 @@ export interface PickerValueManager<TValue, TDate, TError> {
         value: TValue;
         props: GetDefaultReferenceDateProps<TDate>;
         utils: MuiPickersAdapter<TDate>;
-        valueType: FieldValueType;
         granularity: number;
     }) => TValue;
     /**
@@ -151,6 +150,10 @@ export type PickerValueUpdateAction<TValue, TError> = {
     name: 'setValueFromAction';
     value: TValue;
     pickerAction: 'accept' | 'today' | 'cancel' | 'dismiss' | 'clear';
+} | {
+    name: 'setValueFromShortcut';
+    value: TValue;
+    changeImportance: PickerShortcutChangeImportance;
 };
 /**
  * Props used to handle the value that are common to all pickers.
@@ -254,6 +257,7 @@ export interface UsePickerValueViewsResponse<TValue> {
 export interface UsePickerValueLayoutResponse<TValue> extends UsePickerValueActions {
     value: TValue;
     onChange: (newValue: TValue) => void;
+    onSelectShortcut: (newValue: TValue, changeImportance?: PickerShortcutChangeImportance) => void;
     isValid: (value: TValue) => boolean;
 }
 export interface UsePickerValueResponse<TValue, TSection extends FieldSection, TError> {

package/internals/utils/date-utils.d.ts

@@ -10,13 +10,12 @@ interface FindClosestDateParams<TDate> {
     utils: MuiPickersAdapter<TDate>;
 }
 export declare const findClosestEnabledDate: <TDate>({ date, disableFuture, disablePast, maxDate, minDate, isDateDisabled, utils, }: FindClosestDateParams<TDate>) => NonNullable<TDate> | null;
-export declare const clamp: <TDate>(utils: MuiPickersAdapter<TDate, any>, value: TDate, minDate: TDate, maxDate: TDate) => TDate;
 export declare const replaceInvalidDateByNull: <TDate>(utils: MuiPickersAdapter<TDate, any>, value: TDate | null) => NonNullable<TDate> | null;
 export declare const applyDefaultDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, value: TDate | null | undefined, defaultValue: TDate) => TDate;
 export declare const areDatesEqual: <TDate>(utils: MuiPickersAdapter<TDate, any>, a: TDate, b: TDate) => boolean;
 export declare const getMonthsInYear: <TDate>(utils: MuiPickersAdapter<TDate, any>, year: TDate) => TDate[];
 export declare const mergeDateAndTime: <TDate>(utils: MuiPickersAdapter<TDate, any>, dateParam: TDate, timeParam: TDate) => TDate;
-export declare const getTodayDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueType: FieldValueType) => TDate;
+export declare const getTodayDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueType?: FieldValueType) => TDate;
 export declare const isDatePickerView: (view: DateOrTimeViewWithMeridiem) => view is DateView;
 export declare const resolveDateFormat: (utils: MuiPickersAdapter<any>, { format, views }: {
     format?: string | undefined;

package/internals/utils/date-utils.js

@@ -49,15 +49,6 @@ export const findClosestEnabledDate = ({
   }
   return null;
 };
-export const clamp = (utils, value, minDate, maxDate) => {
-  if (utils.isBefore(value, minDate)) {
-    return minDate;
-  }
-  if (utils.isAfter(value, maxDate)) {
-    return maxDate;
-  }
-  return value;
-};
 export const replaceInvalidDateByNull = (utils, value) => value == null || !utils.isValid(value) ? null : value;
 export const applyDefaultDate = (utils, value, defaultValue) => {
   if (value == null || !utils.isValid(value)) {

package/internals/utils/getDefaultReferenceDate.d.ts

@@ -1,4 +1,4 @@
-import { FieldSection, FieldValueType, MuiPickersAdapter } from '../../models';
+import { FieldSection, MuiPickersAdapter } from '../../models';
 export interface GetDefaultReferenceDateProps<TDate> {
     maxDate?: TDate;
     minDate?: TDate;
@@ -6,10 +6,18 @@ export interface GetDefaultReferenceDateProps<TDate> {
     maxTime?: TDate;
     disableIgnoringDatePartForTimeValidation?: boolean;
 }
+export declare const SECTION_TYPE_GRANULARITY: {
+    year: number;
+    month: number;
+    day: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    milliseconds: number;
+};
 export declare const getSectionTypeGranularity: (sections: FieldSection[]) => number;
-export declare const getDefaultReferenceDate: <TDate>({ props, utils, valueType, granularity, }: {
+export declare const getDefaultReferenceDate: <TDate>({ props, utils, granularity, }: {
     props: GetDefaultReferenceDateProps<TDate>;
     utils: MuiPickersAdapter<TDate, any>;
-    valueType: FieldValueType;
     granularity: number;
 }) => TDate;

package/internals/utils/getDefaultReferenceDate.js

@@ -1,6 +1,6 @@
 import { createIsAfterIgnoreDatePart } from './time-utils';
 import { mergeDateAndTime, getTodayDate } from './date-utils';
-const SECTION_TYPE_GRANULARITY = {
+export const SECTION_TYPE_GRANULARITY = {
   year: 1,
   month: 2,
   day: 3,
@@ -40,11 +40,10 @@ const roundDate = (utils, granularity, date) => {
 export const getDefaultReferenceDate = ({
   props,
   utils,
-  valueType,
   granularity
 }) => {
   var _props$disableIgnorin;
-  let referenceDate = roundDate(utils, granularity, getTodayDate(utils, valueType));
+  let referenceDate = roundDate(utils, granularity, getTodayDate(utils));
   if (props.minDate != null && utils.isAfterDay(props.minDate, referenceDate)) {
     referenceDate = roundDate(utils, granularity, props.minDate);
   }

package/legacy/DateCalendar/DateCalendar.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", "onViewChange", "value", "defaultValue", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow"];
+var _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -88,6 +88,7 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
     onViewChange = props.onViewChange,
     valueProp = props.value,
     defaultValue = props.defaultValue,
+    referenceDateProp = props.referenceDate,
     disableFuture = props.disableFuture,
     disablePast = props.disablePast,
     defaultCalendarMonth = props.defaultCalendarMonth,
@@ -154,6 +155,7 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
   var _useCalendarState = useCalendarState({
       value: value,
       defaultCalendarMonth: defaultCalendarMonth,
+      referenceDate: referenceDateProp,
       reduceAnimations: reduceAnimations,
       onMonthChange: onMonthChange,
       minDate: minDate,
@@ -162,6 +164,7 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
       disablePast: disablePast,
       disableFuture: disableFuture
     }),
+    referenceDate = _useCalendarState.referenceDate,
     calendarState = _useCalendarState.calendarState,
     changeFocusedDay = _useCalendarState.changeFocusedDay,
     changeMonth = _useCalendarState.changeMonth,
@@ -211,9 +214,9 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
     changeFocusedDay(closestEnabledDate, true);
   });
   var handleSelectedDayChange = useEventCallback(function (day) {
-    if (value && day) {
+    if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange(mergeDateAndTime(utils, day, value), 'finish');
+      return handleValueChange(mergeDateAndTime(utils, day, value != null ? value : referenceDate), 'finish');
     }
     return handleValueChange(day, 'finish');
   });
@@ -296,7 +299,8 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
           onFocusedViewChange: function onFocusedViewChange(isViewFocused) {
             return setFocusedView('year', isViewFocused);
           },
-          yearsPerRow: yearsPerRow
+          yearsPerRow: yearsPerRow,
+          referenceDate: referenceDate
         })), view === 'month' && /*#__PURE__*/_jsx(MonthCalendar, _extends({}, baseDateValidationProps, commonViewProps, {
           hasFocus: hasFocus,
           className: className,
@@ -306,7 +310,8 @@ export var DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(in
           onFocusedViewChange: function onFocusedViewChange(isViewFocused) {
             return setFocusedView('month', isViewFocused);
           },
-          monthsPerRow: monthsPerRow
+          monthsPerRow: monthsPerRow,
+          referenceDate: referenceDate
         })), view === 'day' && /*#__PURE__*/_jsx(DayCalendar, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
           onFocusedDayChange: changeFocusedDay,
@@ -370,7 +375,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -479,6 +484,11 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/legacy/DateCalendar/useCalendarState.js

@@ -4,7 +4,8 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useIsDateDisabled } from './useIsDateDisabled';
 import { useUtils, useNow } from '../internals/hooks/useUtils';
-import { clamp } from '../internals/utils/date-utils';
+import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 export var createCalendarStateReducer = function createCalendarStateReducer(reduceAnimations, disableSwitchToMonthOnDayFocus, utils) {
   return function (state, action) {
     switch (action.type) {
@@ -36,26 +37,44 @@ export var createCalendarStateReducer = function createCalendarStateReducer(redu
     }
   };
 };
-export var useCalendarState = function useCalendarState(_ref) {
-  var _ref2;
-  var value = _ref.value,
-    defaultCalendarMonth = _ref.defaultCalendarMonth,
-    disableFuture = _ref.disableFuture,
-    disablePast = _ref.disablePast,
-    _ref$disableSwitchToM = _ref.disableSwitchToMonthOnDayFocus,
-    disableSwitchToMonthOnDayFocus = _ref$disableSwitchToM === void 0 ? false : _ref$disableSwitchToM,
-    maxDate = _ref.maxDate,
-    minDate = _ref.minDate,
-    onMonthChange = _ref.onMonthChange,
-    reduceAnimations = _ref.reduceAnimations,
-    shouldDisableDate = _ref.shouldDisableDate;
+export var useCalendarState = function useCalendarState(params) {
+  var value = params.value,
+    referenceDateProp = params.referenceDate,
+    defaultCalendarMonth = params.defaultCalendarMonth,
+    disableFuture = params.disableFuture,
+    disablePast = params.disablePast,
+    _params$disableSwitch = params.disableSwitchToMonthOnDayFocus,
+    disableSwitchToMonthOnDayFocus = _params$disableSwitch === void 0 ? false : _params$disableSwitch,
+    maxDate = params.maxDate,
+    minDate = params.minDate,
+    onMonthChange = params.onMonthChange,
+    reduceAnimations = params.reduceAnimations,
+    shouldDisableDate = params.shouldDisableDate;
   var now = useNow();
   var utils = useUtils();
   var reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
+  var referenceDate = React.useMemo(function () {
+    var externalReferenceDate = null;
+    if (referenceDateProp) {
+      externalReferenceDate = referenceDateProp;
+    } else if (defaultCalendarMonth) {
+      // For `defaultCalendarMonth`, we just want to keep the month and the year to avoid a behavior change.
+      externalReferenceDate = utils.startOfMonth(defaultCalendarMonth);
+    }
+    return singleItemValueManager.getInitialReferenceValue({
+      value: value,
+      utils: utils,
+      props: params,
+      referenceDate: externalReferenceDate,
+      granularity: SECTION_TYPE_GRANULARITY.day
+    });
+  }, [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
   var _React$useReducer = React.useReducer(reducerFn, {
       isMonthSwitchingAnimating: false,
       focusedDay: value || now,
-      currentMonth: utils.startOfMonth((_ref2 = value != null ? value : defaultCalendarMonth) != null ? _ref2 : clamp(utils, now, minDate, maxDate)),
+      currentMonth: utils.startOfMonth(referenceDate),
       slideDirection: 'left'
     }),
     _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
@@ -101,6 +120,7 @@ export var useCalendarState = function useCalendarState(_ref) {
     }
   });
   return {
+    referenceDate: referenceDate,
     calendarState: calendarState,
     changeMonth: changeMonth,
     changeFocusedDay: changeFocusedDay,

package/legacy/DateField/DateField.js

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

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

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

@@ -82,7 +82,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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/DesktopDatePicker/DesktopDatePicker.js

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