@mui/x-date-pickers-pro 7.22.2 → 7.23.0

package/CHANGELOG.md

@@ -3,6 +3,175 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.23.0
+
+_Nov 29, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Support for a new display mode on the Data Grid with the [List View feature](https://mui.com/x/react-data-grid/list-view/), offering an extremely flexible way to render datasets and enabling developers to adapt how data is displayed across different screen sizes.
+
+  https://github.com/user-attachments/assets/61286adc-03fc-4323-9739-8ca726fcc16c
+
+- ⚛️ React 19 support
+- 📚 Documentation improvements
+- 🌍 Improve Spanish, Portuguese, Chinese locales on the Data Grid component.
+- 🌍 Improve Dutch locale on the Date and Time Picker components.
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@dloeda, @headironc, @mathzdev, @nphmuller, @lhilgert9, @lauri865.
+Following are all team members who have contributed to this release:
+@oliviertassinari, @arminmeh, @KenanYusuf, @flaviendelangle, @MBilalShafi.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@v7.23.0`
+
+- [DataGrid] React 19 support (#15557) @arminmeh
+- [DataGrid] Change test dom check from `/jsdom/` to `/jsdom|HappyDOM/`. (#15642) @jedesroches
+- [DataGrid] Fix last separator not being hidden when grid is scrollable (#15551) @KenanYusuf
+- [DataGrid] Fix order of spread props on toolbar items (#15556) @KenanYusuf
+- [DataGrid] Fix row-spanning in combination with column-pinning (#15460) @lhilgert9
+- [DataGrid] Improve resize performance (#15592) @lauri865
+- [DataGrid] Support column virtualization with dynamic row height (#15567) @cherniavskii
+- [DataGrid] Improve `GridCell` performance (#15621) @lauri865
+- [l10n] Improve Chinese (zh-CN) locale (#15570) @headironc
+- [l10n] Improve Portuguese (pt-PT) locale (#15561) @mathzdev
+
+#### `@mui/x-data-grid-pro@v7.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@v7.23.0`, plus:
+
+- [DataGridPro] Fix header filtering with `boolean` column type (#15640) @k-rajat19
+- [DataGridPro] Fix pagination state not updating if the data source response has no rows (#15643) @zinoroman
+- [DataGridPro] Fix selection propagation issue on initialization (#15593) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@v7.23.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@v7.23.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@v7.23.0`
+
+- [pickers] React 19 support (#15557) @arminmeh
+- [pickers] Fix DST issue with `America/Asuncion` timezone and `AdapterMoment` (#15653) @flaviendelangle
+- [pickers] Use `props.referenceDate` timezone when `props.value` and `props.defaultValue` are not defined (#15544) @flaviendelangle
+- [l10n] Improve Dutch (nl-NL) locale (#15564) @nphmuller
+
+#### `@mui/x-date-pickers-pro@v7.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@v7.23.0`.
+
+### Charts
+
+#### `@mui/x-charts@v7.23.0`
+
+- [charts] React 19 support (#15557) @arminmeh
+- [charts] Prevent invalid `releasePointerCapture` (#15609) @alexfauquette
+
+#### `@mui/x-charts-pro@v7.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@v7.23.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@v7.23.0`
+
+- [TreeView] React 19 support (#15557) @arminmeh
+
+#### `@mui/x-tree-view-pro@7.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@7.23.0`.
+
+### Docs
+
+- [docs] Add data caching to lazy loaded detail panel demo (#15555) @cherniavskii
+- [docs] Remove selectors section from list view docs (#15639) @KenanYusuf
+- [docs] Add documentation for the list view feature (#15344) @KenanYusuf
+
+### Core
+
+- [core] Update @mui/monorepo (#15574) @oliviertassinari
+
+## 7.22.3
+
+_Nov 21, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Charts Pro get stable. The [zoom](https://mui.com/x/react-charts/zoom-and-pan/) and [Heatmap](https://mui.com/x/react-charts/heatmap/) are now stable.
+- 🌍 Improve Chinese, Spanish, Swedish, and Turkish locales on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@CarlosLopezLg, @headironc, @viktormelin, @qerkules, @DungTiger, @hendrikpeilke, @k-rajat19.
+Following are all team members who have contributed to this release:
+@alexfauquette, @LukasTy, @MBilalShafi, @flaviendelangle.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.3`
+
+- [DataGrid] Add prop to override search input props in `GridColumnsManagement` (#15476) @k-rajat19
+- [DataGrid] Add test coverage for issues fixed in #15184 @MBilalShafi
+- [DataGrid] Fix memoized selectors with arguments (#15336) @MBilalShafi
+- [DataGrid] Fix right column group header border with virtualization (#15503) @hendrikpeilke
+- [DataGrid] Pass reason to `onPaginationModelChange` (#15402) @DungTiger
+- [DataGrid] Set default overlay height in flex parent layout (#15535) @cherniavskii
+- [l10n] Improve Chinese (zh-CN) locale (#15365) @headironc
+- [l10n] Improve Spanish (es-ES) locale (#15369) @CarlosLopezLg
+- [l10n] Improve Swedish (sv-SE) locale (#15371) @viktormelin
+- [l10n] Improve Turkish (tr-TR) locale (#15414) @qerkules
+
+#### `@mui/x-data-grid-pro@7.22.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.22.3`.
+
+#### `@mui/x-data-grid-premium@7.22.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.22.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.3`
+
+- [pickers] Always use `props.value` when it changes (#15500) @flaviendelangle
+- [pickers] Ensure internal value timezone is updated (#15491) @LukasTy
+- [pickers] Fix `DateTimeRangePicker` error when using format without time (#15341) @fxnoob
+- [pickers] Fix unused code in `PickersToolbar` component (#15525) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.22.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.22.3`, plus:
+
+- [DateTimeRangePicker] Use time in `referenceDate` when selecting date (#15431) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.22.3`
+
+No changes since `@mui/x-charts@7.22.2`.
+
+#### `@mui/x-charts-pro@7.22.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+- [charts-pro] Fix missing typeOverload (#15400) @alexfauquette
+
+### Docs
+
+- [docs] Add `PickersPopper` component to customization playground (#15397) @LukasTy
+- [docs] Add `next` version links (#15423) @LukasTy
+- [docs] Use the `loading` state in the demos (#15538) @cherniavskii
+
+- [code-infra] Tentative fix for Argos flaky screenshot tests (#15399) @JCQuintas
+- [docs-infra] Transpile `.ts` demo files (#15421) @KenanYusuf
+- [core] Clarify release version bump strategy (#15536) @cherniavskii
+
 ## 7.22.2
 
 _Nov 8, 2024_

package/DateRangeCalendar/DateRangeCalendar.js

@@ -172,6 +172,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
+    referenceDate,
     defaultValue,
     onChange,
     valueManager: rangeValueManager
@@ -213,7 +214,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/README.md

@@ -34,9 +34,9 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.14",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "@mui/material": "^5.15.14 || ^6.0.0",
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

package/index.js

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

package/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -33,7 +33,7 @@ const useMultiInputFieldSlotProps = ({
   const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
-    if (!open) {
+    if (!open || wrapperVariant === '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, wrapperVariant]);
   const openRangeStartSelection = event => {
     event.stopPropagation();
     onRangePositionChange('start');
@@ -166,7 +166,7 @@ const useSingleInputFieldSlotProps = ({
 }) => {
   const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, startFieldRef, endFieldRef);
   React.useEffect(() => {
-    if (!open || !startFieldRef.current) {
+    if (!open || !startFieldRef.current || wrapperVariant === '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, wrapperVariant]);
   const updateRangePosition = () => {
     if (!startFieldRef.current?.isFieldFocused()) {
       return;

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/utils/date-range-manager.d.ts

@@ -12,11 +12,12 @@ interface CalculateRangeChangeOptions<TDate extends PickerValidDate> {
      */
     allowRangeFlip?: boolean;
     shouldMergeDateAndTime?: boolean;
+    referenceDate?: TDate | null;
 }
 interface CalculateRangeChangeResponse<TDate extends PickerValidDate> {
     nextSelection: RangePosition;
     newRange: DateRange<TDate>;
 }
-export declare function calculateRangeChange<TDate extends PickerValidDate>({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, }: CalculateRangeChangeOptions<TDate>): CalculateRangeChangeResponse<TDate>;
+export declare function calculateRangeChange<TDate extends PickerValidDate>({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, referenceDate, }: CalculateRangeChangeOptions<TDate>): CalculateRangeChangeResponse<TDate>;
 export declare function calculateRangePreview<TDate extends PickerValidDate>(options: CalculateRangeChangeOptions<TDate>): DateRange<TDate>;
 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 = "MTczMTAyMDQwMDAwMA==";
+  const releaseInfo = "MTczMjgzNDgwMDAwMA==";
   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

@@ -172,6 +172,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
+    referenceDate,
     defaultValue,
     onChange,
     valueManager: rangeValueManager
@@ -213,7 +214,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/index.js

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

package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -33,7 +33,7 @@ const useMultiInputFieldSlotProps = ({
   const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
-    if (!open) {
+    if (!open || wrapperVariant === '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, wrapperVariant]);
   const openRangeStartSelection = event => {
     event.stopPropagation();
     onRangePositionChange('start');
@@ -166,7 +166,7 @@ const useSingleInputFieldSlotProps = ({
 }) => {
   const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, startFieldRef, endFieldRef);
   React.useEffect(() => {
-    if (!open || !startFieldRef.current) {
+    if (!open || !startFieldRef.current || wrapperVariant === '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, wrapperVariant]);
   const updateRangePosition = () => {
     if (!startFieldRef.current?.isFieldFocused()) {
       return;

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/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 = "MTczMTAyMDQwMDAwMA==";
+  const releaseInfo = "MTczMjgzNDgwMDAwMA==";
   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

@@ -179,6 +179,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
+    referenceDate,
     defaultValue,
     onChange,
     valueManager: _valueManagers.rangeValueManager
@@ -220,7 +221,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/index.js

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

package/node/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -41,7 +41,7 @@ const useMultiInputFieldSlotProps = ({
   const handleEndFieldRef = (0, _useForkRef.default)(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
-    if (!open) {
+    if (!open || wrapperVariant === 'mobile') {
       return;
     }
     const currentFieldRef = rangePosition === 'start' ? startFieldRef : endFieldRef;
@@ -57,7 +57,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, wrapperVariant]);
   const openRangeStartSelection = event => {
     event.stopPropagation();
     onRangePositionChange('start');
@@ -174,7 +174,7 @@ const useSingleInputFieldSlotProps = ({
 }) => {
   const handleFieldRef = (0, _useForkRef.default)(fieldProps.unstableFieldRef, startFieldRef, endFieldRef);
   React.useEffect(() => {
-    if (!open || !startFieldRef.current) {
+    if (!open || !startFieldRef.current || wrapperVariant === 'mobile') {
       return;
     }
     if (startFieldRef.current.isFieldFocused()) {
@@ -187,7 +187,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, wrapperVariant]);
   const updateRangePosition = () => {
     if (!startFieldRef.current?.isFieldFocused()) {
       return;

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

@@ -25,6 +25,7 @@ const useMultiInputDateRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -46,6 +47,7 @@ const useMultiInputDateRangeField = ({
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: _valueManagers.rangeValueManager
   });

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

@@ -25,6 +25,7 @@ const useMultiInputDateTimeRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -46,6 +47,7 @@ const useMultiInputDateTimeRangeField = ({
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate,
     onChange,
     valueManager: _valueManagers.rangeValueManager
   });

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

@@ -25,6 +25,7 @@ const useMultiInputTimeRangeField = ({
   const {
     value: valueProp,
     defaultValue,
+    referenceDate,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
@@ -47,7 +48,8 @@ const useMultiInputTimeRangeField = ({
     value: valueProp,
     defaultValue,
     onChange,
-    valueManager: _valueManagers.rangeValueManager
+    valueManager: _valueManagers.rangeValueManager,
+    referenceDate
   });
   const {
     validationError,

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

@@ -12,7 +12,8 @@ function calculateRangeChange({
   newDate: selectedDate,
   rangePosition,
   allowRangeFlip = false,
-  shouldMergeDateAndTime = false
+  shouldMergeDateAndTime = false,
+  referenceDate
 }) {
   const [start, end] = range;
   if (shouldMergeDateAndTime && selectedDate) {
@@ -24,29 +25,30 @@ function calculateRangeChange({
       selectedDate = (0, _internals.mergeDateAndTime)(utils, selectedDate, end);
     }
   }
+  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? (0, _internals.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]
   };
 }
 function calculateRangePreview(options) {

package/node/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTczMTAyMDQwMDAwMA==";
+  const releaseInfo = "MTczMjgzNDgwMDAwMA==";
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "7.22.2",
+  "version": "7.23.0",
   "description": "The Pro plan edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,9 +37,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-date-pickers": "7.22.2",
-    "@mui/x-internals": "7.21.0",
-    "@mui/x-license": "7.21.0"
+    "@mui/x-date-pickers": "7.23.0",
+    "@mui/x-internals": "7.23.0",
+    "@mui/x-license": "7.23.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -53,8 +53,8 @@
     "moment": "^2.29.4",
     "moment-hijri": "^2.1.2 || ^3.0.0",
     "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {