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

package/node/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -88,7 +88,7 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
     className,
     sx
   } = props;
-  const translations = (0, _hooks.usePickersTranslations)();
+  const translations = (0, _hooks.usePickerTranslations)();
   const classes = useUtilityClasses(props);
   const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';

package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -20,7 +20,7 @@ var _DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
 var _dateTimeRangePickerToolbarClasses = require("./dateTimeRangePickerToolbarClasses");
 var _dateRangeManager = require("../internals/utils/date-range-manager");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "onViewChange", "toolbarVariant", "onChange", "classes", "view", "isLandscape", "views", "ampm", "disabled", "readOnly", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
+const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "onViewChange", "toolbarVariant", "onChange", "classes", "view", "isLandscape", "views", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -93,8 +93,6 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
       isLandscape,
       views,
       ampm,
-      disabled,
-      readOnly,
       hidden,
       toolbarFormat,
       toolbarPlaceholder,
@@ -102,6 +100,10 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
       sx
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    disabled,
+    readOnly
+  } = (0, _hooks.usePickerContext)();
   const commonToolbarProps = {
     isLandscape,
     views,
@@ -112,7 +114,7 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
     toolbarFormat,
     toolbarPlaceholder
   };
-  const translations = (0, _hooks.usePickersTranslations)();
+  const translations = (0, _hooks.usePickerTranslations)();
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const handleStartRangeViewChange = React.useCallback(newView => {
@@ -190,7 +192,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.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.
@@ -206,7 +207,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    */
   onViewChange: _propTypes.default.func.isRequired,
   rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
-  readOnly: _propTypes.default.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -10,6 +10,7 @@ exports.DesktopDateRangePicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _internals = require("@mui/x-date-pickers/internals");
 var _validation = require("@mui/x-date-pickers/validation");
 var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
 var _utils = require("@mui/utils");
@@ -30,6 +31,8 @@ var _validation2 = require("../validation");
  * - [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/)
  */
 const DesktopDateRangePicker = exports.DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateRangePicker(inProps, ref) {
+  const utils = (0, _internals.useUtils)();
+
   // Props with the default values common to all date time pickers
   const defaultizedProps = (0, _shared.useDateRangePickerDefaultizedProps)(inProps, 'MuiDesktopDateRangePicker');
   const viewRenderers = (0, _extends2.default)({
@@ -37,6 +40,7 @@ const DesktopDateRangePicker = exports.DesktopDateRangePicker = /*#__PURE__*/Rea
   }, defaultizedProps.viewRenderers);
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
+    format: utils.formats.keyboardDate,
     calendars: defaultizedProps.calendars ?? 2,
     views: ['day'],
     openTo: 'day',
@@ -92,9 +96,9 @@ DesktopDateRangePicker.propTypes = {
   currentMonthCalendarPosition: _propTypes.default.oneOf([1, 2, 3]),
   /**
    * 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,
   /**
@@ -114,7 +118,8 @@ DesktopDateRangePicker.propTypes = {
    */
   disableAutoMonthSwitching: _propTypes.default.bool,
   /**
-   * 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,
@@ -148,7 +153,7 @@ DesktopDateRangePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -236,8 +241,7 @@ DesktopDateRangePicker.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,
   /**
@@ -265,6 +269,11 @@ DesktopDateRangePicker.propTypes = {
    * Used when the component position is controlled.
    */
   rangePosition: _propTypes.default.oneOf(['end', 'start']),
+  /**
+   * 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.
@@ -297,8 +306,7 @@ DesktopDateRangePicker.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.
    * @param {string} position The date to test, 'start' or 'end'.
    * @returns {boolean} Returns `true` if the date should be disabled.
    */

package/node/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -173,9 +173,9 @@ DesktopDateTimeRangePicker.propTypes = {
   currentMonthCalendarPosition: _propTypes.default.oneOf([1, 2, 3]),
   /**
    * 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,
   /**
@@ -195,7 +195,8 @@ DesktopDateTimeRangePicker.propTypes = {
    */
   disableAutoMonthSwitching: _propTypes.default.bool,
   /**
-   * 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,
@@ -234,7 +235,7 @@ DesktopDateTimeRangePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -345,8 +346,7 @@ DesktopDateTimeRangePicker.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,
   /**
@@ -386,6 +386,11 @@ DesktopDateTimeRangePicker.propTypes = {
    * Used when the component position is controlled.
    */
   rangePosition: _propTypes.default.oneOf(['end', 'start']),
+  /**
+   * 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.
@@ -418,16 +423,14 @@ DesktopDateTimeRangePicker.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.
    * @param {string} position The date to test, 'start' or 'end'.
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: _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.
    */

package/node/MobileDateRangePicker/MobileDateRangePicker.js

@@ -10,6 +10,7 @@ exports.MobileDateRangePicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _internals = require("@mui/x-date-pickers/internals");
 var _validation = require("@mui/x-date-pickers/validation");
 var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
 var _utils = require("@mui/utils");
@@ -30,6 +31,8 @@ var _validation2 = require("../validation");
  * - [MobileDateRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-range-picker/)
  */
 const MobileDateRangePicker = exports.MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRangePicker(inProps, ref) {
+  const utils = (0, _internals.useUtils)();
+
   // Props with the default values common to all date time pickers
   const defaultizedProps = (0, _shared.useDateRangePickerDefaultizedProps)(inProps, 'MuiMobileDateRangePicker');
   const viewRenderers = (0, _extends2.default)({
@@ -37,6 +40,7 @@ const MobileDateRangePicker = exports.MobileDateRangePicker = /*#__PURE__*/React
   }, defaultizedProps.viewRenderers);
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
+    format: utils.formats.keyboardDate,
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     views: ['day'],
@@ -88,9 +92,9 @@ MobileDateRangePicker.propTypes = {
   currentMonthCalendarPosition: _propTypes.default.oneOf([1, 2, 3]),
   /**
    * 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 +114,8 @@ MobileDateRangePicker.propTypes = {
    */
   disableAutoMonthSwitching: _propTypes.default.bool,
   /**
-   * 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,
@@ -144,7 +149,7 @@ MobileDateRangePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -232,8 +237,7 @@ MobileDateRangePicker.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,
   /**
@@ -261,6 +265,11 @@ MobileDateRangePicker.propTypes = {
    * Used when the component position is controlled.
    */
   rangePosition: _propTypes.default.oneOf(['end', 'start']),
+  /**
+   * 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.
@@ -293,8 +302,7 @@ MobileDateRangePicker.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.
    * @param {string} position The date to test, 'start' or 'end'.
    * @returns {boolean} Returns `true` if the date should be disabled.
    */

package/node/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -167,9 +167,9 @@ MobileDateTimeRangePicker.propTypes = {
   currentMonthCalendarPosition: _propTypes.default.oneOf([1, 2, 3]),
   /**
    * 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,
   /**
@@ -189,7 +189,8 @@ MobileDateTimeRangePicker.propTypes = {
    */
   disableAutoMonthSwitching: _propTypes.default.bool,
   /**
-   * 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,
@@ -228,7 +229,7 @@ MobileDateTimeRangePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -339,8 +340,7 @@ MobileDateTimeRangePicker.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,
   /**
@@ -380,6 +380,11 @@ MobileDateTimeRangePicker.propTypes = {
    * Used when the component position is controlled.
    */
   rangePosition: _propTypes.default.oneOf(['end', 'start']),
+  /**
+   * 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.
@@ -412,16 +417,14 @@ MobileDateTimeRangePicker.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.
    * @param {string} position The date to test, 'start' or 'end'.
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: _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.
    */

package/node/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -94,7 +94,7 @@ const MultiInputDateRangeField = exports.MultiInputDateRangeField = /*#__PURE__*
     ownerState,
     className: (0, _clsx.default)(className, classes.root)
   });
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? _PickersTextField.PickersTextField : _TextField.default);
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const startTextFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
@@ -168,6 +168,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _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,
@@ -186,7 +187,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    */
   divider: _propTypes.default.node,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
   /**
@@ -233,8 +234,8 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.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,
@@ -259,8 +260,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.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.
    * @param {string} position The date to test, 'start' or 'end'.
    * @returns {boolean} Returns `true` if the date should be disabled.
    */

package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -94,7 +94,7 @@ const MultiInputDateTimeRangeField = exports.MultiInputDateTimeRangeField = /*#_
     ownerState,
     className: (0, _clsx.default)(className, classes.root)
   });
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? _PickersTextField.PickersTextField : _TextField.default);
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const startTextFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
@@ -173,6 +173,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _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,
@@ -196,7 +197,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    */
   divider: _propTypes.default.node,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
   /**
@@ -266,8 +267,8 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.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,
@@ -292,16 +293,14 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.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.
    * @param {string} position The date to test, 'start' or 'end'.
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: _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.
    */

package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -94,7 +94,7 @@ const MultiInputTimeRangeField = exports.MultiInputTimeRangeField = /*#__PURE__*
     ownerState,
     className: (0, _clsx.clsx)(className, classes.root)
   });
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? _PickersTextField.PickersTextField : _TextField.default);
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const startTextFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
@@ -173,6 +173,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
   direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _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,
@@ -196,7 +197,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    */
   divider: _propTypes.default.node,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
   /**
@@ -248,8 +249,8 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.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,
@@ -271,8 +272,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.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/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -26,7 +26,7 @@ const PickersRangeCalendarHeaderContentMultipleCalendars = (0, _styles.styled)(_
 });
 const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
   const utils = (0, _internals.useUtils)();
-  const translations = (0, _hooks.usePickersTranslations)();
+  const translations = (0, _hooks.usePickerTranslations)();
   const {
       calendars,
       month,

package/node/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -44,7 +44,7 @@ const SingleInputDateRangeField = exports.SingleInputDateRangeField = /*#__PURE_
     } = 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,
@@ -102,6 +102,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
   defaultValue: _propTypes.default.arrayOf(_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,
@@ -116,7 +117,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    */
   disablePast: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
   /**
@@ -231,8 +232,8 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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,
@@ -262,8 +263,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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.
    * @param {string} position The date to test, 'start' or 'end'.
    * @returns {boolean} Returns `true` if the date should be disabled.
    */

package/node/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -44,7 +44,7 @@ const SingleInputDateTimeRangeField = exports.SingleInputDateTimeRangeField = /*
     } = 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,
@@ -107,6 +107,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
   defaultValue: _propTypes.default.arrayOf(_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,
@@ -126,7 +127,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    */
   disablePast: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
   /**
@@ -264,8 +265,8 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.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,
@@ -295,16 +296,14 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.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.
    * @param {string} position The date to test, 'start' or 'end'.
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: _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.
    */