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

package/models/fields.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import { BaseFieldProps, UseFieldResponse } from '@mui/x-date-pickers/internals';
-import { BaseSingleInputPickersTextFieldProps, FieldRef, FieldSection, PickerValidDate } from '@mui/x-date-pickers/models';
+import { UseFieldResponse, FormProps } from '@mui/x-date-pickers/internals';
+import { FieldRef, FieldSection, PickerFieldSlotProps } from '@mui/x-date-pickers/models';
 import { UseClearableFieldResponse } from '@mui/x-date-pickers/hooks';
-import { SxProps } from '@mui/material/styles';
-import TextField from '@mui/material/TextField';
 import { RangePosition } from './range';
 export interface RangeFieldSection extends FieldSection {
     dateName: RangePosition;
@@ -13,11 +10,9 @@ export type FieldType = 'single-input' | 'multi-input';
 /**
  * Props the `textField` slot of the multi input field can receive when used inside a picker.
  */
-export interface MultiInputFieldSlotTextFieldProps {
+export interface MultiInputFieldSlotTextFieldProps extends FormProps {
     label?: React.ReactNode;
     id?: string;
-    disabled?: boolean;
-    readOnly?: boolean;
     onKeyDown?: React.KeyboardEventHandler;
     onClick?: React.MouseEventHandler;
     onFocus?: React.FocusEventHandler;
@@ -46,33 +41,11 @@ export interface RangeFieldSeparatorProps {
     dateSeparator?: string;
 }
 /**
- * Props the multi input field can receive when used inside a picker.
- * Only contains what the MUI components are passing to the field,
- * not what users can pass using the `props.slotProps.field`.
+ * Props the `slotProps.field` of a range picker component can receive.
  */
-export interface BaseMultiInputFieldProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Omit<BaseFieldProps<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TError>, 'unstableFieldRef'>, RangeFieldSeparatorProps {
-    sx?: SxProps<any>;
-    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
-    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
-    slots?: {
-        root?: React.ElementType;
-        separator?: React.ElementType;
-        textField?: React.ElementType;
-    };
-    slotProps?: {
-        root?: SlotComponentProps<React.ElementType<MultiInputFieldSlotRootProps>, {}, Record<string, any>>;
-        textField?: SlotComponentProps<typeof TextField, {}, {
-            position?: RangePosition;
-        } & Record<string, any>>;
-    };
-}
+export type PickerRangeFieldSlotProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean> = PickerFieldSlotProps<TValue, TSection, TEnableAccessibleFieldDOMStructure> & RangeFieldSeparatorProps;
 /**
  * Props the text field receives when used with a multi input picker.
  * Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.textField`.
  */
 export type BaseMultiInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseClearableFieldResponse<UseFieldResponse<TEnableAccessibleFieldDOMStructure, MultiInputFieldSlotTextFieldProps>>;
-/**
- * Props the text field receives when used with a single or multi input picker.
- * Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.field` or `props.slotProps.textField`.
- */
-export type BasePickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure> & BaseMultiInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure>;

package/models/range.d.ts

@@ -1,4 +1,4 @@
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 export type DateRange<TDate extends PickerValidDate> = [TDate | null, TDate | null];
-export type NonEmptyDateRange<TDate extends PickerValidDate> = [TDate, TDate];
+export type NonEmptyDateRange = [PickerValidDate, PickerValidDate];
 export type RangePosition = 'start' | 'end';

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -15,7 +15,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
-import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
@@ -97,15 +97,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 composeClasses(slots, getDateRangeCalendarUtilityClass, classes);
 };
@@ -130,6 +126,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       referenceDate,
       onChange,
       className,
+      classes: classesProp,
       disableFuture,
       disablePast,
       minDate,
@@ -172,6 +169,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
+    referenceDate,
     defaultValue,
     onChange,
     valueManager: rangeValueManager
@@ -245,10 +243,13 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       draggingDatePosition
     } = _useDragRange,
     dragEventHandlers = _objectWithoutPropertiesLoose(_useDragRange, _excluded2);
-  const ownerState = _extends({}, props, {
-    isDragging
+  const {
+    ownerState: pickersOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, 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];
@@ -310,7 +311,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       slots,
       slotProps
     },
-    ownerState: props
+    ownerState
   });
   const prevValue = React.useRef(null);
   React.useEffect(() => {
@@ -371,7 +372,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const slotPropsForDayCalendar = _extends({}, slotProps, {
     day: dayOwnerState => {
       const {
-        day
+        day,
+        isDaySelected
       } = dayOwnerState;
       const isSelectedStartDate = isStartOfRange(utils, day, valueDayRange);
       const isSelectedEndDate = isEndOfRange(utils, day, valueDayRange);
@@ -394,7 +396,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         isEndOfHighlighting: isDragging ? 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
@@ -515,9 +517,9 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   currentMonthCalendarPosition: PropTypes.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.func,
   /**
@@ -537,7 +539,8 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    */
   disableAutoMonthSwitching: PropTypes.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.bool,
@@ -608,8 +611,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   onFocusedViewChange: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -635,7 +637,8 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    */
   rangePosition: PropTypes.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.bool,
@@ -660,8 +663,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/modern/DateRangeCalendar/useDragRange.js

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

package/modern/DateRangePicker/DateRangePicker.js

@@ -74,9 +74,9 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.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.func,
   /**
@@ -102,7 +102,8 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   disableAutoMonthSwitching: PropTypes.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.bool,
@@ -136,7 +137,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -224,8 +225,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   onError: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -253,6 +253,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Used when the component position is controlled.
    */
   rangePosition: PropTypes.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.bool,
   /**
    * If `true`, disable heavy animations.
@@ -285,8 +290,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/modern/DateRangePicker/DateRangePickerToolbar.js

@@ -10,7 +10,7 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { PickersToolbar, PickersToolbarButton, useUtils } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { getDateRangePickerToolbarUtilityClass } from "./dateRangePickerToolbarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -59,7 +59,7 @@ const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangeP
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const translations = usePickersTranslations();
+  const translations = 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;
@@ -99,7 +99,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -113,7 +112,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/DateTimeRangePicker/DateTimeRangePicker.js

@@ -79,9 +79,9 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.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.func,
   /**
@@ -107,7 +107,8 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    */
   disableAutoMonthSwitching: PropTypes.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.bool,
@@ -146,7 +147,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -257,8 +258,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   onError: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -298,6 +298,11 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * Used when the component position is controlled.
    */
   rangePosition: PropTypes.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.bool,
   /**
    * If `true`, disable heavy animations.
@@ -330,16 +335,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.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/modern/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -8,7 +8,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
 import { isDatePickerView } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import { getDateTimeRangePickerTabsUtilityClass } from "./dateTimeRangePickerTabsClasses.js";
@@ -81,7 +81,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     className,
     sx
   } = props;
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const classes = useUtilityClasses(props);
   const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';

package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -2,14 +2,14 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { useUtils } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
 import { getDateTimeRangePickerToolbarUtilityClass } from "./dateTimeRangePickerToolbarClasses.js";
 import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
@@ -86,8 +86,6 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
       isLandscape,
       views,
       ampm,
-      disabled,
-      readOnly,
       hidden,
       toolbarFormat,
       toolbarPlaceholder,
@@ -95,6 +93,10 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
       sx
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    disabled,
+    readOnly
+  } = usePickerContext();
   const commonToolbarProps = {
     isLandscape,
     views,
@@ -105,7 +107,7 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     toolbarFormat,
     toolbarPlaceholder
   };
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const handleStartRangeViewChange = React.useCallback(newView => {
@@ -183,7 +185,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -199,7 +200,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useUtils } from '@mui/x-date-pickers/internals';
 import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
@@ -23,6 +24,8 @@ import { validateDateRange } from "../validation/index.js";
  * - [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/)
  */
 const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateRangePicker(inProps, ref) {
+  const utils = useUtils();
+
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiDesktopDateRangePicker');
   const viewRenderers = _extends({
@@ -30,6 +33,7 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
   }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
+    format: utils.formats.keyboardDate,
     calendars: defaultizedProps.calendars ?? 2,
     views: ['day'],
     openTo: 'day',
@@ -85,9 +89,9 @@ DesktopDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.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.func,
   /**
@@ -107,7 +111,8 @@ DesktopDateRangePicker.propTypes = {
    */
   disableAutoMonthSwitching: PropTypes.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.bool,
@@ -141,7 +146,7 @@ DesktopDateRangePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -229,8 +234,7 @@ DesktopDateRangePicker.propTypes = {
   onError: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -258,6 +262,11 @@ DesktopDateRangePicker.propTypes = {
    * Used when the component position is controlled.
    */
   rangePosition: PropTypes.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.bool,
   /**
    * If `true`, disable heavy animations.
@@ -290,8 +299,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/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -166,9 +166,9 @@ DesktopDateTimeRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.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.func,
   /**
@@ -188,7 +188,8 @@ DesktopDateTimeRangePicker.propTypes = {
    */
   disableAutoMonthSwitching: PropTypes.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.bool,
@@ -227,7 +228,7 @@ DesktopDateTimeRangePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -338,8 +339,7 @@ DesktopDateTimeRangePicker.propTypes = {
   onError: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -379,6 +379,11 @@ DesktopDateTimeRangePicker.propTypes = {
    * Used when the component position is controlled.
    */
   rangePosition: PropTypes.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.bool,
   /**
    * If `true`, disable heavy animations.
@@ -411,16 +416,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.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.
    */