@mui/x-date-pickers 8.5.3 → 8.7.0

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;
 };

package/esm/DigitalClock/DigitalClock.js

@@ -14,8 +14,8 @@ import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import useForkRef from '@mui/utils/useForkRef';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-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 { createIsAfterIgnoreDatePart } from "../internals/utils/time-utils.js";
 import { PickerViewRoot } from "../internals/components/PickerViewRoot/index.js";
 import { getDigitalClockUtilityClass } from "./digitalClockClasses.js";
@@ -100,7 +100,7 @@ export const DigitalClockItem = styled(MenuItem, {
  * - [DigitalClock API](https://mui.com/x/api/date-pickers/digital-clock/)
  */
 export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
   const listRef = React.useRef(null);
@@ -109,7 +109,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     name: 'MuiDigitalClock'
   });
   const {
-      ampm = utils.is12HourCycleInCurrentLocale(),
+      ampm = adapter.is12HourCycleInCurrentLocale(),
       timeStep = 30,
       autoFocus,
       slots,
@@ -171,7 +171,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
   const valueOrReferenceDate = useClockReferenceDate({
     value,
     referenceDate: referenceDateProp,
-    utils,
+    adapter,
     props,
     timezone
   });
@@ -207,7 +207,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     containerRef.current.scrollTop = offsetTop - 4;
   });
   const isTimeDisabled = React.useCallback(valueToCheck => {
-    const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils);
+    const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, adapter);
     const containsValidTime = () => {
       if (minTime && isAfter(minTime, valueToCheck)) {
         return false;
@@ -224,7 +224,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
       return true;
     };
     const isValidValue = () => {
-      if (utils.getMinutes(valueToCheck) % minutesStep !== 0) {
+      if (adapter.getMinutes(valueToCheck) % minutesStep !== 0) {
         return false;
       }
       if (shouldDisableTime) {
@@ -233,18 +233,18 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
       return true;
     };
     return !containsValidTime() || !isValidValue();
-  }, [disableIgnoringDatePartForTimeValidation, utils, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableTime]);
+  }, [disableIgnoringDatePartForTimeValidation, adapter, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableTime]);
   const timeOptions = React.useMemo(() => {
     const result = [];
-    const startOfDay = utils.startOfDay(valueOrReferenceDate);
+    const startOfDay = adapter.startOfDay(valueOrReferenceDate);
     let nextTimeStepOption = startOfDay;
-    while (utils.isSameDay(valueOrReferenceDate, nextTimeStepOption)) {
+    while (adapter.isSameDay(valueOrReferenceDate, nextTimeStepOption)) {
       result.push(nextTimeStepOption);
-      nextTimeStepOption = utils.addMinutes(nextTimeStepOption, timeStep);
+      nextTimeStepOption = adapter.addMinutes(nextTimeStepOption, timeStep);
     }
     return result;
-  }, [valueOrReferenceDate, timeStep, utils]);
-  const focusedOptionIndex = timeOptions.findIndex(option => utils.isEqual(option, valueOrReferenceDate));
+  }, [valueOrReferenceDate, timeStep, adapter]);
+  const focusedOptionIndex = timeOptions.findIndex(option => adapter.isEqual(option, valueOrReferenceDate));
   const handleKeyDown = event => {
     switch (event.key) {
       case 'PageUp':
@@ -290,8 +290,8 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
         if (skipDisabled && optionDisabled) {
           return null;
         }
-        const isSelected = utils.isEqual(option, value);
-        const formattedValue = utils.format(option, ampm ? 'fullTime12h' : 'fullTime24h');
+        const isSelected = adapter.isEqual(option, value);
+        const formattedValue = adapter.format(option, ampm ? 'fullTime12h' : 'fullTime24h');
         const isFocused = focusedOptionIndex === index || focusedOptionIndex === -1 && index === 0;
         const tabIndex = isFocused ? 0 : -1;
         return /*#__PURE__*/_jsx(ClockItem, _extends({
@@ -322,7 +322,7 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**

package/esm/LocalizationProvider/LocalizationProvider.d.ts

@@ -1,16 +1,22 @@
 import * as React from 'react';
 import { AdapterFormats, MuiPickersAdapter, PickerValidDate } from "../models/index.js";
 import { PickersInputLocaleText } from "../locales/index.js";
-export interface MuiPickersAdapterContextValue {
+export interface PickersAdapterContextValue {
   defaultDates: {
     minDate: PickerValidDate;
     maxDate: PickerValidDate;
   };
   utils: MuiPickersAdapter;
+  adapter: MuiPickersAdapter;
   localeText: PickersInputLocaleText | undefined;
 }
-export type MuiPickersAdapterContextNullableValue = { [K in keyof MuiPickersAdapterContextValue]: MuiPickersAdapterContextValue[K] | null };
-export declare const MuiPickersAdapterContext: React.Context<MuiPickersAdapterContextNullableValue | null>;
+export type PickerAdapterContextNullableValue = { [K in keyof PickersAdapterContextValue]: PickersAdapterContextValue[K] | null };
+export declare const PickerAdapterContext: React.Context<PickerAdapterContextNullableValue | null>;
+/**
+ * The context that provides the date adapter and default dates to the pickers.
+ * @deprecated Use `usePickersAdapter` hook if you need access to the adapter instead.
+ */
+export declare const MuiPickersAdapterContext: React.Context<PickerAdapterContextNullableValue | null>;
 export interface LocalizationProviderProps<TLocale> {
   children?: React.ReactNode;
   /**

package/esm/LocalizationProvider/LocalizationProvider.js

@@ -7,8 +7,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const MuiPickersAdapterContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") MuiPickersAdapterContext.displayName = "MuiPickersAdapterContext";
+export const PickerAdapterContext = /*#__PURE__*/React.createContext(null);
+
+// TODO v9: Remove this public export
+/**
+ * The context that provides the date adapter and default dates to the pickers.
+ * @deprecated Use `usePickersAdapter` hook if you need access to the adapter instead.
+ */
+if (process.env.NODE_ENV !== "production") PickerAdapterContext.displayName = "PickerAdapterContext";
+export const MuiPickersAdapterContext = PickerAdapterContext;
 /**
  * Demos:
  *
@@ -27,10 +34,11 @@ export const LocalizationProvider = function LocalizationProvider(inProps) {
     } = inProps,
     otherInProps = _objectWithoutPropertiesLoose(inProps, _excluded);
   const {
-    utils: parentUtils,
+    adapter: parentAdapter,
     localeText: parentLocaleText
-  } = React.useContext(MuiPickersAdapterContext) ?? {
+  } = React.useContext(PickerAdapterContext) ?? {
     utils: undefined,
+    adapter: undefined,
     localeText: undefined
   };
   const props = useThemeProps({
@@ -48,40 +56,41 @@ export const LocalizationProvider = function LocalizationProvider(inProps) {
     localeText: themeLocaleText
   } = props;
   const localeText = React.useMemo(() => _extends({}, themeLocaleText, parentLocaleText, inLocaleText), [themeLocaleText, parentLocaleText, inLocaleText]);
-  const utils = React.useMemo(() => {
+  const adapter = React.useMemo(() => {
     if (!DateAdapter) {
-      if (parentUtils) {
-        return parentUtils;
+      if (parentAdapter) {
+        return parentAdapter;
       }
       return null;
     }
-    const adapter = new DateAdapter({
+    const dateAdapter = new DateAdapter({
       locale: adapterLocale,
       formats: dateFormats,
       instance: dateLibInstance
     });
-    if (!adapter.isMUIAdapter) {
+    if (!dateAdapter.isMUIAdapter) {
       throw new Error(['MUI X: The date adapter should be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`, not from `@date-io`', "For example, `import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'` instead of `import AdapterDayjs from '@date-io/dayjs'`", 'More information on the installation documentation: https://mui.com/x/react-date-pickers/quickstart/#installation'].join(`\n`));
     }
-    return adapter;
-  }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentUtils]);
+    return dateAdapter;
+  }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentAdapter]);
   const defaultDates = React.useMemo(() => {
-    if (!utils) {
+    if (!adapter) {
       return null;
     }
     return {
-      minDate: utils.date('1900-01-01T00:00:00.000'),
-      maxDate: utils.date('2099-12-31T00:00:00.000')
+      minDate: adapter.date('1900-01-01T00:00:00.000'),
+      maxDate: adapter.date('2099-12-31T00:00:00.000')
     };
-  }, [utils]);
+  }, [adapter]);
   const contextValue = React.useMemo(() => {
     return {
-      utils,
+      utils: adapter,
+      adapter,
       defaultDates,
       localeText
     };
-  }, [defaultDates, utils, localeText]);
-  return /*#__PURE__*/_jsx(MuiPickersAdapterContext.Provider, {
+  }, [defaultDates, adapter, localeText]);
+  return /*#__PURE__*/_jsx(PickerAdapterContext.Provider, {
     value: contextValue,
     children: children
   });

package/esm/MobileDatePicker/MobileDatePicker.js

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

package/esm/MobileDateTimePicker/MobileDateTimePicker.js

@@ -8,7 +8,7 @@ import refType from '@mui/utils/refType';
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { DateTimeField } from "../DateTimeField/index.js";
 import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 import { extractValidationProps, validateDateTime } from "../validation/index.js";
 import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
@@ -36,7 +36,7 @@ const STEPS = [{
  * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/)
  */
 const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiMobileDateTimePicker');
@@ -58,7 +58,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
   // Props with the default values specific to the mobile variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
-    format: resolveDateTimeFormat(utils, defaultizedProps),
+    format: resolveDateTimeFormat(adapter, defaultizedProps),
     views,
     ampmInClock,
     slots: _extends({
@@ -118,7 +118,7 @@ MobileDateTimePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**

package/esm/MobileTimePicker/MobileTimePicker.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 { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
 import { renderTimeViewClock } from "../timeViewRenderers/index.js";
@@ -24,7 +24,7 @@ import { resolveTimeFormat } from "../internals/utils/time-utils.js";
  * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/)
  */
 const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiMobileTimePicker');
@@ -39,7 +39,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
   const props = _extends({}, defaultizedProps, {
     ampmInClock,
     viewRenderers,
-    format: resolveTimeFormat(utils, defaultizedProps),
+    format: resolveTimeFormat(adapter, defaultizedProps),
     slots: _extends({
       field: TimeField
     }, defaultizedProps.slots),
@@ -71,7 +71,7 @@ MobileTimePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**

package/esm/MonthCalendar/MonthCalendar.js

@@ -13,7 +13,7 @@ import useControlled from '@mui/utils/useControlled';
 import composeClasses from '@mui/utils/composeClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { MonthCalendarButton } from "./MonthCalendarButton.js";
-import { useUtils, useNow } from "../internals/hooks/useUtils.js";
+import { useNow } from "../internals/hooks/useUtils.js";
 import { getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";
 import { getMonthsInYear } from "../internals/utils/date-utils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
@@ -22,6 +22,7 @@ import { useControlledValue } from "../internals/hooks/useControlledValue.js";
 import { DIALOG_WIDTH } 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 } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -119,13 +120,13 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
   });
   const now = useNow(timezone);
   const isRtl = useRtl();
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const {
     ownerState
   } = usePickerPrivateContext();
   const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
     value,
-    utils,
+    adapter,
     props,
     timezone,
     referenceDate: referenceDateProp,
@@ -133,14 +134,14 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
   const classes = useUtilityClasses(classesProp);
-  const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);
+  const todayMonth = React.useMemo(() => adapter.getMonth(now), [adapter, now]);
   const selectedMonth = React.useMemo(() => {
     if (value != null) {
-      return utils.getMonth(value);
+      return adapter.getMonth(value);
     }
     return null;
-  }, [value, utils]);
-  const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || utils.getMonth(referenceDate));
+  }, [value, adapter]);
+  const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || adapter.getMonth(referenceDate));
   const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'MonthCalendar',
     state: 'hasFocus',
@@ -154,29 +155,29 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     }
   });
   const isMonthDisabled = React.useCallback(dateToValidate => {
-    const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
-    const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
-    const monthToValidate = utils.startOfMonth(dateToValidate);
-    if (utils.isBefore(monthToValidate, firstEnabledMonth)) {
+    const firstEnabledMonth = adapter.startOfMonth(disablePast && adapter.isAfter(now, minDate) ? now : minDate);
+    const lastEnabledMonth = adapter.startOfMonth(disableFuture && adapter.isBefore(now, maxDate) ? now : maxDate);
+    const monthToValidate = adapter.startOfMonth(dateToValidate);
+    if (adapter.isBefore(monthToValidate, firstEnabledMonth)) {
       return true;
     }
-    if (utils.isAfter(monthToValidate, lastEnabledMonth)) {
+    if (adapter.isAfter(monthToValidate, lastEnabledMonth)) {
       return true;
     }
     if (!shouldDisableMonth) {
       return false;
     }
     return shouldDisableMonth(monthToValidate);
-  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, utils]);
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, adapter]);
   const handleMonthSelection = useEventCallback((event, month) => {
     if (readOnly) {
       return;
     }
-    const newDate = utils.setMonth(value ?? referenceDate, month);
+    const newDate = adapter.setMonth(value ?? referenceDate, month);
     handleValueChange(newDate);
   });
   const focusMonth = useEventCallback(month => {
-    if (!isMonthDisabled(utils.setMonth(value ?? referenceDate, month))) {
+    if (!isMonthDisabled(adapter.setMonth(value ?? referenceDate, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
       if (onMonthFocus) {
@@ -227,10 +228,10 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     "aria-labelledby": gridLabelId,
     monthsPerRow: monthsPerRow
   }, other, {
-    children: getMonthsInYear(utils, value ?? referenceDate).map(month => {
-      const monthNumber = utils.getMonth(month);
-      const monthText = utils.format(month, 'monthShort');
-      const monthLabel = utils.format(month, 'month');
+    children: getMonthsInYear(adapter, value ?? referenceDate).map(month => {
+      const monthNumber = adapter.getMonth(month);
+      const monthText = adapter.format(month, 'monthShort');
+      const monthLabel = adapter.format(month, 'month');
       const isSelected = monthNumber === selectedMonth;
       const isDisabled = disabled || isMonthDisabled(month);
       return /*#__PURE__*/_jsx(MonthCalendarButton, {