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

package/modern/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -4,9 +4,8 @@ const _excluded = ["props", "ref"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, DIALOG_WIDTH } from '@mui/x-date-pickers/internals';
+import { usePicker, DIALOG_WIDTH, PickerProvider } from '@mui/x-date-pickers/internals';
 import { useRangePosition } from "../useRangePosition.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickerStaticLayout = styled(PickersLayout)(({
@@ -42,11 +41,13 @@ export const useStaticRangePicker = _ref => {
   } = useRangePosition(props);
   const {
     layoutProps,
+    providerProps,
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
     autoFocusView: autoFocus ?? false,
     fieldRef: undefined,
+    localeText,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange
@@ -60,8 +61,7 @@ export const useStaticRangePicker = _ref => {
       onRangePositionChange
     })
   });
-  const renderPicker = () => /*#__PURE__*/_jsx(LocalizationProvider, {
-    localeText: localeText,
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
     children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
       slots: slots,
       slotProps: slotPropsForLayout,
@@ -70,7 +70,7 @@ export const useStaticRangePicker = _ref => {
       ref: ref,
       children: renderCurrentView()
     }))
-  });
+  }));
   return {
     renderPicker
   };

package/modern/internals/models/fields.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMTAyMDQwMDAwMA==";
+  const releaseInfo = "MTczMTUzODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/validation/validateDateRange.js

