@mui/x-date-pickers 8.5.3 → 8.6.0

package/esm/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js

@@ -1,14 +1,14 @@
 export const getHourSectionOptions = ({
   now,
   value,
-  utils,
+  adapter,
   ampm,
   isDisabled,
   resolveAriaLabel,
   timeStep,
   valueOrReferenceDate
 }) => {
-  const currentHours = value ? utils.getHours(value) : null;
+  const currentHours = value ? adapter.getHours(value) : null;
   const result = [];
   const isSelected = (hour, overriddenCurrentHours) => {
     const resolvedCurrentHours = overriddenCurrentHours ?? currentHours;
@@ -24,13 +24,13 @@ export const getHourSectionOptions = ({
     return resolvedCurrentHours === hour;
   };
   const isFocused = hour => {
-    return isSelected(hour, utils.getHours(valueOrReferenceDate));
+    return isSelected(hour, adapter.getHours(valueOrReferenceDate));
   };
   const endHour = ampm ? 11 : 23;
   for (let hour = 0; hour <= endHour; hour += timeStep) {
-    let label = utils.format(utils.setHours(now, hour), ampm ? 'hours12h' : 'hours24h');
+    let label = adapter.format(adapter.setHours(now, hour), ampm ? 'hours12h' : 'hours24h');
     const ariaLabel = resolveAriaLabel(parseInt(label, 10).toString());
-    label = utils.formatNumber(label);
+    label = adapter.formatNumber(label);
     result.push({
       value: hour,
       label,
@@ -44,7 +44,7 @@ export const getHourSectionOptions = ({
 };
 export const getTimeSectionOptions = ({
   value,
-  utils,
+  adapter,
   isDisabled,
   timeStep,
   resolveLabel,
@@ -66,7 +66,7 @@ export const getTimeSectionOptions = ({
     const timeValue = timeStep * index;
     return {
       value: timeValue,
-      label: utils.formatNumber(resolveLabel(timeValue)),
+      label: adapter.formatNumber(resolveLabel(timeValue)),
       isDisabled,
       isSelected,
       isFocused,

package/esm/PickerDay2/PickerDay2.js

@@ -11,7 +11,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { DAY_MARGIN, DAY_SIZE } from "../internals/constants/dimensions.js";
 import { pickerDay2Classes, getPickerDay2UtilityClass } from "./pickerDay2Classes.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 import { usePickerDayOwnerState } from "../PickersDay/usePickerDayOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = (ownerState, classes) => {
@@ -120,7 +120,7 @@ const PickerDay2Raw = /*#__PURE__*/React.forwardRef(function PickerDay2(inProps,
     props: inProps,
     name: 'MuiPickerDay2'
   });
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const {
       autoFocus = false,
       className,
@@ -207,7 +207,7 @@ const PickerDay2Raw = /*#__PURE__*/React.forwardRef(function PickerDay2(inProps,
   }, other, {
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    children: children ?? (ownerState.isDayFillerCell ? null : utils.format(day, 'dayOfMonth'))
+    children: children ?? (ownerState.isDayFillerCell ? null : adapter.format(day, 'dayOfMonth'))
   }));
 });
 if (process.env.NODE_ENV !== "production") PickerDay2Raw.displayName = "PickerDay2Raw";

package/esm/PickersActionBar/PickersActionBar.d.ts

@@ -6,8 +6,8 @@ export interface PickersActionBarProps extends DialogActionsProps {
    * Ordered array of actions to display.
    * If empty, does not display that action bar.
    * @default
-   * - `[]` for Desktop Date Picker and Desktop Date Range Picker
-   * - `['cancel', 'accept']` for all other Pickers
+   * - `[]` for Pickers with one selection step which `closeOnSelect`.
+   * - `['cancel', 'nextOrAccept']` for all other Pickers.
    */
   actions?: PickersActionBarAction[];
 }

package/esm/PickersActionBar/PickersActionBar.js

@@ -98,8 +98,8 @@ process.env.NODE_ENV !== "production" ? PickersActionBarComponent.propTypes = {
    * Ordered array of actions to display.
    * If empty, does not display that action bar.
    * @default
-   * - `[]` for Desktop Date Picker and Desktop Date Range Picker
-   * - `['cancel', 'accept']` for all other Pickers
+   * - `[]` for Pickers with one selection step which `closeOnSelect`.
+   * - `['cancel', 'nextOrAccept']` for all other Pickers.
    */
   actions: PropTypes.arrayOf(PropTypes.oneOf(['accept', 'cancel', 'clear', 'next', 'nextOrAccept', 'today']).isRequired),
   /**

package/esm/PickersCalendarHeader/PickersCalendarHeader.js

@@ -12,8 +12,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import IconButton from '@mui/material/IconButton';
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.js";
 import { PickersFadeTransitionGroup } from "../DateCalendar/PickersFadeTransitionGroup.js";
 import { ArrowDropDownIcon } from "../icons/index.js";
 import { PickersArrowSwitcher } from "../internals/components/PickersArrowSwitcher/index.js";
@@ -104,7 +103,7 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
  */
 const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
   const translations = usePickerTranslations();
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPickersCalendarHeader'
@@ -127,7 +126,7 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
       className,
       classes: classesProp,
       timezone,
-      format = `${utils.formats.month} ${utils.formats.year}`
+      format = `${adapter.formats.month} ${adapter.formats.year}`
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -156,8 +155,8 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
       className: classes.switchViewIcon
     }),
     switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1));
-  const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1));
+  const selectNextMonth = () => onMonthChange(adapter.addMonths(month, 1));
+  const selectPreviousMonth = () => onMonthChange(adapter.addMonths(month, -1));
   const isNextMonthDisabled = useNextMonthDisabled(month, {
     disableFuture,
     maxDate,
@@ -185,7 +184,7 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
   if (views.length === 1 && views[0] === 'year') {
     return null;
   }
-  const label = utils.formatByString(month, format);
+  const label = adapter.formatByString(month, format);
   return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, _extends({}, other, {
     ownerState: ownerState,
     className: clsx(classes.root, className),

package/esm/PickersDay/PickersDay.js

@@ -11,7 +11,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import composeClasses from '@mui/utils/composeClasses';
 import useForkRef from '@mui/utils/useForkRef';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
 import { getPickersDayUtilityClass, pickersDayClasses } from "./pickersDayClasses.js";
 import { usePickerDayOwnerState } from "./usePickerDayOwnerState.js";
@@ -164,7 +164,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
     showDaysOutsideCurrentMonth
   });
   const classes = useUtilityClasses(classesProp, ownerState);
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const ref = React.useRef(null);
   const handleRef = useForkRef(ref, forwardedRef);
 
@@ -217,7 +217,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
     onMouseDown: handleMouseDown
   }, other, {
     ownerState: ownerState,
-    children: children ?? utils.format(day, 'dayOfMonth')
+    children: children ?? adapter.format(day, 'dayOfMonth')
   }));
 });
 if (process.env.NODE_ENV !== "production") PickersDayRaw.displayName = "PickersDayRaw";

package/esm/PickersDay/usePickerDayOwnerState.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 export function usePickerDayOwnerState(parameters) {
   const {
     disabled,
@@ -13,7 +13,7 @@ export function usePickerDayOwnerState(parameters) {
     disableHighlightToday,
     showDaysOutsideCurrentMonth
   } = parameters;
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const {
     ownerState: pickerOwnerState
   } = usePickerPrivateContext();
@@ -23,10 +23,10 @@ export function usePickerDayOwnerState(parameters) {
     isDayDisabled: disabled ?? false,
     isDayCurrent: today ?? false,
     isDayOutsideMonth: outsideCurrentMonth ?? false,
-    isDayStartOfWeek: utils.isSameDay(day, utils.startOfWeek(day)),
-    isDayEndOfWeek: utils.isSameDay(day, utils.endOfWeek(day)),
+    isDayStartOfWeek: adapter.isSameDay(day, adapter.startOfWeek(day)),
+    isDayEndOfWeek: adapter.isSameDay(day, adapter.endOfWeek(day)),
     disableMargin: disableMargin ?? false,
     disableHighlightToday: disableHighlightToday ?? false,
     showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth ?? false
-  }), [utils, pickerOwnerState, day, selected, disabled, today, outsideCurrentMonth, disableMargin, disableHighlightToday, showDaysOutsideCurrentMonth]);
+  }), [adapter, pickerOwnerState, day, selected, disabled, today, outsideCurrentMonth, disableMargin, disableHighlightToday, showDaysOutsideCurrentMonth]);
 }

