@mui/x-date-pickers 6.7.0 → 6.8.0

package/CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.8.0
+
+_Jun 16, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Greek (el-GR) locale on Pickers and improve on Data Grid
+- 🚅 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@6.8.0` / `@mui/x-data-grid-pro@6.8.0` / `@mui/x-data-grid-premium@6.8.0`
+
+#### Changes
+
+- [DataGrid] Add missing styles to `overridesResolver` (#9248) @mrmuhammadali
+- [DataGrid] Keep column header menu icon always visible on touch devices (#9076) @cherniavskii
+- [DataGrid] Correct the type for single digit edited number value (#9282) @MBilalShafi
+- [DataGrid] Correct the type for single digit edited number for row edit (#9348) @MBilalShafi
+- [DataGrid] Filtering performance: cache values (#9284) @romgrk
+- [DataGrid] Fix tabbing between `actions` cells in edit mode (#9321) @md250721
+- [DataGrid] Make autocompletion work for `GridColDef['type']` (#9320) @cherniavskii
+- [DataGrid] Polish shortcut logic (#9220) @oliviertassinari
+- [DataGrid] Row reordering fix for different row heights (#7006) @yaredtsy
+- [DataGrid] Scroll performance improvements (#9037) @romgrk
+- [l10n] Improve Greek (el-GR) locale (#9292) @clytras
+
+### `@mui/x-date-pickers@6.8.0` / `@mui/x-date-pickers-pro@6.8.0`
+
+#### Changes
+
+- [l10n] Add Greek (el-GR) locale (#9293) @clytras
+- [pickers] Add a `referenceDate` prop on `DateCalendar`, `MonthCalendar` and `YearCalendar` (#9260) @flaviendelangle
+- [pickers] Close the calendar when a shortcut is selected (#9080) @flaviendelangle
+- [pickers] Fix disabling for digital clock (#9300) @alexfauquette
+
+### Docs
+
+- [docs] Add header filters to the popular features demo (#9069) @MBilalShafi
+- [docs] Fix `Date Calendar` dynamic data demo (#9290) @benzler
+- [docs] Fix Data Grid header filter link (#9225) @oliviertassinari
+- [docs] Fix missing docs version warning (#9221) @oliviertassinari
+- [docs] Improve Chart overview (#9333) @oliviertassinari
+- [docs] Improve Next.js license installation guide (#8975) @oliviertassinari
+- [docs] Link pagination documentation to the migration guide (#9296) @MBilalShafi
+- [docs] One step toward components -> slots (#9251) @oliviertassinari
+- [docs] Improve and reorganize sections on editing page (#8431) @joserodolfofreitas
+- [docs] Add clipboard paste to popular features demo (#9029) @cherniavskii
+
+### Core
+
+- [core] Polish event name (#9336) @oliviertassinari
+- [core] Re-enable `Argos` CI step (#9301) @LukasTy
+- [core] Upgrade Node.js to v18 on CircleCI, CodeSandbox and Netlify (#9319) @ZeeshanTamboli
+- [core] Upgrade Node.js v18 for l10n GitHub CI (#9355) @ZeeshanTamboli
+- [charts] Add demonstration pages based on Recharts demo (#9175) @alexfauquette
+- [charts] Add legend (#9024) @alexfauquette
+- [charts] Complete the docs to introduce charts (#9153) @alexfauquette
+- [charts] Manage elements highlights (#9242) @alexfauquette
+- [charts] Prefix subcomponents with `Charts` (#9314) @alexfauquette
+- [license] Improve annual license expiration message (#9135) @oliviertassinari
+
 ## 6.7.0
 
 _Jun 9, 2023_
@@ -17,11 +79,11 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
   <TimePicker views={['hours', 'minutes', 'seconds']} ampm />
   // Format before v6.7.0: `hh:mm aa`
   // Format after v6.7.0: `hh:mm:ss aa`
- 
+
   <DatePicker views={['year']} />
   // Format before v6.7.0: `MM/DD/YYYY`
   // Format after v6.7.0: `YYYY`
-  
+
   <DateTimePicker views={['day', 'hours', 'minutes']} ampm />
   // Format before v6.7.0: `MM/DD/YYYY hh:mm aa`
   // Format after v6.7.0: `DD hh:mm aa`
@@ -83,7 +145,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - 🚀 New date time picking UI on [`DesktopDateTimePicker`](https://mui.com/x/react-date-pickers/date-time-picker/)
 
-  <img src="https://user-images.githubusercontent.com/4941090/242533399-2b106390-8158-4aba-9ca4-b621c6310977.gif" width="628" />
+  <img src="https://github.com/mui/mui-x/assets/3165635/4e1fe9f9-03eb-4f23-99dd-80212b21fb23" width="840" height="506" />
 
 - 🚀 Performance improvements
 - 🐞 Bugfixes
@@ -151,7 +213,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [charts] Manage series stacking (#8888) @alexfauquette
 - [license] List side effects in the license package (#9092) @cherniavskii
 
-## v6.5.0
+## 6.5.0
 
 _May 19, 2023_
 
@@ -159,9 +221,9 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 - 💫 Introduce filtering on column headers for `DataGridPro` and `DataGridPremium`:
 
-  https://github.com/mui/mui-x/assets/12609561/c4c2bfec-59cf-4cab-932d-dc1983081de9
+  <img src="https://github.com/mui/mui-x/releases/download/v6.5.0/recording.gif" width="840" height="506" />
 
-  See [the documentation](https://mui.com/x/react-data-grid/filtering/#header-filters) for more information
+  See [the documentation](https://mui.com/x/react-data-grid/filtering/header-filters/) for more information
 
 - 🌍 Improve Hebrew (he-IL) and Czech (cs-CZ) locales
 - 📝 Support for editing on pinned rows
@@ -207,7 +269,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [DataGrid] Memoize root props for better performance (#8942) @romgrk
 - [test] Skip flaky unit tests in JSDOM (#8994) @cherniavskii
 
-## v6.4.0
+## 6.4.0
 
 _May 12, 2023_
 
@@ -4240,7 +4302,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [docs] Revise and split up "Overview" page into "Introduction" (#4692) @samuelsycamore
 - [docs] Use `useKeepGroupedColumnsHiddren` from the grid package on remaining demo (#5382) @flaviendelangle
 
-## v5.12.3
+## 5.12.3
 
 _Jun 23, 2022_
 
@@ -4291,7 +4353,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 - [test] Throw if date adapter is not found (#5289) @cherniavskii
 - [test] Use mock for `ResizeObserver` (#5215) @m4theushw
 
-## v5.12.2
+## 5.12.2
 
 _Jun 16, 2022_
 
@@ -4334,7 +4396,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
 - [core] Fix `GridColTypeDef` usage in demo (#5197) @cherniavskii
 - [test] Add `waitFor` before asserting height (#5203) @m4theushw
 
-## v5.12.1
+## 5.12.1
 
 _Jun 9, 2022_
 
@@ -4391,7 +4453,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [test] Fix dynamic row height test failing on Chrome (#5147) @m4theushw
 - [test] Remove delay on server demo for regression tests (#5131) @alexfauquette
 
-## v5.12.0
+## 5.12.0
 
 _May 31, 2022_
 
@@ -4472,7 +4534,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [test] Skip Safari and Firefox on broken tests (#4994) @alexfauquette
 - [test] Make argos screenshots stable (#5061) @m4theushw
 
-## v5.11.1
+## 5.11.1
 
 _May 20, 2022_
 
@@ -4564,7 +4626,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 - [core] Simplify rows cache management (#4933) @flaviendelangle
 - [core] Use internal icons for quick filter (#4912) @alexfauquette
 
-## v5.11.0
+## 5.11.0
 
 _May 13, 2022_
 
@@ -4708,7 +4770,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [test] Reset cleanup tracking on Karma tests (#4679) @m4theushw
 - [test] Restore `sinon` sandbox after each `karma` test (#4689) @m4theushw
 
-## v5.10.0
+## 5.10.0
 
 _Apr 25, 2022_
 
@@ -4744,7 +4806,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 - [core] Fix the README of the X packages (#4590) @flaviendelangle
 - [test] Fix test to not depend on screen resolution (#4587) @m4theushw
 
-## v5.9.0
+## 5.9.0
 
 _Apr 14, 2022_
 

package/DateCalendar/DateCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _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"];
+const _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';
@@ -84,6 +84,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       onViewChange,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disableFuture,
       disablePast,
       defaultCalendarMonth,
@@ -147,6 +148,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     onFocusedViewChange
   });
   const {
+    referenceDate,
     calendarState,
     changeFocusedDay,
     changeMonth,
@@ -156,6 +158,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   } = useCalendarState({
     value,
     defaultCalendarMonth,
+    referenceDate: referenceDateProp,
     reduceAnimations,
     onMonthChange,
     minDate,
@@ -207,9 +210,9 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     changeFocusedDay(closestEnabledDate, true);
   });
   const handleSelectedDayChange = useEventCallback(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');
   });
@@ -286,7 +289,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
           onFocusedViewChange: isViewFocused => setFocusedView('year', isViewFocused),
-          yearsPerRow: yearsPerRow
+          yearsPerRow: yearsPerRow,
+          referenceDate: referenceDate
         })), view === 'month' && /*#__PURE__*/_jsx(MonthCalendar, _extends({}, baseDateValidationProps, commonViewProps, {
           hasFocus: hasFocus,
           className: className,
@@ -294,7 +298,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           onChange: handleDateMonthChange,
           shouldDisableMonth: shouldDisableMonth,
           onFocusedViewChange: isViewFocused => setFocusedView('month', isViewFocused),
-          monthsPerRow: monthsPerRow
+          monthsPerRow: monthsPerRow,
+          referenceDate: referenceDate
         })), view === 'day' && /*#__PURE__*/_jsx(DayCalendar, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
           onFocusedDayChange: changeFocusedDay,
@@ -356,7 +361,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,
   /**
@@ -465,6 +470,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/DateCalendar/DateCalendar.types.d.ts

@@ -18,7 +18,7 @@ export interface DateCalendarSlotsComponentsProps<TDate> extends PickersCalendar
 }
 export interface ExportedDateCalendarProps<TDate> extends ExportedDayCalendarProps, ExportedMonthCalendarProps, ExportedYearCalendarProps, BaseDateValidationProps<TDate>, DayValidationProps<TDate>, YearValidationProps<TDate>, MonthValidationProps<TDate> {
     /**
-     * Default calendar month displayed when `value={null}`.
+     * Default calendar month displayed when `value` and `defaultValue` are empty.
      */
     defaultCalendarMonth?: TDate;
     /**
@@ -66,6 +66,11 @@ export interface DateCalendarProps<TDate> extends ExportedDateCalendarProps<TDat
      * 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 date using the validation props, except callbacks such as `shouldDisableDate`.
+     */
+    referenceDate?: TDate;
     /**
      * Callback fired when the value changes.
      * @template TDate

package/DateCalendar/useCalendarState.d.ts

@@ -25,10 +25,11 @@ interface ChangeFocusedDayPayload<TDate> {
 export declare const createCalendarStateReducer: <TDate extends unknown>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate, any>) => (state: CalendarState<TDate>, action: {
     type: "finishMonthSwitchingAnimation";
 } | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload<TDate>>) => CalendarState<TDate>;
-interface CalendarStateInput<TDate> extends Pick<DateCalendarDefaultizedProps<TDate>, 'value' | 'defaultCalendarMonth' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
+interface UseCalendarStateParams<TDate> extends Pick<DateCalendarDefaultizedProps<TDate>, 'value' | 'referenceDate' | 'defaultCalendarMonth' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
     disableSwitchToMonthOnDayFocus?: boolean;
 }
-export declare const useCalendarState: <TDate extends unknown>({ value, defaultCalendarMonth, disableFuture, disablePast, disableSwitchToMonthOnDayFocus, maxDate, minDate, onMonthChange, reduceAnimations, shouldDisableDate, }: CalendarStateInput<TDate>) => {
+export declare const useCalendarState: <TDate extends unknown>(params: UseCalendarStateParams<TDate>) => {
+    referenceDate: any;
     calendarState: CalendarState<TDate>;
     changeMonth: (newDate: TDate) => void;
     changeFocusedDay: (newFocusedDate: TDate | null, withoutMonthSwitchingAnimation?: boolean | undefined) => void;

package/DateCalendar/useCalendarState.js

@@ -3,7 +3,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 const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
   switch (action.type) {
     case 'changeMonth':
@@ -33,26 +34,45 @@ export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMont
       throw new Error('missing support');
   }
 };
-export const useCalendarState = ({
-  value,
-  defaultCalendarMonth,
-  disableFuture,
-  disablePast,
-  disableSwitchToMonthOnDayFocus = false,
-  maxDate,
-  minDate,
-  onMonthChange,
-  reduceAnimations,
-  shouldDisableDate
-}) => {
-  var _ref;
+export const useCalendarState = params => {
+  const {
+    value,
+    referenceDate: referenceDateProp,
+    defaultCalendarMonth,
+    disableFuture,
+    disablePast,
+    disableSwitchToMonthOnDayFocus = false,
+    maxDate,
+    minDate,
+    onMonthChange,
+    reduceAnimations,
+    shouldDisableDate
+  } = params;
   const now = useNow();
   const utils = useUtils();
   const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
+  const referenceDate = React.useMemo(() => {
+    let 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,
+      utils,
+      props: params,
+      referenceDate: externalReferenceDate,
+      granularity: SECTION_TYPE_GRANULARITY.day
+    });
+  }, [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: value || now,
-    currentMonth: utils.startOfMonth((_ref = value != null ? value : defaultCalendarMonth) != null ? _ref : clamp(utils, now, minDate, maxDate)),
+    currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
   const handleChangeMonth = React.useCallback(payload => {
@@ -95,6 +115,7 @@ export const useCalendarState = ({
     }
   });
   return {
+    referenceDate,
     calendarState,
     changeMonth,
     changeFocusedDay,

package/DateField/DateField.js

@@ -230,7 +230,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/DatePicker/DatePicker.js

@@ -73,7 +73,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/DateTimeField/DateTimeField.js

@@ -263,7 +263,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/DateTimePicker/DateTimePicker.js

@@ -83,7 +83,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/DesktopDatePicker/DesktopDatePicker.js

@@ -97,7 +97,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/DesktopDateTimePicker/DesktopDateTimePicker.js

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

package/MobileDatePicker/MobileDatePicker.js

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

package/MobileDateTimePicker/MobileDateTimePicker.js

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

package/MonthCalendar/MonthCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "value", "defaultValue", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow"];
+const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,6 +11,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";
 const useUtilityClasses = ownerState => {
   const {
@@ -56,6 +58,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       className,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disabled,
       disableFuture,
       disablePast,
@@ -80,8 +83,16 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : null
   });
+  const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
+    value,
+    utils,
+    props,
+    referenceDate: referenceDateProp,
+    granularity: 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 != null ? value : utils.startOfMonth(now), [now, utils, value]);
   const selectedMonth = React.useMemo(() => {
     if (value != null) {
       return utils.getMonth(value);
@@ -89,8 +100,8 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     if (disableHighlightToday) {
       return null;
     }
-    return utils.getMonth(now);
-  }, [now, value, utils, disableHighlightToday]);
+    return utils.getMonth(referenceDate);
+  }, [value, utils, disableHighlightToday, referenceDate]);
   const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || todayMonth);
   const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'MonthCalendar',
@@ -104,30 +115,31 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       onFocusedViewChange(newHasFocus);
     }
   });
-  const isMonthDisabled = React.useCallback(month => {
+  const isMonthDisabled = React.useCallback(dateToValidate => {
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
-    if (utils.isBefore(month, firstEnabledMonth)) {
+    const monthToValidate = utils.startOfMonth(dateToValidate);
+    if (utils.isBefore(monthToValidate, firstEnabledMonth)) {
       return true;
     }
-    if (utils.isAfter(month, lastEnabledMonth)) {
+    if (utils.isAfter(monthToValidate, lastEnabledMonth)) {
       return true;
     }
     if (!shouldDisableMonth) {
       return false;
     }
-    return shouldDisableMonth(month);
+    return shouldDisableMonth(monthToValidate);
   }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, utils]);
   const handleMonthSelection = useEventCallback((event, month) => {
     if (readOnly) {
       return;
     }
-    const newDate = utils.setMonth(selectedDateOrStartOfMonth, month);
+    const newDate = utils.setMonth(value != null ? value : referenceDate, month);
     setValue(newDate);
     onChange == null ? void 0 : onChange(newDate);
   });
   const focusMonth = useEventCallback(month => {
-    if (!isMonthDisabled(utils.setMonth(selectedDateOrStartOfMonth, month))) {
+    if (!isMonthDisabled(utils.setMonth(value != null ? value : referenceDate, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
       if (onMonthFocus) {
@@ -175,7 +187,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: getMonthsInYear(utils, selectedDateOrStartOfMonth).map(month => {
+    children: getMonthsInYear(utils, value != null ? value : referenceDate).map(month => {
       const monthNumber = utils.getMonth(month);
       const monthText = utils.format(month, 'monthShort');
       const isSelected = monthNumber === selectedMonth;
@@ -261,6 +273,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/MonthCalendar/MonthCalendar.types.d.ts

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

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

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

package/PickersLayout/PickersLayout.js

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

package/PickersLayout/usePickerLayout.js

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