@mui/x-date-pickers 7.22.3 → 8.0.0-alpha.1

package/PickersLayout/usePickerLayout.js

@@ -7,13 +7,13 @@ import composeClasses from '@mui/utils/composeClasses';
 import { PickersActionBar } from "../PickersActionBar/index.js";
 import { getPickersLayoutUtilityClass } from "./pickersLayoutClasses.js";
 import { PickersShortcuts } from "../PickersShortcuts/index.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
 }
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
     isLandscape
   } = ownerState;
   const slots = {
@@ -28,6 +28,9 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getPickersLayoutUtilityClass, classes);
 };
 const usePickerLayout = props => {
+  const {
+    ownerState: pickersOwnerState
+  } = usePickerPrivateContext();
   const {
     wrapperVariant,
     onAccept,
@@ -42,17 +45,20 @@ const usePickerLayout = props => {
     onSelectShortcut,
     isValid,
     isLandscape,
-    disabled,
-    readOnly,
     children,
     slots,
-    slotProps
+    slotProps,
+    classes: classesProp
     // 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 range pickers value: [TDate | null, TDate | null]
+    // - For pickers value: PickerValidDate | null
+    // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props;
-  const classes = useUtilityClasses(props);
+  const ownerState = _extends({}, pickersOwnerState, {
+    wrapperVariant,
+    isLandscape
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
 
   // Action bar
   const ActionBar = slots?.actionBar ?? PickersActionBar;
@@ -67,9 +73,7 @@ const usePickerLayout = props => {
       actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
-    ownerState: _extends({}, props, {
-      wrapperVariant
-    })
+    ownerState
   });
   const actionBar = /*#__PURE__*/_jsx(ActionBar, _extends({}, actionBarProps));
 
@@ -84,14 +88,10 @@ const usePickerLayout = props => {
       value,
       view,
       onViewChange,
-      views,
-      disabled,
-      readOnly
+      views
     },
     className: classes.toolbar,
-    ownerState: _extends({}, props, {
-      wrapperVariant
-    })
+    ownerState
   });
   const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, toolbarProps)) : null;
 
@@ -117,12 +117,7 @@ const usePickerLayout = props => {
       onChange: onSelectShortcut
     },
     className: classes.shortcuts,
