@mui/x-date-pickers 8.5.3 → 8.7.0

package/YearCalendar/YearCalendar.js

@@ -28,6 +28,7 @@ var _useControlledValue = require("../internals/hooks/useControlledValue");
 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", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 const useUtilityClasses = classes => {
@@ -140,13 +141,13 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
   });
   const now = (0, _useUtils.useNow)(timezone);
   const isRtl = (0, _RtlProvider.useRtl)();
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   const {
     ownerState
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
     value,
-    utils,
+    adapter,
     props,
     timezone,
     referenceDate: referenceDateProp,
@@ -154,14 +155,14 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
   const classes = useUtilityClasses(classesProp);
-  const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);
+  const todayYear = React.useMemo(() => adapter.getYear(now), [adapter, now]);
   const selectedYear = React.useMemo(() => {
     if (value != null) {
-      return utils.getYear(value);
+      return adapter.getYear(value);
     }
     return null;
-  }, [value, utils]);
-  const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || utils.getYear(referenceDate));
+  }, [value, adapter]);
+  const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || adapter.getYear(referenceDate));
   const [internalHasFocus, setInternalHasFocus] = (0, _useControlled.default)({
     name: 'YearCalendar',
     state: 'hasFocus',
@@ -175,33 +176,33 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     }
   });
   const isYearDisabled = React.useCallback(dateToValidate => {
-    if (disablePast && utils.isBeforeYear(dateToValidate, now)) {
+    if (disablePast && adapter.isBeforeYear(dateToValidate, now)) {
       return true;
     }
-    if (disableFuture && utils.isAfterYear(dateToValidate, now)) {
+    if (disableFuture && adapter.isAfterYear(dateToValidate, now)) {
       return true;
     }
-    if (minDate && utils.isBeforeYear(dateToValidate, minDate)) {
+    if (minDate && adapter.isBeforeYear(dateToValidate, minDate)) {
       return true;
     }
-    if (maxDate && utils.isAfterYear(dateToValidate, maxDate)) {
+    if (maxDate && adapter.isAfterYear(dateToValidate, maxDate)) {
       return true;
     }
     if (!shouldDisableYear) {
       return false;
     }
-    const yearToValidate = utils.startOfYear(dateToValidate);
+    const yearToValidate = adapter.startOfYear(dateToValidate);
     return shouldDisableYear(yearToValidate);
-  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, utils]);
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, adapter]);
   const handleYearSelection = (0, _useEventCallback.default)((event, year) => {
     if (readOnly) {
       return;
     }
-    const newDate = utils.setYear(value ?? referenceDate, year);
+    const newDate = adapter.setYear(value ?? referenceDate, year);
     handleValueChange(newDate);
   });
   const focusYear = (0, _useEventCallback.default)(year => {
-    if (!isYearDisabled(utils.setYear(value ?? referenceDate, year))) {
+    if (!isYearDisabled(adapter.setYear(value ?? referenceDate, year))) {
       setFocusedYear(year);
       changeHasFocus(true);
       onYearFocus?.(year);
@@ -265,7 +266,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     }
     scrollerRef.current.scrollTop = elementBottom - clientHeight / 2 - offsetHeight / 2;
   }, [autoFocus]);
-  const yearRange = utils.getYearRange([minDate, maxDate]);
+  const yearRange = adapter.getYearRange([minDate, maxDate]);
   if (yearsOrder === 'desc') {
     yearRange.reverse();
   }
@@ -282,7 +283,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     yearsPerRow: yearsPerRow
   }, other, {
     children: [yearRange.map(year => {
-      const yearNumber = utils.getYear(year);
+      const yearNumber = adapter.getYear(year);
       const isSelected = yearNumber === selectedYear;
       const isDisabled = disabled || isYearDisabled(year);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_YearCalendarButton.YearCalendarButton, {
@@ -299,8 +300,8 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
         slots: slots,
         slotProps: slotProps,
         classes: classesProp,
-        children: utils.format(year, 'year')
-      }, utils.format(year, 'year'));
+        children: adapter.format(year, 'year')
+      }, adapter.format(year, 'year'));
     }), Array.from({
       length: fillerAmount
     }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(YearCalendarButtonFiller, {}, index))]

package/esm/DateCalendar/DateCalendar.js

@@ -12,7 +12,6 @@ import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useCalendarState } from "./useCalendarState.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
 import { PickersFadeTransitionGroup } from "./PickersFadeTransitionGroup.js";
 import { DayCalendar } from "./DayCalendar.js";
 import { MonthCalendar } from "../MonthCalendar/index.js";
@@ -28,6 +27,7 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -77,7 +77,7 @@ const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
  * - [DateCalendar API](https://mui.com/x/api/date-pickers/date-calendar/)
  */
 export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const {
     ownerState
   } = usePickerPrivateContext();
@@ -171,10 +171,10 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     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);
     }
   });
 
@@ -208,13 +208,13 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     ownerState
   });
   const handleDateMonthChange = useEventCallback(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) ? 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,
@@ -235,13 +235,13 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     }
   });
   const handleDateYearChange = useEventCallback(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) ? 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,
