@mui/x-date-pickers 6.9.0 → 6.9.2

package/CHANGELOG.md

@@ -3,23 +3,151 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.9.2
+
+_Jul 6, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Auto-scroll when making range selection (#8661) @m4theushw
+
+- 📚 New page: Components lifecycle (#8372) @flaviendelangle
+
+  Clarify pickers events and value updates in a [single docs page](https://mui.com/x/react-date-pickers/lifecycle/).
+
+- 🥧 Add pie chart component
+
+  They are fresh from the code editor. You can visit [pie charts docs](https://mui.com/x/react-charts/pie/) or their [demo page](https://mui.com/x/react-charts/pie-demo/).
+
+  <img width="380" alt="pie-charts" src="https://github.com/mui/mui-x/assets/13808724/fe908c45-803c-4316-b913-dbd2f9f0551e">
+
+- 🐞 Bugfixes
+
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.9.2` / `@mui/x-data-grid-pro@v6.9.2` / `@mui/x-data-grid-premium@v6.9.2`
+
+#### Changes
+
+- [DataGrid] Fix `RangeError` when using flex columns (#9554) @cherniavskii
+- [DataGrid] Fix React 17 editing bug (#9530) @romgrk
+- [DataGrid] Use `getRowId` in filtering (#9564) @romgrk
+- [DataGrid] Correctly reflect `TablePagination`'s `rowsPerPageOptions` shape to `pageSizeOptions` (#9438) @burakkgunduzz
+- [DataGridPremium] Auto-scroll when making range selection (#8661) @m4theushw
+- [l10n] Improve Spanish (es-ES) locale (#9500) @fufex
+
+### `@mui/x-date-pickers@v6.9.2` / `@mui/x-date-pickers-pro@v6.9.2`
+
+#### Changes
+
+- [pickers] Forward digital clock classes (#9555) @YoonjiJang
+- [pickers] Rename `internal` folder to `internals` on `@mui/x-date-picker-pro` (#9571) @flaviendelangle
+
+### `@mui/x-charts@6.0.0-alpha.2`
+
+#### Changes
+
+- [charts] Add pie chart component (#9395) @alexfauquette
+
+### Docs
+
+- [docs] Add pickers playground (#9164) @LukasTy
+- [docs] Fix API links for pickers (#9573) @alexfauquette
+- [docs] Fix demos with `ToggleButtonGroup` (#9548) @flaviendelangle
+- [docs] Fix typos in pagination documentation page (#9332) @RatherBeLunar
+- [docs] Hide ads on paid content @oliviertassinari
+- [docs] Move the charts in the sidebar (#9437) @flaviendelangle
+- [docs] New page: Components lifecycle (#8372) @flaviendelangle
+- [docs] Remove outdated header tag @oliviertassinari
+
+### Core
+
+- [core] Fix typo in priority support @oliviertassinari
+- [core] Remove mention of Crowdin @oliviertassinari
+
+## 6.9.1
+
+_Jun 30, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Add experimental API for faster filtering performance
+- 🌍 Add Chinese (Hong Kong) (zh-HK) locale on the pickers
+- 🌍 Improve Romanian (ro-RO) and Hungarian (hu-HU) translations on the pickers and the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.9.1` / `@mui/x-data-grid-pro@v6.9.1` / `@mui/x-data-grid-premium@v6.9.1`
+
+#### Changes
+
+- [DataGrid] Add Joy UI `tooltip` and `loadingOverlay` slots (#9028) @cherniavskii
+- [DataGrid] Add section about enabling pagination on Pro and Premium (#8759) @joserodolfofreitas
+- [DataGrid] Don't forward `editCellState` prop to DOM element (#9501) @m4theushw
+- [DataGrid] Add experimental API for faster filtering performance (#9254) @romgrk
+- [DataGrid] Fix `nextFieldToFocus` to always be a visible column field when <kbd>Tab</kbd> key is pressed (#8314) @yaredtsy
+- [DataGrid] Fix `Maximum call stack size exceeded` error when using fractional width (#9516) @cherniavskii
+- [DataGridPro] Don't throw error in column pinning (#9507) @romgrk
+- [DataGridPro] Fix bug with `checkboxSelection` and treeData/grouping (#9418) @romgrk
+- [l10n] Improve Romanian (ro-RO) and Hungarian (hu-HU) translations (#9436) @noraleonte
+
+### `@mui/x-date-pickers@v6.9.1` / `@mui/x-date-pickers-pro@v6.9.1`
+
+#### Changes
+
+- [DateTimePicker] Scroll to Digital Clock section only when selection changes (#9434) @LukasTy
+- [pickers] Handle `keyDown` only when input is focused (#9481) @LukasTy
+- [pickers] Add `referenceDate` prop on `TimeClock`, `DigitalClock` and `MultiSectionDigitalClock` (#9356) @flaviendelangle
+- [l10n] Add Chinese (Hong Kong) (zh-HK) locale (#9468) @samchiu90
+- [l10n] Improve Romanian (ro-RO) translations (#9436) @noraleonte
+
+### `@mui/x-charts@6.0.0-alpha.1`
+
+#### Changes
+
+- [charts] Take responsive container from data grid (#9497) @alexfauquette
+- [charts] Update README.md (#9426) @alexfauquette
+- [charts] Fix typo and small refactor (#9526) @flaviendelangle
+
+### Docs
+
+- [docs] Add a recipe limiting to one expanded detail panel at a time (#9488) @cherniavskii
+- [docs] Add missing upcoming flag without issue (#9449) @oliviertassinari
+- [docs] Fix 301 when opening the charts @oliviertassinari
+- [docs] Fix 404 link (#9435) @alexfauquette
+- [docs] Fix `productId` logic (#9451) @oliviertassinari
+- [docs] Update charts overview.md (#9429) @brentertz
+- [docs] Avoid systematic usage of `"bg": "inline"` (#9499) @alexfauquette
+- [docs] Display plan icon in ToC (#9490) @cherniavskii
+- [docs] Remove "product" markdown header (#9517) @oliviertassinari
+
+### Core
+
+- [core] Add `edit-mode` to priority support action (#9483) @DanailH
+- [core] Fix priority support prompt action (#9472) @DanailH
+- [core] Update `uses` for priority support action (#9480) @DanailH
+- [core] Bumb update monorepo (#9476) @alexfauquette
+- [CHANGELOG] Fix media quality (#9439) @oliviertassinari
+- [CHANGELOG] Remove height img attribute @oliviertassinari
+- [test] Skip flaky row pinning tests in JSDOM (#9511) @cherniavskii
+
 ## 6.9.0
 
 _Jun 22, 2023_
 
 We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
 
-- 🎁 We release a new package `@mui/x-charts`.
-  This package aims at simplifying the integration of charts into your dashboards. 📊
+- 🎁 We released a new open-source package: `@mui/x-charts`. This package aims at simplifying the integration of charts into your dashboards. 📊
+
+  <img width="512" alt="charts" src="https://github.com/mui/mui-x/assets/3165635/41201d3c-16a4-442d-a230-68356e6b433d">
+
+  It already contains [line](https://mui.com/x/react-charts/lines/), [bar](https://mui.com/x/react-charts/bars/), and [scatter](https://mui.com/x/react-charts/scatter/) charts, with basic customization features. Check out the [documentation](https://mui.com/x/react-charts/) to see what it can do, and open issues to get the feature you need implemented.
 
-  ![image](https://github.com/mui/mui-x/assets/45398769/613bae2f-537d-4ec3-8046-591d1a504a72)
+- 🚀 Introducing UTC and timezone support for pickers.
 
-  It already contains [lines](https://mui.com/x/react-charts/lines/), [bars](https://mui.com/x/react-charts/bars/), and [scatter](https://mui.com/x/react-charts/scatter/) charts with basic customization features.
-  Please, visit the new [documentation](https://mui.com/x/react-charts/) to know what it does, and open issues to get the feature you need to be implemented.
+  <img width="774" src="https://github.com/mui/mui-x/assets/3165635/ad95a404-ee67-4aff-b996-ad6cbb322348">
 
-- 🚀 Introduce the UTC and timezone support for pickers.
-  ![image](https://github.com/mui/mui-x/assets/3309670/f8b552b0-9ec2-417b-b769-95740308291d)
-  Please visit the [documentation](https://mui.com/x/react-date-pickers/timezone/) to learn how to use it.
+  Visit the [documentation](https://mui.com/x/react-date-pickers/timezone/) to learn how to use it.
 
 - 🌍 Improve Brazilian Portuguese (pt-BR) on the data grid
 - 🌍 Improve Czech (cs-CZ) locale on the pickers

package/DateField/DateField.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["components", "componentsProps", "slots", "slotProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
-  _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
+  _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
@@ -48,6 +48,7 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref)
     {
       ref: inputRef,
       onPaste,
+      onKeyDown,
       inputMode,
       readOnly
     } = _useDateField,
@@ -61,6 +62,7 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref)
     inputProps: _extends({}, fieldProps.inputProps, {
       inputMode,
       onPaste,
+      onKeyDown,
       ref: inputRef
     })
   }));

package/DateTimeField/DateTimeField.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["components", "componentsProps", "slots", "slotProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
-  _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
+  _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
@@ -48,6 +48,7 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
     {
       ref: inputRef,
       onPaste,
+      onKeyDown,
       inputMode,
       readOnly
     } = _useDateTimeField,
@@ -61,6 +62,7 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
     inputProps: _extends({}, fieldProps.inputProps, {
       inputMode,
       onPaste,
+      onKeyDown,
       ref: inputRef
     })
   }));

package/DigitalClock/DigitalClock.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "timeStep", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "defaultValue", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
+const _excluded = ["ampm", "timeStep", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
+import { useSlotProps } from '@mui/base/utils';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
@@ -18,6 +19,7 @@ import { useViews } from '../internals/hooks/useViews';
 import { DIGITAL_CLOCK_VIEW_HEIGHT } from '../internals/constants/dimensions';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -93,6 +95,8 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
       slots,
       slotProps,
       value: valueProp,
+      defaultValue,
+      referenceDate: referenceDateProp,
       disableIgnoringDatePartForTimeValidation = false,
       maxTime,
       minTime,
@@ -102,7 +106,6 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
       shouldDisableClock,
       shouldDisableTime,
       onChange,
-      defaultValue,
       view: inView,
       openTo,
       onViewChange,
@@ -135,7 +138,19 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
   }), [props]);
   const classes = useUtilityClasses(ownerState);
   const ClockItem = (_ref = (_slots$digitalClockIt = slots == null ? void 0 : slots.digitalClockItem) != null ? _slots$digitalClockIt : components == null ? void 0 : components.DigitalClockItem) != null ? _ref : DigitalClockItem;
-  const clockItemProps = (_slotProps$digitalClo = slotProps == null ? void 0 : slotProps.digitalClockItem) != null ? _slotProps$digitalClo : componentsProps == null ? void 0 : componentsProps.digitalClockItem;
+  const clockItemProps = useSlotProps({
+    elementType: ClockItem,
+    externalSlotProps: (_slotProps$digitalClo = slotProps == null ? void 0 : slotProps.digitalClockItem) != null ? _slotProps$digitalClo : componentsProps == null ? void 0 : componentsProps.digitalClockItem,
+    ownerState: {},
+    className: classes.item
+  });
+  const valueOrReferenceDate = useClockReferenceDate({
+    value,
+    referenceDate: referenceDateProp,
+    utils,
+    props,
+    timezone
+  });
   const handleValueChange = useEventCallback(newValue => handleRawValueChange(newValue, 'finish'));
   const {
     setValueAndGoToNextView
@@ -164,7 +179,6 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     // Subtracting the 4px of extra margin intended for the first visible section item
     containerRef.current.scrollTop = offsetTop - 4;
   });
-  const selectedTimeOrMidnight = React.useMemo(() => value || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0), [value, now, utils]);
   const isTimeDisabled = React.useCallback(valueToCheck => {
     const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils);
     const containsValidTime = () => {
@@ -197,11 +211,11 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     return !containsValidTime() || !isValidValue();
   }, [disableIgnoringDatePartForTimeValidation, utils, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableClock, shouldDisableTime]);
   const timeOptions = React.useMemo(() => {
-    const startOfDay = utils.startOfDay(selectedTimeOrMidnight);
+    const startOfDay = utils.startOfDay(valueOrReferenceDate);
     return [startOfDay, ...Array.from({
       length: Math.ceil(24 * 60 / timeStep) - 1
-    }, (_, index) => utils.addMinutes(startOfDay, timeStep * (index + 1))), utils.endOfDay(selectedTimeOrMidnight)];
-  }, [selectedTimeOrMidnight, timeStep, utils]);
+    }, (_, index) => utils.addMinutes(startOfDay, timeStep * (index + 1))), utils.endOfDay(valueOrReferenceDate)];
+  }, [valueOrReferenceDate, timeStep, utils]);
   return /*#__PURE__*/_jsx(DigitalClockRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
@@ -211,6 +225,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
       autoFocusItem: autoFocus || !!focusedView,
       role: "listbox",
       "aria-label": localeText.timePickerToolbarTitle,
+      className: classes.list,
       children: timeOptions.map(option => {
         if (skipDisabled && isTimeDisabled(option)) {
           return null;
@@ -313,7 +328,7 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate
+   * @template TDate, TView
    * @param {TDate | null} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
@@ -343,6 +358,11 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
    * @default false
    */
   readOnly: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Disable specific clock time.
    * @param {number} clockValue The value to check.

package/MonthCalendar/MonthCalendar.js

@@ -283,7 +283,7 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
   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`.
+   * @default The closest valid month using the validation props, except callbacks such as `shouldDisableMonth`.
    */
   referenceDate: PropTypes.any,
   /**

package/MonthCalendar/MonthCalendar.types.d.ts

@@ -38,7 +38,7 @@ export interface MonthCalendarProps<TDate> extends ExportedMonthCalendarProps, M
     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`.
+     * @default The closest valid month using the validation props, except callbacks such as `shouldDisableMonth`.
      */
     referenceDate?: TDate;
     /**

package/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "timeSteps", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled", "timezone"];
+const _excluded = ["ampm", "timeSteps", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -17,6 +17,7 @@ import { MultiSectionDigitalClockSection } from './MultiSectionDigitalClockSecti
 import { getHourSectionOptions, getTimeSectionOptions } from './MultiSectionDigitalClock.utils';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -54,6 +55,8 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       slots,
       slotProps,
       value: valueProp,
+      defaultValue,
+      referenceDate: referenceDateProp,
       disableIgnoringDatePartForTimeValidation = false,
       maxTime,
       minTime,
@@ -63,7 +66,6 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       shouldDisableClock,
       shouldDisableTime,
       onChange,
-      defaultValue,
       view: inView,
       views: inViews = ['hours', 'minutes'],
       openTo,
@@ -96,6 +98,13 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     minutes: 5,
     seconds: 5
   }, inTimeSteps), [inTimeSteps]);
+  const valueOrReferenceDate = useClockReferenceDate({
+    value,
+    referenceDate: referenceDateProp,
+    utils,
+    props,
+    timezone
+  });
   const handleValueChange = useEventCallback((newValue, selectionState, selectedView) => handleRawValueChange(newValue, selectionState, selectedView));
   const views = React.useMemo(() => {
     if (!ampm || !inViews.includes('hours')) {
@@ -116,14 +125,13 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     focusedView: inFocusedView,
     onFocusedViewChange
   });
-  const selectedTimeOrMidnight = React.useMemo(() => value || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0), [value, now, utils]);
   const handleMeridiemValueChange = useEventCallback(newValue => {
     setValueAndGoToView(newValue, null, 'meridiem');
   });
   const {
     meridiemMode,
     handleMeridiemChange
-  } = useMeridiemMode(selectedTimeOrMidnight, ampm, handleMeridiemValueChange, 'finish');
+  } = useMeridiemMode(valueOrReferenceDate, ampm, handleMeridiemValueChange, 'finish');
   const isTimeDisabled = React.useCallback((rawValue, viewType) => {
     const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils);
     const shouldCheckPastEnd = viewType === 'hours' || viewType === 'minutes' && views.includes('seconds');
@@ -155,11 +163,11 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       if (shouldDisableTime) {
         switch (viewType) {
           case 'hours':
-            return !shouldDisableTime(utils.setHours(selectedTimeOrMidnight, timeValue), 'hours');
+            return !shouldDisableTime(utils.setHours(valueOrReferenceDate, timeValue), 'hours');
           case 'minutes':
-            return !shouldDisableTime(utils.setMinutes(selectedTimeOrMidnight, timeValue), 'minutes');
+            return !shouldDisableTime(utils.setMinutes(valueOrReferenceDate, timeValue), 'minutes');
           case 'seconds':
-            return !shouldDisableTime(utils.setSeconds(selectedTimeOrMidnight, timeValue), 'seconds');
+            return !shouldDisableTime(utils.setSeconds(valueOrReferenceDate, timeValue), 'seconds');
           default:
             return false;
         }
@@ -170,7 +178,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       case 'hours':
         {
           const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
-          const dateWithNewHours = utils.setHours(selectedTimeOrMidnight, valueWithMeridiem);
+          const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
           const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
           const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
           return !containsValidTime({
@@ -180,7 +188,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         }
       case 'minutes':
         {
-          const dateWithNewMinutes = utils.setMinutes(selectedTimeOrMidnight, rawValue);
+          const dateWithNewMinutes = utils.setMinutes(valueOrReferenceDate, rawValue);
           const start = utils.setSeconds(dateWithNewMinutes, 0);
           const end = utils.setSeconds(dateWithNewMinutes, 59);
           return !containsValidTime({
@@ -190,7 +198,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         }
       case 'seconds':
         {
-          const dateWithNewSeconds = utils.setSeconds(selectedTimeOrMidnight, rawValue);
+          const dateWithNewSeconds = utils.setSeconds(valueOrReferenceDate, rawValue);
           const start = dateWithNewSeconds;
           const end = dateWithNewSeconds;
           return !containsValidTime({
@@ -201,7 +209,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       default:
         throw new Error('not supported');
     }
-  }, [ampm, selectedTimeOrMidnight, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableClock, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
+  }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableClock, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
   const handleSectionChange = useEventCallback((sectionView, newValue) => {
     const viewIndex = views.indexOf(sectionView);
     const nextView = views[viewIndex + 1];
@@ -214,7 +222,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
           return {
             onChange: hours => {
               const valueWithMeridiem = convertValueToMeridiem(hours, meridiemMode, ampm);
-              handleSectionChange('hours', utils.setHours(selectedTimeOrMidnight, valueWithMeridiem));
+              handleSectionChange('hours', utils.setHours(valueOrReferenceDate, valueWithMeridiem));
             },
             items: getHourSectionOptions({
               now,
@@ -231,10 +239,10 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           return {
             onChange: minutes => {
-              handleSectionChange('minutes', utils.setMinutes(selectedTimeOrMidnight, minutes));
+              handleSectionChange('minutes', utils.setMinutes(valueOrReferenceDate, minutes));
             },
             items: getTimeSectionOptions({
-              value: utils.getMinutes(selectedTimeOrMidnight),
+              value: utils.getMinutes(valueOrReferenceDate),
               isDisabled: minutes => disabled || isTimeDisabled(minutes, 'minutes'),
               resolveLabel: minutes => utils.format(utils.setMinutes(now, minutes), 'minutes'),
               timeStep: timeSteps.minutes,
@@ -247,10 +255,10 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           return {
             onChange: seconds => {
-              handleSectionChange('seconds', utils.setSeconds(selectedTimeOrMidnight, seconds));
+              handleSectionChange('seconds', utils.setSeconds(valueOrReferenceDate, seconds));
             },
             items: getTimeSectionOptions({
-              value: utils.getSeconds(selectedTimeOrMidnight),
+              value: utils.getSeconds(valueOrReferenceDate),
               isDisabled: seconds => disabled || isTimeDisabled(seconds, 'seconds'),
               resolveLabel: seconds => utils.format(utils.setSeconds(now, seconds), 'seconds'),
               timeStep: timeSteps.seconds,
@@ -281,7 +289,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       default:
         throw new Error(`Unknown view: ${viewToBuild} found.`);
     }
-  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, handleSectionChange, selectedTimeOrMidnight, disabled, isTimeDisabled, handleMeridiemChange]);
+  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, handleSectionChange, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
   const viewTimeOptions = React.useMemo(() => {
     return views.reduce((result, currentView) => {
       return _extends({}, result, {
@@ -391,7 +399,7 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
-   * @template TDate
+   * @template TDate, TView
    * @param {TDate | null} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
    * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
@@ -421,6 +429,11 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
    * @default false
    */
   readOnly: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Disable specific clock time.
    * @param {number} clockValue The value to check.

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -82,6 +82,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
   var _slots$digitalClockSe;
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
+  const previousSelected = React.useRef(null);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -109,9 +110,14 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       return;
     }
     const selectedItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
-    if (!selectedItem) {
+    if (!selectedItem || previousSelected.current === selectedItem) {
+      // Handle setting the ref to null if the selected item is ever reset via UI
+      if (previousSelected.current !== selectedItem) {
+        previousSelected.current = selectedItem;
+      }
       return;
     }
+    previousSelected.current = selectedItem;
     if (active && autoFocus) {
       selectedItem.focus();
     }

package/README.md

@@ -7,7 +7,7 @@ It's part of MUI X, an open-core extension of MUI, with advanced components.
 
 Install the package in your project directory with:
 
-```sh
+```bash
 npm install @mui/x-date-pickers
 ```
 
@@ -19,7 +19,7 @@ We currently support 4 different date libraries:
 - [Luxon](https://moment.github.io/luxon/#/)
 - [Moment.js](https://momentjs.com/)
 
-```sh
+```bash
 // date-fns
 npm install date-fns
 // or dayjs