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

package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -5,10 +5,10 @@ import * as React from 'react';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 const useMultiInputFieldSlotProps = ({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -28,12 +28,12 @@ const useMultiInputFieldSlotProps = ({
   startFieldRef,
   endFieldRef
 }) => {
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef);
   const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
-    if (!open) {
+    if (!open || variant === 'mobile') {
       return;
     }
     const currentFieldRef = rangePosition === 'start' ? startFieldRef : endFieldRef;
@@ -49,7 +49,7 @@ const useMultiInputFieldSlotProps = ({
     // use the current view or `0` when the range position has just been swapped
     previousRangePosition.current === rangePosition ? currentView : 0);
     previousRangePosition.current = rangePosition;
-  }, [rangePosition, open, currentView, startFieldRef, endFieldRef]);
+  }, [rangePosition, open, currentView, startFieldRef, endFieldRef, variant]);
   const openRangeStartSelection = event => {
     event.stopPropagation();
     onRangePositionChange('start');
@@ -98,7 +98,7 @@ const useMultiInputFieldSlotProps = ({
           focused: open ? rangePosition === 'start' : undefined
         }, !readOnly && !fieldProps.disabled && {
           onClick: openRangeStartSelection
-        }, wrapperVariant === 'mobile' && {
+        }, variant === 'mobile' && {
           readOnly: true
         });
         if (anchorRef) {
@@ -114,7 +114,7 @@ const useMultiInputFieldSlotProps = ({
           focused: open ? rangePosition === 'end' : undefined
         }, !readOnly && !fieldProps.disabled && {
           onClick: openRangeEndSelection
-        }, wrapperVariant === 'mobile' && {
+        }, variant === 'mobile' && {
           readOnly: true
         });
         InputProps = resolvedComponentProps?.InputProps;
@@ -146,7 +146,7 @@ const useMultiInputFieldSlotProps = ({
   return enrichedFieldProps;
 };
 const useSingleInputFieldSlotProps = ({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -166,7 +166,7 @@ const useSingleInputFieldSlotProps = ({
 }) => {
   const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, startFieldRef, endFieldRef);
   React.useEffect(() => {
-    if (!open || !startFieldRef.current) {
+    if (!open || !startFieldRef.current || variant === 'mobile') {
       return;
     }
     if (startFieldRef.current.isFieldFocused()) {
@@ -179,7 +179,7 @@ const useSingleInputFieldSlotProps = ({
       const newSelectedSection = rangePosition === 'start' ? sections.indexOf(currentView) : sections.lastIndexOf(currentView);
       startFieldRef.current?.focusField(newSelectedSection);
     }
-  }, [rangePosition, open, currentView, startFieldRef]);
+  }, [rangePosition, open, currentView, startFieldRef, variant]);
   const updateRangePosition = () => {
     if (!startFieldRef.current?.isFieldFocused()) {
       return;
@@ -208,8 +208,8 @@ const useSingleInputFieldSlotProps = ({
   });
   const slotProps = _extends({}, fieldProps.slotProps, {
     textField: pickerSlotProps?.textField,
-    clearButton: pickerSlots?.clearButton,
-    clearIcon: pickerSlots?.clearIcon
+    clearButton: pickerSlotProps?.clearButton,
+    clearIcon: pickerSlotProps?.clearIcon
   });
   const enrichedFieldProps = _extends({}, fieldProps, {
     slots,
@@ -225,7 +225,7 @@ const useSingleInputFieldSlotProps = ({
     focused: open ? true : undefined
   }, labelId != null && {
     id: labelId
-  }, wrapperVariant === 'mobile' && {
+  }, variant === 'mobile' && {
     readOnly: true
   }, !readOnly && !fieldProps.disabled && {
     onClick: openPicker

package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { useLicenseVerifier } from '@mui/x-license';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, PickersModalDialog, PickersProvider } from '@mui/x-date-pickers/internals';
-import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { usePicker, PickersModalDialog, PickerProvider } from '@mui/x-date-pickers/internals';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import useId from '@mui/utils/useId';
 import { useEnrichedRangePickerFieldProps } from "../useEnrichedRangePickerFieldProps.js";
 import { getReleaseInfo } from "../../utils/releaseInfo.js";
@@ -46,19 +46,21 @@ export const useMobileRangePicker = _ref => {
     onRangePositionChange
   } = useRangePosition(props, fieldType === 'single-input' ? startFieldRef : undefined);
   const labelId = useId();
-  const contextTranslations = usePickersTranslations();
+  const contextTranslations = usePickerTranslations();
   const {
     open,
     actions,
     layoutProps,
+    providerProps,
     renderCurrentView,
     fieldProps: pickerFieldProps,
-    contextValue
+    ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     autoFocusView: true,
     fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
+    localeText,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange
@@ -68,26 +70,32 @@ export const useMobileRangePicker = _ref => {
   const fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({}, pickerFieldProps, {
+    additionalProps: _extends({
+      // Internal props
       readOnly: readOnly ?? true,
       disabled,
-      className,
-      sx,
       format,
       formatDensity,
       enableAccessibleFieldDOMStructure,
       selectedSections,
       onSelectedSectionsChange,
       timezone
-    }, fieldType === 'single-input' ? {
-      inputRef,
+    }, pickerFieldProps, {
+      // onChange and value
+
+      // Forwarded props
+      className,
+      sx
+    }, fieldType === 'single-input' && !!inputRef && {
+      inputRef
+    }, fieldType === 'single-input' && {
       name
-    } : {}),
-    ownerState: props
+    }),
+    ownerState
   });
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const enrichedFieldProps = useEnrichedRangePickerFieldProps({
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     fieldType,
     open,
     actions,
@@ -137,9 +145,7 @@ export const useMobileRangePicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
   });
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickersProvider, {
-    contextValue: contextValue,
-    localeText: localeText,
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
     children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
       open: open,
       slots: slots,
@@ -150,7 +156,7 @@ export const useMobileRangePicker = _ref => {
         children: renderCurrentView()
       }))
     }))]
-  });
+  }));
   return {
     renderPicker
   };

package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -18,6 +18,7 @@ export const useMultiInputDateRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -39,6 +40,7 @@ export const useMultiInputDateRangeField = ({
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: rangeValueManager
   });

package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -18,6 +18,7 @@ export const useMultiInputDateTimeRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -39,6 +40,7 @@ export const useMultiInputDateTimeRangeField = ({
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: rangeValueManager
   });

package/modern/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -18,6 +18,7 @@ export const useMultiInputTimeRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -40,7 +41,8 @@ export const useMultiInputTimeRangeField = ({
     value: valueProp,
     defaultValue,
     onChange,
-    valueManager: rangeValueManager
+    valueManager: rangeValueManager,
+    referenceDate
   });
   const {
     validationError,

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,16 +41,18 @@ export const useStaticRangePicker = _ref => {
   } = useRangePosition(props);
   const {
     layoutProps,
+    providerProps,
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
     autoFocusView: autoFocus ?? false,
     fieldRef: undefined,
+    localeText,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange
     },
-    wrapperVariant: displayStaticWrapperAs
+    variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const slotPropsForLayout = _extends({}, slotProps, {
@@ -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 = "MTczMjE0MzYwMDAwMA==";
+  const releaseInfo = "MTczMjIzMDAwMDAwMA==";
   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,
@@ -179,6 +176,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
+    referenceDate,
     defaultValue,
     onChange,
     valueManager: _valueManagers.rangeValueManager
@@ -252,10 +250,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];
@@ -317,7 +318,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       slots,
       slotProps
     },
-    ownerState: props
+    ownerState
   });
   const prevValue = React.useRef(null);
   React.useEffect(() => {
@@ -378,7 +379,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);
@@ -401,7 +403,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
@@ -522,9 +524,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,
   /**
@@ -544,7 +546,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,
@@ -615,8 +618,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,
   /**
@@ -642,7 +644,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,
@@ -667,8 +670,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,7 +106,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.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.
@@ -120,7 +119,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.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/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.
    */