@mui/x-date-pickers 6.9.0 → 6.9.2

package/TimeClock/TimeClock.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -18,6 +18,7 @@ import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { uncapitalizeObjectKeys } from '../internals/utils/slots-migration';
+import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -48,6 +49,8 @@ const TimeClockArrowSwitcher = styled(PickersArrowSwitcher, {
   right: 12,
   top: 15
 });
+const TIME_CLOCK_DEFAULT_VIEWS = ['hours', 'minutes'];
+
 /**
  *
  * API:
@@ -69,6 +72,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       slots: innerSlots,
       slotProps: innerSlotProps,
       value: valueProp,
+      defaultValue,
+      referenceDate: referenceDateProp,
       disableIgnoringDatePartForTimeValidation = false,
       maxTime,
       minTime,
@@ -79,9 +84,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       shouldDisableTime,
       showViewSwitcher,
       onChange,
-      defaultValue,
       view: inView,
-      views = ['hours', 'minutes'],
+      views = TIME_CLOCK_DEFAULT_VIEWS,
       openTo,
       onViewChange,
       focusedView,
@@ -106,6 +110,13 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     onChange,
     valueManager: singleItemValueManager
   });
+  const valueOrReferenceDate = useClockReferenceDate({
+    value,
+    referenceDate: referenceDateProp,
+    utils,
+    props,
+    timezone
+  });
   const localeText = useLocaleText();
   const now = useNow(timezone);
   const {
@@ -123,11 +134,10 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     focusedView,
     onFocusedViewChange
   });
-  const selectedTimeOrMidnight = React.useMemo(() => value || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0), [value, now, utils]);
   const {
     meridiemMode,
     handleMeridiemChange
-  } = useMeridiemMode(selectedTimeOrMidnight, ampm, setValueAndGoToNextView);
+  } = useMeridiemMode(valueOrReferenceDate, ampm, setValueAndGoToNextView);
   const isTimeDisabled = React.useCallback((rawValue, viewType) => {
     const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils);
     const shouldCheckPastEnd = viewType === 'hours' || viewType === 'minutes' && views.includes('seconds');
@@ -159,11 +169,11 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       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;
         }
@@ -174,7 +184,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       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({
@@ -184,7 +194,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       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({
@@ -194,7 +204,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       case 'seconds':
         {
-          const dateWithNewSeconds = utils.setSeconds(selectedTimeOrMidnight, rawValue);
+          const dateWithNewSeconds = utils.setSeconds(valueOrReferenceDate, rawValue);
           const start = dateWithNewSeconds;
           const end = dateWithNewSeconds;
           return !containsValidTime({
@@ -205,7 +215,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       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 selectedId = useId();
   const viewProps = React.useMemo(() => {
     switch (view) {
@@ -213,11 +223,11 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         {
           const handleHoursChange = (hourValue, isFinish) => {
             const valueWithMeridiem = convertValueToMeridiem(hourValue, meridiemMode, ampm);
-            setValueAndGoToNextView(utils.setHours(selectedTimeOrMidnight, valueWithMeridiem), isFinish);
+            setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish);
           };
           return {
             onChange: handleHoursChange,
-            viewValue: utils.getHours(selectedTimeOrMidnight),
+            viewValue: utils.getHours(valueOrReferenceDate),
             children: getHourNumbers({
               value,
               utils,
@@ -231,9 +241,9 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       case 'minutes':
         {
-          const minutesValue = utils.getMinutes(selectedTimeOrMidnight);
+          const minutesValue = utils.getMinutes(valueOrReferenceDate);
           const handleMinutesChange = (minuteValue, isFinish) => {
-            setValueAndGoToNextView(utils.setMinutes(selectedTimeOrMidnight, minuteValue), isFinish);
+            setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minuteValue), isFinish);
           };
           return {
             viewValue: minutesValue,
@@ -250,9 +260,9 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       case 'seconds':
         {
-          const secondsValue = utils.getSeconds(selectedTimeOrMidnight);
+          const secondsValue = utils.getSeconds(valueOrReferenceDate);
           const handleSecondsChange = (secondValue, isFinish) => {
-            setValueAndGoToNextView(utils.setSeconds(selectedTimeOrMidnight, secondValue), isFinish);
+            setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, secondValue), isFinish);
           };
           return {
             viewValue: secondsValue,
@@ -270,7 +280,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       default:
         throw new Error('You must provide the type for ClockView');
     }
-  }, [view, utils, value, ampm, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, selectedTimeOrMidnight, isTimeDisabled, selectedId, disabled]);
+  }, [view, utils, value, ampm, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(TimeClockRoot, _extends({
@@ -390,7 +400,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.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.
@@ -420,6 +430,11 @@ process.env.NODE_ENV !== "production" ? TimeClock.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/TimeField/TimeField.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "components", "componentsProps", "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 TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
     {
       ref: inputRef,
       onPaste,
+      onKeyDown,
       inputMode,
       readOnly
     } = _useTimeField,
@@ -61,6 +62,7 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
     inputProps: _extends({}, fieldProps.inputProps, {
       inputMode,
       onPaste,
+      onKeyDown,
       ref: inputRef
     })
   }));

package/YearCalendar/YearCalendar.js

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

package/YearCalendar/YearCalendar.types.d.ts

@@ -38,7 +38,7 @@ export interface YearCalendarProps<TDate> extends ExportedYearCalendarProps, Yea
     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`.
+     * @default The closest valid year using the validation props, except callbacks such as `shouldDisableYear`.
      */
     referenceDate?: TDate;
     /**

package/index.js

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

package/internals/hooks/useClockReferenceDate.d.ts

@@ -0,0 +1,8 @@
+import { MuiPickersAdapter, PickersTimezone } from '../../models';
+export declare const useClockReferenceDate: <TDate, TProps extends {}>({ value, referenceDate: referenceDateProp, utils, props, timezone, }: {
+    value: TDate;
+    referenceDate: TDate | undefined;
+    utils: MuiPickersAdapter<TDate, any>;
+    props: TProps;
+    timezone: PickersTimezone;
+}) => any;

package/internals/hooks/useClockReferenceDate.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { singleItemValueManager } from '../utils/valueManagers';
+import { getTodayDate } from '../utils/date-utils';
+import { SECTION_TYPE_GRANULARITY } from '../utils/getDefaultReferenceDate';
+export const useClockReferenceDate = ({
+  value,
+  referenceDate: referenceDateProp,
+  utils,
+  props,
+  timezone
+}) => {
+  const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
+    value,
+    utils,
+    props,
+    referenceDate: referenceDateProp,
+    granularity: SECTION_TYPE_GRANULARITY.day,
+    timezone,
+    getTodayDate: () => getTodayDate(utils, timezone, 'date')
+  }),
+  // We only want to compute the reference date on mount.
+  [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  return value != null ? value : referenceDate;
+};

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

@@ -38,6 +38,7 @@ export interface PickerValueManager<TValue, TDate, TError> {
      * @param {MuiPickersAdapter<TDate>} params.utils The adapter.
      * @param {number} params.granularity The granularity of the selection possible on this component.
      * @param {PickersTimezone} params.timezone The current timezone.
+     * @param {() => TDate} params.getTodayDate The reference date to use if no reference date is passed to the component.
      * @returns {TValue} The reference value to use for non-provided dates.
      */
     getInitialReferenceValue: (params: {
@@ -47,6 +48,7 @@ export interface PickerValueManager<TValue, TDate, TError> {
         utils: MuiPickersAdapter<TDate>;
         granularity: number;
         timezone: PickersTimezone;
+        getTodayDate?: () => TDate;
     }) => TValue;
     /**
      * Method parsing the input value to replace all invalid dates by `null`.

package/internals/models/props/clock.d.ts

@@ -31,7 +31,7 @@ export interface BaseClockProps<TDate, TView extends TimeViewWithMeridiem> exten
     defaultValue?: TDate | null;
     /**
      * 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.
@@ -47,6 +47,11 @@ export interface BaseClockProps<TDate, TView extends TimeViewWithMeridiem> exten
      * @default false
      */
     readOnly?: boolean;
+    /**
+     * 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?: TDate;
 }
 export interface DesktopOnlyTimePickerProps<TDate> extends Omit<ExportedDigitalClockProps<TDate>, 'timeStep'>, Omit<ExportedMultiSectionDigitalClockProps<TDate>, 'timeSteps'> {
     /**

package/internals/utils/getDefaultReferenceDate.d.ts

@@ -1,4 +1,5 @@
-import { FieldSection, MuiPickersAdapter, PickersTimezone } from '../../models';
+import { getTodayDate } from './date-utils';
+import { DateOrTimeView, FieldSection, MuiPickersAdapter, PickersTimezone } from '../../models';
 export interface GetDefaultReferenceDateProps<TDate> {
     maxDate?: TDate;
     minDate?: TDate;
@@ -16,9 +17,11 @@ export declare const SECTION_TYPE_GRANULARITY: {
     milliseconds: number;
 };
 export declare const getSectionTypeGranularity: (sections: FieldSection[]) => number;
-export declare const getDefaultReferenceDate: <TDate>({ props, utils, granularity, timezone, }: {
+export declare const getViewsGranularity: (views: readonly DateOrTimeView[]) => number;
+export declare const getDefaultReferenceDate: <TDate>({ props, utils, granularity, timezone, getTodayDate: inGetTodayDate, }: {
     props: GetDefaultReferenceDateProps<TDate>;
     utils: MuiPickersAdapter<TDate, any>;
     granularity: number;
     timezone: PickersTimezone;
+    getTodayDate?: (() => TDate) | undefined;
 }) => TDate;

package/internals/utils/getDefaultReferenceDate.js

@@ -13,6 +13,10 @@ export const getSectionTypeGranularity = sections => Math.max(...sections.map(se
   var _SECTION_TYPE_GRANULA;
   return (_SECTION_TYPE_GRANULA = SECTION_TYPE_GRANULARITY[section.type]) != null ? _SECTION_TYPE_GRANULA : 1;
 }));
+export const getViewsGranularity = views => Math.max(...views.map(view => {
+  var _SECTION_TYPE_GRANULA2;
+  return (_SECTION_TYPE_GRANULA2 = SECTION_TYPE_GRANULARITY[view]) != null ? _SECTION_TYPE_GRANULA2 : 1;
+}));
 const roundDate = (utils, granularity, date) => {
   if (granularity === SECTION_TYPE_GRANULARITY.year) {
     return utils.startOfYear(date);
@@ -41,10 +45,11 @@ export const getDefaultReferenceDate = ({
   props,
   utils,
   granularity,
-  timezone
+  timezone,
+  getTodayDate: inGetTodayDate
 }) => {
   var _props$disableIgnorin;
-  let referenceDate = roundDate(utils, granularity, getTodayDate(utils, timezone));
+  let referenceDate = inGetTodayDate ? inGetTodayDate() : roundDate(utils, granularity, getTodayDate(utils, timezone));
   if (props.minDate != null && utils.isAfterDay(props.minDate, referenceDate)) {
     referenceDate = roundDate(utils, granularity, props.minDate);
   }

package/legacy/DateField/DateField.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _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';
@@ -43,6 +43,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
     }),
     inputRef = _useDateField.ref,
     onPaste = _useDateField.onPaste,
+    onKeyDown = _useDateField.onKeyDown,
     inputMode = _useDateField.inputMode,
     readOnly = _useDateField.readOnly,
     fieldProps = _objectWithoutProperties(_useDateField, _excluded3);
@@ -55,6 +56,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
     inputProps: _extends({}, fieldProps.inputProps, {
       inputMode: inputMode,
       onPaste: onPaste,
+      onKeyDown: onKeyDown,
       ref: inputRef
     })
   }));

package/legacy/DateTimeField/DateTimeField.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _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';
@@ -43,6 +43,7 @@ var DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps
     }),
     inputRef = _useDateTimeField.ref,
     onPaste = _useDateTimeField.onPaste,
+    onKeyDown = _useDateTimeField.onKeyDown,
     inputMode = _useDateTimeField.inputMode,
     readOnly = _useDateTimeField.readOnly,
     fieldProps = _objectWithoutProperties(_useDateTimeField, _excluded3);
@@ -55,6 +56,7 @@ var DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps
     inputProps: _extends({}, fieldProps.inputProps, {
       inputMode: inputMode,
       onPaste: onPaste,
+      onKeyDown: onKeyDown,
       ref: inputRef
     })
   }));

package/legacy/DigitalClock/DigitalClock.js

@@ -1,10 +1,11 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _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"];
+var _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';
@@ -19,6 +20,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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -101,6 +103,8 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
     slots = props.slots,
     slotProps = props.slotProps,
     valueProp = props.value,
+    defaultValue = props.defaultValue,
+    referenceDateProp = props.referenceDate,
     _props$disableIgnorin = props.disableIgnoringDatePartForTimeValidation,
     disableIgnoringDatePartForTimeValidation = _props$disableIgnorin === void 0 ? false : _props$disableIgnorin,
     maxTime = props.maxTime,
@@ -112,7 +116,6 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
     shouldDisableClock = props.shouldDisableClock,
     shouldDisableTime = props.shouldDisableTime,
     onChange = props.onChange,
-    defaultValue = props.defaultValue,
     inView = props.view,
     openTo = props.openTo,
     onViewChange = props.onViewChange,
@@ -147,7 +150,19 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
   }, [props]);
   var classes = useUtilityClasses(ownerState);
   var ClockItem = (_ref3 = (_slots$digitalClockIt = slots == null ? void 0 : slots.digitalClockItem) != null ? _slots$digitalClockIt : components == null ? void 0 : components.DigitalClockItem) != null ? _ref3 : DigitalClockItem;
-  var clockItemProps = (_slotProps$digitalClo = slotProps == null ? void 0 : slotProps.digitalClockItem) != null ? _slotProps$digitalClo : componentsProps == null ? void 0 : componentsProps.digitalClockItem;
+  var 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
+  });
+  var valueOrReferenceDate = useClockReferenceDate({
+    value: value,
+    referenceDate: referenceDateProp,
+    utils: utils,
+    props: props,
+    timezone: timezone
+  });
   var handleValueChange = useEventCallback(function (newValue) {
     return handleRawValueChange(newValue, 'finish');
   });
@@ -177,9 +192,6 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
     // Subtracting the 4px of extra margin intended for the first visible section item
     containerRef.current.scrollTop = offsetTop - 4;
   });
-  var selectedTimeOrMidnight = React.useMemo(function () {
-    return value || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0);
-  }, [value, now, utils]);
   var isTimeDisabled = React.useCallback(function (valueToCheck) {
     var isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils);
     var containsValidTime = function containsValidTime() {
@@ -212,13 +224,13 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
     return !containsValidTime() || !isValidValue();
   }, [disableIgnoringDatePartForTimeValidation, utils, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableClock, shouldDisableTime]);
   var timeOptions = React.useMemo(function () {
-    var startOfDay = utils.startOfDay(selectedTimeOrMidnight);
+    var startOfDay = utils.startOfDay(valueOrReferenceDate);
     return [startOfDay].concat(_toConsumableArray(Array.from({
       length: Math.ceil(24 * 60 / timeStep) - 1
     }, function (_, index) {
       return utils.addMinutes(startOfDay, timeStep * (index + 1));
-    })), [utils.endOfDay(selectedTimeOrMidnight)]);
-  }, [selectedTimeOrMidnight, timeStep, utils]);
+    })), [utils.endOfDay(valueOrReferenceDate)]);
+  }, [valueOrReferenceDate, timeStep, utils]);
   return /*#__PURE__*/_jsx(DigitalClockRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
@@ -228,6 +240,7 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
       autoFocusItem: autoFocus || !!focusedView,
       role: "listbox",
       "aria-label": localeText.timePickerToolbarTitle,
+      className: classes.list,
       children: timeOptions.map(function (option) {
         if (skipDisabled && isTimeDisabled(option)) {
           return null;
@@ -332,7 +345,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.
@@ -362,6 +375,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/legacy/MonthCalendar/MonthCalendar.js

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