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

package/modern/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/modern/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/modern/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/modern/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/modern/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.
    */

package/modern/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.
    */

package/modern/TimePicker/TimePicker.js

@@ -85,7 +85,8 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   desktopModeMediaQuery: PropTypes.string,
   /**
-   * 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,
@@ -110,7 +111,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   disablePast: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -218,6 +219,11 @@ process.env.NODE_ENV !== "production" ? TimePicker.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.
@@ -241,8 +247,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.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.
    */

package/modern/TimePicker/TimePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -13,11 +13,12 @@ import { PickersToolbarText } from "../internals/components/PickersToolbarText.j
 import { PickersToolbarButton } from "../internals/components/PickersToolbarButton.js";
 import { PickersToolbar } from "../internals/components/PickersToolbar.js";
 import { arrayIncludes } from "../internals/utils/utils.js";
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from "./timePickerToolbarClasses.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -128,14 +129,16 @@ function TimePickerToolbar(inProps) {
       view,
       onViewChange,
       views,
-      disabled,
-      readOnly,
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const isRtl = useRtl();
+  const {
+    disabled,
+    readOnly
+  } = usePickerContext();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
     meridiemMode,
@@ -216,7 +219,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -230,7 +232,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/YearCalendar/PickersYear.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "classes", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled, alpha, useThemeProps } from '@mui/material/styles';
@@ -8,16 +8,12 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getPickersYearUtilityClass, pickersYearClasses } from "./pickersYearClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    disabled,
-    selected,
-    classes
-  } = ownerState;
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
     root: ['root'],
-    yearButton: ['yearButton', disabled && 'disabled', selected && 'selected']
+    yearButton: ['yearButton', ownerState.isYearDisabled && 'disabled', ownerState.isYearSelected && 'selected']
   };
   return composeClasses(slots, getPickersYearUtilityClass, classes);
 };
@@ -93,9 +89,10 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
   const {
       autoFocus,
       className,
+      classes: classesProp,
       children,
-      disabled,
-      selected,
+      disabled = false,
+      selected = false,
       value,
       tabIndex,
       onClick,
@@ -111,7 +108,14 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ref = React.useRef(null);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    isYearDisabled: disabled,
+    isYearSelected: selected
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
 
   // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
   useEnhancedEffect(() => {
@@ -138,12 +142,12 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
       onFocus: event => onFocus(event, value),
       onBlur: event => onBlur(event, value)
     },
-    ownerState: props,
+    ownerState,
     className: classes.yearButton
   });
   return /*#__PURE__*/_jsx(PickersYearRoot, _extends({
     className: clsx(classes.root, className),
-    ownerState: props
+    ownerState: ownerState
   }, other, {
     children: /*#__PURE__*/_jsx(YearButton, _extends({}, yearButtonProps))
   }));

package/modern/YearCalendar/YearCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -17,11 +17,9 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
 import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
 import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from "../internals/constants/dimensions.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -74,6 +72,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
   const {
       autoFocus,
       className,
+      classes: classesProp,
       value: valueProp,
       defaultValue,
       referenceDate: referenceDateProp,
@@ -105,12 +104,16 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
-    onChange: onChange,
+    referenceDate: referenceDateProp,
+    onChange,
     valueManager: singleItemValueManager
   });
   const now = useNow(timezone);
   const isRtl = useRtl();
   const utils = useUtils();
+  const {
+    ownerState
+  } = usePickerPrivateContext();
   const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
     value,
     utils,
@@ -120,8 +123,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     granularity: SECTION_TYPE_GRANULARITY.year
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);
   const selectedYear = React.useMemo(() => {
     if (value != null) {
@@ -284,7 +286,9 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    */
   defaultValue: PropTypes.object,
   /**
-   * If `true` picker is disabled
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
    */
   disabled: PropTypes.bool,
   /**
@@ -316,14 +320,15 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
   minDate: PropTypes.object,
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {TDate} value The new value.
+   * @param {PickerValidDate} value The new value.
    */
   onChange: PropTypes.func,
   onFocusedViewChange: PropTypes.func,
   onYearFocus: PropTypes.func,
   /**
-   * If `true` picker is readonly
+   * 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,
   /**
@@ -333,8 +338,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
   referenceDate: PropTypes.object,
   /**
    * 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/modern/hooks/index.js

@@ -1,5 +1,5 @@
 export { useClearableField } from "./useClearableField.js";
-export { usePickersTranslations } from "./usePickersTranslations.js";
+export { usePickerTranslations } from "./usePickerTranslations.js";
 export { useSplitFieldProps } from "./useSplitFieldProps.js";
 export { useParsedFormat } from "./useParsedFormat.js";
-export { usePickersContext } from "./usePickersContext.js";
+export { usePickerContext } from "./usePickerContext.js";

package/modern/hooks/useClearableField.js

@@ -9,10 +9,10 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import MuiIconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import { ClearIcon } from "../icons/index.js";
-import { usePickersTranslations } from "./usePickersTranslations.js";
+import { usePickerTranslations } from "./usePickerTranslations.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useClearableField = props => {
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const {
       clearable,
       onClear,
@@ -30,7 +30,8 @@ export const useClearableField = props => {
       ownerState: {},
       className: 'clearButton',
       additionalProps: {
-        title: translations.fieldClearLabel
+        title: translations.fieldClearLabel,
+        tabIndex: -1
       }
     }),
     iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);

package/modern/hooks/useParsedFormat.js

@@ -5,7 +5,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { buildSectionsFromFormat } from "../internals/hooks/useField/buildSectionsFromFormat.js";
 import { getLocalizedDigits } from "../internals/hooks/useField/useField.utils.js";
-import { usePickersTranslations } from "./usePickersTranslations.js";
+import { usePickerTranslations } from "./usePickerTranslations.js";
 /**
  * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
  * This format is localized (e.g: `AAAA` for the year with the French locale) and cannot be parsed by your date library.
@@ -23,7 +23,7 @@ export const useParsedFormat = parameters => {
   } = parameters;
   const utils = useUtils();
   const isRtl = useRtl();
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
   return React.useMemo(() => {
     const sections = buildSectionsFromFormat({