@mui/x-date-pickers 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/DateCalendar/DateCalendar.js

@@ -18,7 +18,6 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useCalendarState = require("./useCalendarState");
-var _useUtils = require("../internals/hooks/useUtils");
 var _PickersFadeTransitionGroup = require("./PickersFadeTransitionGroup");
 var _DayCalendar = require("./DayCalendar");
 var _MonthCalendar = require("../MonthCalendar");
@@ -34,6 +33,7 @@ var _valueManagers = require("../internals/utils/valueManagers");
 var _dimensions = require("../internals/constants/dimensions");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _useDateManager = require("../managers/useDateManager");
+var _usePickerAdapter = require("../hooks/usePickerAdapter");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "classes", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsOrder", "yearsPerRow", "monthsPerRow", "timezone"];
 const useUtilityClasses = classes => {
@@ -84,7 +84,7 @@ const DateCalendarViewTransitionContainer = (0, _styles.styled)(_PickersFadeTran
  * - [DateCalendar API](https://mui.com/x/api/date-pickers/date-calendar/)
  */
 const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps, ref) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   const {
     ownerState
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
@@ -178,10 +178,10 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
     disableFuture,
     timezone,
     getCurrentMonthFromVisibleDate: (visibleDate, prevMonth) => {
-      if (utils.isSameMonth(visibleDate, prevMonth)) {
+      if (adapter.isSameMonth(visibleDate, prevMonth)) {
         return prevMonth;
       }
-      return utils.startOfMonth(visibleDate);
+      return adapter.startOfMonth(visibleDate);
     }
   });
 
@@ -215,13 +215,13 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
     ownerState
   });
   const handleDateMonthChange = (0, _useEventCallback.default)(newDate => {
-    const startOfMonth = utils.startOfMonth(newDate);
-    const endOfMonth = utils.endOfMonth(newDate);
+    const startOfMonth = adapter.startOfMonth(newDate);
+    const endOfMonth = adapter.endOfMonth(newDate);
     const closestEnabledDate = isDateDisabled(newDate) ? (0, _dateUtils.findClosestEnabledDate)({
-      utils,
+      adapter,
       date: newDate,
-      minDate: utils.isBefore(minDate, startOfMonth) ? startOfMonth : minDate,
-      maxDate: utils.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
+      minDate: adapter.isBefore(minDate, startOfMonth) ? startOfMonth : minDate,
+      maxDate: adapter.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
       disablePast,
       disableFuture,
       isDateDisabled,
@@ -242,13 +242,13 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
     }
   });
   const handleDateYearChange = (0, _useEventCallback.default)(newDate => {
-    const startOfYear = utils.startOfYear(newDate);
-    const endOfYear = utils.endOfYear(newDate);
+    const startOfYear = adapter.startOfYear(newDate);
+    const endOfYear = adapter.endOfYear(newDate);
     const closestEnabledDate = isDateDisabled(newDate) ? (0, _dateUtils.findClosestEnabledDate)({
-      utils,
+      adapter,
       date: newDate,
-      minDate: utils.isBefore(minDate, startOfYear) ? startOfYear : minDate,
-      maxDate: utils.isAfter(maxDate, endOfYear) ? endOfYear : maxDate,
+      minDate: adapter.isBefore(minDate, startOfYear) ? startOfYear : minDate,
+      maxDate: adapter.isAfter(maxDate, endOfYear) ? endOfYear : maxDate,
       disablePast,
       disableFuture,
       isDateDisabled,
@@ -271,12 +271,12 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
   const handleSelectedDayChange = (0, _useEventCallback.default)(day => {
     if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange((0, _dateUtils.mergeDateAndTime)(utils, day, value ?? referenceDate), 'finish', view);
+      return handleValueChange((0, _dateUtils.mergeDateAndTime)(adapter, day, value ?? referenceDate), 'finish', view);
     }
     return handleValueChange(day, 'finish', view);
   });
   React.useEffect(() => {
-    if (utils.isValid(value)) {
+    if (adapter.isValid(value)) {
       setVisibleDate({
         target: value,
         reason: 'controlled-value-change'

package/DateCalendar/DayCalendar.js

@@ -18,7 +18,7 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _PickersDay = require("../PickersDay");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
+var _hooks = require("../hooks");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dimensions = require("../internals/constants/dimensions");
 var _PickersSlideTransition = require("./PickersSlideTransition");
@@ -151,14 +151,14 @@ function WrappedDay(_ref) {
     slotProps,
     timezone
   } = parentProps;
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const now = (0, _useUtils.useNow)(timezone);
-  const isFocusableDay = focusedDay != null && utils.isSameDay(day, focusedDay);
+  const isFocusableDay = focusedDay != null && adapter.isSameDay(day, focusedDay);
   const isFocusedDay = isViewFocused && isFocusableDay;
-  const isSelected = selectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
-  const isToday = utils.isSameDay(day, now);
+  const isSelected = selectedDays.some(selectedDay => adapter.isSameDay(selectedDay, day));
+  const isToday = adapter.isSameDay(day, now);
   const isDisabled = React.useMemo(() => disabled || isDateDisabled(day), [disabled, isDateDisabled, day]);
-  const isOutsideCurrentMonth = React.useMemo(() => utils.getMonth(day) !== currentMonthNumber, [utils, day, currentMonthNumber]);
+  const isOutsideCurrentMonth = React.useMemo(() => adapter.getMonth(day) !== currentMonthNumber, [adapter, day, currentMonthNumber]);
   const ownerState = (0, _usePickerDayOwnerState.usePickerDayOwnerState)({
     day,
     selected: isSelected,
@@ -181,7 +181,7 @@ function WrappedDay(_ref) {
         role: 'gridcell',
         isAnimating: isMonthSwitchingAnimating,
         // it is used in date range dragging logic by accessing `dataset.timestamp`
-        'data-timestamp': utils.toJsDate(day).valueOf()
+        'data-timestamp': adapter.toJsDate(day).valueOf()
       }, other),
       ownerState: (0, _extends2.default)({}, ownerState, {
         day,
@@ -191,19 +191,19 @@ function WrappedDay(_ref) {
     }),
     dayProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
   const isFirstVisibleCell = React.useMemo(() => {
-    const startOfMonth = utils.startOfMonth(utils.setMonth(day, currentMonthNumber));
+    const startOfMonth = adapter.startOfMonth(adapter.setMonth(day, currentMonthNumber));
     if (!showDaysOutsideCurrentMonth) {
-      return utils.isSameDay(day, startOfMonth);
+      return adapter.isSameDay(day, startOfMonth);
     }
-    return utils.isSameDay(day, utils.startOfWeek(startOfMonth));
-  }, [currentMonthNumber, day, showDaysOutsideCurrentMonth, utils]);
+    return adapter.isSameDay(day, adapter.startOfWeek(startOfMonth));
+  }, [currentMonthNumber, day, showDaysOutsideCurrentMonth, adapter]);
   const isLastVisibleCell = React.useMemo(() => {
-    const endOfMonth = utils.endOfMonth(utils.setMonth(day, currentMonthNumber));
+    const endOfMonth = adapter.endOfMonth(adapter.setMonth(day, currentMonthNumber));
     if (!showDaysOutsideCurrentMonth) {
-      return utils.isSameDay(day, endOfMonth);
+      return adapter.isSameDay(day, endOfMonth);
     }
-    return utils.isSameDay(day, utils.endOfWeek(endOfMonth));
-  }, [currentMonthNumber, day, showDaysOutsideCurrentMonth, utils]);
+    return adapter.isSameDay(day, adapter.endOfWeek(endOfMonth));
+  }, [currentMonthNumber, day, showDaysOutsideCurrentMonth, adapter]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, (0, _extends2.default)({}, dayProps, {
     day: day,
     disabled: isDisabled,
@@ -227,7 +227,7 @@ function DayCalendar(inProps) {
     props: inProps,
     name: 'MuiDayCalendar'
   });
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const {
     onFocusedDayChange,
     className,
@@ -252,7 +252,7 @@ function DayCalendar(inProps) {
     shouldDisableDate,
     shouldDisableMonth,
     shouldDisableYear,
-    dayOfWeekFormatter = date => utils.format(date, 'weekdayShort').charAt(0).toUpperCase(),
+    dayOfWeekFormatter = date => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase(),
     hasFocus,
     onFocusedViewChange,
     gridLabelId,
@@ -273,7 +273,7 @@ function DayCalendar(inProps) {
     disableFuture,
     timezone
   });
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
+  const translations = (0, _hooks.usePickerTranslations)();
   const handleDaySelect = (0, _useEventCallback.default)(day => {
     if (readOnly) {
       return;
@@ -289,22 +289,22 @@ function DayCalendar(inProps) {
   const handleKeyDown = (0, _useEventCallback.default)((event, day) => {
     switch (event.key) {
       case 'ArrowUp':
-        focusDay(utils.addDays(day, -7));
+        focusDay(adapter.addDays(day, -7));
         event.preventDefault();
         break;
       case 'ArrowDown':
-        focusDay(utils.addDays(day, 7));
+        focusDay(adapter.addDays(day, 7));
         event.preventDefault();
         break;
       case 'ArrowLeft':
         {
-          const newFocusedDayDefault = utils.addDays(day, isRtl ? 1 : -1);
-          const nextAvailableMonth = utils.addMonths(day, isRtl ? 1 : -1);
+          const newFocusedDayDefault = adapter.addDays(day, isRtl ? 1 : -1);
+          const nextAvailableMonth = adapter.addMonths(day, isRtl ? 1 : -1);
           const closestDayToFocus = (0, _dateUtils.findClosestEnabledDate)({
-            utils,
+            adapter,
             date: newFocusedDayDefault,
-            minDate: isRtl ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
-            maxDate: isRtl ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            minDate: isRtl ? newFocusedDayDefault : adapter.startOfMonth(nextAvailableMonth),
+            maxDate: isRtl ? adapter.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
             isDateDisabled,
             timezone
           });
@@ -314,13 +314,13 @@ function DayCalendar(inProps) {
         }
       case 'ArrowRight':
         {
-          const newFocusedDayDefault = utils.addDays(day, isRtl ? -1 : 1);
-          const nextAvailableMonth = utils.addMonths(day, isRtl ? -1 : 1);
+          const newFocusedDayDefault = adapter.addDays(day, isRtl ? -1 : 1);
+          const nextAvailableMonth = adapter.addMonths(day, isRtl ? -1 : 1);
           const closestDayToFocus = (0, _dateUtils.findClosestEnabledDate)({
-            utils,
+            adapter,
             date: newFocusedDayDefault,
-            minDate: isRtl ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
-            maxDate: isRtl ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
+            minDate: isRtl ? adapter.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            maxDate: isRtl ? newFocusedDayDefault : adapter.endOfMonth(nextAvailableMonth),
             isDateDisabled,
             timezone
           });
@@ -329,19 +329,19 @@ function DayCalendar(inProps) {
           break;
         }
       case 'Home':
-        focusDay(utils.startOfWeek(day));
+        focusDay(adapter.startOfWeek(day));
         event.preventDefault();
         break;
       case 'End':
-        focusDay(utils.endOfWeek(day));
+        focusDay(adapter.endOfWeek(day));
         event.preventDefault();
         break;
       case 'PageUp':
-        focusDay(utils.addMonths(day, 1));
+        focusDay(adapter.addMonths(day, 1));
         event.preventDefault();
         break;
       case 'PageDown':
-        focusDay(utils.addMonths(day, -1));
+        focusDay(adapter.addMonths(day, -1));
         event.preventDefault();
         break;
       default:
@@ -350,33 +350,33 @@ function DayCalendar(inProps) {
   });
   const handleFocus = (0, _useEventCallback.default)((event, day) => focusDay(day));
   const handleBlur = (0, _useEventCallback.default)((event, day) => {
-    if (focusedDay != null && utils.isSameDay(focusedDay, day)) {
+    if (focusedDay != null && adapter.isSameDay(focusedDay, day)) {
       onFocusedViewChange?.(false);
     }
   });
-  const currentMonthNumber = utils.getMonth(currentMonth);
-  const currentYearNumber = utils.getYear(currentMonth);
-  const validSelectedDays = React.useMemo(() => selectedDays.filter(day => !!day).map(day => utils.startOfDay(day)), [utils, selectedDays]);
+  const currentMonthNumber = adapter.getMonth(currentMonth);
+  const currentYearNumber = adapter.getYear(currentMonth);
+  const validSelectedDays = React.useMemo(() => selectedDays.filter(day => !!day).map(day => adapter.startOfDay(day)), [adapter, selectedDays]);
 
   // need a new ref whenever the `key` of the transition changes: https://reactcommunity.org/react-transition-group/transition/#Transition-prop-nodeRef.
   const transitionKey = `${currentYearNumber}-${currentMonthNumber}`;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const slideNodeRef = React.useMemo(() => /*#__PURE__*/React.createRef(), [transitionKey]);
   const weeksToDisplay = React.useMemo(() => {
-    const toDisplay = utils.getWeekArray(currentMonth);
-    let nextMonth = utils.addMonths(currentMonth, 1);
+    const toDisplay = adapter.getWeekArray(currentMonth);
+    let nextMonth = adapter.addMonths(currentMonth, 1);
     while (fixedWeekNumber && toDisplay.length < fixedWeekNumber) {
-      const additionalWeeks = utils.getWeekArray(nextMonth);
-      const hasCommonWeek = utils.isSameDay(toDisplay[toDisplay.length - 1][0], additionalWeeks[0][0]);
+      const additionalWeeks = adapter.getWeekArray(nextMonth);
+      const hasCommonWeek = adapter.isSameDay(toDisplay[toDisplay.length - 1][0], additionalWeeks[0][0]);
       additionalWeeks.slice(hasCommonWeek ? 1 : 0).forEach(week => {
         if (toDisplay.length < fixedWeekNumber) {
           toDisplay.push(week);
         }
       });
-      nextMonth = utils.addMonths(nextMonth, 1);
+      nextMonth = adapter.addMonths(nextMonth, 1);
     }
     return toDisplay;
-  }, [currentMonth, fixedWeekNumber, utils]);
+  }, [currentMonth, fixedWeekNumber, adapter]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,
@@ -390,10 +390,10 @@ function DayCalendar(inProps) {
         "aria-label": translations.calendarWeekNumberHeaderLabel,
         className: classes.weekNumberLabel,
         children: translations.calendarWeekNumberHeaderText
-      }), (0, _dateUtils.getWeekdays)(utils, now).map((weekday, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeekDayLabel, {
+      }), (0, _dateUtils.getWeekdays)(adapter, now).map((weekday, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeekDayLabel, {
         variant: "caption",
         role: "columnheader",
-        "aria-label": utils.format(weekday, 'weekday'),
+        "aria-label": adapter.format(weekday, 'weekday'),
         className: classes.weekDayLabel,
         children: dayOfWeekFormatter(weekday)
       }, i.toString()))]
@@ -422,8 +422,8 @@ function DayCalendar(inProps) {
           children: [displayWeekNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersCalendarWeekNumber, {
             className: classes.weekNumber,
             role: "rowheader",
-            "aria-label": translations.calendarWeekNumberAriaLabelText(utils.getWeekNumber(week[0])),
-            children: translations.calendarWeekNumberText(utils.getWeekNumber(week[0]))
+            "aria-label": translations.calendarWeekNumberAriaLabelText(adapter.getWeekNumber(week[0])),
+            children: translations.calendarWeekNumberText(adapter.getWeekNumber(week[0]))
           }), week.map((day, dayIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedDay, {
             parentProps: props,
             day: day,