@mui/x-date-pickers 8.5.3 → 8.6.0

package/esm/YearCalendar/YearCalendar.js

@@ -14,7 +14,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import useControlled from '@mui/utils/useControlled';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { YearCalendarButton } from "./YearCalendarButton.js";
-import { useUtils, useNow } from "../internals/hooks/useUtils.js";
+import { useNow } from "../internals/hooks/useUtils.js";
 import { getYearCalendarUtilityClass } from "./yearCalendarClasses.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
@@ -22,6 +22,7 @@ import { useControlledValue } from "../internals/hooks/useControlledValue.js";
 import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -133,13 +134,13 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
   });
   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,
@@ -147,14 +148,14 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
   const classes = useUtilityClasses(classesProp);
-  const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);
+  const todayYear = React.useMemo(() => adapter.getYear(now), [adapter, now]);
   const selectedYear = React.useMemo(() => {
     if (value != null) {
-      return utils.getYear(value);
+      return adapter.getYear(value);
     }
     return null;
-  }, [value, utils]);
-  const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || utils.getYear(referenceDate));
+  }, [value, adapter]);
+  const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || adapter.getYear(referenceDate));
   const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'YearCalendar',
     state: 'hasFocus',
@@ -168,33 +169,33 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     }
   });
   const isYearDisabled = React.useCallback(dateToValidate => {
-    if (disablePast && utils.isBeforeYear(dateToValidate, now)) {
+    if (disablePast && adapter.isBeforeYear(dateToValidate, now)) {
       return true;
     }
-    if (disableFuture && utils.isAfterYear(dateToValidate, now)) {
+    if (disableFuture && adapter.isAfterYear(dateToValidate, now)) {
       return true;
     }
-    if (minDate && utils.isBeforeYear(dateToValidate, minDate)) {
+    if (minDate && adapter.isBeforeYear(dateToValidate, minDate)) {
       return true;
     }
-    if (maxDate && utils.isAfterYear(dateToValidate, maxDate)) {
+    if (maxDate && adapter.isAfterYear(dateToValidate, maxDate)) {
       return true;
     }
     if (!shouldDisableYear) {
       return false;
     }
-    const yearToValidate = utils.startOfYear(dateToValidate);
+    const yearToValidate = adapter.startOfYear(dateToValidate);
     return shouldDisableYear(yearToValidate);
-  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, utils]);
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, adapter]);
   const handleYearSelection = useEventCallback((event, year) => {
     if (readOnly) {
       return;
     }
-    const newDate = utils.setYear(value ?? referenceDate, year);
+    const newDate = adapter.setYear(value ?? referenceDate, year);
     handleValueChange(newDate);
   });
   const focusYear = useEventCallback(year => {
-    if (!isYearDisabled(utils.setYear(value ?? referenceDate, year))) {
+    if (!isYearDisabled(adapter.setYear(value ?? referenceDate, year))) {
       setFocusedYear(year);
       changeHasFocus(true);
       onYearFocus?.(year);
@@ -258,7 +259,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     }
     scrollerRef.current.scrollTop = elementBottom - clientHeight / 2 - offsetHeight / 2;
   }, [autoFocus]);
-  const yearRange = utils.getYearRange([minDate, maxDate]);
+  const yearRange = adapter.getYearRange([minDate, maxDate]);
   if (yearsOrder === 'desc') {
     yearRange.reverse();
   }
@@ -275,7 +276,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     yearsPerRow: yearsPerRow
   }, other, {
     children: [yearRange.map(year => {
-      const yearNumber = utils.getYear(year);
+      const yearNumber = adapter.getYear(year);
       const isSelected = yearNumber === selectedYear;
       const isDisabled = disabled || isYearDisabled(year);
       return /*#__PURE__*/_jsx(YearCalendarButton, {
@@ -292,8 +293,8 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
         slots: slots,
         slotProps: slotProps,
         classes: classesProp,
-        children: utils.format(year, 'year')
-      }, utils.format(year, 'year'));
+        children: adapter.format(year, 'year')
+      }, adapter.format(year, 'year'));
     }), Array.from({
       length: fillerAmount
     }, (_, index) => /*#__PURE__*/_jsx(YearCalendarButtonFiller, {}, index))]

package/esm/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/esm/hooks/index.js

@@ -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/esm/hooks/useParsedFormat.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter } from "./usePickerAdapter.js";
 import { buildSectionsFromFormat } from "../internals/hooks/useField/buildSectionsFromFormat.js";
 import { getLocalizedDigits } from "../internals/hooks/useField/useField.utils.js";
 import { usePickerTranslations } from "./usePickerTranslations.js";