-    ownerState: {
-      isValid,
-      isLandscape,
-      onChange: onSelectShortcut,
-      wrapperVariant
-    }
+    ownerState
   });
   const shortcuts = view && !!Shortcuts ? /*#__PURE__*/_jsx(Shortcuts, _extends({}, shortcutsProps)) : null;
   return {

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
@@ -194,7 +194,9 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       readOnly,
       inputProps,
       inputRef,
-      sectionListRef
+      sectionListRef,
+      onFocus,
+      onBlur
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootRef = React.useRef(null);
@@ -206,13 +208,12 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
   }
   const handleInputFocus = event => {
-    // Fix a bug with IE11 where the focus/blur events are triggered
-    // while the component is disabled.
-    if (muiFormControl.disabled) {
-      event.stopPropagation();
-      return;
-    }
     muiFormControl.onFocus?.(event);
+    onFocus?.(event);
+  };
+  const handleInputBlur = event => {
+    muiFormControl.onBlur?.(event);
+    onBlur?.(event);
   };
   React.useEffect(() => {
     if (muiFormControl) {
@@ -254,7 +255,7 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       tabIndex: tabIndex,
       className: classes.sectionsContainer,
       onFocus: handleInputFocus,
-      onBlur: muiFormControl.onBlur,
+      onBlur: handleInputBlur,
       onInput: onInput,
       onPaste: onPaste,
       onKeyDown: onKeyDown,

package/PickersTextField/PickersTextField.js

@@ -105,8 +105,6 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
     className: clsx(classes.root, className),
     ref: handleRootRef,
     focused: focused,
-    onFocus: onFocus,
-    onBlur: onBlur,
     disabled: disabled,
     variant: variant,
     error: error,
@@ -128,6 +126,8 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       onKeyUp: onKeyUp,
       onInput: onInput,
       onPaste: onPaste,
+      onFocus: onFocus,
+      onBlur: onBlur,
       endAdornment: endAdornment,
       startAdornment: startAdornment,
       tabIndex: tabIndex,

package/README.md

@@ -30,13 +30,13 @@ npm install luxon
 npm install moment
 ```
 
-This component has the following peer dependencies that you will need to install as well.
+This component has the following peer dependencies that you need to install as well.
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.14",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "@mui/material": "^5.15.14 || ^6.0.0",
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

package/StaticDatePicker/StaticDatePicker.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StaticDatePickerProps } from './StaticDatePicker.types';
-import { PickerValidDate } from '../models';
-type StaticDatePickerComponent = (<TDate extends PickerValidDate>(props: StaticDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type StaticDatePickerComponent = ((props: StaticDatePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/StaticDatePicker/StaticDatePicker.js

@@ -64,9 +64,9 @@ StaticDatePicker.propTypes = {
   className: PropTypes.string,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {TDate} date The date of the day of week provided by the adapter.
+   * @param {PickerValidDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
@@ -75,7 +75,8 @@ StaticDatePicker.propTypes = {
    */
   defaultValue: PropTypes.object,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -168,8 +169,7 @@ StaticDatePicker.propTypes = {
   onError: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -180,8 +180,7 @@ StaticDatePicker.propTypes = {
   onViewChange: PropTypes.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: PropTypes.func,
   /**
@@ -194,6 +193,11 @@ StaticDatePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
@@ -216,22 +220,19 @@ StaticDatePicker.propTypes = {
    *
    * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
-   * @template TDate
-   * @param {TDate} day The date to test.
+   * @param {PickerValidDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.
    */
   shouldDisableDate: PropTypes.func,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,

package/StaticDatePicker/StaticDatePicker.types.d.ts

@@ -1,22 +1,22 @@
+import { MakeOptional } from '@mui/x-internals/types';
 import { BaseDatePickerProps, BaseDatePickerSlots, BaseDatePickerSlotProps } from '../DatePicker/shared';
 import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from '../internals/hooks/useStaticPicker';
-import { MakeOptional } from '../internals/models/helpers';
-import { DateView, PickerValidDate } from '../models';
-export interface StaticDatePickerSlots<TDate extends PickerValidDate> extends BaseDatePickerSlots<TDate>, UseStaticPickerSlots<TDate, DateView> {
+import { DateView } from '../models';
+export interface StaticDatePickerSlots extends BaseDatePickerSlots, UseStaticPickerSlots<DateView> {
 }
-export interface StaticDatePickerSlotProps<TDate extends PickerValidDate> extends BaseDatePickerSlotProps<TDate>, UseStaticPickerSlotProps<TDate, DateView> {
+export interface StaticDatePickerSlotProps extends BaseDatePickerSlotProps, UseStaticPickerSlotProps<DateView> {
 }
-export interface StaticDatePickerProps<TDate extends PickerValidDate> extends BaseDatePickerProps<TDate>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
+export interface StaticDatePickerProps extends BaseDatePickerProps, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: StaticDatePickerSlots<TDate>;
+    slots?: StaticDatePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: StaticDatePickerSlotProps<TDate>;
+    slotProps?: StaticDatePickerSlotProps;
     /**
      * Years rendered per row.
      * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.

package/StaticDateTimePicker/StaticDateTimePicker.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StaticDateTimePickerProps } from './StaticDateTimePicker.types';
-import { PickerValidDate } from '../models';
-type StaticDateTimePickerComponent = (<TDate extends PickerValidDate>(props: StaticDateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type StaticDateTimePickerComponent = ((props: StaticDateTimePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -84,9 +84,9 @@ StaticDateTimePicker.propTypes = {
   className: PropTypes.string,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {TDate} date The date of the day of week provided by the adapter.
+   * @param {PickerValidDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
@@ -95,7 +95,8 @@ StaticDateTimePicker.propTypes = {
    */
   defaultValue: PropTypes.object,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -216,8 +217,7 @@ StaticDateTimePicker.propTypes = {
   onError: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -228,8 +228,7 @@ StaticDateTimePicker.propTypes = {
   onViewChange: PropTypes.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: PropTypes.func,
   /**
@@ -242,6 +241,11 @@ StaticDateTimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
@@ -264,30 +268,26 @@ StaticDateTimePicker.propTypes = {
    *
    * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
-   * @template TDate
-   * @param {TDate} day The date to test.
+   * @param {PickerValidDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.
    */
   shouldDisableDate: PropTypes.func,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: PropTypes.func,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,

package/StaticDateTimePicker/StaticDateTimePicker.types.d.ts

@@ -1,22 +1,22 @@
+import { MakeOptional } from '@mui/x-internals/types';
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from '../DateTimePicker/shared';
 import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from '../internals/hooks/useStaticPicker';
-import { MakeOptional } from '../internals/models/helpers';
-import { DateOrTimeView, PickerValidDate } from '../models';
-export interface StaticDateTimePickerSlots<TDate extends PickerValidDate> extends BaseDateTimePickerSlots<TDate>, UseStaticPickerSlots<TDate, DateOrTimeView> {
+import { DateOrTimeView } from '../models';
+export interface StaticDateTimePickerSlots extends BaseDateTimePickerSlots, UseStaticPickerSlots<DateOrTimeView> {
 }
-export interface StaticDateTimePickerSlotProps<TDate extends PickerValidDate> extends BaseDateTimePickerSlotProps<TDate>, UseStaticPickerSlotProps<TDate, DateOrTimeView> {
+export interface StaticDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, UseStaticPickerSlotProps<DateOrTimeView> {
 }
-export interface StaticDateTimePickerProps<TDate extends PickerValidDate> extends BaseDateTimePickerProps<TDate, DateOrTimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
+export interface StaticDateTimePickerProps extends BaseDateTimePickerProps<DateOrTimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: StaticDateTimePickerSlots<TDate>;
+    slots?: StaticDateTimePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: StaticDateTimePickerSlotProps<TDate>;
+    slotProps?: StaticDateTimePickerSlotProps;
     /**
      * Years rendered per row.
      * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.

package/StaticTimePicker/StaticTimePicker.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { PickerValidDate } from '../models';
 import { StaticTimePickerProps } from './StaticTimePicker.types';
-type StaticTimePickerComponent = (<TDate extends PickerValidDate>(props: StaticTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type StaticTimePickerComponent = ((props: StaticTimePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/StaticTimePicker/StaticTimePicker.js

@@ -80,7 +80,8 @@ StaticTimePicker.propTypes = {
    */
   defaultValue: PropTypes.object,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -172,6 +173,11 @@ StaticTimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
@@ -185,8 +191,7 @@ StaticTimePicker.propTypes = {
   referenceDate: PropTypes.object,
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */

package/StaticTimePicker/StaticTimePicker.types.d.ts

@@ -1,20 +1,20 @@
+import { MakeOptional } from '@mui/x-internals/types';
 import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from '../TimePicker/shared';
 import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from '../internals/hooks/useStaticPicker';
-import { MakeOptional } from '../internals/models/helpers';
-import { PickerValidDate, TimeView } from '../models';
-export interface StaticTimePickerSlots<TDate extends PickerValidDate> extends BaseTimePickerSlots<TDate>, UseStaticPickerSlots<TDate, TimeView> {
+import { TimeView } from '../models';
+export interface StaticTimePickerSlots extends BaseTimePickerSlots, UseStaticPickerSlots<TimeView> {
 }
-export interface StaticTimePickerSlotProps<TDate extends PickerValidDate> extends BaseTimePickerSlotProps, UseStaticPickerSlotProps<TDate, TimeView> {
+export interface StaticTimePickerSlotProps extends BaseTimePickerSlotProps, UseStaticPickerSlotProps<TimeView> {
 }
-export interface StaticTimePickerProps<TDate extends PickerValidDate> extends BaseTimePickerProps<TDate, TimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
+export interface StaticTimePickerProps extends BaseTimePickerProps<TimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: StaticTimePickerSlots<TDate>;
+    slots?: StaticTimePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: StaticTimePickerSlotProps<TDate>;
+    slotProps?: StaticTimePickerSlotProps;
 }

package/TimeClock/Clock.d.ts

@@ -3,7 +3,8 @@ import type { PickerSelectionState } from '../internals/hooks/usePicker';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { PickerValidDate, TimeView } from '../models';
 import { ClockClasses } from './clockClasses';
-export interface ClockProps<TDate extends PickerValidDate> extends ReturnType<typeof useMeridiemMode> {
+import { FormProps } from '../internals/models/formProps';
+export interface ClockProps extends ReturnType<typeof useMeridiemMode>, FormProps {
     ampm: boolean;
     ampmInClock: boolean;
     autoFocus?: boolean;
@@ -24,13 +25,11 @@ export interface ClockProps<TDate extends PickerValidDate> extends ReturnType<ty
     /**
      * The current full date value.
      */
-    value: TDate | null;
-    disabled?: boolean;
-    readOnly?: boolean;
+    value: PickerValidDate | null;
     className?: string;
     classes?: Partial<ClockClasses>;
 }
 /**
  * @ignore - internal component.
  */
-export declare function Clock<TDate extends PickerValidDate>(inProps: ClockProps<TDate>): React.JSX.Element;
+export declare function Clock(inProps: ClockProps): React.JSX.Element;

package/TimeClock/Clock.js

@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { ClockPointer } from "./ClockPointer.js";
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from "./shared.js";
 import { getClockUtilityClass } from "./clockClasses.js";
@@ -186,7 +186,7 @@ export function Clock(inProps) {
   } = props;
   const ownerState = props;
   const utils = useUtils();
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const isMoving = React.useRef(false);
   const classes = useUtilityClasses(ownerState);
   const isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
@@ -222,6 +222,7 @@ export function Clock(inProps) {
       setTime(event, 'finish');
       isMoving.current = false;
     }
+    event.preventDefault();
   };
   const handleMouseMove = event => {
     // event.buttons & PRIMARY_MOUSE_BUTTON
@@ -316,7 +317,7 @@ export function Clock(inProps) {
         })]
       }), /*#__PURE__*/_jsx(ClockWrapper, {
         "aria-activedescendant": selectedId,
-        "aria-label": translations.clockLabelText(type, value, utils, value == null ? null : utils.format(value, 'fullTime')),
+        "aria-label": translations.clockLabelText(type, value == null ? null : utils.format(value, 'fullTime')),
         ref: listboxRef,
         role: "listbox",
         onKeyDown: handleKeyDown,

package/TimeClock/ClockNumbers.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { MuiPickersAdapter, PickerValidDate } from '../models';
 import type { PickerSelectionState } from '../internals/hooks/usePicker';
-interface GetHourNumbersOptions<TDate extends PickerValidDate> {
+interface GetHourNumbersOptions {
     ampm: boolean;
-    value: TDate | null;
+    value: PickerValidDate | null;
     getClockNumberText: (hour: string) => string;
     isDisabled: (value: number) => boolean;
     onChange: (value: number, isFinish?: PickerSelectionState) => void;
@@ -12,13 +12,13 @@ interface GetHourNumbersOptions<TDate extends PickerValidDate> {
      * Should only be `undefined` on the server
      */
     selectedId: string | undefined;
-    utils: MuiPickersAdapter<TDate>;
+    utils: MuiPickersAdapter;
 }
 /**
  * @ignore - internal component.
  */
-export declare const getHourNumbers: <TDate extends PickerValidDate>({ ampm, value, getClockNumberText, isDisabled, selectedId, utils, }: GetHourNumbersOptions<TDate>) => React.JSX.Element[];
-export declare const getMinutesNumbers: <TDate extends PickerValidDate>({ utils, value, isDisabled, getClockNumberText, selectedId, }: Omit<GetHourNumbersOptions<TDate>, "ampm" | "value"> & {
+export declare const getHourNumbers: ({ ampm, value, getClockNumberText, isDisabled, selectedId, utils, }: GetHourNumbersOptions) => React.JSX.Element[];
+export declare const getMinutesNumbers: ({ utils, value, isDisabled, getClockNumberText, selectedId, }: Omit<GetHourNumbersOptions, "ampm" | "value"> & {
     value: number;
 }) => React.JSX.Element[];
 export {};

package/TimeClock/TimeClock.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { PickerValidDate } from '../models';
 import { TimeClockProps } from './TimeClock.types';
-type TimeClockComponent = (<TDate extends PickerValidDate>(props: TimeClockProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type TimeClockComponent = ((props: TimeClockProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/TimeClock/TimeClock.js

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils, useNow } from "../internals/hooks/useUtils.js";
 import { PickersArrowSwitcher } from "../internals/components/PickersArrowSwitcher/index.js";
 import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from "../internals/utils/time-utils.js";
@@ -107,6 +107,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });
@@ -117,7 +118,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     props,
     timezone
   });
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const now = useNow(timezone);
   const {
     view,
@@ -345,7 +346,8 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   defaultValue: PropTypes.object,
   /**
-   * If `true`, the picker views and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -412,7 +414,8 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
-   * If `true`, the picker views and text field are read-only.
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
    * @default false
    */
   readOnly: PropTypes.bool,
@@ -423,8 +426,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   referenceDate: PropTypes.object,
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */