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

package/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -8,7 +8,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 const useMultiInputFieldSlotProps = ({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -33,7 +33,7 @@ const useMultiInputFieldSlotProps = ({
   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;
@@ -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/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -57,7 +57,7 @@ export const useMobileRangePicker = _ref => {
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     autoFocusView: true,
     fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
     localeText,
@@ -95,7 +95,7 @@ export const useMobileRangePicker = _ref => {
   });
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const enrichedFieldProps = useEnrichedRangePickerFieldProps({
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     fieldType,
     open,
     actions,

package/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/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/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/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -52,7 +52,7 @@ export const useStaticRangePicker = _ref => {
       rangePosition,
       onRangePositionChange
     },
-    wrapperVariant: displayStaticWrapperAs
+    variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const slotPropsForLayout = _extends({}, slotProps, {

package/internals/utils/date-range-manager.d.ts

@@ -13,11 +13,12 @@ interface CalculateRangeChangeOptions {
      */
     allowRangeFlip?: boolean;
     shouldMergeDateAndTime?: boolean;
+    referenceDate?: PickerValidDate;
 }
 interface CalculateRangeChangeResponse {
     nextSelection: RangePosition;
     newRange: PickerRangeValue;
 }
-export declare function calculateRangeChange({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, }: CalculateRangeChangeOptions): CalculateRangeChangeResponse;
+export declare function calculateRangeChange({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, referenceDate, }: CalculateRangeChangeOptions): CalculateRangeChangeResponse;
 export declare function calculateRangePreview(options: CalculateRangeChangeOptions): PickerRangeValue;
 export {};

package/internals/utils/date-range-manager.js

@@ -5,7 +5,8 @@ export function calculateRangeChange({
   newDate: selectedDate,
   rangePosition,
   allowRangeFlip = false,
-  shouldMergeDateAndTime = false
+  shouldMergeDateAndTime = false,
+  referenceDate
 }) {
   const [start, end] = range;
   if (shouldMergeDateAndTime && selectedDate) {
@@ -17,29 +18,30 @@ export function calculateRangeChange({
       selectedDate = mergeDateAndTime(utils, selectedDate, end);
     }
   }
+  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? mergeDateAndTime(utils, selectedDate, referenceDate) : selectedDate;
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',
-      newRange: [end, selectedDate]
+      newRange: [end, newSelectedDate]
     } : {
       nextSelection: 'end',
-      newRange: [selectedDate, null]
+      newRange: [newSelectedDate, null]
     };
-    return Boolean(end) && utils.isAfter(selectedDate, end) ? truthyResult : {
+    return Boolean(end) && utils.isAfter(newSelectedDate, end) ? truthyResult : {
       nextSelection: 'end',
-      newRange: [selectedDate, end]
+      newRange: [newSelectedDate, end]
     };
   }
   const truthyResult = allowRangeFlip ? {
     nextSelection: 'end',
-    newRange: [selectedDate, start]
+    newRange: [newSelectedDate, start]
   } : {
     nextSelection: 'end',
-    newRange: [selectedDate, null]
+    newRange: [newSelectedDate, null]
   };
-  return Boolean(start) && utils.isBeforeDay(selectedDate, start) ? truthyResult : {
+  return Boolean(start) && utils.isBeforeDay(newSelectedDate, start) ? truthyResult : {
     nextSelection: 'start',
-    newRange: [start, selectedDate]
+    newRange: [start, newSelectedDate]
   };
 }
 export function calculateRangePreview(options) {

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMTUzODgwMDAwMA==";
+  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/DateRangeCalendar/DateRangeCalendar.js

@@ -169,6 +169,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
+    referenceDate,
     defaultValue,
     onChange,
     valueManager: rangeValueManager
@@ -210,7 +211,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       range: value,
       rangePosition,
       allowRangeFlip,
-      shouldMergeDateAndTime: true
+      shouldMergeDateAndTime: true,
+      referenceDate
     });
     const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
     if (isNextSectionAvailable) {

package/modern/DateRangePicker/DateRangePickerToolbar.js

@@ -99,12 +99,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -118,12 +112,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.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.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

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 { usePickerTranslations } 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,
@@ -183,12 +185,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -204,12 +200,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.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.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.0
+ * @mui/x-date-pickers-pro v8.0.0-alpha.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -60,7 +60,7 @@ export const useDesktopRangePicker = _ref => {
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
-    wrapperVariant: 'desktop',
+    variant: 'desktop',
     autoFocusView: false,
     fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
     localeText,
@@ -113,7 +113,7 @@ export const useDesktopRangePicker = _ref => {
     ownerState
   });
   const enrichedFieldProps = useEnrichedRangePickerFieldProps({
-    wrapperVariant: 'desktop',
+    variant: 'desktop',
     fieldType,
     open,
     actions,

package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -8,7 +8,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 const useMultiInputFieldSlotProps = ({
-  wrapperVariant,
+  variant,
   open,
   actions,
   readOnly,
@@ -33,7 +33,7 @@ const useMultiInputFieldSlotProps = ({
   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;
@@ -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

@@ -57,7 +57,7 @@ export const useMobileRangePicker = _ref => {
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     autoFocusView: true,
     fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
     localeText,
@@ -95,7 +95,7 @@ export const useMobileRangePicker = _ref => {
   });
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const enrichedFieldProps = useEnrichedRangePickerFieldProps({
-    wrapperVariant: 'mobile',
+    variant: 'mobile',
     fieldType,
     open,
     actions,

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

@@ -52,7 +52,7 @@ export const useStaticRangePicker = _ref => {
       rangePosition,
       onRangePositionChange
     },
-    wrapperVariant: displayStaticWrapperAs
+    variant: displayStaticWrapperAs
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const slotPropsForLayout = _extends({}, slotProps, {

package/modern/internals/utils/date-range-manager.js

@@ -5,7 +5,8 @@ export function calculateRangeChange({
   newDate: selectedDate,
   rangePosition,
   allowRangeFlip = false,
-  shouldMergeDateAndTime = false
+  shouldMergeDateAndTime = false,
+  referenceDate
 }) {
   const [start, end] = range;
   if (shouldMergeDateAndTime && selectedDate) {
@@ -17,29 +18,30 @@ export function calculateRangeChange({
       selectedDate = mergeDateAndTime(utils, selectedDate, end);
     }
   }
+  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? mergeDateAndTime(utils, selectedDate, referenceDate) : selectedDate;
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',
-      newRange: [end, selectedDate]
+      newRange: [end, newSelectedDate]
     } : {
       nextSelection: 'end',
-      newRange: [selectedDate, null]
+      newRange: [newSelectedDate, null]
     };
-    return Boolean(end) && utils.isAfter(selectedDate, end) ? truthyResult : {
+    return Boolean(end) && utils.isAfter(newSelectedDate, end) ? truthyResult : {
       nextSelection: 'end',
-      newRange: [selectedDate, end]
+      newRange: [newSelectedDate, end]
     };
   }
   const truthyResult = allowRangeFlip ? {
     nextSelection: 'end',
-    newRange: [selectedDate, start]
+    newRange: [newSelectedDate, start]
   } : {
     nextSelection: 'end',
-    newRange: [selectedDate, null]
+    newRange: [newSelectedDate, null]
   };
-  return Boolean(start) && utils.isBeforeDay(selectedDate, start) ? truthyResult : {
+  return Boolean(start) && utils.isBeforeDay(newSelectedDate, start) ? truthyResult : {
     nextSelection: 'start',
-    newRange: [start, selectedDate]
+    newRange: [start, newSelectedDate]
   };
 }
 export function calculateRangePreview(options) {

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMTUzODgwMDAwMA==";
+  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/node/DateRangeCalendar/DateRangeCalendar.js

@@ -176,6 +176,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
+    referenceDate,
     defaultValue,
     onChange,
     valueManager: _valueManagers.rangeValueManager
@@ -217,7 +218,8 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       range: value,
       rangePosition,
       allowRangeFlip,
-      shouldMergeDateAndTime: true
+      shouldMergeDateAndTime: true,
+      referenceDate
     });
     const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
     if (isNextSectionAvailable) {

package/node/DateRangePicker/DateRangePickerToolbar.js

@@ -106,12 +106,6 @@ 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.
    * @default `true` for Desktop, `false` for Mobile.
@@ -125,12 +119,6 @@ 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.
    */