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

package/node/StaticDatePicker/StaticDatePicker.js

@@ -71,9 +71,9 @@ StaticDatePicker.propTypes = {
   className: _propTypes.default.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.default.func,
   /**
@@ -82,7 +82,8 @@ StaticDatePicker.propTypes = {
    */
   defaultValue: _propTypes.default.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.default.bool,
@@ -175,8 +176,7 @@ StaticDatePicker.propTypes = {
   onError: _propTypes.default.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: _propTypes.default.func,
   /**
@@ -187,8 +187,7 @@ StaticDatePicker.propTypes = {
   onViewChange: _propTypes.default.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: _propTypes.default.func,
   /**
@@ -201,6 +200,11 @@ StaticDatePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.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.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -223,22 +227,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.default.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.default.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.default.func,

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -91,9 +91,9 @@ StaticDateTimePicker.propTypes = {
   className: _propTypes.default.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.default.func,
   /**
@@ -102,7 +102,8 @@ StaticDateTimePicker.propTypes = {
    */
   defaultValue: _propTypes.default.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.default.bool,
@@ -223,8 +224,7 @@ StaticDateTimePicker.propTypes = {
   onError: _propTypes.default.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: _propTypes.default.func,
   /**
@@ -235,8 +235,7 @@ StaticDateTimePicker.propTypes = {
   onViewChange: _propTypes.default.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: _propTypes.default.func,
   /**
@@ -249,6 +248,11 @@ StaticDateTimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.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.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -271,30 +275,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.default.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.default.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.default.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.default.func,

package/node/StaticTimePicker/StaticTimePicker.js

@@ -87,7 +87,8 @@ StaticTimePicker.propTypes = {
    */
   defaultValue: _propTypes.default.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.default.bool,
@@ -179,6 +180,11 @@ StaticTimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.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.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -192,8 +198,7 @@ StaticTimePicker.propTypes = {
   referenceDate: _propTypes.default.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/node/TimeClock/Clock.js

@@ -14,7 +14,7 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _ClockPointer = require("./ClockPointer");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _shared = require("./shared");
 var _clockClasses = require("./clockClasses");
@@ -194,7 +194,7 @@ function Clock(inProps) {
   } = props;
   const ownerState = props;
   const utils = (0, _useUtils.useUtils)();
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const isMoving = React.useRef(false);
   const classes = useUtilityClasses(ownerState);
   const isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
@@ -324,7 +324,7 @@ function Clock(inProps) {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.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/node/TimeClock/TimeClock.js

@@ -14,7 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _PickersArrowSwitcher = require("../internals/components/PickersArrowSwitcher");
 var _timeUtils = require("../internals/utils/time-utils");
@@ -124,7 +124,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
     props,
     timezone
   });
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const now = (0, _useUtils.useNow)(timezone);
   const {
     view,
@@ -352,7 +352,8 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   defaultValue: _propTypes.default.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.default.bool,
@@ -419,7 +420,8 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   openTo: _propTypes.default.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.default.bool,
@@ -430,8 +432,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   referenceDate: _propTypes.default.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/node/TimeField/TimeField.js

@@ -44,7 +44,7 @@ const TimeField = exports.TimeField = /*#__PURE__*/React.forwardRef(function Tim
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? _PickersTextField.PickersTextField : _TextField.default);
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const textFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
@@ -101,6 +101,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   defaultValue: _propTypes.default.object,
   /**
    * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -120,7 +121,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   disablePast: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
   /**
@@ -240,8 +241,8 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   onSelectedSectionsChange: _propTypes.default.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.default.bool,
@@ -268,8 +269,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.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/node/TimePicker/TimePicker.js

@@ -92,7 +92,8 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   desktopModeMediaQuery: _propTypes.default.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.default.bool,
@@ -117,7 +118,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   disablePast: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -225,6 +226,11 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.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.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -248,8 +254,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.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/node/TimePicker/TimePickerToolbar.js

@@ -19,7 +19,7 @@ var _PickersToolbarText = require("../internals/components/PickersToolbarText");
 var _PickersToolbarButton = require("../internals/components/PickersToolbarButton");
 var _PickersToolbar = require("../internals/components/PickersToolbar");
 var _utils = require("../internals/utils/utils");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _timePickerToolbarClasses = require("./timePickerToolbarClasses");
@@ -141,7 +141,7 @@ function TimePickerToolbar(inProps) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
@@ -223,6 +223,11 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
   disabled: _propTypes.default.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
@@ -237,6 +242,11 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: _propTypes.default.func.isRequired,
+  /**
+   * 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.default.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/node/YearCalendar/PickersYear.js

@@ -15,17 +15,13 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _pickersYearClasses = require("./pickersYearClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
-const useUtilityClasses = ownerState => {
-  const {
-    disabled,
-    selected,
-    classes
-  } = ownerState;
+const _excluded = ["autoFocus", "className", "classes", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
     root: ['root'],
-    yearButton: ['yearButton', disabled && 'disabled', selected && 'selected']
+    yearButton: ['yearButton', ownerState.isYearDisabled && 'disabled', ownerState.isYearSelected && 'selected']
   };
   return (0, _composeClasses.default)(slots, _pickersYearClasses.getPickersYearUtilityClass, classes);
 };
@@ -101,9 +97,10 @@ const PickersYear = exports.PickersYear = /*#__PURE__*/React.memo(function Picke
   const {
       autoFocus,
       className,
+      classes: classesProp,
       children,
-      disabled,
-      selected,
+      disabled = false,
+      selected = false,
       value,
       tabIndex,
       onClick,
@@ -119,7 +116,14 @@ const PickersYear = exports.PickersYear = /*#__PURE__*/React.memo(function Picke
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ref = React.useRef(null);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, 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
   (0, _useEnhancedEffect.default)(() => {
@@ -146,12 +150,12 @@ const PickersYear = exports.PickersYear = /*#__PURE__*/React.memo(function Picke
       onFocus: event => onFocus(event, value),
       onBlur: event => onBlur(event, value)
     },
-    ownerState: props,
+    ownerState,
     className: classes.yearButton
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersYearRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
-    ownerState: props
+    ownerState: ownerState
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(YearButton, (0, _extends2.default)({}, yearButtonProps))
   }));

package/node/YearCalendar/YearCalendar.js

@@ -23,12 +23,10 @@ var _valueManagers = require("../internals/utils/valueManagers");
 var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDate");
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _dimensions = require("../internals/constants/dimensions");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-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 useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+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"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -81,6 +79,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
   const {
       autoFocus,
       className,
+      classes: classesProp,
       value: valueProp,
       defaultValue,
       referenceDate: referenceDateProp,
@@ -112,12 +111,15 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
-    onChange: onChange,
+    onChange,
     valueManager: _valueManagers.singleItemValueManager
   });
   const now = (0, _useUtils.useNow)(timezone);
   const isRtl = (0, _RtlProvider.useRtl)();
   const utils = (0, _useUtils.useUtils)();
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
     value,
     utils,
@@ -127,8 +129,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     granularity: _getDefaultReferenceDate.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) {
@@ -291,7 +292,9 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    */
   defaultValue: _propTypes.default.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.default.bool,
   /**
@@ -323,14 +326,15 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
   minDate: _propTypes.default.object,
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {TDate} value The new value.
+   * @param {PickerValidDate} value The new value.
    */
   onChange: _propTypes.default.func,
   onFocusedViewChange: _propTypes.default.func,
   onYearFocus: _propTypes.default.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.default.bool,
   /**
@@ -340,8 +344,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
   referenceDate: _propTypes.default.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.default.func,

package/node/hooks/index.js

@@ -15,16 +15,16 @@ Object.defineProperty(exports, "useParsedFormat", {
     return _useParsedFormat.useParsedFormat;
   }
 });
-Object.defineProperty(exports, "usePickersContext", {
+Object.defineProperty(exports, "usePickerContext", {
   enumerable: true,
   get: function () {
-    return _usePickersContext.usePickersContext;
+    return _usePickerContext.usePickerContext;
   }
 });
-Object.defineProperty(exports, "usePickersTranslations", {
+Object.defineProperty(exports, "usePickerTranslations", {
   enumerable: true,
   get: function () {
-    return _usePickersTranslations.usePickersTranslations;
+    return _usePickerTranslations.usePickerTranslations;
   }
 });
 Object.defineProperty(exports, "useSplitFieldProps", {
@@ -34,7 +34,7 @@ Object.defineProperty(exports, "useSplitFieldProps", {
   }
 });
 var _useClearableField = require("./useClearableField");
-var _usePickersTranslations = require("./usePickersTranslations");
+var _usePickerTranslations = require("./usePickerTranslations");
 var _useSplitFieldProps = require("./useSplitFieldProps");
 var _useParsedFormat = require("./useParsedFormat");
-var _usePickersContext = require("./usePickersContext");
+var _usePickerContext = require("./usePickerContext");

package/node/hooks/useClearableField.js

@@ -14,12 +14,12 @@ var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
 var _icons = require("../icons");
-var _usePickersTranslations = require("./usePickersTranslations");
+var _usePickerTranslations = require("./usePickerTranslations");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["clearable", "onClear", "InputProps", "sx", "slots", "slotProps"],
   _excluded2 = ["ownerState"];
 const useClearableField = props => {
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const {
       clearable,
       onClear,
@@ -37,7 +37,8 @@ const useClearableField = props => {
       ownerState: {},
       className: 'clearButton',
       additionalProps: {
-        title: translations.fieldClearLabel
+        title: translations.fieldClearLabel,
+        tabIndex: -1
       }
     }),
     iconButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);

package/node/hooks/useParsedFormat.js

@@ -11,7 +11,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _useUtils = require("../internals/hooks/useUtils");
 var _buildSectionsFromFormat = require("../internals/hooks/useField/buildSectionsFromFormat");
 var _useField = require("../internals/hooks/useField/useField.utils");
-var _usePickersTranslations = require("./usePickersTranslations");
+var _usePickerTranslations = require("./usePickerTranslations");
 /**
  * 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.
@@ -29,7 +29,7 @@ const useParsedFormat = parameters => {
   } = parameters;
   const utils = (0, _useUtils.useUtils)();
   const isRtl = (0, _RtlProvider.useRtl)();
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(utils), [utils]);
   return React.useMemo(() => {
     const sections = (0, _buildSectionsFromFormat.buildSectionsFromFormat)({

package/node/hooks/usePickerContext.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePickerContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _PickerProvider = require("../internals/components/PickerProvider");
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+const usePickerContext = () => {
+  const value = React.useContext(_PickerProvider.PickerContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickerContext` can only be called in fields that are used as a slot of a picker component'].join('\n'));
+  }
+  return value;
+};
+exports.usePickerContext = usePickerContext;