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

package/node/DateField/DateField.js

@@ -44,7 +44,7 @@ const DateField = exports.DateField = /*#__PURE__*/React.forwardRef(function Dat
     } = 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,
@@ -96,6 +96,7 @@ process.env.NODE_ENV !== "production" ? DateField.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,
@@ -110,7 +111,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   disablePast: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
   /**
@@ -225,8 +226,8 @@ process.env.NODE_ENV !== "production" ? DateField.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,
@@ -256,22 +257,19 @@ process.env.NODE_ENV !== "production" ? DateField.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/DatePicker/DatePicker.js

@@ -72,9 +72,9 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   closeOnSelect: _propTypes.default.bool,
   /**
    * 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,
   /**
@@ -89,7 +89,8 @@ process.env.NODE_ENV !== "production" ? DatePicker.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,
@@ -118,7 +119,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -208,8 +209,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.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,
   /**
@@ -230,8 +230,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.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 @@ process.env.NODE_ENV !== "production" ? DatePicker.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.
@@ -281,22 +285,19 @@ process.env.NODE_ENV !== "production" ? DatePicker.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/DatePicker/DatePickerToolbar.js

@@ -16,7 +16,7 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _PickersToolbar = require("../internals/components/PickersToolbar");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _datePickerToolbarClasses = require("./datePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
@@ -76,7 +76,7 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const classes = useUtilityClasses(props);
   const dateText = React.useMemo(() => {
     if (!value) {
@@ -114,7 +114,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -128,7 +127,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: _propTypes.default.func.isRequired,
-  readOnly: _propTypes.default.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/DateTimeField/DateTimeField.js

@@ -44,7 +44,7 @@ const DateTimeField = exports.DateTimeField = /*#__PURE__*/React.forwardRef(func
     } = 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" ? DateTimeField.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" ? DateTimeField.propTypes = {
    */
   disablePast: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
   /**
@@ -258,8 +259,8 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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,
@@ -289,30 +290,26 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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/DateTimePicker/DateTimePicker.js

@@ -82,9 +82,9 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   closeOnSelect: _propTypes.default.bool,
   /**
    * 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,
   /**
@@ -99,7 +99,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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,
@@ -133,7 +134,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -246,8 +247,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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,
   /**
@@ -268,8 +268,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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,
   /**
@@ -287,6 +286,11 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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.
@@ -319,30 +323,26 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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/DateTimePicker/DateTimePickerTabs.js

@@ -15,7 +15,7 @@ var _Tabs = _interopRequireWildcard(require("@mui/material/Tabs"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _icons = require("../icons");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _dateTimePickerTabsClasses = require("./dateTimePickerTabsClasses");
 var _dateUtils = require("../internals/utils/date-utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -81,7 +81,7 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
     className,
     sx
   } = props;
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const classes = useUtilityClasses(props);
   const handleChange = (event, value) => {
     onViewChange(tabToView(value));

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -18,7 +18,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _PickersToolbarText = require("../internals/components/PickersToolbarText");
 var _PickersToolbar = require("../internals/components/PickersToolbar");
 var _PickersToolbarButton = require("../internals/components/PickersToolbarButton");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dateTimePickerToolbarClasses = require("./dateTimePickerToolbarClasses");
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
@@ -26,8 +26,9 @@ var _dimensions = require("../internals/constants/dimensions");
 var _dateUtils = require("../internals/utils/date-utils");
 var _pickersToolbarTextClasses = require("../internals/components/pickersToolbarTextClasses");
 var _pickersToolbarClasses = require("../internals/components/pickersToolbarClasses");
+var _usePickerContext = require("../hooks/usePickerContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant", "toolbarTitle", "className"];
+const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "toolbarVariant", "toolbarTitle", "className"];
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -233,14 +234,16 @@ function DateTimePickerToolbar(inProps) {
       toolbarFormat,
       toolbarPlaceholder = '––',
       views,
-      disabled,
-      readOnly,
       toolbarVariant = 'mobile',
       toolbarTitle: inToolbarTitle,
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isRtl = (0, _RtlProvider.useRtl)();
+  const {
+    disabled,
+    readOnly
+  } = (0, _usePickerContext.usePickerContext)();
   const ownerState = (0, _extends2.default)({}, props, {
     isRtl
   });
@@ -251,7 +254,7 @@ function DateTimePickerToolbar(inProps) {
   } = (0, _dateHelpersHooks.useMeridiemMode)(value, ampm, onChange);
   const showAmPmControl = Boolean(ampm && !ampmInClock);
   const isDesktop = toolbarVariant === 'desktop';
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const classes = useUtilityClasses(ownerState);
   const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle;
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
@@ -366,7 +369,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -380,7 +382,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: _propTypes.default.func.isRequired,
-  readOnly: _propTypes.default.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -14,7 +14,7 @@ var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveC
 var _utils = require("@mui/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _shared = require("../DatePicker/shared");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
@@ -34,7 +34,7 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [DesktopDatePicker API](https://mui.com/x/api/date-pickers/desktop-date-picker/)
  */
 const DesktopDatePicker = exports.DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date pickers
@@ -99,9 +99,9 @@ DesktopDatePicker.propTypes = {
   closeOnSelect: _propTypes.default.bool,
   /**
    * 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,
   /**
@@ -110,7 +110,8 @@ DesktopDatePicker.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,
@@ -139,7 +140,7 @@ DesktopDatePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -229,8 +230,7 @@ DesktopDatePicker.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,
   /**
@@ -251,8 +251,7 @@ DesktopDatePicker.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,
   /**
@@ -270,6 +269,11 @@ DesktopDatePicker.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.
@@ -302,22 +306,19 @@ DesktopDatePicker.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/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -18,7 +18,7 @@ var _valueManagers = require("../internals/utils/valueManagers");
 var _DateTimeField = require("../DateTimeField");
 var _shared = require("../DateTimePicker/shared");
 var _dateViewRenderers = require("../dateViewRenderers/dateViewRenderers");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
 var _icons = require("../icons");
@@ -90,7 +90,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
  * - [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/)
  */
 const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date time pickers
@@ -196,9 +196,9 @@ DesktopDateTimePicker.propTypes = {
   closeOnSelect: _propTypes.default.bool,
   /**
    * 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,
   /**
@@ -207,7 +207,8 @@ DesktopDateTimePicker.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,
@@ -241,7 +242,7 @@ DesktopDateTimePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -354,8 +355,7 @@ DesktopDateTimePicker.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,
   /**
@@ -376,8 +376,7 @@ DesktopDateTimePicker.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,
   /**
@@ -395,6 +394,11 @@ DesktopDateTimePicker.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.
@@ -427,30 +431,26 @@ DesktopDateTimePicker.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,