package/esm/StaticDateTimePicker/StaticDateTimePicker.js

@@ -107,7 +107,7 @@ StaticDateTimePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**

package/esm/StaticTimePicker/StaticTimePicker.js

@@ -60,7 +60,7 @@ StaticTimePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**

package/esm/TimeClock/Clock.js

@@ -7,8 +7,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import composeClasses from '@mui/utils/composeClasses';
 import { ClockPointer } from "./ClockPointer.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.js";
 import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from "./shared.js";
 import { getClockUtilityClass } from "./clockClasses.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
@@ -176,7 +175,7 @@ export function Clock(inProps) {
     className,
     classes: classesProp
   } = props;
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const translations = usePickerTranslations();
   const {
     ownerState: pickerOwnerState
@@ -310,7 +309,7 @@ export function Clock(inProps) {
         })]
       }), /*#__PURE__*/_jsx(ClockWrapper, {
         "aria-activedescendant": selectedId,
-        "aria-label": translations.clockLabelText(type, value == null ? null : utils.format(value, ampm ? 'fullTime12h' : 'fullTime24h')),
+        "aria-label": translations.clockLabelText(type, value == null ? null : adapter.format(value, ampm ? 'fullTime12h' : 'fullTime24h')),
         ref: listboxRef,
         role: "listbox",
         onKeyDown: handleKeyDown,
@@ -324,22 +323,22 @@ export function Clock(inProps) {
         disabled: disabled || meridiemMode === null,
         ownerState: ownerState,
         className: classes.amButton,
-        title: formatMeridiem(utils, 'am'),
+        title: formatMeridiem(adapter, 'am'),
         children: /*#__PURE__*/_jsx(ClockMeridiemText, {
           variant: "caption",
           className: classes.meridiemText,
-          children: formatMeridiem(utils, 'am')
+          children: formatMeridiem(adapter, 'am')
         })
       }), /*#__PURE__*/_jsx(ClockPmButton, {
         disabled: disabled || meridiemMode === null,
         onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
         ownerState: ownerState,
         className: classes.pmButton,
-        title: formatMeridiem(utils, 'pm'),
+        title: formatMeridiem(adapter, 'pm'),
         children: /*#__PURE__*/_jsx(ClockMeridiemText, {
           variant: "caption",
           className: classes.meridiemText,
-          children: formatMeridiem(utils, 'pm')
+          children: formatMeridiem(adapter, 'pm')
         })
       })]
     })]

