@mui/x-date-pickers 8.5.2 → 8.6.0

package/esm/managers/useTimeManager.js

@@ -4,8 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { validateTime } from "../validation/index.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.js";
 export function useTimeManager(parameters = {}) {
   const {
     enableAccessibleFieldDOMStructure = true,
@@ -23,22 +22,22 @@ export function useTimeManager(parameters = {}) {
 }
 function createUseOpenPickerButtonAriaLabel(ampm) {
   return function useOpenPickerButtonAriaLabel(value) {
-    const utils = useUtils();
+    const adapter = usePickerAdapter();
     const translations = usePickerTranslations();
     return React.useMemo(() => {
-      const formatKey = ampm ?? utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h';
-      const formattedValue = utils.isValid(value) ? utils.format(value, formatKey) : null;
+      const formatKey = ampm ?? adapter.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h';
+      const formattedValue = adapter.isValid(value) ? adapter.format(value, formatKey) : null;
       return translations.openTimePickerDialogue(formattedValue);
-    }, [value, translations, utils]);
+    }, [value, translations, adapter]);
   };
 }
 function useApplyDefaultValuesToTimeFieldInternalProps(internalProps) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const validationProps = useApplyDefaultValuesToTimeValidationProps(internalProps);
-  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  const ampm = React.useMemo(() => internalProps.ampm ?? adapter.is12HourCycleInCurrentLocale(), [internalProps.ampm, adapter]);
   return React.useMemo(() => _extends({}, internalProps, validationProps, {
-    format: internalProps.format ?? (ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h)
-  }), [internalProps, validationProps, ampm, utils]);
+    format: internalProps.format ?? (ampm ? adapter.formats.fullTime12h : adapter.formats.fullTime24h)
+  }), [internalProps, validationProps, ampm, adapter]);
 }
 export function useApplyDefaultValuesToTimeValidationProps(props) {
   return React.useMemo(() => ({

package/esm/validation/useValidation.d.ts

@@ -1,10 +1,9 @@
-import { MuiPickersAdapterContextValue } from "../LocalizationProvider/LocalizationProvider.js";
-import { OnErrorProps, PickersTimezone } from "../models/index.js";
+import { MuiPickersAdapter, OnErrorProps, PickersTimezone } from "../models/index.js";
 import type { PickerValueManager } from "../internals/models/index.js";
 import { PickerValidValue } from "../internals/models/index.js";
 export type Validator<TValue extends PickerValidValue, TError, TValidationProps> = {
   (params: {
-    adapter: MuiPickersAdapterContextValue;
+    adapter: MuiPickersAdapter;
     value: TValue;
     timezone: PickersTimezone;
     props: TValidationProps;

package/esm/validation/useValidation.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useLocalizationContext } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "../hooks/index.js";
 /**
  * Utility hook to check if a given value is valid based on the provided validation props.
  * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
@@ -22,7 +22,7 @@ export function useValidation(options) {
     timezone,
     onError
   } = options;
-  const adapter = useLocalizationContext();
+  const adapter = usePickerAdapter();
   const previousValidationErrorRef = React.useRef(validator.valueManager.defaultErrorState);
   const validationError = validator({
     adapter,

package/esm/validation/validateDate.js

@@ -30,9 +30,9 @@ export const validateDate = ({
     minDate,
     maxDate
   } = props;
-  const now = adapter.utils.date(undefined, timezone);
+  const now = adapter.date(undefined, timezone);
   switch (true) {
-    case !adapter.utils.isValid(value):
+    case !adapter.isValid(value):
       return 'invalidDate';
     case Boolean(shouldDisableDate && shouldDisableDate(value)):
       return 'shouldDisableDate';
@@ -40,13 +40,13 @@ export const validateDate = ({
       return 'shouldDisableMonth';
     case Boolean(shouldDisableYear && shouldDisableYear(value)):
       return 'shouldDisableYear';
-    case Boolean(disableFuture && adapter.utils.isAfterDay(value, now)):
+    case Boolean(disableFuture && adapter.isAfterDay(value, now)):
       return 'disableFuture';
-    case Boolean(disablePast && adapter.utils.isBeforeDay(value, now)):
+    case Boolean(disablePast && adapter.isBeforeDay(value, now)):
       return 'disablePast';
-    case Boolean(minDate && adapter.utils.isBeforeDay(value, minDate)):
+    case Boolean(minDate && adapter.isBeforeDay(value, minDate)):
       return 'minDate';
-    case Boolean(maxDate && adapter.utils.isAfterDay(value, maxDate)):
+    case Boolean(maxDate && adapter.isAfterDay(value, maxDate)):
       return 'maxDate';
     default:
       return null;

package/esm/validation/validateTime.js

@@ -31,18 +31,18 @@ export const validateTime = ({
     disablePast,
     disableFuture
   } = props;
-  const now = adapter.utils.date(undefined, timezone);
-  const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, adapter.utils);
+  const now = adapter.date(undefined, timezone);
+  const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, adapter);
   switch (true) {
-    case !adapter.utils.isValid(value):
+    case !adapter.isValid(value):
       return 'invalidDate';
     case Boolean(minTime && isAfter(minTime, value)):
       return 'minTime';
     case Boolean(maxTime && isAfter(value, maxTime)):
       return 'maxTime';
-    case Boolean(disableFuture && adapter.utils.isAfter(value, now)):
+    case Boolean(disableFuture && adapter.isAfter(value, now)):
       return 'disableFuture';
-    case Boolean(disablePast && adapter.utils.isBefore(value, now)):
+    case Boolean(disablePast && adapter.isBefore(value, now)):
       return 'disablePast';
     case Boolean(shouldDisableTime && shouldDisableTime(value, 'hours')):
       return 'shouldDisableTime-hours';
@@ -50,7 +50,7 @@ export const validateTime = ({
       return 'shouldDisableTime-minutes';
     case Boolean(shouldDisableTime && shouldDisableTime(value, 'seconds')):
       return 'shouldDisableTime-seconds';
-    case Boolean(minutesStep && adapter.utils.getMinutes(value) % minutesStep !== 0):
+    case Boolean(minutesStep && adapter.getMinutes(value) % minutesStep !== 0):
       return 'minutesStep';
     default:
       return null;

package/hooks/index.d.ts

@@ -3,4 +3,5 @@ export { useSplitFieldProps } from "./useSplitFieldProps.js";
 export { useParsedFormat } from "./useParsedFormat.js";
 export { usePickerContext } from "./usePickerContext.js";
 export { usePickerActionsContext } from "./usePickerActionsContext.js";
-export { useIsValidValue } from "./useIsValidValue.js";
+export { useIsValidValue } from "./useIsValidValue.js";
+export { usePickerAdapter } from "./usePickerAdapter.js";

package/hooks/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "usePickerActionsContext", {
     return _usePickerActionsContext.usePickerActionsContext;
   }
 });
+Object.defineProperty(exports, "usePickerAdapter", {
+  enumerable: true,
+  get: function () {
+    return _usePickerAdapter.usePickerAdapter;
+  }
+});
 Object.defineProperty(exports, "usePickerContext", {
   enumerable: true,
   get: function () {
@@ -44,4 +50,5 @@ var _useSplitFieldProps = require("./useSplitFieldProps");
 var _useParsedFormat = require("./useParsedFormat");
 var _usePickerContext = require("./usePickerContext");
 var _usePickerActionsContext = require("./usePickerActionsContext");
-var _useIsValidValue = require("./useIsValidValue");
+var _useIsValidValue = require("./useIsValidValue");
+var _usePickerAdapter = require("./usePickerAdapter");

package/hooks/useParsedFormat.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useParsedFormat = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _useUtils = require("../internals/hooks/useUtils");
+var _usePickerAdapter = require("./usePickerAdapter");
 var _buildSectionsFromFormat = require("../internals/hooks/useField/buildSectionsFromFormat");
 var _useField = require("../internals/hooks/useField/useField.utils");
 var _usePickerTranslations = require("./usePickerTranslations");
@@ -22,16 +22,16 @@ var _useNullablePickerContext = require("../internals/hooks/useNullablePickerCon
  */
 const useParsedFormat = (parameters = {}) => {
   const pickerContext = (0, _useNullablePickerContext.useNullablePickerContext)();
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(utils), [utils]);
+  const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(adapter), [adapter]);
   const {
-    format = pickerContext?.fieldFormat ?? utils.formats.fullDate
+    format = pickerContext?.fieldFormat ?? adapter.formats.fullDate
   } = parameters;
   return React.useMemo(() => {
     const sections = (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
-      utils,
+      adapter,
       format,
       formatDensity: 'dense',
       isRtl,
@@ -43,6 +43,6 @@ const useParsedFormat = (parameters = {}) => {
       enableAccessibleFieldDOMStructure: false
     });
     return sections.map(section => `${section.startSeparator}${section.placeholder}${section.endSeparator}`).join('');
-  }, [utils, isRtl, translations, localizedDigits, format]);
+  }, [adapter, isRtl, translations, localizedDigits, format]);
 };
 exports.useParsedFormat = useParsedFormat;

package/hooks/usePickerAdapter.d.ts

@@ -0,0 +1,7 @@
+import { PickersAdapterContextValue } from "../LocalizationProvider/LocalizationProvider.js";
+import { PickersLocaleText } from "../locales/utils/pickersLocaleTextApi.js";
+export declare const useLocalizationContext: () => UseLocalizationContextReturnValue;
+export interface UseLocalizationContextReturnValue extends Omit<PickersAdapterContextValue, 'localeText'> {
+  localeText: PickersLocaleText;
+}
+export declare const usePickerAdapter: () => import("@mui/x-date-pickers/models").MuiPickersAdapter<any>;

package/hooks/usePickerAdapter.js

@@ -0,0 +1,29 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePickerAdapter = exports.useLocalizationContext = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _enUS = require("../locales/enUS");
+var _LocalizationProvider = require("../LocalizationProvider/LocalizationProvider");
+const useLocalizationContext = () => {
+  const localization = React.useContext(_LocalizationProvider.PickerAdapterContext);
+  if (localization === null) {
+    throw new Error(['MUI X: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
+  }
+  if (localization.adapter === null) {
+    throw new Error(['MUI X: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
+  }
+  const localeText = React.useMemo(() => (0, _extends2.default)({}, _enUS.DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
+  return React.useMemo(() => (0, _extends2.default)({}, localization, {
+    localeText
+  }), [localization, localeText]);
+};
+exports.useLocalizationContext = useLocalizationContext;
+const usePickerAdapter = () => useLocalizationContext().adapter;
+exports.usePickerAdapter = usePickerAdapter;

package/hooks/usePickerTranslations.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePickerTranslations = void 0;
-var _useUtils = require("../internals/hooks/useUtils");
-const usePickerTranslations = () => (0, _useUtils.useLocalizationContext)().localeText;
+var _usePickerAdapter = require("./usePickerAdapter");
+const usePickerTranslations = () => (0, _usePickerAdapter.useLocalizationContext)().localeText;
 exports.usePickerTranslations = usePickerTranslations;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.5.2
+ * @mui/x-date-pickers v8.6.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/pickersToolbarClasses.d.ts

@@ -8,4 +8,4 @@ export interface PickersToolbarClasses {
 }
 export type PickersToolbarClassKey = keyof PickersToolbarClasses;
 export declare function getPickersToolbarUtilityClass(slot: string): string;
-export declare const pickersToolbarClasses: Record<"root" | "content" | "title", string>;
+export declare const pickersToolbarClasses: Record<"root" | "title" | "content", string>;

package/internals/demo/DemoContainer.d.ts

@@ -1,15 +1,14 @@
 import * as React from 'react';
+import { StackProps } from '@mui/material/Stack';
 import { SxProps, Theme } from '@mui/material/styles';
 interface DemoGridProps {
   children: React.ReactNode;
   components: string[];
   sx?: SxProps<Theme>;
 }
-interface DemoItemProps {
+interface DemoItemProps extends Omit<StackProps, 'component'> {
   label?: React.ReactNode;
   component?: string;
-  children: React.ReactNode;
-  sx?: SxProps<Theme>;
 }
 /**
  * WARNING: This is an internal component used in documentation to achieve a desired layout.

package/internals/demo/DemoContainer.js

@@ -50,7 +50,8 @@ function DemoItem(props) {
     label,
     children,
     component,
-    sx: sxProp
+    sx: sxProp,
+    alignItems = 'stretch'
   } = props;
   let spacing;
   let sx = sxProp;
@@ -66,7 +67,7 @@ function DemoItem(props) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.default, {
     direction: "column",
-    alignItems: "stretch",
+    alignItems: alignItems,
     spacing: spacing,
     sx: sx,
     children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {

package/internals/hooks/date-helpers-hooks.js

@@ -8,40 +8,40 @@ exports.useMeridiemMode = useMeridiemMode;
 exports.useNextMonthDisabled = useNextMonthDisabled;
 exports.usePreviousMonthDisabled = usePreviousMonthDisabled;
 var React = _interopRequireWildcard(require("react"));
-var _useUtils = require("./useUtils");
 var _timeUtils = require("../utils/time-utils");
+var _usePickerAdapter = require("../../hooks/usePickerAdapter");
 function useNextMonthDisabled(month, {
   disableFuture,
   maxDate,
   timezone
 }) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   return React.useMemo(() => {
-    const now = utils.date(undefined, timezone);
-    const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
-    return !utils.isAfter(lastEnabledMonth, month);
-  }, [disableFuture, maxDate, month, utils, timezone]);
+    const now = adapter.date(undefined, timezone);
+    const lastEnabledMonth = adapter.startOfMonth(disableFuture && adapter.isBefore(now, maxDate) ? now : maxDate);
+    return !adapter.isAfter(lastEnabledMonth, month);
+  }, [disableFuture, maxDate, month, adapter, timezone]);
 }
 function usePreviousMonthDisabled(month, {
   disablePast,
   minDate,
   timezone
 }) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   return React.useMemo(() => {
-    const now = utils.date(undefined, timezone);
-    const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
-    return !utils.isBefore(firstEnabledMonth, month);
-  }, [disablePast, minDate, month, utils, timezone]);
+    const now = adapter.date(undefined, timezone);
+    const firstEnabledMonth = adapter.startOfMonth(disablePast && adapter.isAfter(now, minDate) ? now : minDate);
+    return !adapter.isBefore(firstEnabledMonth, month);
+  }, [disablePast, minDate, month, adapter, timezone]);
 }
 function useMeridiemMode(date, ampm, onChange, selectionState) {
-  const utils = (0, _useUtils.useUtils)();
-  const cleanDate = React.useMemo(() => !utils.isValid(date) ? null : date, [utils, date]);
-  const meridiemMode = (0, _timeUtils.getMeridiem)(cleanDate, utils);
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
+  const cleanDate = React.useMemo(() => !adapter.isValid(date) ? null : date, [adapter, date]);
+  const meridiemMode = (0, _timeUtils.getMeridiem)(cleanDate, adapter);
   const handleMeridiemChange = React.useCallback(mode => {
-    const timeWithMeridiem = cleanDate == null ? null : (0, _timeUtils.convertToMeridiem)(cleanDate, mode, Boolean(ampm), utils);
+    const timeWithMeridiem = cleanDate == null ? null : (0, _timeUtils.convertToMeridiem)(cleanDate, mode, Boolean(ampm), adapter);
     onChange(timeWithMeridiem, selectionState ?? 'partial');
-  }, [ampm, cleanDate, onChange, selectionState, utils]);
+  }, [ampm, cleanDate, onChange, selectionState, adapter]);
   return {
     meridiemMode,
     handleMeridiemChange

package/internals/hooks/useClockReferenceDate.d.ts

@@ -3,13 +3,13 @@ import { PickerValue } from "../models/index.js";
 export declare const useClockReferenceDate: <TProps extends {}>({
   value,
   referenceDate: referenceDateProp,
-  utils,
+  adapter,
   props,
   timezone
 }: {
   value: PickerValue;
   referenceDate: PickerValidDate | undefined;
-  utils: MuiPickersAdapter;
+  adapter: MuiPickersAdapter;
   props: TProps;
   timezone: PickersTimezone;
 }) => PickerValidDate;

package/internals/hooks/useClockReferenceDate.js

@@ -12,18 +12,18 @@ var _getDefaultReferenceDate = require("../utils/getDefaultReferenceDate");
 const useClockReferenceDate = ({
   value,
   referenceDate: referenceDateProp,
-  utils,
+  adapter,
   props,
   timezone
 }) => {
   const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
     value,
-    utils,
+    adapter,
     props,
     referenceDate: referenceDateProp,
     granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.day,
     timezone,
-    getTodayDate: () => (0, _dateUtils.getTodayDate)(utils, timezone, 'date')
+    getTodayDate: () => (0, _dateUtils.getTodayDate)(adapter, timezone, 'date')
   }),
   // We only want to compute the reference date on mount.
   [] // eslint-disable-line react-hooks/exhaustive-deps

package/internals/hooks/useControlledValue.js

@@ -9,7 +9,7 @@ exports.useControlledValue = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
-var _useUtils = require("./useUtils");
+var _usePickerAdapter = require("../../hooks/usePickerAdapter");
 /**
  * Hooks controlling the value while making sure that:
  * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
@@ -24,19 +24,19 @@ const useControlledValue = ({
   onChange: onChangeProp,
   valueManager
 }) => {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   const [valueWithInputTimezone, setValue] = (0, _useControlled.default)({
     name,
     state: 'value',
     controlled: valueProp,
     default: defaultValue ?? valueManager.emptyValue
   });
-  const inputTimezone = React.useMemo(() => valueManager.getTimezone(utils, valueWithInputTimezone), [utils, valueManager, valueWithInputTimezone]);
+  const inputTimezone = React.useMemo(() => valueManager.getTimezone(adapter, valueWithInputTimezone), [adapter, valueManager, valueWithInputTimezone]);
   const setInputTimezone = (0, _useEventCallback.default)(newValue => {
     if (inputTimezone == null) {
       return newValue;
     }
-    return valueManager.setTimezone(utils, inputTimezone, newValue);
+    return valueManager.setTimezone(adapter, inputTimezone, newValue);
   });
   const timezoneToRender = React.useMemo(() => {
     if (timezoneProp) {
@@ -46,11 +46,11 @@ const useControlledValue = ({
       return inputTimezone;
     }
     if (referenceDate) {
-      return utils.getTimezone(referenceDate);
+      return adapter.getTimezone(referenceDate);
     }
     return 'default';
-  }, [timezoneProp, inputTimezone, referenceDate, utils]);
-  const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, valueWithInputTimezone), [valueManager, utils, timezoneToRender, valueWithInputTimezone]);
+  }, [timezoneProp, inputTimezone, referenceDate, adapter]);
+  const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(adapter, timezoneToRender, valueWithInputTimezone), [valueManager, adapter, timezoneToRender, valueWithInputTimezone]);
   const handleValueChange = (0, _useEventCallback.default)((newValue, ...otherParams) => {
     const newValueWithInputTimezone = setInputTimezone(newValue);
     setValue(newValueWithInputTimezone);

package/internals/hooks/useField/buildSectionsFromFormat.d.ts

@@ -1,7 +1,7 @@
 import { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.js";
 import { PickersLocaleText } from "../../../locales/index.js";
 interface BuildSectionsFromFormatParameters {
-  utils: MuiPickersAdapter;
+  adapter: MuiPickersAdapter;
   format: string;
   formatDensity: 'dense' | 'spacious';
   isRtl: boolean;

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -8,16 +8,16 @@ exports.buildSectionsFromFormat = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useField = require("./useField.utils");
 const expandFormat = ({
-  utils,
+  adapter,
   format
 }) => {
   // Expand the provided format
   let formatExpansionOverflow = 10;
   let prevFormat = format;
-  let nextFormat = utils.expandFormat(format);
+  let nextFormat = adapter.expandFormat(format);
   while (nextFormat !== prevFormat) {
     prevFormat = nextFormat;
-    nextFormat = utils.expandFormat(prevFormat);
+    nextFormat = adapter.expandFormat(prevFormat);
     formatExpansionOverflow -= 1;
     if (formatExpansionOverflow < 0) {
       throw new Error('MUI X: The format expansion seems to be in an infinite loop. Please open an issue with the format passed to the component.');
@@ -26,14 +26,14 @@ const expandFormat = ({
   return nextFormat;
 };
 const getEscapedPartsFromFormat = ({
-  utils,
+  adapter,
   expandedFormat
 }) => {
   const escapedParts = [];
   const {
     start: startChar,
     end: endChar
-  } = utils.escapedCharacters;
+  } = adapter.escapedCharacters;
   const regExp = new RegExp(`(\\${startChar}[^\\${endChar}]*\\${endChar})+`, 'g');
   let match = null;
   // eslint-disable-next-line no-cond-assign
@@ -45,12 +45,12 @@ const getEscapedPartsFromFormat = ({
   }
   return escapedParts;
 };
-const getSectionPlaceholder = (utils, localeText, sectionConfig, sectionFormat) => {
+const getSectionPlaceholder = (adapter, localeText, sectionConfig, sectionFormat) => {
   switch (sectionConfig.type) {
     case 'year':
       {
         return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.date(undefined, 'default'), sectionFormat).length,
+          digitAmount: adapter.formatByString(adapter.date(undefined, 'default'), sectionFormat).length,
           format: sectionFormat
         });
       }
@@ -105,7 +105,7 @@ const getSectionPlaceholder = (utils, localeText, sectionConfig, sectionFormat)
   }
 };
 const createSection = ({
-  utils,
+  adapter,
   date,
   shouldRespectLeadingZeros,
   localeText,
@@ -117,15 +117,15 @@ const createSection = ({
   if (token === '') {
     throw new Error('MUI X: Should not call `commitToken` with an empty token');
   }
-  const sectionConfig = (0, _useField.getDateSectionConfigFromFormatToken)(utils, token);
-  const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(utils, sectionConfig.contentType, sectionConfig.type, token);
+  const sectionConfig = (0, _useField.getDateSectionConfigFromFormatToken)(adapter, token);
+  const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(adapter, sectionConfig.contentType, sectionConfig.type, token);
   const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
-  const isValidDate = utils.isValid(date);
-  let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
+  const isValidDate = adapter.isValid(date);
+  let sectionValue = isValidDate ? adapter.formatByString(date, token) : '';
   let maxLength = null;
   if (hasLeadingZerosInInput) {
     if (hasLeadingZerosInFormat) {
-      maxLength = sectionValue === '' ? utils.formatByString(now, token).length : sectionValue.length;
+      maxLength = sectionValue === '' ? adapter.formatByString(now, token).length : sectionValue.length;
     } else {
       if (sectionConfig.maxLength == null) {
         throw new Error(`MUI X: The token ${token} should have a 'maxLength' property on it's adapter`);
@@ -140,7 +140,7 @@ const createSection = ({
     format: token,
     maxLength,
     value: sectionValue,
-    placeholder: getSectionPlaceholder(utils, localeText, sectionConfig, token),
+    placeholder: getSectionPlaceholder(adapter, localeText, sectionConfig, token),
     hasLeadingZerosInFormat,
     hasLeadingZerosInInput,
     startSeparator,
@@ -150,16 +150,16 @@ const createSection = ({
 };
 const buildSections = parameters => {
   const {
-    utils,
+    adapter,
     expandedFormat,
     escapedParts
   } = parameters;
-  const now = utils.date(undefined);
+  const now = adapter.date(undefined);
   const sections = [];
   let startSeparator = '';
 
   // This RegExp tests if the beginning of a string corresponds to a supported token
-  const validTokens = Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length); // Sort to put longest word first
+  const validTokens = Object.keys(adapter.formatTokenMap).sort((a, b) => b.length - a.length); // Sort to put longest word first
 
   const regExpFirstWordInFormat = /^([a-zA-Z]+)/;
   const regExpWordOnlyComposedOfTokens = new RegExp(`^(${validTokens.join('|')})*$`);

package/internals/hooks/useField/useField.types.d.ts

@@ -201,12 +201,12 @@ export interface FieldValueManager<TValue extends PickerValidValue> {
    * Update the reference value with the new value.
    * This method must make sure that no date inside the returned `referenceValue` is invalid.
    * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
-   * @param {MuiPickersAdapter} utils The utils to manipulate the date.
+   * @param {MuiPickersAdapter} adapter The adapter to manipulate the date.
    * @param {TValue} value The new value from which we want to take all valid dates in the `referenceValue` state.
    * @param {TValue} prevReferenceValue The previous reference value. It is used as a fallback for invalid dates in the new value.
    * @returns {TValue} The new reference value with no invalid date.
    */
-  updateReferenceValue: (utils: MuiPickersAdapter, value: TValue, prevReferenceValue: InferNonNullablePickerValue<TValue>) => InferNonNullablePickerValue<TValue>;
+  updateReferenceValue: (adapter: MuiPickersAdapter, value: TValue, prevReferenceValue: InferNonNullablePickerValue<TValue>) => InferNonNullablePickerValue<TValue>;
   /**
    * Extract from the given value the date that contains the given section.
    * @param {TValue} value The value to extract the date from.