@@ -264,12 +264,12 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   const handleSelectedDayChange = useEventCallback(day => {
     if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange(mergeDateAndTime(utils, day, value ?? referenceDate), 'finish', view);
+      return handleValueChange(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/esm/DateCalendar/DayCalendar.js

@@ -13,8 +13,8 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { PickersDay } from "../PickersDay/index.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
-import { useUtils, useNow } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.js";
+import { useNow } from "../internals/hooks/useUtils.js";
 import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
 import { PickersSlideTransition } from "./PickersSlideTransition.js";
 import { useIsDateDisabled } from "./useIsDateDisabled.js";
@@ -144,14 +144,14 @@ function WrappedDay(_ref) {
     slotProps,
     timezone
   } = parentProps;
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const now = 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 = usePickerDayOwnerState({
     day,
     selected: isSelected,
@@ -174,7 +174,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: _extends({}, ownerState, {
         day,
@@ -184,19 +184,19 @@ function WrappedDay(_ref) {
     }),
     dayProps = _objectWithoutPropertiesLoose(_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__*/_jsx(Day, _extends({}, dayProps, {
     day: day,
     disabled: isDisabled,
@@ -220,7 +220,7 @@ export function DayCalendar(inProps) {
     props: inProps,
     name: 'MuiDayCalendar'
   });
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const {
     onFocusedDayChange,
     className,
@@ -245,7 +245,7 @@ export 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,
@@ -282,22 +282,22 @@ export function DayCalendar(inProps) {
   const handleKeyDown = useEventCallback((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 = 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
           });
@@ -307,13 +307,13 @@ export 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 = 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
           });
@@ -322,19 +322,19 @@ export 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:
@@ -343,33 +343,33 @@ export function DayCalendar(inProps) {
   });
   const handleFocus = useEventCallback((event, day) => focusDay(day));
   const handleBlur = useEventCallback((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__*/_jsxs(PickersCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,
@@ -383,10 +383,10 @@ export function DayCalendar(inProps) {
         "aria-label": translations.calendarWeekNumberHeaderLabel,
         className: classes.weekNumberLabel,
         children: translations.calendarWeekNumberHeaderText
-      }), getWeekdays(utils, now).map((weekday, i) => /*#__PURE__*/_jsx(PickersCalendarWeekDayLabel, {
+      }), getWeekdays(adapter, now).map((weekday, i) => /*#__PURE__*/_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()))]
@@ -415,8 +415,8 @@ export function DayCalendar(inProps) {
           children: [displayWeekNumber && /*#__PURE__*/_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__*/_jsx(WrappedDay, {
             parentProps: props,
             day: day,

package/esm/DateCalendar/useCalendarState.js

@@ -4,28 +4,28 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useIsDateDisabled } from "./useIsDateDisabled.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
 import { findClosestEnabledDate } from "../internals/utils/date-utils.js";
-const createCalendarStateReducer = (reduceAnimations, utils) => (state, action) => {
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
+const createCalendarStateReducer = (reduceAnimations, adapter) => (state, action) => {
   switch (action.type) {
     case 'setVisibleDate':
       return _extends({}, 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 _extends({}, state, {
           currentMonth: newCurrentMonth
@@ -54,12 +54,12 @@ export const useCalendarState = params => {
     timezone,
     getCurrentMonthFromVisibleDate
   } = params;
-  const utils = useUtils();
-  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), utils)).current;
+  const adapter = usePickerAdapter();
+  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), adapter)).current;
   const referenceDate = React.useMemo(() => {
     return singleItemValueManager.getInitialReferenceValue({
       value,
-      utils,
+      adapter,
       timezone,
       props: params,
       referenceDate: referenceDateProp,
@@ -72,7 +72,7 @@ export 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 = useIsDateDisabled({
@@ -89,14 +89,14 @@ export const useCalendarState = params => {
   React.useEffect(() => {
     dispatch({
       type: 'changeMonthTimezone',
-      newTimezone: utils.getTimezone(referenceDate)
+      newTimezone: adapter.getTimezone(referenceDate)
     });
-  }, [referenceDate, utils]);
+  }, [referenceDate, adapter]);
   const setVisibleDate = useEventCallback(({
     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';
@@ -106,18 +106,18 @@ export 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 = 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,
@@ -125,19 +125,19 @@ export 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/esm/DateCalendar/useIsDateDisabled.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { validateDate } from "../validation/index.js";
-import { useLocalizationContext } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 export const useIsDateDisabled = ({
   shouldDisableDate,
   shouldDisableMonth,
@@ -13,7 +13,7 @@ export const useIsDateDisabled = ({
   disablePast,
   timezone
 }) => {
-  const adapter = useLocalizationContext();
+  const adapter = usePickerAdapter();
   return React.useCallback(day => validateDate({
     adapter,
     value: day,

package/esm/DatePicker/DatePickerToolbar.js

@@ -10,12 +10,10 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { PickersToolbar } from "../internals/components/PickersToolbar.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter, usePickerContext, usePickerTranslations } from "../hooks/index.js";
 import { getDatePickerToolbarUtilityClass } from "./datePickerToolbarClasses.js";
 import { resolveDateFormat } from "../internals/utils/date-utils.js";
 import { useToolbarOwnerState } from "../internals/hooks/useToolbarOwnerState.js";
-import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -63,7 +61,7 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
       classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const {
     value,
     views,
@@ -73,15 +71,15 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
   const ownerState = useToolbarOwnerState();
   const classes = useUtilityClasses(classesProp);
   const dateText = React.useMemo(() => {
-    if (!utils.isValid(value)) {
+    if (!adapter.isValid(value)) {
       return toolbarPlaceholder;
     }
-    const formatFromViews = resolveDateFormat(utils, {
+    const formatFromViews = 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__*/_jsx(DatePickerToolbarRoot, _extends({
     ref: ref,
     toolbarTitle: translations.datePickerToolbarTitle,

package/esm/DateTimeField/DateTimeField.js

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

package/esm/DateTimePicker/DateTimePicker.js

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