@mui/x-date-pickers 8.5.3 → 8.6.0

package/CHANGELOG.md

@@ -5,6 +5,113 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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:
+@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,

package/DateCalendar/useCalendarState.js

@@ -11,28 +11,28 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useIsDateDisabled = require("./useIsDateDisabled");
-var _useUtils = require("../internals/hooks/useUtils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDate");
 var _dateUtils = require("../internals/utils/date-utils");
-const createCalendarStateReducer = (reduceAnimations, utils) => (state, action) => {
+var _usePickerAdapter = require("../hooks/usePickerAdapter");
+const createCalendarStateReducer = (reduceAnimations, adapter) => (state, action) => {
   switch (action.type) {
     case 'setVisibleDate':
       return (0, _extends2.default)({}, state, {
         slideDirection: action.direction,
         currentMonth: action.month,
-        isMonthSwitchingAnimating: !utils.isSameMonth(action.month, state.currentMonth) && !reduceAnimations && !action.skipAnimation,
+        isMonthSwitchingAnimating: !adapter.isSameMonth(action.month, state.currentMonth) && !reduceAnimations && !action.skipAnimation,
         focusedDay: action.focusedDay
       });
     case 'changeMonthTimezone':
       {
         const newTimezone = action.newTimezone;
-        if (utils.getTimezone(state.currentMonth) === newTimezone) {
+        if (adapter.getTimezone(state.currentMonth) === newTimezone) {
           return state;
         }
-        let newCurrentMonth = utils.setTimezone(state.currentMonth, newTimezone);
-        if (utils.getMonth(newCurrentMonth) !== utils.getMonth(state.currentMonth)) {
-          newCurrentMonth = utils.setMonth(newCurrentMonth, utils.getMonth(state.currentMonth));
+        let newCurrentMonth = adapter.setTimezone(state.currentMonth, newTimezone);
+        if (adapter.getMonth(newCurrentMonth) !== adapter.getMonth(state.currentMonth)) {
+          newCurrentMonth = adapter.setMonth(newCurrentMonth, adapter.getMonth(state.currentMonth));
         }
         return (0, _extends2.default)({}, state, {
           currentMonth: newCurrentMonth
@@ -61,12 +61,12 @@ const useCalendarState = params => {
     timezone,
     getCurrentMonthFromVisibleDate
   } = params;
-  const utils = (0, _useUtils.useUtils)();
-  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), utils)).current;
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
+  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), adapter)).current;
   const referenceDate = React.useMemo(() => {
     return _valueManagers.singleItemValueManager.getInitialReferenceValue({
       value,
-      utils,
+      adapter,
       timezone,
       props: params,
       referenceDate: referenceDateProp,
@@ -79,7 +79,7 @@ const useCalendarState = params => {
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: referenceDate,
-    currentMonth: utils.startOfMonth(referenceDate),
+    currentMonth: adapter.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
   const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
@@ -96,14 +96,14 @@ const useCalendarState = params => {
   React.useEffect(() => {
     dispatch({
       type: 'changeMonthTimezone',
-      newTimezone: utils.getTimezone(referenceDate)
+      newTimezone: adapter.getTimezone(referenceDate)
     });
-  }, [referenceDate, utils]);
+  }, [referenceDate, adapter]);
   const setVisibleDate = (0, _useEventCallback.default)(({
     target,
     reason
   }) => {
-    if (reason === 'cell-interaction' && calendarState.focusedDay != null && utils.isSameDay(target, calendarState.focusedDay)) {
+    if (reason === 'cell-interaction' && calendarState.focusedDay != null && adapter.isSameDay(target, calendarState.focusedDay)) {
       return;
     }
     const skipAnimation = reason === 'cell-interaction';
@@ -113,18 +113,18 @@ const useCalendarState = params => {
       month = getCurrentMonthFromVisibleDate(target, calendarState.currentMonth);
       focusedDay = target;
     } else {
-      month = utils.isSameMonth(target, calendarState.currentMonth) ? calendarState.currentMonth : utils.startOfMonth(target);
+      month = adapter.isSameMonth(target, calendarState.currentMonth) ? calendarState.currentMonth : adapter.startOfMonth(target);
       focusedDay = target;
 
       // If the date is disabled, we try to find a non-disabled date inside the same month.
       if (isDateDisabled(focusedDay)) {
-        const startOfMonth = utils.startOfMonth(target);
-        const endOfMonth = utils.endOfMonth(target);
+        const startOfMonth = adapter.startOfMonth(target);
+        const endOfMonth = adapter.endOfMonth(target);
         focusedDay = (0, _dateUtils.findClosestEnabledDate)({
-          utils,
+          adapter,
           date: focusedDay,
-          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,
@@ -132,19 +132,19 @@ const useCalendarState = params => {
         });
       }
     }
-    const hasChangedMonth = !utils.isSameMonth(calendarState.currentMonth, month);
-    const hasChangedYear = !utils.isSameYear(calendarState.currentMonth, month);
+    const hasChangedMonth = !adapter.isSameMonth(calendarState.currentMonth, month);
+    const hasChangedYear = !adapter.isSameYear(calendarState.currentMonth, month);
     if (hasChangedMonth) {
       onMonthChange?.(month);
     }
     if (hasChangedYear) {
-      onYearChange?.(utils.startOfYear(month));
+      onYearChange?.(adapter.startOfYear(month));
     }
     dispatch({
       type: 'setVisibleDate',
       month,
-      direction: utils.isAfterDay(month, calendarState.currentMonth) ? 'left' : 'right',
-      focusedDay: calendarState.focusedDay != null && focusedDay != null && utils.isSameDay(focusedDay, calendarState.focusedDay) ? calendarState.focusedDay : focusedDay,
+      direction: adapter.isAfterDay(month, calendarState.currentMonth) ? 'left' : 'right',
+      focusedDay: calendarState.focusedDay != null && focusedDay != null && adapter.isSameDay(focusedDay, calendarState.focusedDay) ? calendarState.focusedDay : focusedDay,
       skipAnimation
     });
   });

package/DateCalendar/useIsDateDisabled.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useIsDateDisabled = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _validation = require("../validation");
-var _useUtils = require("../internals/hooks/useUtils");
+var _usePickerAdapter = require("../hooks/usePickerAdapter");
 const useIsDateDisabled = ({
   shouldDisableDate,
   shouldDisableMonth,
@@ -19,7 +19,7 @@ const useIsDateDisabled = ({
   disablePast,
   timezone
 }) => {
-  const adapter = (0, _useUtils.useLocalizationContext)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   return React.useCallback(day => (0, _validation.validateDate)({
     adapter,
     value: day,

package/DatePicker/DatePickerToolbar.js

@@ -16,12 +16,10 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _PickersToolbar = require("../internals/components/PickersToolbar");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
-var _useUtils = require("../internals/hooks/useUtils");
+var _hooks = require("../hooks");
 var _datePickerToolbarClasses = require("./datePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
 var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
-var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"];
 const useUtilityClasses = classes => {
@@ -70,25 +68,25 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
       classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const {
     value,
     views,
     orientation
   } = (0, _hooks.usePickerContext)();
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
+  const translations = (0, _hooks.usePickerTranslations)();
   const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
   const classes = useUtilityClasses(classesProp);
   const dateText = React.useMemo(() => {
-    if (!utils.isValid(value)) {
+    if (!adapter.isValid(value)) {
       return toolbarPlaceholder;
     }
-    const formatFromViews = (0, _dateUtils.resolveDateFormat)(utils, {
+    const formatFromViews = (0, _dateUtils.resolveDateFormat)(adapter, {
       format: toolbarFormat,
       views
     }, true);
-    return utils.formatByString(value, formatFromViews);
-  }, [value, toolbarFormat, toolbarPlaceholder, utils, views]);
+    return adapter.formatByString(value, formatFromViews);
+  }, [value, toolbarFormat, toolbarPlaceholder, adapter, views]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerToolbarRoot, (0, _extends2.default)({
     ref: ref,
     toolbarTitle: translations.datePickerToolbarTitle,

package/DateTimeField/DateTimeField.js

@@ -58,7 +58,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**

package/DateTimePicker/DateTimePicker.js

@@ -60,7 +60,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**