@mui/x-date-pickers-pro 8.5.3 → 8.7.0

package/CHANGELOG.md

@@ -5,6 +5,216 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add export menu to charts toolbar
+- 📅 Add `usePickerAdapter` hook to access the date adapter.
+
+  You can use the adapter in your custom components if you need them to work with multiple date libraries — [Learn more](https://mui.com/x/react-date-pickers/custom-components/#access-date-adapter).
+- 🌎 Improve Danish (da-DK) locale
+- 🌎 Improve German (de-DE) locale
+
+Special thanks go out to the community members for their valuable contributions:
+@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
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.6.0`
+
+- [DataGrid] Fix `label` type in `GridActionsCellItem` type (#18175) @sai6855
+- [DataGrid] Fix grid menu not closing when pressing escape/tab (#18300) @KenanYusuf
+- [l10n] Improve Danish (da-DK) locale (#18428) @ShahrazH
+- [l10n] Improve German (de-DE) locale (#18388) @omalyutin
+
+#### `@mui/x-data-grid-pro@8.6.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.6.0`, plus:
+
+- [DataGridPro] Fix lazy loading params calculated from rendering context (#18460) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.6.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.6.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.6.0`
+
+- [pickers] Add `usePickerAdapter` hook (#18457) @LukasTy
+- [pickers] Fix to use latest `value` when updating `lastCommittedValue` in internal state (#18518) @LukasTy
+- [pickers] Use `usePickerAdapter` hook internally instead of `useUtils` (#18465) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.6.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.6.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.6.0`
+
+- [charts] Add `data-series` to charts legend item (#18414) @bernardobelchior
+- [charts] Add `data-series` to bar charts (#18413) @bernardobelchior
+- [charts] Add `data-series` to elements of line chart (#18409) @bernardobelchior
+- [charts] Add `data-series` to pie charts (#18432) @bernardobelchior
+- [charts] Fix missing key in bar plot (#18502) @bernardobelchior
+- [charts] Split axis utils from main file (#18517) @JCQuintas
+- [charts] Improve touch behavior for polar axis (#18531) @JCQuintas
+- [charts] Add `isElementInside` helper (#18530) @JCQuintas
+
+#### `@mui/x-charts-pro@8.6.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.6.0`, plus:
+
+- [charts-pro] Add export menu to charts toolbar (#18210) @bernardobelchior
+- [charts-pro] Fix export docs mentioning tooltip instead of toolbar (#18490) @bernardobelchior
+- [charts-pro] Fix iframe not being removed after print export (#18500) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.6.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.6.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.6.0`, plus:
+
+- [tree view pro] Fix theme augmentation (#18437) @LukasTy
+
+### Codemod
+
+#### `@mui/x-codemod@8.6.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Document `GridRenderContext` (#18492) @arminmeh
+- [docs] Prevent stale rows to appear on sort and filter change in the lazy loading demo (#18461) @arminmeh
+- [docs][pickers] Update action bar demo to use the `nextOrAccept` action (#18505) @LukasTy
+- [docs] Update indeterminate checkbox section in migration guide (#18229) @michelengelen
+- [docs] Data source nested pagination recipe (#14777) @MBilalShafi
+
+### Core
+
+- [core] Avoid json stringify whole window object (#18512) @vadimka123
+
+### Miscellaneous
+
+- [code-infra] Dynamically get pickers adapters dependencies versions (#18446) @JCQuintas
+- [infra] Adjust inquirer version and usage (#18495) @michelengelen
+- [infra] Use `String.raw` for creating the remote regex (#18462) @michelengelen
+
 ## 8.5.3
 
 _Jun 19, 2025_

package/DateRangeCalendar/DateRangeCalendar.js

@@ -22,6 +22,7 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _xLicense = require("@mui/x-license");
 var _internals = require("@mui/x-date-pickers/internals");
 var _warning = require("@mui/x-internals/warning");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _dateRangeCalendarClasses = require("./dateRangeCalendarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
 var _dateRangeManager = require("../internals/utils/date-range-manager");
@@ -36,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 = "MTc1MDI4NDAwMDAwMA==";
+const releaseInfo = "MTc1MTU4MDAwMDAwMA==";
 const DateRangeCalendarRoot = (0, _styles.styled)('div', {
   name: 'MuiDateRangeCalendar',
   slot: 'Root'
@@ -194,7 +195,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     focusedView: focusedViewProp,
     onFocusedViewChange
   });
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const id = (0, _useId.default)();
   const {
     rangePosition,
@@ -215,7 +216,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       newRange
     } = (0, _dateRangeManager.calculateRangeChange)({
       newDate,
-      utils,
+      adapter,
       range: value,
       rangePosition,
       allowRangeFlip,
@@ -226,7 +227,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     if (isNextSectionAvailable) {
       setRangePosition(nextSelection);
     }
-    const isFullRangeSelected = rangePosition === 'end' && (0, _dateUtils.isRangeValid)(utils, newRange);
+    const isFullRangeSelected = rangePosition === 'end' && (0, _dateUtils.isRangeValid)(adapter, newRange);
     setValueAndGoToNextView(newRange, isFullRangeSelected || !isNextSectionAvailable ? 'finish' : 'partial', view);
   });
   const handleDrop = (0, _useEventCallback.default)(newDate => {
@@ -236,12 +237,12 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
 
   // Range going for the start of the start day to the end of the end day.
   // This makes sure that `isWithinRange` works with any time in the start and end day.
-  const valueDayRange = React.useMemo(() => [!utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
+  const valueDayRange = React.useMemo(() => [!adapter.isValid(value[0]) ? value[0] : adapter.startOfDay(value[0]), !adapter.isValid(value[1]) ? value[1] : adapter.endOfDay(value[1])], [value, adapter]);
   const _useDragRange = (0, _useDragRange2.useDragRange)({
       disableDragEditing: shouldDisableDragEditing,
       onDrop: handleDrop,
       onDatePositionChange: handleDatePositionChange,
-      utils,
+      adapter,
       dateRange: valueDayRange,
       timezone
     }),
@@ -263,14 +264,14 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       return [null, null];
     }
     const newRange = (0, _dateRangeManager.calculateRangeChange)({
-      utils,
+      adapter,
       range: valueDayRange,
       newDate: rangeDragDay,
       rangePosition,
       allowRangeFlip: true
     }).newRange;
-    return newRange[0] !== null && newRange[1] !== null ? [utils.startOfDay(newRange[0]), utils.endOfDay(newRange[1])] : newRange;
-  }, [rangePosition, rangeDragDay, utils, valueDayRange]);
+    return newRange[0] !== null && newRange[1] !== null ? [adapter.startOfDay(newRange[0]), adapter.endOfDay(newRange[1])] : newRange;
+  }, [rangePosition, rangeDragDay, adapter, valueDayRange]);
   const wrappedShouldDisableDate = React.useMemo(() => {
     if (!shouldDisableDate) {
       return undefined;
@@ -283,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,
@@ -293,24 +294,24 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     shouldDisableDate: wrappedShouldDisableDate,
     timezone,
     getCurrentMonthFromVisibleDate: (visibleDate, prevMonth) => {
-      const firstVisibleMonth = utils.addMonths(prevMonth, 1 - currentMonthCalendarPosition);
-      const lastVisibleMonth = utils.endOfMonth(utils.addMonths(firstVisibleMonth, calendars - 1));
+      const firstVisibleMonth = adapter.addMonths(prevMonth, 1 - currentMonthCalendarPosition);
+      const lastVisibleMonth = adapter.endOfMonth(adapter.addMonths(firstVisibleMonth, calendars - 1));
 
       // The new focused day is inside the visible calendars,
       // Do not change the current month
-      if (utils.isWithinRange(visibleDate, [firstVisibleMonth, lastVisibleMonth])) {
+      if (adapter.isWithinRange(visibleDate, [firstVisibleMonth, lastVisibleMonth])) {
         return prevMonth;
       }
 
       // The new focused day is after the last visible month,
       // Move the current month so that the new focused day is inside the first visible month
-      if (utils.isAfter(visibleDate, lastVisibleMonth)) {
-        return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - 1));
+      if (adapter.isAfter(visibleDate, lastVisibleMonth)) {
+        return adapter.startOfMonth(adapter.addMonths(visibleDate, currentMonthCalendarPosition - 1));
       }
 
       // The new focused day is before the first visible month,
       // Move the current month so that the new focused day is inside the last visible month
-      return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - calendars));
+      return adapter.startOfMonth(adapter.addMonths(visibleDate, currentMonthCalendarPosition - calendars));
     }
   });
   const CalendarHeader = slots?.calendarHeader ?? _PickersRangeCalendarHeader.PickersRangeCalendarHeader;
@@ -343,7 +344,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
-    if (!utils.isValid(date)) {
+    if (!adapter.isValid(date)) {
       return;
     }
     const prevDate = rangePosition === 'start' ? prevValue.current?.[0] : prevValue.current?.[1];
@@ -351,16 +352,16 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
 
     // The current date did not change, this call comes either from a `rangePosition` change or a change in the other date.
     // In both cases, we don't want to change the visible month(s).
-    if (disableAutoMonthSwitching && prevDate && utils.isEqual(prevDate, date)) {
+    if (disableAutoMonthSwitching && prevDate && adapter.isEqual(prevDate, date)) {
       return;
     }
     const displayingMonthRange = calendars - currentMonthCalendarPosition;
-    const currentMonthNumber = utils.getMonth(calendarState.currentMonth);
-    const requestedMonthNumber = utils.getMonth(date);
-    if (!utils.isSameYear(calendarState.currentMonth, date) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {
+    const currentMonthNumber = adapter.getMonth(calendarState.currentMonth);
+    const requestedMonthNumber = adapter.getMonth(date);
+    if (!adapter.isSameYear(calendarState.currentMonth, date) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {
       const newMonth = rangePosition === 'start' ? date :
       // If need to focus end, scroll to the state when "end" is displaying in the last calendar
-      utils.addMonths(date, -displayingMonthRange);
+      adapter.addMonths(date, -displayingMonthRange);
       setVisibleDate({
         target: newMonth,
         reason: 'controlled-value-change'
@@ -384,7 +385,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     onMouseLeave: () => setRangePreviewDay(null)
   }), []);
   const previewingRange = (0, _dateRangeManager.calculateRangePreview)({
-    utils,
+    adapter,
     range: valueDayRange,
     newDate: rangePreviewDay,
     rangePosition
@@ -393,12 +394,12 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     let cleanNewRangePreviewDay;
     if (valueDayRange[0] == null && valueDayRange[1] == null) {
       cleanNewRangePreviewDay = null;
-    } else if ((0, _dateUtils.isWithinRange)(utils, newRangePreviewDay, valueDayRange)) {
+    } else if ((0, _dateUtils.isWithinRange)(adapter, newRangePreviewDay, valueDayRange)) {
       cleanNewRangePreviewDay = null;
     } else {
       cleanNewRangePreviewDay = newRangePreviewDay;
     }
-    if (!(0, _internals.areDatesEqual)(utils, cleanNewRangePreviewDay, rangePreviewDay)) {
+    if (!(0, _internals.areDatesEqual)(adapter, cleanNewRangePreviewDay, rangePreviewDay)) {
       setRangePreviewDay(cleanNewRangePreviewDay);
     }
   });
@@ -411,8 +412,8 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
         day,
         isDaySelected
       } = dayOwnerState;
-      const isSelectedStartDate = (0, _dateUtils.isStartOfRange)(utils, day, valueDayRange);
-      const isSelectedEndDate = (0, _dateUtils.isEndOfRange)(utils, day, valueDayRange);
+      const isSelectedStartDate = (0, _dateUtils.isStartOfRange)(adapter, day, valueDayRange);
+      const isSelectedEndDate = (0, _dateUtils.isEndOfRange)(adapter, day, valueDayRange);
       const shouldInitDragging = !shouldDisableDragEditing && valueDayRange[0] && valueDayRange[1];
       const isElementDraggable = shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
       let datePosition;
@@ -421,15 +422,15 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       } else if (isSelectedEndDate) {
         datePosition = 'end';
       }
-      const isStartOfHighlighting = isDragging ? (0, _dateUtils.isStartOfRange)(utils, day, draggingRange) : isSelectedStartDate;
-      const isEndOfHighlighting = isDragging ? (0, _dateUtils.isEndOfRange)(utils, day, draggingRange) : isSelectedEndDate;
+      const isStartOfHighlighting = isDragging ? (0, _dateUtils.isStartOfRange)(adapter, day, draggingRange) : isSelectedStartDate;
+      const isEndOfHighlighting = isDragging ? (0, _dateUtils.isEndOfRange)(adapter, day, draggingRange) : isSelectedEndDate;
       return (0, _extends2.default)({
-        isPreviewing: shouldHavePreview ? (0, _dateUtils.isWithinRange)(utils, day, previewingRange) : false,
-        isStartOfPreviewing: shouldHavePreview ? (0, _dateUtils.isStartOfRange)(utils, day, previewingRange) : false,
-        isEndOfPreviewing: shouldHavePreview ? (0, _dateUtils.isEndOfRange)(utils, day, previewingRange) : false,
-        isHighlighting: (0, _dateUtils.isWithinRange)(utils, day, isDragging ? draggingRange : valueDayRange),
+        isPreviewing: shouldHavePreview ? (0, _dateUtils.isWithinRange)(adapter, day, previewingRange) : false,
+        isStartOfPreviewing: shouldHavePreview ? (0, _dateUtils.isStartOfRange)(adapter, day, previewingRange) : false,
+        isEndOfPreviewing: shouldHavePreview ? (0, _dateUtils.isEndOfRange)(adapter, day, previewingRange) : false,
+        isHighlighting: (0, _dateUtils.isWithinRange)(adapter, day, isDragging ? draggingRange : valueDayRange),
         isStartOfHighlighting,
-        isEndOfHighlighting: isDragging ? (0, _dateUtils.isEndOfRange)(utils, day, draggingRange) : isSelectedEndDate,
+        isEndOfHighlighting: isDragging ? (0, _dateUtils.isEndOfRange)(adapter, day, draggingRange) : isSelectedEndDate,
         onMouseEnter: shouldHavePreview ? handleDayMouseEnter : undefined,
         // apply selected styling to the dragging start or end day
         isVisuallySelected: isDaySelected || isDragging && (isStartOfHighlighting || isEndOfHighlighting),
@@ -448,11 +449,11 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
         (0, _warning.warnOnce)(['MUI X: The `currentMonthCalendarPosition` prop must be an integer between `1` and the amount of calendars rendered.', 'For example if you have 2 calendars rendered, it should be equal to either 1 or 2.']);
       }
     }
-    const firstMonth = utils.addMonths(calendarState.currentMonth, 1 - currentMonthCalendarPosition);
+    const firstMonth = adapter.addMonths(calendarState.currentMonth, 1 - currentMonthCalendarPosition);
     return Array.from({
       length: calendars
-    }).map((_, index) => utils.addMonths(firstMonth, index));
-  }, [utils, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
+    }).map((_, index) => adapter.addMonths(firstMonth, index));
+  }, [adapter, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
   const hasFocus = focusedView !== null;
   const prevOpenViewRef = React.useRef(view);
   React.useEffect(() => {
@@ -686,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/DateRangeCalendar/useDragRange.d.ts

@@ -4,7 +4,7 @@ import { PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { RangePosition } from "../models/index.js";
 interface UseDragRangeParams {
   disableDragEditing?: boolean;
-  utils: MuiPickersAdapter;
+  adapter: MuiPickersAdapter;
   setRangeDragDay: (value: PickerValidDate | null) => void;
   setIsDragging: (value: boolean) => void;
   isDragging: boolean;
@@ -31,7 +31,7 @@ interface UseDragRangeResponse extends UseDragRangeEvents {
 }
 export declare const useDragRange: ({
   disableDragEditing,
-  utils,
+  adapter,
   onDatePositionChange,
   onDrop,
   dateRange,

package/DateRangeCalendar/useDragRange.js

@@ -11,13 +11,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _dateUtils = require("../internals/utils/date-utils");
-const resolveDateFromTarget = (target, utils, timezone) => {
+const resolveDateFromTarget = (target, adapter, timezone) => {
   const timestampString = target.dataset.timestamp;
   if (!timestampString) {
     return null;
   }
   const timestamp = +timestampString;
-  return utils.date(new Date(timestamp).toISOString(), timezone);
+  return adapter.date(new Date(timestamp).toISOString(), timezone);
 };
 const isSameAsDraggingDate = event => {
   const timestampString = event.target.dataset.timestamp;
@@ -50,7 +50,7 @@ const resolveElementFromTouch = (event, ignoreTouchTarget) => {
   return null;
 };
 const useDragRangeEvents = ({
-  utils,
+  adapter,
   setRangeDragDay,
   setIsDragging,
   isDragging,
@@ -71,12 +71,12 @@ const useDragRangeEvents = ({
       return false;
     }
     const shouldInitDragging = !disableDragEditing && !!dateRange[0] && !!dateRange[1];
-    const isSelectedStartDate = (0, _dateUtils.isStartOfRange)(utils, day, dateRange);
-    const isSelectedEndDate = (0, _dateUtils.isEndOfRange)(utils, day, dateRange);
+    const isSelectedStartDate = (0, _dateUtils.isStartOfRange)(adapter, day, dateRange);
+    const isSelectedEndDate = (0, _dateUtils.isEndOfRange)(adapter, day, dateRange);
     return shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
   };
   const handleDragStart = (0, _useEventCallback.default)(event => {
-    const newDate = resolveDateFromTarget(event.target, utils, timezone);
+    const newDate = resolveDateFromTarget(event.target, adapter, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -100,7 +100,7 @@ const useDragRangeEvents = ({
     if (!target) {
       return;
     }
-    const newDate = resolveDateFromTarget(target, utils, timezone);
+    const newDate = resolveDateFromTarget(target, adapter, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -113,14 +113,14 @@ const useDragRangeEvents = ({
     event.preventDefault();
     event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
-    setRangeDragDay(resolveDateFromTarget(event.target, utils, timezone));
+    setRangeDragDay(resolveDateFromTarget(event.target, adapter, timezone));
   });
   const handleTouchMove = (0, _useEventCallback.default)(event => {
     const target = resolveElementFromTouch(event);
     if (!target) {
       return;
     }
-    const newDate = resolveDateFromTarget(target, utils, timezone);
+    const newDate = resolveDateFromTarget(target, adapter, timezone);
     if (newDate) {
       setRangeDragDay(newDate);
     }
@@ -167,7 +167,7 @@ const useDragRangeEvents = ({
 
     // make sure the focused element is the element where touch ended
     target.focus();
-    const newDate = resolveDateFromTarget(target, utils, timezone);
+    const newDate = resolveDateFromTarget(target, adapter, timezone);
     if (newDate) {
       onDrop(newDate);
     }
@@ -194,7 +194,7 @@ const useDragRangeEvents = ({
     if (isSameAsDraggingDate(event)) {
       return;
     }
-    const newDate = resolveDateFromTarget(event.target, utils, timezone);
+    const newDate = resolveDateFromTarget(event.target, adapter, timezone);
     if (newDate) {
       onDrop(newDate);
     }
@@ -213,7 +213,7 @@ const useDragRangeEvents = ({
 };
 const useDragRange = ({
   disableDragEditing,
-  utils,
+  adapter,
   onDatePositionChange,
   onDrop,
   dateRange,
@@ -222,24 +222,24 @@ const useDragRange = ({
   const [isDragging, setIsDragging] = React.useState(false);
   const [rangeDragDay, setRangeDragDay] = React.useState(null);
   const handleRangeDragDayChange = (0, _useEventCallback.default)(newValue => {
-    if (!utils.isEqual(newValue, rangeDragDay)) {
+    if (!adapter.isEqual(newValue, rangeDragDay)) {
       setRangeDragDay(newValue);
     }
   });
   const draggingDatePosition = React.useMemo(() => {
     const [start, end] = dateRange;
     if (rangeDragDay) {
-      if (start && utils.isBefore(rangeDragDay, start)) {
+      if (start && adapter.isBefore(rangeDragDay, start)) {
         return 'start';
       }
-      if (end && utils.isAfter(rangeDragDay, end)) {
+      if (end && adapter.isAfter(rangeDragDay, end)) {
         return 'end';
       }
     }
     return null;
-  }, [dateRange, rangeDragDay, utils]);
+  }, [dateRange, rangeDragDay, adapter]);
   const dragRangeEvents = useDragRangeEvents({
-    utils,
+    adapter,
     onDatePositionChange,
     onDrop,
     setIsDragging,

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/DateRangePicker/DateRangePickerToolbar.js

@@ -49,7 +49,7 @@ const DateRangePickerToolbarContainer = (0, _styles.styled)('div', {
  * - [DateRangePickerToolbar API](https://mui.com/x/api/date-pickers/date-range-picker-toolbar/)
  */
 const DateRangePickerToolbar = exports.DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangePickerToolbar(inProps, ref) {
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDateRangePickerToolbar'
@@ -72,12 +72,12 @@ const DateRangePickerToolbar = exports.DateRangePickerToolbar = /*#__PURE__*/Rea
   const classes = useUtilityClasses(classesProp);
 
   // This can't be a default value when spreading because it breaks the API generation.
-  const toolbarFormat = toolbarFormatProp ?? utils.formats.shortDate;
+  const toolbarFormat = toolbarFormatProp ?? adapter.formats.shortDate;
   const formatDate = (date, fallback) => {
-    if (!utils.isValid(date)) {
+    if (!adapter.isValid(date)) {
       return fallback;
     }
-    return utils.formatByString(date, toolbarFormat);
+    return adapter.formatByString(date, toolbarFormat);
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangePickerToolbarRoot, (0, _extends2.default)({}, other, {
     toolbarTitle: translations.dateRangePickerToolbarTitle,

package/DateRangePickerDay/DateRangePickerDay.js

@@ -17,6 +17,7 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _internals = require("@mui/x-date-pickers/internals");
 var _PickersDay = require("@mui/x-date-pickers/PickersDay");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _dateRangePickerDayClasses = require("./dateRangePickerDayClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "classes", "isEndOfHighlighting", "isEndOfPreviewing", "isHighlighting", "isPreviewing", "isStartOfHighlighting", "isStartOfPreviewing", "isVisuallySelected", "sx", "draggable", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableMargin", "disableHighlightToday", "showDaysOutsideCurrentMonth"];
@@ -234,8 +235,8 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
       showDaysOutsideCurrentMonth
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1MDI4NDAwMDAwMA==");
-  const utils = (0, _internals.useUtils)();
+  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', "MTc1MTU4MDAwMDAwMA==");
+  const adapter = (0, _hooks.usePickerAdapter)();
   const shouldRenderHighlight = isHighlighting && !outsideCurrentMonth;
   const shouldRenderPreview = isPreviewing && !outsideCurrentMonth;
   const pickersDayOwnerState = (0, _internals.usePickerDayOwnerState)({
@@ -259,8 +260,8 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
     isDayPreviewEnd: isEndOfPreviewing,
     isDayInsidePreview: isPreviewing && !isStartOfPreviewing && !isEndOfPreviewing,
     // Properties specific to the MUI implementation (some might be removed in the next major)
-    isDayStartOfMonth: utils.isSameDay(day, utils.startOfMonth(day)),
-    isDayEndOfMonth: utils.isSameDay(day, utils.endOfMonth(day)),
+    isDayStartOfMonth: adapter.isSameDay(day, adapter.startOfMonth(day)),
+    isDayEndOfMonth: adapter.isSameDay(day, adapter.endOfMonth(day)),
     isDayFirstVisibleCell: isFirstVisibleCell,
     isDayLastVisibleCell: isLastVisibleCell,
     isDayFillerCell: outsideCurrentMonth && !showDaysOutsideCurrentMonth