@@ -4,6 +4,11 @@ const _excluded = ["shouldDisableDate"];
 import { validateDate } from '@mui/x-date-pickers/validation';
 import { isRangeValid } from "../internals/utils/date-utils.js";
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
+
+/**
+ * Validation props used by the Date Range Picker, Date Range Field and Date Range Calendar components.
+ */
+
 export const validateDateRange = ({
   adapter,
   value,

package/modern/validation/validateDateTimeRange.js

@@ -4,6 +4,11 @@ const _excluded = ["shouldDisableDate"];
 import { validateDateTime } from '@mui/x-date-pickers/validation';
 import { isRangeValid } from "../internals/utils/date-utils.js";
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
+
+/**
+ * Validation props used by the Date Time Range Picker and Date Time Range Field.
+ */
+
 export const validateDateTimeRange = ({
   adapter,
   value,

package/modern/validation/validateTimeRange.js

@@ -1,6 +1,11 @@
 import { validateTime } from '@mui/x-date-pickers/validation';
 import { isRangeValid } from "../internals/utils/date-utils.js";
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
+
+/**
+ * Validation props used by the Time Range Picker and Time Range Field.
+ */
+
 export const validateTimeRange = ({
   adapter,
   value,

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -33,7 +33,7 @@ var _useRangePosition = require("../internals/hooks/useRangePosition");
 var _dimensions = require("../internals/constants/dimensions");
 var _PickersRangeCalendarHeader = require("../PickersRangeCalendarHeader");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
+const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const DateRangeCalendarRoot = (0, _styles.styled)('div', {
@@ -104,15 +104,11 @@ function useDateRangeCalendarDefaultizedProps(props, name) {
     availableRangePositions: themeProps.availableRangePositions ?? ['start', 'end']
   });
 }
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    isDragging
-  } = ownerState;
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
     root: ['root'],
     monthContainer: ['monthContainer'],
-    dayCalendar: [isDragging && 'dayDragging']
+    dayCalendar: [ownerState.isDraggingDay && 'dayDragging']
   };
   return (0, _composeClasses.default)(slots, _dateRangeCalendarClasses.getDateRangeCalendarUtilityClass, classes);
 };
@@ -137,6 +133,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       referenceDate,
       onChange,
       className,
+      classes: classesProp,
       disableFuture,
       disablePast,
       minDate,
@@ -251,10 +248,13 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       draggingDatePosition
     } = _useDragRange,
     dragEventHandlers = (0, _objectWithoutPropertiesLoose2.default)(_useDragRange, _excluded2);
-  const ownerState = (0, _extends2.default)({}, props, {
-    isDragging
+  const {
+    ownerState: pickersOwnerState
+  } = (0, _internals.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickersOwnerState, {
+    isDraggingDay: isDragging
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   const draggingRange = React.useMemo(() => {
     if (!valueDayRange[0] || !valueDayRange[1] || !rangeDragDay) {
       return [null, null];
@@ -316,7 +316,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       slots,
       slotProps
     },
-    ownerState: props
+    ownerState
   });
   const prevValue = React.useRef(null);
   React.useEffect(() => {
@@ -377,7 +377,8 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
   const slotPropsForDayCalendar = (0, _extends2.default)({}, slotProps, {
     day: dayOwnerState => {
       const {
-        day
+        day,
+        isDaySelected
       } = dayOwnerState;
       const isSelectedStartDate = (0, _dateUtils.isStartOfRange)(utils, day, valueDayRange);
       const isSelectedEndDate = (0, _dateUtils.isEndOfRange)(utils, day, valueDayRange);
@@ -400,7 +401,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
         isEndOfHighlighting: isDragging ? (0, _dateUtils.isEndOfRange)(utils, day, draggingRange) : isSelectedEndDate,
         onMouseEnter: shouldHavePreview ? handleDayMouseEnter : undefined,
         // apply selected styling to the dragging start or end day
-        isVisuallySelected: dayOwnerState.selected || isDragging && (isStartOfHighlighting || isEndOfHighlighting),
+        isVisuallySelected: isDaySelected || isDragging && (isStartOfHighlighting || isEndOfHighlighting),
         'data-position': datePosition
       }, dragEventHandlers, {
         draggable: isElementDraggable ? true : undefined
@@ -521,9 +522,9 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.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,
   /**
@@ -543,7 +544,8 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.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,
@@ -614,8 +616,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   onFocusedViewChange: _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,
   /**
@@ -641,7 +642,8 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    */
   rangePosition: _propTypes.default.oneOf(['end', 'start']),
   /**
-   * Make picker 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,
@@ -666,8 +668,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.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/DateRangeCalendar/useDragRange.js

@@ -221,9 +221,9 @@ const useDragRange = ({
 }) => {
   const [isDragging, setIsDragging] = React.useState(false);
   const [rangeDragDay, setRangeDragDay] = React.useState(null);
-  const handleRangeDragDayChange = (0, _useEventCallback.default)(val => {
-    if (!utils.isEqual(val, rangeDragDay)) {
-      setRangeDragDay(val);
+  const handleRangeDragDayChange = (0, _useEventCallback.default)(newValue => {
+    if (!utils.isEqual(newValue, rangeDragDay)) {
+      setRangeDragDay(newValue);
     }
   });
   const draggingDatePosition = React.useMemo(() => {

package/node/DateRangePicker/DateRangePicker.js

@@ -81,9 +81,9 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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,
   /**
@@ -109,7 +109,8 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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,
@@ -143,7 +144,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -231,8 +232,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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,
   /**
@@ -260,6 +260,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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.
@@ -292,8 +297,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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/DateRangePicker/DateRangePickerToolbar.js

@@ -66,7 +66,7 @@ const DateRangePickerToolbar = exports.DateRangePickerToolbar = /*#__PURE__*/Rea
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const translations = (0, _hooks.usePickersTranslations)();
+  const translations = (0, _hooks.usePickerTranslations)();
   const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : translations.start;
   const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : translations.end;
   const ownerState = props;
@@ -106,6 +106,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.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.
@@ -120,6 +125,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    */
   onViewChange: _propTypes.default.func.isRequired,
   rangePosition: _propTypes.default.oneOf(['end', 'start']).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/DateTimeRangePicker/DateTimeRangePicker.js

@@ -86,9 +86,9 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.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 +114,8 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.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,
@@ -153,7 +154,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -264,8 +265,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.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,
   /**
@@ -305,6 +305,11 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.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.
@@ -337,16 +342,14 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.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/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

@@ -112,7 +112,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,6 +190,11 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.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.
@@ -206,6 +211,11 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    */
   onViewChange: _propTypes.default.func.isRequired,
   rangePosition: _propTypes.default.oneOf(['end', 'start']).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/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.
    */