@@ -16,16 +16,16 @@ import { useNullablePickerContext } from "../internals/hooks/useNullablePickerCo
  */
 export const useParsedFormat = (parameters = {}) => {
   const pickerContext = useNullablePickerContext();
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const isRtl = useRtl();
   const translations = usePickerTranslations();
-  const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
+  const localizedDigits = React.useMemo(() => getLocalizedDigits(adapter), [adapter]);
   const {
-    format = pickerContext?.fieldFormat ?? utils.formats.fullDate
+    format = pickerContext?.fieldFormat ?? adapter.formats.fullDate
   } = parameters;
   return React.useMemo(() => {
     const sections = buildSectionsFromFormat({
-      utils,
+      adapter,
       format,
       formatDensity: 'dense',
       isRtl,
@@ -37,5 +37,5 @@ export 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]);
 };

package/esm/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/esm/hooks/usePickerAdapter.js

@@ -0,0 +1,20 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DEFAULT_LOCALE } from "../locales/enUS.js";
+import { PickerAdapterContext } from "../LocalizationProvider/LocalizationProvider.js";
+export const useLocalizationContext = () => {
+  const localization = React.useContext(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(() => _extends({}, DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
+  return React.useMemo(() => _extends({}, localization, {
+    localeText
+  }), [localization, localeText]);
+};
+export const usePickerAdapter = () => useLocalizationContext().adapter;

package/esm/hooks/usePickerTranslations.js

@@ -1,4 +1,4 @@
 'use client';
 
-import { useLocalizationContext } from "../internals/hooks/useUtils.js";
+import { useLocalizationContext } from "./usePickerAdapter.js";
 export const usePickerTranslations = () => useLocalizationContext().localeText;

package/esm/index.js

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

package/esm/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/esm/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/esm/internals/demo/DemoContainer.js

@@ -41,7 +41,8 @@ export function DemoItem(props) {
     label,
     children,
     component,
-    sx: sxProp
+    sx: sxProp,
+    alignItems = 'stretch'
   } = props;
   let spacing;
   let sx = sxProp;
@@ -57,7 +58,7 @@ export function DemoItem(props) {
   }
   return /*#__PURE__*/_jsxs(Stack, {
     direction: "column",
-    alignItems: "stretch",
+    alignItems: alignItems,
     spacing: spacing,
     sx: sx,
     children: [label && /*#__PURE__*/_jsx(Typography, {

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

@@ -1,38 +1,38 @@
 import * as React from 'react';
-import { useUtils } from "./useUtils.js";
 import { getMeridiem, convertToMeridiem } from "../utils/time-utils.js";
+import { usePickerAdapter } from "../../hooks/usePickerAdapter.js";
 export function useNextMonthDisabled(month, {
   disableFuture,
   maxDate,
   timezone
 }) {
-  const utils = useUtils();
+  const adapter = 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]);
 }
 export function usePreviousMonthDisabled(month, {
   disablePast,
   minDate,
   timezone
 }) {
-  const utils = useUtils();
+  const adapter = 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]);
 }
 export function useMeridiemMode(date, ampm, onChange, selectionState) {
-  const utils = useUtils();
-  const cleanDate = React.useMemo(() => !utils.isValid(date) ? null : date, [utils, date]);
-  const meridiemMode = getMeridiem(cleanDate, utils);
+  const adapter = usePickerAdapter();
+  const cleanDate = React.useMemo(() => !adapter.isValid(date) ? null : date, [adapter, date]);
+  const meridiemMode = getMeridiem(cleanDate, adapter);
   const handleMeridiemChange = React.useCallback(mode => {
-    const timeWithMeridiem = cleanDate == null ? null : convertToMeridiem(cleanDate, mode, Boolean(ampm), utils);
+    const timeWithMeridiem = cleanDate == null ? null : convertToMeridiem(cleanDate, mode, Boolean(ampm), adapter);
     onChange(timeWithMeridiem, selectionState ?? 'partial');
-  }, [ampm, cleanDate, onChange, selectionState, utils]);
+  }, [ampm, cleanDate, onChange, selectionState, adapter]);
   return {
     meridiemMode,
     handleMeridiemChange

package/esm/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/esm/internals/hooks/useClockReferenceDate.js

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

package/esm/internals/hooks/useControlledValue.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useControlled from '@mui/utils/useControlled';
-import { useUtils } from "./useUtils.js";
+import { usePickerAdapter } from "../../hooks/usePickerAdapter.js";
+
 /**
  * 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
@@ -16,19 +17,19 @@ export const useControlledValue = ({
   onChange: onChangeProp,
   valueManager
 }) => {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const [valueWithInputTimezone, setValue] = useControlled({
     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 = useEventCallback(newValue => {
     if (inputTimezone == null) {
       return newValue;
     }
-    return valueManager.setTimezone(utils, inputTimezone, newValue);
+    return valueManager.setTimezone(adapter, inputTimezone, newValue);
   });
   const timezoneToRender = React.useMemo(() => {
     if (timezoneProp) {
@@ -38,11 +39,11 @@ export 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 = useEventCallback((newValue, ...otherParams) => {
     const newValueWithInputTimezone = setInputTimezone(newValue);
     setValue(newValueWithInputTimezone);

package/esm/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/esm/internals/hooks/useField/buildSectionsFromFormat.js

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { applyLocalizedDigits, cleanLeadingZeros, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, removeLocalizedDigits } from "./useField.utils.js";
 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.');
@@ -19,14 +19,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
@@ -38,12 +38,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
         });
       }
@@ -98,7 +98,7 @@ const getSectionPlaceholder = (utils, localeText, sectionConfig, sectionFormat)
   }
 };
 const createSection = ({
-  utils,
+  adapter,
   date,
   shouldRespectLeadingZeros,
   localeText,
@@ -110,15 +110,15 @@ const createSection = ({
   if (token === '') {
     throw new Error('MUI X: Should not call `commitToken` with an empty token');
   }
-  const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
-  const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
+  const sectionConfig = getDateSectionConfigFromFormatToken(adapter, token);
+  const hasLeadingZerosInFormat = 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`);
@@ -133,7 +133,7 @@ const createSection = ({
     format: token,
     maxLength,
     value: sectionValue,
-    placeholder: getSectionPlaceholder(utils, localeText, sectionConfig, token),
+    placeholder: getSectionPlaceholder(adapter, localeText, sectionConfig, token),
     hasLeadingZerosInFormat,
     hasLeadingZerosInInput,
     startSeparator,
@@ -143,16 +143,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/esm/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.

package/esm/internals/hooks/useField/useField.utils.d.ts

@@ -1,13 +1,13 @@
 import { FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from "./useField.types.js";
 import { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType, InferFieldSection } from "../../../models/index.js";
 import { PickerValidValue } from "../../models/index.js";
-export declare const getDateSectionConfigFromFormatToken: (utils: MuiPickersAdapter, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
+export declare const getDateSectionConfigFromFormatToken: (adapter: MuiPickersAdapter, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
   maxLength: number | undefined;
 };
-export declare const getDaysInWeekStr: (utils: MuiPickersAdapter, format: string) => string[];
-export declare const getLetterEditingOptions: (utils: MuiPickersAdapter, timezone: PickersTimezone, sectionType: FieldSectionType, format: string) => string[];
+export declare const getDaysInWeekStr: (adapter: MuiPickersAdapter, format: string) => string[];
+export declare const getLetterEditingOptions: (adapter: MuiPickersAdapter, timezone: PickersTimezone, sectionType: FieldSectionType, format: string) => string[];
 export declare const FORMAT_SECONDS_NO_LEADING_ZEROS = "s";
-export declare const getLocalizedDigits: (utils: MuiPickersAdapter) => string[];
+export declare const getLocalizedDigits: (adapter: MuiPickersAdapter) => string[];
 export declare const removeLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
 export declare const applyLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
 export declare const isStringNumber: (valueStr: string, localizedDigits: string[]) => boolean;
@@ -17,20 +17,20 @@ export declare const isStringNumber: (valueStr: string, localizedDigits: string[
  * Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
  */
 export declare const cleanLeadingZeros: (valueStr: string, size: number) => string;
-export declare const cleanDigitSectionValue: (utils: MuiPickersAdapter, value: number, sectionBoundaries: FieldSectionValueBoundaries<any>, localizedDigits: string[], section: Pick<FieldSection, "format" | "type" | "contentType" | "hasLeadingZerosInFormat" | "hasLeadingZerosInInput" | "maxLength">) => string;
+export declare const cleanDigitSectionValue: (adapter: MuiPickersAdapter, value: number, sectionBoundaries: FieldSectionValueBoundaries<any>, localizedDigits: string[], section: Pick<FieldSection, "format" | "type" | "contentType" | "hasLeadingZerosInFormat" | "hasLeadingZerosInInput" | "maxLength">) => string;
 export declare const getSectionVisibleValue: (section: FieldSection, target: "input-rtl" | "input-ltr" | "non-input", localizedDigits: string[]) => string;
-export declare const changeSectionValueFormat: (utils: MuiPickersAdapter, valueStr: string, currentFormat: string, newFormat: string) => string;
-export declare const doesSectionFormatHaveLeadingZeros: (utils: MuiPickersAdapter, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
+export declare const changeSectionValueFormat: (adapter: MuiPickersAdapter, valueStr: string, currentFormat: string, newFormat: string) => string;
+export declare const doesSectionFormatHaveLeadingZeros: (adapter: MuiPickersAdapter, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
 /**
  * Some date libraries like `dayjs` don't support parsing from date with escaped characters.
  * To make sure that the parsing works, we are building a format and a date without any separator.
  */
-export declare const getDateFromDateSections: (utils: MuiPickersAdapter, sections: FieldSection[], localizedDigits: string[]) => PickerValidDate;
+export declare const getDateFromDateSections: (adapter: MuiPickersAdapter, sections: FieldSection[], localizedDigits: string[]) => PickerValidDate;
 export declare const createDateStrForV7HiddenInputFromSections: (sections: FieldSection[]) => string;
 export declare const createDateStrForV6InputFromSections: (sections: FieldSection[], localizedDigits: string[], isRtl: boolean) => string;
-export declare const getSectionsBoundaries: (utils: MuiPickersAdapter, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries;
+export declare const getSectionsBoundaries: (adapter: MuiPickersAdapter, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries;
 export declare const validateSections: <TValue extends PickerValidValue>(sections: InferFieldSection<TValue>[], valueType: PickerValueType) => void;
-export declare const mergeDateIntoReferenceDate: (utils: MuiPickersAdapter, dateToTransferFrom: PickerValidDate, sections: FieldSection[], referenceDate: PickerValidDate, shouldLimitToEditedSections: boolean) => PickerValidDate;
+export declare const mergeDateIntoReferenceDate: (adapter: MuiPickersAdapter, dateToTransferFrom: PickerValidDate, sections: FieldSection[], referenceDate: PickerValidDate, shouldLimitToEditedSections: boolean) => PickerValidDate;
 export declare const isAndroid: () => boolean;
 export declare const getSectionOrder: (sections: FieldSection[], shouldApplyRTL: boolean) => SectionOrdering;
 export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;