package/esm/TimeClock/ClockNumbers.d.ts

@@ -12,7 +12,7 @@ interface GetHourNumbersOptions {
    * Should only be `undefined` on the server
    */
   selectedId: string | undefined;
-  utils: MuiPickersAdapter;
+  adapter: MuiPickersAdapter;
 }
 /**
  * @ignore - internal component.
@@ -23,10 +23,10 @@ export declare const getHourNumbers: ({
   getClockNumberText,
   isDisabled,
   selectedId,
-  utils
+  adapter
 }: GetHourNumbersOptions) => React.JSX.Element[];
 export declare const getMinutesNumbers: ({
-  utils,
+  adapter,
   value,
   isDisabled,
   getClockNumberText,

package/esm/TimeClock/ClockNumbers.js

@@ -10,9 +10,9 @@ export const getHourNumbers = ({
   getClockNumberText,
   isDisabled,
   selectedId,
-  utils
+  adapter
 }) => {
-  const currentHours = value ? utils.getHours(value) : null;
+  const currentHours = value ? adapter.getHours(value) : null;
   const hourNumbers = [];
   const startHour = ampm ? 1 : 0;
   const endHour = ampm ? 12 : 23;
@@ -34,7 +34,7 @@ export const getHourNumbers = ({
       label = '00';
     }
     const inner = !ampm && (hour === 0 || hour > 12);
-    label = utils.formatNumber(label);
+    label = adapter.formatNumber(label);
     const selected = isSelected(hour);
     hourNumbers.push(/*#__PURE__*/_jsx(ClockNumber, {
       id: selected ? selectedId : undefined,
@@ -49,13 +49,13 @@ export const getHourNumbers = ({
   return hourNumbers;
 };
 export const getMinutesNumbers = ({
-  utils,
+  adapter,
   value,
   isDisabled,
   getClockNumberText,
   selectedId
 }) => {
-  const f = utils.formatNumber;
+  const f = adapter.formatNumber;
   return [[5, f('05')], [10, f('10')], [15, f('15')], [20, f('20')], [25, f('25')], [30, f('30')], [35, f('35')], [40, f('40')], [45, f('45')], [50, f('50')], [55, f('55')], [0, f('00')]].map(([numberValue, label], index) => {
     const selected = numberValue === value;
     return /*#__PURE__*/_jsx(ClockNumber, {

package/esm/TimeClock/TimeClock.js

@@ -9,8 +9,8 @@ import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
-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 { PickersArrowSwitcher } from "../internals/components/PickersArrowSwitcher/index.js";
 import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from "../internals/utils/time-utils.js";
 import { useViews } from "../internals/hooks/useViews.js";
@@ -60,13 +60,13 @@ const TIME_CLOCK_DEFAULT_VIEWS = ['hours', 'minutes'];
  * - [TimeClock API](https://mui.com/x/api/date-pickers/time-clock/)
  */
 export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTimeClock'
   });
   const {
-      ampm = utils.is12HourCycleInCurrentLocale(),
+      ampm = adapter.is12HourCycleInCurrentLocale(),
       ampmInClock = false,
       autoFocus,
       slots,
@@ -112,7 +112,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
   const valueOrReferenceDate = useClockReferenceDate({
     value,
     referenceDate: referenceDateProp,
-    utils,
+    adapter,
     props,
     timezone
   });
@@ -142,7 +142,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     handleMeridiemChange
   } = useMeridiemMode(valueOrReferenceDate, ampm, setValueAndGoToNextView);
   const isTimeDisabled = React.useCallback((rawValue, viewType) => {
-    const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils);
+    const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, adapter);
     const shouldCheckPastEnd = viewType === 'hours' || viewType === 'minutes' && views.includes('seconds');
     const containsValidTime = ({
       start,
@@ -169,11 +169,11 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       if (shouldDisableTime) {
         switch (viewType) {
           case 'hours':
-            return !shouldDisableTime(utils.setHours(valueOrReferenceDate, timeValue), 'hours');
+            return !shouldDisableTime(adapter.setHours(valueOrReferenceDate, timeValue), 'hours');
           case 'minutes':
-            return !shouldDisableTime(utils.setMinutes(valueOrReferenceDate, timeValue), 'minutes');
+            return !shouldDisableTime(adapter.setMinutes(valueOrReferenceDate, timeValue), 'minutes');
           case 'seconds':
-            return !shouldDisableTime(utils.setSeconds(valueOrReferenceDate, timeValue), 'seconds');
+            return !shouldDisableTime(adapter.setSeconds(valueOrReferenceDate, timeValue), 'seconds');
           default:
             return false;
         }
@@ -184,12 +184,12 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       case 'hours':
         {
           const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
-          const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
-          if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
+          const dateWithNewHours = adapter.setHours(valueOrReferenceDate, valueWithMeridiem);
+          if (adapter.getHours(dateWithNewHours) !== valueWithMeridiem) {
             return true;
           }
-          const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
-          const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
+          const start = adapter.setSeconds(adapter.setMinutes(dateWithNewHours, 0), 0);
+          const end = adapter.setSeconds(adapter.setMinutes(dateWithNewHours, 59), 59);
           return !containsValidTime({
             start,
             end
@@ -197,9 +197,9 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       case 'minutes':
         {
-          const dateWithNewMinutes = utils.setMinutes(valueOrReferenceDate, rawValue);
-          const start = utils.setSeconds(dateWithNewMinutes, 0);
-          const end = utils.setSeconds(dateWithNewMinutes, 59);
+          const dateWithNewMinutes = adapter.setMinutes(valueOrReferenceDate, rawValue);
+          const start = adapter.setSeconds(dateWithNewMinutes, 0);
+          const end = adapter.setSeconds(dateWithNewMinutes, 59);
           return !containsValidTime({
             start,
             end
@@ -207,7 +207,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       case 'seconds':
         {
-          const dateWithNewSeconds = utils.setSeconds(valueOrReferenceDate, rawValue);
+          const dateWithNewSeconds = adapter.setSeconds(valueOrReferenceDate, rawValue);
           const start = dateWithNewSeconds;
           const end = dateWithNewSeconds;
           return !containsValidTime({
@@ -218,16 +218,16 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       default:
         throw new Error('not supported');
     }
-  }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
+  }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, adapter, disableFuture, disablePast, now, views]);
   const viewProps = React.useMemo(() => {
     switch (view) {
       case 'hours':
         {
           const handleHoursChange = (hourValue, isFinish) => {
             const valueWithMeridiem = convertValueToMeridiem(hourValue, meridiemMode, ampm);
-            setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
+            setValueAndGoToNextView(adapter.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
           };
-          const viewValue = utils.getHours(valueOrReferenceDate);
+          const viewValue = adapter.getHours(valueOrReferenceDate);
           let viewRange;
           if (ampm) {
             if (viewValue > 12) {
@@ -243,7 +243,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
             viewValue,
             children: getHourNumbers({
               value,
-              utils,
+              adapter,
               ampm,
               onChange: handleHoursChange,
               getClockNumberText: translations.hoursClockNumberText,
@@ -255,15 +255,15 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       case 'minutes':
         {
-          const minutesValue = utils.getMinutes(valueOrReferenceDate);
+          const minutesValue = adapter.getMinutes(valueOrReferenceDate);
           const handleMinutesChange = (minuteValue, isFinish) => {
-            setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minuteValue), isFinish, 'minutes');
+            setValueAndGoToNextView(adapter.setMinutes(valueOrReferenceDate, minuteValue), isFinish, 'minutes');
           };
           return {
             viewValue: minutesValue,
             onChange: handleMinutesChange,
             children: getMinutesNumbers({
-              utils,
+              adapter,
               value: minutesValue,
               onChange: handleMinutesChange,
               getClockNumberText: translations.minutesClockNumberText,
@@ -275,15 +275,15 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       case 'seconds':
         {
-          const secondsValue = utils.getSeconds(valueOrReferenceDate);
+          const secondsValue = adapter.getSeconds(valueOrReferenceDate);
           const handleSecondsChange = (secondValue, isFinish) => {
-            setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, secondValue), isFinish, 'seconds');
+            setValueAndGoToNextView(adapter.setSeconds(valueOrReferenceDate, secondValue), isFinish, 'seconds');
           };
           return {
             viewValue: secondsValue,
             onChange: handleSecondsChange,
             children: getMinutesNumbers({
-              utils,
+              adapter,
               value: secondsValue,
               onChange: handleSecondsChange,
               getClockNumberText: translations.secondsClockNumberText,
@@ -296,7 +296,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       default:
         throw new Error('You must provide the type for ClockView');
     }
-  }, [view, utils, value, ampm, translations.hoursClockNumberText, translations.minutesClockNumberText, translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
+  }, [view, adapter, value, ampm, translations.hoursClockNumberText, translations.minutesClockNumberText, translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
   const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsxs(TimeClockRoot, _extends({
     ref: ref,
@@ -338,7 +338,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**

package/esm/TimeField/TimeField.js

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

package/esm/TimePicker/TimePicker.js

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

package/esm/TimePicker/TimePickerToolbar.js

@@ -12,12 +12,10 @@ import { PickersToolbarText } from "../internals/components/PickersToolbarText.j
 import { PickersToolbarButton } from "../internals/components/PickersToolbarButton.js";
 import { PickersToolbar } from "../internals/components/PickersToolbar.js";
 import { arrayIncludes } from "../internals/utils/utils.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter, usePickerContext, usePickerTranslations } from "../hooks/index.js";
 import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from "./timePickerToolbarClasses.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
-import { usePickerContext } from "../hooks/index.js";
 import { useToolbarOwnerState } from "../internals/hooks/useToolbarOwnerState.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = (classes, ownerState) => {
@@ -124,7 +122,7 @@ function TimePickerToolbar(inProps) {
       classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
   const classes = useUtilityClasses(classesProp, ownerState);
@@ -145,10 +143,10 @@ function TimePickerToolbar(inProps) {
     changeImportance: 'set'
   }));
   const formatSection = format => {
-    if (!utils.isValid(value)) {
+    if (!adapter.isValid(value)) {
       return '--';
     }
-    return utils.format(value, format);
+    return adapter.format(value, format);
   };
   const separator = /*#__PURE__*/_jsx(TimePickerToolbarSeparator, {
     tabIndex: -1,
@@ -192,7 +190,7 @@ function TimePickerToolbar(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, {
@@ -200,7 +198,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'pm',
         typographyClassName: classes.ampmLabel,
-        value: formatMeridiem(utils, 'pm'),
+        value: formatMeridiem(adapter, 'pm'),
         onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
         disabled: disabled
       })]

package/esm/TimePicker/shared.js

@@ -1,18 +1,18 @@
 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 { TimePickerToolbar } from "./TimePickerToolbar.js";
 import { applyDefaultViewProps } from "../internals/utils/views.js";
 import { useApplyDefaultValuesToTimeValidationProps } from "../managers/useTimeManager.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 export function useTimePickerDefaultizedProps(props, name) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const themeProps = useThemeProps({
     props,
     name
   });
   const validationProps = useApplyDefaultValuesToTimeValidationProps(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;