@mui/x-date-pickers 8.5.3 → 8.6.0

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,
   /**

package/esm/DateTimePicker/DateTimePickerToolbar.js

@@ -12,8 +12,7 @@ import { shouldForwardProp } from '@mui/system/createStyled';
 import { PickersToolbarText } from "../internals/components/PickersToolbarText.js";
 import { PickersToolbar } from "../internals/components/PickersToolbar.js";
 import { PickersToolbarButton } from "../internals/components/PickersToolbarButton.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.js";
 import { dateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass } from "./dateTimePickerToolbarClasses.js";
 import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
 import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimensions.js";
@@ -247,7 +246,7 @@ function DateTimePickerToolbar(inProps) {
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
   const classes = useUtilityClasses(classesProp, ownerState);
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const overrides = React.useContext(DateTimePickerToolbarOverrideContext);
   const value = overrides ? overrides.value : valueContext;
   const setValue = overrides ? overrides.setValue : setValueContext;
@@ -264,19 +263,19 @@ function DateTimePickerToolbar(inProps) {
   const showAmPmControl = Boolean(ampm && !ampmInClock);
   const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle;
   const dateText = React.useMemo(() => {
-    if (!utils.isValid(value)) {
+    if (!adapter.isValid(value)) {
       return toolbarPlaceholder;
     }
     if (toolbarFormat) {
-      return utils.formatByString(value, toolbarFormat);
+      return adapter.formatByString(value, toolbarFormat);
     }
-    return utils.format(value, 'shortDate');
-  }, [value, toolbarFormat, toolbarPlaceholder, utils]);
+    return adapter.format(value, 'shortDate');
+  }, [value, toolbarFormat, toolbarPlaceholder, adapter]);
   const formatSection = (format, fallback) => {
-    if (!utils.isValid(value)) {
+    if (!adapter.isValid(value)) {
       return fallback;
     }
-    return utils.format(value, format);
+    return adapter.format(value, format);
   };
   return /*#__PURE__*/_jsxs(DateTimePickerToolbarRoot, _extends({
     className: clsx(classes.root, className),
@@ -351,14 +350,14 @@ function DateTimePickerToolbar(inProps) {
           variant: "subtitle2",
           selected: meridiemMode === 'am',
           typographyClassName: classes.ampmLabel,
-          value: formatMeridiem(utils, 'am'),
+          value: formatMeridiem(adapter, 'am'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
           disabled: disabled
         }), /*#__PURE__*/_jsx(PickersToolbarButton, {
           variant: "subtitle2",
           selected: meridiemMode === 'pm',
           typographyClassName: classes.ampmLabel,
-          value: formatMeridiem(utils, 'pm'),
+          value: formatMeridiem(adapter, 'pm'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
           disabled: disabled
         })]
@@ -366,7 +365,7 @@ function DateTimePickerToolbar(inProps) {
         variant: "h5",
         onClick: () => setView('meridiem'),
         selected: view === 'meridiem',
-        value: value && meridiemMode ? formatMeridiem(utils, meridiemMode) : '--',
+        value: value && meridiemMode ? formatMeridiem(adapter, meridiemMode) : '--',
         width: MULTI_SECTION_CLOCK_SECTION_WIDTH
       })]
     })]

package/esm/DateTimePicker/shared.js

@@ -1,20 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 import { DateTimePickerTabs } from "./DateTimePickerTabs.js";
 import { DateTimePickerToolbar } from "./DateTimePickerToolbar.js";
 import { applyDefaultViewProps } from "../internals/utils/views.js";
 import { resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js";
 import { useApplyDefaultValuesToDateTimeValidationProps } from "../managers/useDateTimeManager.js";
 export function useDateTimePickerDefaultizedProps(props, name) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const themeProps = useThemeProps({
     props,
     name
   });
   const validationProps = useApplyDefaultValuesToDateTimeValidationProps(themeProps);
-  const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
+  const ampm = themeProps.ampm ?? adapter.is12HourCycleInCurrentLocale();
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;

package/esm/DesktopDatePicker/DesktopDatePicker.js

@@ -7,7 +7,7 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import refType from '@mui/utils/refType';
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useDatePickerDefaultizedProps } from "../DatePicker/shared.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 import { validateDate, extractValidationProps } from "../validation/index.js";
 import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
 import { DateField } from "../DateField/index.js";
@@ -24,7 +24,7 @@ import { resolveDateFormat } from "../internals/utils/date-utils.js";
  * - [DesktopDatePicker API](https://mui.com/x/api/date-pickers/desktop-date-picker/)
  */
 const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
 
   // Props with the default values common to all date pickers
   const defaultizedProps = useDatePickerDefaultizedProps(inProps, 'MuiDesktopDatePicker');
@@ -38,7 +38,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
   const props = _extends({}, defaultizedProps, {
     closeOnSelect: defaultizedProps.closeOnSelect ?? true,
     viewRenderers,
-    format: resolveDateFormat(utils, defaultizedProps, false),
+    format: resolveDateFormat(adapter, defaultizedProps, false),
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     slots: _extends({
       field: DateField

package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -12,7 +12,7 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { DateTimeField } from "../DateTimeField/index.js";
 import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/dateViewRenderers.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 import { validateDateTime, extractValidationProps } from "../validation/index.js";
 import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
 import { resolveDateTimeFormat } from "../internals/utils/date-time-utils.js";
@@ -90,7 +90,7 @@ if (process.env.NODE_ENV !== "production") rendererInterceptor.displayName = "re
  * - [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/)
  */
 const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiDesktopDateTimePicker');
@@ -112,7 +112,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
-    format: resolveDateTimeFormat(utils, defaultizedProps),
+    format: resolveDateTimeFormat(adapter, defaultizedProps),
     views,
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     ampmInClock,
@@ -152,7 +152,7 @@ DesktopDateTimePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**

package/esm/DesktopTimePicker/DesktopTimePicker.js

@@ -8,7 +8,7 @@ import refType from '@mui/utils/refType';
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { TimeField } from "../TimeField/index.js";
 import { useTimePickerDefaultizedProps } from "../TimePicker/shared.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 import { extractValidationProps, validateTime } from "../validation/index.js";
 import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
@@ -25,7 +25,7 @@ import { resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js"
  * - [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/)
  */
 const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiDesktopTimePicker');
@@ -51,7 +51,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     ampmInClock,
     timeSteps,
     viewRenderers,
-    format: resolveTimeFormat(utils, defaultizedProps),
+    format: resolveTimeFormat(adapter, defaultizedProps),
     // Setting only `hours` time view in case of single column time picker
     // Allows for easy view lifecycle management
     views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
@@ -86,7 +86,7 @@ DesktopTimePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**

package/esm/DigitalClock/DigitalClock.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DigitalClockProps } from "./DigitalClock.types.js";
-export declare const DigitalClockItem: import("@emotion/styled").StyledComponent<import("@mui/material/MenuItem").MenuItemOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "disabled" | "autoFocus" | "dense" | "tabIndex" | "classes" | "className" | "style" | "children" | "sx" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableGutters" | "divider" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const DigitalClockItem: import("@emotion/styled").StyledComponent<import("@mui/material/MenuItem").MenuItemOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "disabled" | "autoFocus" | "dense" | "style" | "tabIndex" | "className" | "children" | "classes" | "sx" | "disableGutters" | "divider" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 type DigitalClockComponent = ((props: DigitalClockProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };