@mui/x-date-pickers 7.22.1 → 8.0.0-alpha.0

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,
@@ -46,13 +49,18 @@ const usePickerLayout = props => {
     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 +75,7 @@ const usePickerLayout = props => {
       actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
-    ownerState: _extends({}, props, {
-      wrapperVariant
-    })
+    ownerState
   });
   const actionBar = /*#__PURE__*/_jsx(ActionBar, _extends({}, actionBarProps));
 
@@ -89,9 +95,7 @@ const usePickerLayout = props => {
       readOnly
     },
     className: classes.toolbar,
-    ownerState: _extends({}, props, {
-      wrapperVariant
-    })
+    ownerState
   });
   const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, toolbarProps)) : null;
 
@@ -117,12 +121,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/README.md

@@ -30,11 +30,11 @@ 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",
+  "@mui/material": "^5.15.14 || ^6.0.0",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.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);
@@ -316,7 +316,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";
@@ -117,7 +117,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 +345,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 +413,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 +425,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.
    */

package/TimeClock/TimeClock.types.d.ts

@@ -1,9 +1,9 @@
 import { TimeClockClasses } from './timeClockClasses';
 import { PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from '../internals/components/PickersArrowSwitcher';
-import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
-import { PickerValidDate, TimeView } from '../models';
+import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/time';
+import { TimeView } from '../models';
 import { TimeViewWithMeridiem } from '../internals/models';
-export interface ExportedTimeClockProps<TDate extends PickerValidDate> extends ExportedBaseClockProps<TDate> {
+export interface ExportedTimeClockProps extends ExportedBaseClockProps {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
      * @default false
@@ -14,7 +14,7 @@ export interface TimeClockSlots extends PickersArrowSwitcherSlots {
 }
 export interface TimeClockSlotProps extends PickersArrowSwitcherSlotProps {
 }
-export interface TimeClockProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem = TimeView> extends ExportedTimeClockProps<TDate>, BaseClockProps<TDate, TView> {
+export interface TimeClockProps<TView extends TimeViewWithMeridiem = TimeView> extends ExportedTimeClockProps, BaseClockProps<TView> {
     /**
      * Available views.
      * @default ['hours', 'minutes']

package/TimeField/TimeField.d.ts

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

package/TimeField/TimeField.js

@@ -37,7 +37,7 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, inRe
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
@@ -94,6 +94,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   defaultValue: PropTypes.object,
   /**
    * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -113,7 +114,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   disablePast: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.bool,
   /**
@@ -233,8 +234,8 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   onSelectedSectionsChange: PropTypes.func,
   /**
-   * It prevents the user from changing the value of the field
-   * (not from interacting with the field).
+   * 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,
@@ -261,8 +262,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number]),
   /**
    * 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.
    */