@mui/x-date-pickers-pro 8.6.0 → 8.8.0

package/CHANGELOG.md

@@ -5,6 +5,207 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.8.0
+
+_Jul 11, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Chart zoom preview can be enabled
+
+  <img width="758" alt="chart with x-axis preview" src="https://github.com/user-attachments/assets/50ce6f61-16dc-4e9b-a727-ca65d80927d7" />
+
+- 🌎 Add Indonesian (id-ID) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@kennarddh
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @prakhargupta1, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.8.0`
+
+- [DataGrid] Fix `useGridSelector` missing subscription in `React.StrictMode` (#18676) @cherniavskii
+- [DataGrid] Fix scrollbar filler `z-index` (#18688) @KenanYusuf
+- [DataGrid] Set correct data source cache chunk size when pagination is disabled (#18636) @arminmeh
+- [l10n] Add Indonesian (id-ID) locale (#18710) @kennarddh
+
+#### `@mui/x-data-grid-pro@8.8.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@8.8.0`, plus:
+
+- [DataGridPro] Fix row ordering not auto-scrolling when moving beyond viewport (#18557) @MBilalShafi
+- [DataGridPro] Set correct parent paths when tree is refreshed with data source tree data and row grouping (#18715) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.8.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@8.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.8.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.8.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@8.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.8.0`
+
+- [charts] Add control to the axis highlight (#17900) @alexfauquette
+- [charts] Avoid processing area plot data if area isn't used in series (#18712) @bernardobelchior
+- [charts] Make smarter default domain limit (#18506) @alexfauquette
+
+#### `@mui/x-charts-pro@8.8.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@8.8.0`, plus:
+
+- [charts-pro] Add `funnelDirection` to control pyramid direction (#18568) @JCQuintas
+- [charts-pro] Add `onBeforeExport` callback (#18722) @bernardobelchior
+- [charts-pro] Add chart zoom preview (#18267) @bernardobelchior
+- [charts-pro] Allow customizing scatter preview marker size (#18726) @bernardobelchior
+- [charts-pro] Allow disabling the copy of styles in charts export (#18753) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.8.0`
+
+- [tree view] Fix state update that caused scrolling bug when lazy loading and `checkboxSelection` are enabled (#18749) @rita-codes
+
+#### `@mui/x-tree-view-pro@8.8.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@8.8.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.8.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add standalone Pyramid chart page to improve SEO (#18527) @prakhargupta1
+- [docs] Add example to customise line interaction (#18539) @alexfauquette
+- [docs] Fix `size` column filtering in files tree demo (#17952) @cherniavskii
+- [docs] Generate `llms.txt` for X and their products (#18595) @siriwatknp
+- [docs] Improve bar chart demos on mobile (#18721) @alexfauquette
+- [docs] Refine charts overview page (#17447) @noraleonte
+
+### Miscellaneous
+
+- [code-infra] Ensure all `@mui/*` packages are picked by `Material UI` renovate group (#18711) @LukasTy
+- [code-infra] Fix broken CI (#18716) @LukasTy
+- [code-infra] Refactor `prettier` config resolving (#18720) @LukasTy
+- [test] Increase data points in chart benchmarks (#18714) @bernardobelchior
+
+## 8.7.0
+
+_Jul 4, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add `useChartProApiRef` for easier access to the API
+- 📆 Support different start and end `referenceDate` props on range components
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+- 🌎 Improve Greek (el-GR) translations on the Charts
+- 🌎 Improve Danish (da-DK) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@ShahrazH, @vadimkuragkovskiy, @whythecode
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @brijeshb42, @mapache-salvaje, @arminmeh, @bernardobelchior, @bharatkashyap, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.7.0`
+
+- [DataGrid] Fix column state restore with controlled column visibility model (#18567) @arminmeh
+- [DataGrid] Fix styling virtualized column headers (#18603) @KenanYusuf
+- [l10n] Improve Danish (da-DK) locale (#18537) @ShahrazH
+
+#### `@mui/x-data-grid-pro@8.7.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@8.7.0`.
+
+#### `@mui/x-data-grid-premium@8.7.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@8.7.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.7.0`
+
+- [pickers] Support different `start` and `end` `referenceDate` props on range components (#18549) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.7.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@8.7.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.7.0`
+
+- [charts] Export `ChartsReferenceLineProps` (#18598) @bernardobelchior
+- [charts] Extract bar and line plot logic into reusable hooks (#18541) @bernardobelchior
+- [charts] Extract plot logic into separate files for reuse (#18522) @bernardobelchior
+- [charts] Profile charts benchmarks using chromium (#18528) @bernardobelchior
+- [l10n] Add Greek (el-GR) locale to charts (#18548) @whythecode
+
+#### `@mui/x-charts-pro@8.7.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@8.7.0`, plus:
+
+- [charts-pro] Add `useChartProApiRef` for easier refs (#18013) @JCQuintas
+- [charts-pro] Add tests and classes to zoom slider (#18660) @JCQuintas
+- [charts-pro] Fix geometry not handling gestures in specific scenarios (#18651) @JCQuintas
+- [charts-pro] Rename `useChartApiContext` to `useChartProApiContext` (#18565) @JCQuintas
+- [charts-pro] Zoom pointer improvements (#17480) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.7.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.7.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@8.7.0`, plus:
+
+- [tree view pro] Add missing `dataSource` JSDoc (#18650) @LukasTy
+
+### Docs
+
+- [docs] Add MCP stub (#18204) @bharatkashyap
+- [docs] Fix AI Assistant proxy rewrite prefix (#18661) @arminmeh
+- [docs] Improve test README.MD (#18634) @LukasTy
+- [docs] Provide workaround for pie chart composition (#18600) @alexfauquette
+- [docs][charts] Add donut chart as a special case of a pie chart (#18652) @bernardobelchior
+- [docs][charts] Centralize country and continent data (#18604) @bernardobelchior
+- [docs][data grid] Audit and revise the Pro row docs (#17926) @mapache-salvaje
+- [docs][pickers] Add mention of theme augmentation in relevant migration section (#18608) @LukasTy
+
+### Core
+
+- [core] Avoid stringifying `document` object (#18657) @vadimkuragkovskiy
+
+### Miscellaneous
+
+- [code-infra] Bump code-infra version and fix breaking changes (#18653) @brijeshb42
+- [code-infra] Ensure `material-ui/disallow-react-api-in-server-components` ESLint rule is applied (#18570) @LukasTy
+- [code-infra] Migrate to flat eslint config (#18562) @brijeshb42
+- [code-infra] Refactor eslint config (#18643) @LukasTy
+- [infra] Add renovatebot rule for latest infra packages (#18609) @Janpot
+- [infra] Move pushArgos script to code-infra (#18667) @Janpot
+- [infra] Updates release script to fetch latest major version from upstream (#18552) @michelengelen
+- [release] Add missing contributor to changelog (#18561) @bernardobelchior
+
 ## 8.6.0
 
 _Jun 27, 2025_
@@ -19,7 +220,7 @@ We'd like to extend a big thank you to the 12 contributors who made this release
 - 🌎 Improve German (de-DE) locale
 
 Special thanks go out to the community members for their valuable contributions:
-@ShahrazH, @vadimka123
+@omalyutin, @ShahrazH, @vadimka123
 
 The following are all team members who have contributed to this release:
 @arminmeh, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @sai6855

package/DateRangeCalendar/DateRangeCalendar.js

@@ -37,7 +37,7 @@ var _DateRangePickerDay2 = require("../DateRangePickerDay2");
 var _jsxRuntime = require("react/jsx-runtime");
 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", "focusedView", "onFocusedViewChange", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
-const releaseInfo = "MTc1MDk3NTIwMDAwMA==";
+const releaseInfo = "MTc1MjE4NDgwMDAwMA==";
 const DateRangeCalendarRoot = (0, _styles.styled)('div', {
   name: 'MuiDateRangeCalendar',
   slot: 'Root'
@@ -284,7 +284,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     onMonthSwitchingAnimationEnd
   } = (0, _internals.useCalendarState)({
     value: value[0] || value[1],
-    referenceDate,
+    referenceDate: (0, _dateRangeManager.resolveReferenceDate)(referenceDate, rangePosition),
     disableFuture,
     disablePast,
     maxDate,
@@ -687,7 +687,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object.isRequired), _propTypes.default.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -73,7 +73,7 @@ export interface DateRangeCalendarProps extends ExportedDateRangeCalendarProps,
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
    */
-  referenceDate?: PickerValidDate;
+  referenceDate?: PickerValidDate | [PickerValidDate, PickerValidDate];
   /**
    * The number of calendars to render.
    * @default 2

package/DateRangePicker/DateRangePicker.js

@@ -275,7 +275,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/DateRangePickerDay/DateRangePickerDay.js

@@ -235,7 +235,7 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
       showDaysOutsideCurrentMonth
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1MDk3NTIwMDAwMA==");
+  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1MjE4NDgwMDAwMA==");
   const adapter = (0, _hooks.usePickerAdapter)();
   const shouldRenderHighlight = isHighlighting && !outsideCurrentMonth;
   const shouldRenderPreview = isPreviewing && !outsideCurrentMonth;

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -320,7 +320,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -11,7 +11,7 @@ var _hooks = require("@mui/x-date-pickers/hooks");
 var _dateUtils = require("../internals/utils/date-utils");
 var _dateRangeManager = require("../internals/utils/date-range-manager");
 var _hooks2 = require("../hooks");
-const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
+const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className", "referenceDate"];
 /**
  * @ignore - internal component.
  */
@@ -23,7 +23,8 @@ function DateTimeRangePickerTimeWrapper(props) {
       onChange,
       defaultValue,
       onViewChange,
-      views
+      views,
+      referenceDate: referenceDateProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -34,6 +35,7 @@ function DateTimeRangePickerTimeWrapper(props) {
   }
   const currentValue = (rangePosition === 'start' ? value?.[0] : value?.[1]) ?? null;
   const currentDefaultValue = (rangePosition === 'start' ? defaultValue?.[0] : defaultValue?.[1]) ?? null;
+  const referenceDate = (0, _dateRangeManager.resolveReferenceDate)(referenceDateProp, rangePosition);
   const handleOnChange = (newDate, selectionState, selectedView) => {
     if (!onChange || !value) {
       return;
@@ -50,6 +52,7 @@ function DateTimeRangePickerTimeWrapper(props) {
     onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
   };
   return viewRenderer((0, _extends2.default)({}, other, {
+    referenceDate,
     views,
     onViewChange,
     value: currentValue,

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -285,7 +285,7 @@ DesktopDateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -30,6 +30,7 @@ var _SingleInputDateTimeRangeField = require("../SingleInputDateTimeRangeField")
 var _DateTimeRangePickerTimeWrapper = require("../DateTimeRangePicker/DateTimeRangePickerTimeWrapper");
 var _dimensions = require("../internals/constants/dimensions");
 var _hooks2 = require("../hooks");
+var _dateRangeManager = require("../internals/utils/date-range-manager");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["openTo"];
 const STEPS = [{
@@ -63,8 +64,11 @@ const rendererInterceptor = function RendererInterceptor(props) {
     }]
   });
   const isTimeViewActive = (0, _internals.isInternalTimeView)(popperView);
+  const referenceDate = (0, _dateRangeManager.resolveReferenceDate)(rendererProps.referenceDate, rangePosition);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [viewRenderers.day?.((0, _extends2.default)({}, rendererProps, {
+      referenceDate,
+      rangePosition,
       availableRangePositions: [rangePosition],
       view: !isTimeViewActive ? popperView : 'day',
       views: rendererProps.views.filter(_internals.isDatePickerView),
@@ -77,6 +81,7 @@ const rendererInterceptor = function RendererInterceptor(props) {
         gridColumn: 2
       }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimeRangePickerTimeWrapper.DateTimeRangePickerTimeWrapper, (0, _extends2.default)({}, finalProps, {
+      referenceDate: referenceDate,
       view: isTimeViewActive ? popperView : 'hours',
       views: finalProps.views.filter(_internals.isInternalTimeView),
       openTo: (0, _internals.isInternalTimeView)(openTo) ? openTo : 'hours',
@@ -410,7 +415,7 @@ DesktopDateTimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/DesktopTimeRangePicker/DesktopTimeRangePicker.js

@@ -316,7 +316,7 @@ DesktopTimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -282,7 +282,7 @@ MobileDateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -415,7 +415,7 @@ MobileDateTimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/MobileTimeRangePicker/MobileTimeRangePicker.js

@@ -304,7 +304,7 @@ MobileTimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -134,7 +134,7 @@ MultiInputDateRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -167,7 +167,7 @@ MultiInputDateTimeRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -150,7 +150,7 @@ MultiInputTimeRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -237,7 +237,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -270,7 +270,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -252,7 +252,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/StaticDateRangePicker/StaticDateRangePicker.js

@@ -227,7 +227,7 @@ StaticDateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/TimeRangePicker/TimeRangePicker.js

@@ -250,7 +250,7 @@ process.env.NODE_ENV !== "production" ? TimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/TimeRangePicker/TimeRangePickerTimeWrapper.js

@@ -11,7 +11,7 @@ var _hooks = require("@mui/x-date-pickers/hooks");
 var _dateUtils = require("../internals/utils/date-utils");
 var _dateRangeManager = require("../internals/utils/date-range-manager");
 var _hooks2 = require("../hooks");
-const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
+const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className", "referenceDate"];
 /**
  * @ignore - internal component.
  */
@@ -23,7 +23,8 @@ function TimeRangePickerTimeWrapper(props) {
       onChange,
       defaultValue,
       onViewChange,
-      views
+      views,
+      referenceDate: referenceDateProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -34,6 +35,7 @@ function TimeRangePickerTimeWrapper(props) {
   }
   const currentValue = (rangePosition === 'start' ? value?.[0] : value?.[1]) ?? null;
   const currentDefaultValue = (rangePosition === 'start' ? defaultValue?.[0] : defaultValue?.[1]) ?? null;
+  const referenceDate = (0, _dateRangeManager.resolveReferenceDate)(referenceDateProp, rangePosition);
   const handleOnChange = (newDate, selectionState, selectedView) => {
     if (!onChange || !value) {
       return;
@@ -50,6 +52,7 @@ function TimeRangePickerTimeWrapper(props) {
     onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
   };
   return viewRenderer((0, _extends2.default)({}, other, {
+    referenceDate,
     views,
     onViewChange,
     value: currentValue,

package/esm/DateRangeCalendar/DateRangeCalendar.js

@@ -20,7 +20,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from "../internals/utils/date-utils.js";
-import { calculateRangeChange, calculateRangePreview } from "../internals/utils/date-range-manager.js";
+import { calculateRangeChange, calculateRangePreview, resolveReferenceDate } from "../internals/utils/date-range-manager.js";
 import { DateRangePickerDay, dateRangePickerDayClasses as dayClasses } from "../DateRangePickerDay/index.js";
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { useDragRange } from "./useDragRange.js";
@@ -30,7 +30,7 @@ import { PickersRangeCalendarHeader } from "../PickersRangeCalendarHeader/index.
 import { useNullablePickerRangePositionContext } from "../internals/hooks/useNullablePickerRangePositionContext.js";
 import { dateRangePickerDay2Classes } from "../DateRangePickerDay2/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc1MDk3NTIwMDAwMA==";
+const releaseInfo = "MTc1MjE4NDgwMDAwMA==";
 const DateRangeCalendarRoot = styled('div', {
   name: 'MuiDateRangeCalendar',
   slot: 'Root'
@@ -277,7 +277,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     onMonthSwitchingAnimationEnd
   } = useCalendarState({
     value: value[0] || value[1],
-    referenceDate,
+    referenceDate: resolveReferenceDate(referenceDate, rangePosition),
     disableFuture,
     disablePast,
     maxDate,
@@ -680,7 +680,7 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object.isRequired), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -73,7 +73,7 @@ export interface DateRangeCalendarProps extends ExportedDateRangeCalendarProps,
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
    */
-  referenceDate?: PickerValidDate;
+  referenceDate?: PickerValidDate | [PickerValidDate, PickerValidDate];
   /**
    * The number of calendars to render.
    * @default 2

package/esm/DateRangePicker/DateRangePicker.js

@@ -268,7 +268,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/DateRangePickerDay/DateRangePickerDay.js

@@ -228,7 +228,7 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
       showDaysOutsideCurrentMonth
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  useLicenseVerifier('x-date-pickers-pro', "MTc1MDk3NTIwMDAwMA==");
+  useLicenseVerifier('x-date-pickers-pro', "MTc1MjE4NDgwMDAwMA==");
   const adapter = usePickerAdapter();
   const shouldRenderHighlight = isHighlighting && !outsideCurrentMonth;
   const shouldRenderPreview = isPreviewing && !outsideCurrentMonth;

package/esm/DateTimeRangePicker/DateTimeRangePicker.js

@@ -313,7 +313,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
+const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className", "referenceDate"];
 import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { isRangeValid } from "../internals/utils/date-utils.js";
-import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
+import { calculateRangeChange, resolveReferenceDate } from "../internals/utils/date-range-manager.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
 /**
  * @ignore - internal component.
@@ -16,7 +16,8 @@ function DateTimeRangePickerTimeWrapper(props) {
       onChange,
       defaultValue,
       onViewChange,
-      views
+      views,
+      referenceDate: referenceDateProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -27,6 +28,7 @@ function DateTimeRangePickerTimeWrapper(props) {
   }
   const currentValue = (rangePosition === 'start' ? value?.[0] : value?.[1]) ?? null;
   const currentDefaultValue = (rangePosition === 'start' ? defaultValue?.[0] : defaultValue?.[1]) ?? null;
+  const referenceDate = resolveReferenceDate(referenceDateProp, rangePosition);
   const handleOnChange = (newDate, selectionState, selectedView) => {
     if (!onChange || !value) {
       return;
@@ -43,6 +45,7 @@ function DateTimeRangePickerTimeWrapper(props) {
     onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
   };
   return viewRenderer(_extends({}, other, {
+    referenceDate,
     views,
     onViewChange,
     value: currentValue,

package/esm/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -278,7 +278,7 @@ DesktopDateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -24,6 +24,7 @@ import { SingleInputDateTimeRangeField } from "../SingleInputDateTimeRangeField/
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
+import { resolveReferenceDate } from "../internals/utils/date-range-manager.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const STEPS = [{
   views: null,
@@ -56,8 +57,11 @@ const rendererInterceptor = function RendererInterceptor(props) {
     }]
   });
   const isTimeViewActive = isInternalTimeView(popperView);
+  const referenceDate = resolveReferenceDate(rendererProps.referenceDate, rangePosition);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [viewRenderers.day?.(_extends({}, rendererProps, {
+      referenceDate,
+      rangePosition,
       availableRangePositions: [rangePosition],
       view: !isTimeViewActive ? popperView : 'day',
       views: rendererProps.views.filter(isDatePickerView),
@@ -70,6 +74,7 @@ const rendererInterceptor = function RendererInterceptor(props) {
         gridColumn: 2
       }
     }), /*#__PURE__*/_jsx(DateTimeRangePickerTimeWrapper, _extends({}, finalProps, {
+      referenceDate: referenceDate,
       view: isTimeViewActive ? popperView : 'hours',
       views: finalProps.views.filter(isInternalTimeView),
       openTo: isInternalTimeView(openTo) ? openTo : 'hours',
@@ -403,7 +408,7 @@ DesktopDateTimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/DesktopTimeRangePicker/DesktopTimeRangePicker.js

@@ -309,7 +309,7 @@ DesktopTimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/esm/MobileDateRangePicker/MobileDateRangePicker.js

@@ -275,7 +275,7 @@ MobileDateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -408,7 +408,7 @@ MobileDateTimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/MobileTimeRangePicker/MobileTimeRangePicker.js

@@ -297,7 +297,7 @@ MobileTimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/esm/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -130,7 +130,7 @@ MultiInputDateRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/esm/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -163,7 +163,7 @@ MultiInputDateTimeRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/esm/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -146,7 +146,7 @@ MultiInputTimeRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/esm/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -230,7 +230,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/esm/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -263,7 +263,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/esm/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -245,7 +245,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/esm/StaticDateRangePicker/StaticDateRangePicker.js

@@ -220,7 +220,7 @@ StaticDateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/TimeRangePicker/TimeRangePicker.js

@@ -243,7 +243,7 @@ process.env.NODE_ENV !== "production" ? TimeRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/esm/TimeRangePicker/TimeRangePickerTimeWrapper.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
+const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className", "referenceDate"];
 import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { isRangeValid } from "../internals/utils/date-utils.js";
-import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
+import { calculateRangeChange, resolveReferenceDate } from "../internals/utils/date-range-manager.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
 /**
  * @ignore - internal component.
@@ -16,7 +16,8 @@ function TimeRangePickerTimeWrapper(props) {
       onChange,
       defaultValue,
       onViewChange,
-      views
+      views,
+      referenceDate: referenceDateProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -27,6 +28,7 @@ function TimeRangePickerTimeWrapper(props) {
   }
   const currentValue = (rangePosition === 'start' ? value?.[0] : value?.[1]) ?? null;
   const currentDefaultValue = (rangePosition === 'start' ? defaultValue?.[0] : defaultValue?.[1]) ?? null;
+  const referenceDate = resolveReferenceDate(referenceDateProp, rangePosition);
   const handleOnChange = (newDate, selectionState, selectedView) => {
     if (!onChange || !value) {
       return;
@@ -43,6 +45,7 @@ function TimeRangePickerTimeWrapper(props) {
     onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
   };
   return viewRenderer(_extends({}, other, {
+    referenceDate,
     views,
     onViewChange,
     value: currentValue,

package/esm/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';

package/esm/hooks/useMultiInputRangeField/useTextFieldProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["clearable", "onClear", "openPickerAriaLabel"];

package/esm/index.js

@@ -1,10 +1,11 @@
 /**
- * @mui/x-date-pickers-pro v8.6.0
+ * @mui/x-date-pickers-pro v8.8.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// eslint-disable-next-line no-restricted-imports
 export * from '@mui/x-date-pickers';
 export * from "./DateRangePickerDay/index.js";
 export * from "./DateRangePickerDay2/index.js";

package/esm/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -19,7 +19,7 @@ export const useDesktopRangePicker = _ref => {
       steps
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
-  useLicenseVerifier('x-date-pickers-pro', "MTc1MDk3NTIwMDAwMA==");
+  useLicenseVerifier('x-date-pickers-pro', "MTc1MjE4NDgwMDAwMA==");
   const {
     slots,
     slotProps,

package/esm/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -21,7 +21,7 @@ export const useMobileRangePicker = _ref => {
       steps
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
-  useLicenseVerifier('x-date-pickers-pro', "MTc1MDk3NTIwMDAwMA==");
+  useLicenseVerifier('x-date-pickers-pro', "MTc1MjE4NDgwMDAwMA==");
   const {
     slots,
     slotProps: innerSlotProps,

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

@@ -13,12 +13,13 @@ interface CalculateRangeChangeOptions {
    */
   allowRangeFlip?: boolean;
   shouldMergeDateAndTime?: boolean;
-  referenceDate?: PickerValidDate;
+  referenceDate?: PickerValidDate | [PickerValidDate, PickerValidDate];
 }
 interface CalculateRangeChangeResponse {
   nextSelection: RangePosition;
   newRange: PickerRangeValue;
 }
+export declare function resolveReferenceDate(referenceDate: PickerValidDate | [PickerValidDate, PickerValidDate] | undefined, rangePosition: RangePosition): PickerValidDate | undefined;
 export declare function calculateRangeChange({
   adapter,
   range,

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

@@ -1,4 +1,10 @@
 import { mergeDateAndTime } from '@mui/x-date-pickers/internals';
+export function resolveReferenceDate(referenceDate, rangePosition) {
+  if (Array.isArray(referenceDate)) {
+    return rangePosition === 'start' ? referenceDate[0] : referenceDate[1];
+  }
+  return referenceDate;
+}
 export function calculateRangeChange({
   adapter,
   range,
@@ -19,7 +25,7 @@ export function calculateRangeChange({
       selectedDate = mergeDateAndTime(adapter, selectedDate, end);
     }
   }
-  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? mergeDateAndTime(adapter, selectedDate, referenceDate) : selectedDate;
+  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? mergeDateAndTime(adapter, selectedDate, resolveReferenceDate(referenceDate, rangePosition)) : selectedDate;
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',

package/esm/internals/utils/valueManagers.js

@@ -18,7 +18,9 @@ export const rangeValueManager = {
       return value;
     }
     const referenceDate = referenceDateProp ?? getDefaultReferenceDate(params);
-    return [shouldKeepStartDate ? value[0] : referenceDate, shouldKeepEndDate ? value[1] : referenceDate];
+    const startReferenceDate = Array.isArray(referenceDate) ? referenceDate[0] : referenceDate;
+    const endReferenceDate = Array.isArray(referenceDate) ? referenceDate[1] : referenceDate;
+    return [shouldKeepStartDate ? value[0] : startReferenceDate, shouldKeepEndDate ? value[1] : endReferenceDate];
   },
   cleanValue: (utils, value) => value.map(date => replaceInvalidDateByNull(utils, date)),
   areValuesEqual: (utils, a, b) => areDatesEqual(utils, a[0], b[0]) && areDatesEqual(utils, a[1], b[1]),

package/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/hooks/useMultiInputRangeField/useTextFieldProps.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/index.js

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

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -27,7 +27,7 @@ const useDesktopRangePicker = _ref => {
       steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1MDk3NTIwMDAwMA==");
+  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1MjE4NDgwMDAwMA==");
   const {
     slots,
     slotProps,

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -29,7 +29,7 @@ const useMobileRangePicker = _ref => {
       steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1MDk3NTIwMDAwMA==");
+  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1MjE4NDgwMDAwMA==");
   const {
     slots,
     slotProps: innerSlotProps,

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

@@ -13,12 +13,13 @@ interface CalculateRangeChangeOptions {
    */
   allowRangeFlip?: boolean;
   shouldMergeDateAndTime?: boolean;
-  referenceDate?: PickerValidDate;
+  referenceDate?: PickerValidDate | [PickerValidDate, PickerValidDate];
 }
 interface CalculateRangeChangeResponse {
   nextSelection: RangePosition;
   newRange: PickerRangeValue;
 }
+export declare function resolveReferenceDate(referenceDate: PickerValidDate | [PickerValidDate, PickerValidDate] | undefined, rangePosition: RangePosition): PickerValidDate | undefined;
 export declare function calculateRangeChange({
   adapter,
   range,

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

@@ -5,7 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.calculateRangeChange = calculateRangeChange;
 exports.calculateRangePreview = calculateRangePreview;
+exports.resolveReferenceDate = resolveReferenceDate;
 var _internals = require("@mui/x-date-pickers/internals");
+function resolveReferenceDate(referenceDate, rangePosition) {
+  if (Array.isArray(referenceDate)) {
+    return rangePosition === 'start' ? referenceDate[0] : referenceDate[1];
+  }
+  return referenceDate;
+}
 function calculateRangeChange({
   adapter,
   range,
@@ -26,7 +33,7 @@ function calculateRangeChange({
       selectedDate = (0, _internals.mergeDateAndTime)(adapter, selectedDate, end);
     }
   }
-  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? (0, _internals.mergeDateAndTime)(adapter, selectedDate, referenceDate) : selectedDate;
+  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? (0, _internals.mergeDateAndTime)(adapter, selectedDate, resolveReferenceDate(referenceDate, rangePosition)) : selectedDate;
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',

package/internals/utils/valueManagers.js

@@ -25,7 +25,9 @@ const rangeValueManager = exports.rangeValueManager = {
       return value;
     }
     const referenceDate = referenceDateProp ?? (0, _internals.getDefaultReferenceDate)(params);
-    return [shouldKeepStartDate ? value[0] : referenceDate, shouldKeepEndDate ? value[1] : referenceDate];
+    const startReferenceDate = Array.isArray(referenceDate) ? referenceDate[0] : referenceDate;
+    const endReferenceDate = Array.isArray(referenceDate) ? referenceDate[1] : referenceDate;
+    return [shouldKeepStartDate ? value[0] : startReferenceDate, shouldKeepEndDate ? value[1] : endReferenceDate];
   },
   cleanValue: (utils, value) => value.map(date => (0, _internals.replaceInvalidDateByNull)(utils, date)),
   areValuesEqual: (utils, a, b) => (0, _internals.areDatesEqual)(utils, a[0], b[0]) && (0, _internals.areDatesEqual)(utils, a[1], b[1]),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "8.6.0",
+  "version": "8.8.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Date and Time Picker components.",
   "main": "./index.js",
@@ -33,13 +33,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@mui/utils": "^7.1.1",
+    "@mui/utils": "^7.2.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-license": "8.6.0",
-    "@mui/x-date-pickers": "8.6.0",
-    "@mui/x-internals": "8.6.0"
+    "@mui/x-internals": "8.8.0",
+    "@mui/x-date-pickers": "8.8.0",
+    "@mui/x-license": "8.8.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",