@mui/x-date-pickers 8.5.3 → 8.6.0

package/esm/internals/hooks/useField/useField.utils.js

@@ -1,6 +1,6 @@
 import { getMonthsInYear } from "../../utils/date-utils.js";
-export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
-  const config = utils.formatTokenMap[formatToken];
+export const getDateSectionConfigFromFormatToken = (adapter, formatToken) => {
+  const config = adapter.formatTokenMap[formatToken];
   if (config == null) {
     throw new Error([`MUI X: The token "${formatToken}" is not supported by the Date and Time Pickers.`, 'Please try using another token or open an issue on https://github.com/mui/mui-x/issues/new/choose if you think it should be supported.'].join('\n'));
   }
@@ -17,32 +17,32 @@ export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
     maxLength: config.maxLength
   };
 };
-export const getDaysInWeekStr = (utils, format) => {
+export const getDaysInWeekStr = (adapter, format) => {
   const elements = [];
-  const now = utils.date(undefined, 'default');
-  const startDate = utils.startOfWeek(now);
-  const endDate = utils.endOfWeek(now);
+  const now = adapter.date(undefined, 'default');
+  const startDate = adapter.startOfWeek(now);
+  const endDate = adapter.endOfWeek(now);
   let current = startDate;
-  while (utils.isBefore(current, endDate)) {
+  while (adapter.isBefore(current, endDate)) {
     elements.push(current);
-    current = utils.addDays(current, 1);
+    current = adapter.addDays(current, 1);
   }
-  return elements.map(weekDay => utils.formatByString(weekDay, format));
+  return elements.map(weekDay => adapter.formatByString(weekDay, format));
 };
-export const getLetterEditingOptions = (utils, timezone, sectionType, format) => {
+export const getLetterEditingOptions = (adapter, timezone, sectionType, format) => {
   switch (sectionType) {
     case 'month':
       {
-        return getMonthsInYear(utils, utils.date(undefined, timezone)).map(month => utils.formatByString(month, format));
+        return getMonthsInYear(adapter, adapter.date(undefined, timezone)).map(month => adapter.formatByString(month, format));
       }
     case 'weekDay':
       {
-        return getDaysInWeekStr(utils, format);
+        return getDaysInWeekStr(adapter, format);
       }
     case 'meridiem':
       {
-        const now = utils.date(undefined, timezone);
-        return [utils.startOfDay(now), utils.endOfDay(now)].map(date => utils.formatByString(date, format));
+        const now = adapter.date(undefined, timezone);
+        return [adapter.startOfDay(now), adapter.endOfDay(now)].map(date => adapter.formatByString(date, format));
       }
     default:
       {
@@ -55,15 +55,15 @@ export const getLetterEditingOptions = (utils, timezone, sectionType, format) =>
 // If some adapter does not respect this convention, then we will need to hardcode the format on each adapter.
 export const FORMAT_SECONDS_NO_LEADING_ZEROS = 's';
 const NON_LOCALIZED_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-export const getLocalizedDigits = utils => {
-  const today = utils.date(undefined);
-  const formattedZero = utils.formatByString(utils.setSeconds(today, 0), FORMAT_SECONDS_NO_LEADING_ZEROS);
+export const getLocalizedDigits = adapter => {
+  const today = adapter.date(undefined);
+  const formattedZero = adapter.formatByString(adapter.setSeconds(today, 0), FORMAT_SECONDS_NO_LEADING_ZEROS);
   if (formattedZero === '0') {
     return NON_LOCALIZED_DIGITS;
   }
   return Array.from({
     length: 10
-  }).map((_, index) => utils.formatByString(utils.setSeconds(today, index), FORMAT_SECONDS_NO_LEADING_ZEROS));
+  }).map((_, index) => adapter.formatByString(adapter.setSeconds(today, index), FORMAT_SECONDS_NO_LEADING_ZEROS));
 };
 export const removeLocalizedDigits = (valueStr, localizedDigits) => {
   if (localizedDigits[0] === '0') {
@@ -102,7 +102,7 @@ export const cleanLeadingZeros = (valueStr, size) => {
   // Remove the leading zeros and then add back as many as needed.
   return Number(valueStr).toString().padStart(size, '0');
 };
-export const cleanDigitSectionValue = (utils, value, sectionBoundaries, localizedDigits, section) => {
+export const cleanDigitSectionValue = (adapter, value, sectionBoundaries, localizedDigits, section) => {
   if (process.env.NODE_ENV !== 'production') {
     if (section.type !== 'day' && section.contentType === 'digit-with-letter') {
       throw new Error([`MUI X: The token "${section.format}" is a digit format with letter in it.'
@@ -110,8 +110,8 @@ export const cleanDigitSectionValue = (utils, value, sectionBoundaries, localize
     }
   }
   if (section.type === 'day' && section.contentType === 'digit-with-letter') {
-    const date = utils.setDate(sectionBoundaries.longestMonth, value);
-    return utils.formatByString(date, section.format);
+    const date = adapter.setDate(sectionBoundaries.longestMonth, value);
+    return adapter.formatByString(date, section.format);
   }
 
   // queryValue without leading `0` (`01` => `1`)
@@ -142,53 +142,53 @@ export const getSectionVisibleValue = (section, target, localizedDigits) => {
   }
   return value;
 };
-export const changeSectionValueFormat = (utils, valueStr, currentFormat, newFormat) => {
+export const changeSectionValueFormat = (adapter, valueStr, currentFormat, newFormat) => {
   if (process.env.NODE_ENV !== 'production') {
-    if (getDateSectionConfigFromFormatToken(utils, currentFormat).type === 'weekDay') {
+    if (getDateSectionConfigFromFormatToken(adapter, currentFormat).type === 'weekDay') {
       throw new Error("changeSectionValueFormat doesn't support week day formats");
     }
   }
-  return utils.formatByString(utils.parse(valueStr, currentFormat), newFormat);
+  return adapter.formatByString(adapter.parse(valueStr, currentFormat), newFormat);
 };
-const isFourDigitYearFormat = (utils, format) => utils.formatByString(utils.date(undefined, 'system'), format).length === 4;
-export const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionType, format) => {
+const isFourDigitYearFormat = (adapter, format) => adapter.formatByString(adapter.date(undefined, 'system'), format).length === 4;
+export const doesSectionFormatHaveLeadingZeros = (adapter, contentType, sectionType, format) => {
   if (contentType !== 'digit') {
     return false;
   }
-  const now = utils.date(undefined, 'default');
+  const now = adapter.date(undefined, 'default');
   switch (sectionType) {
-    // We can't use `changeSectionValueFormat`, because  `utils.parse('1', 'YYYY')` returns `1971` instead of `1`.
+    // We can't use `changeSectionValueFormat`, because  `adapter.parse('1', 'YYYY')` returns `1971` instead of `1`.
     case 'year':
       {
         // Remove once https://github.com/iamkun/dayjs/pull/2847 is merged and bump dayjs version
-        if (utils.lib === 'dayjs' && format === 'YY') {
+        if (adapter.lib === 'dayjs' && format === 'YY') {
           return true;
         }
-        return utils.formatByString(utils.setYear(now, 1), format).startsWith('0');
+        return adapter.formatByString(adapter.setYear(now, 1), format).startsWith('0');
       }
     case 'month':
       {
-        return utils.formatByString(utils.startOfYear(now), format).length > 1;
+        return adapter.formatByString(adapter.startOfYear(now), format).length > 1;
       }
     case 'day':
       {
-        return utils.formatByString(utils.startOfMonth(now), format).length > 1;
+        return adapter.formatByString(adapter.startOfMonth(now), format).length > 1;
       }
     case 'weekDay':
       {
-        return utils.formatByString(utils.startOfWeek(now), format).length > 1;
+        return adapter.formatByString(adapter.startOfWeek(now), format).length > 1;
       }
     case 'hours':
       {
-        return utils.formatByString(utils.setHours(now, 1), format).length > 1;
+        return adapter.formatByString(adapter.setHours(now, 1), format).length > 1;
       }
     case 'minutes':
       {
-        return utils.formatByString(utils.setMinutes(now, 1), format).length > 1;
+        return adapter.formatByString(adapter.setMinutes(now, 1), format).length > 1;
       }
     case 'seconds':
       {
-        return utils.formatByString(utils.setSeconds(now, 1), format).length > 1;
+        return adapter.formatByString(adapter.setSeconds(now, 1), format).length > 1;
       }
     default:
       {
@@ -201,7 +201,7 @@ export const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionTyp
  * 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 const getDateFromDateSections = (utils, sections, localizedDigits) => {
+export const getDateFromDateSections = (adapter, sections, localizedDigits) => {
   // If we have both a day and a weekDay section,
   // Then we skip the weekDay in the parsing because libraries like dayjs can't parse complicated formats containing a weekDay.
   // dayjs(dayjs().format('dddd MMMM D YYYY'), 'dddd MMMM D YYYY')) // returns `Invalid Date` even if the format is valid.
@@ -218,7 +218,7 @@ export const getDateFromDateSections = (utils, sections, localizedDigits) => {
   }
   const formatWithoutSeparator = sectionFormats.join(' ');
   const dateWithoutSeparatorStr = sectionValues.join(' ');
-  return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
+  return adapter.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
 export const createDateStrForV7HiddenInputFromSections = sections => sections.map(section => {
   return `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`;
@@ -240,15 +240,15 @@ export const createDateStrForV6InputFromSections = (sections, localizedDigits, i
   // wrap into an isolated group such that separators can split the string in smaller ones by adding \u2069\u2068
   return `\u2066${dateStr}\u2069`;
 };
-export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
-  const today = utils.date(undefined, timezone);
-  const endOfYear = utils.endOfYear(today);
-  const endOfDay = utils.endOfDay(today);
+export const getSectionsBoundaries = (adapter, localizedDigits, timezone) => {
+  const today = adapter.date(undefined, timezone);
+  const endOfYear = adapter.endOfYear(today);
+  const endOfDay = adapter.endOfDay(today);
   const {
     maxDaysInMonth,
     longestMonth
-  } = getMonthsInYear(utils, today).reduce((acc, month) => {
-    const daysInMonth = utils.getDaysInMonth(month);
+  } = getMonthsInYear(adapter, today).reduce((acc, month) => {
+    const daysInMonth = adapter.getDaysInMonth(month);
     if (daysInMonth > acc.maxDaysInMonth) {
       return {
         maxDaysInMonth: daysInMonth,
@@ -265,18 +265,18 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
       format
     }) => ({
       minimum: 0,
-      maximum: isFourDigitYearFormat(utils, format) ? 9999 : 99
+      maximum: isFourDigitYearFormat(adapter, format) ? 9999 : 99
     }),
     month: () => ({
       minimum: 1,
       // Assumption: All years have the same amount of months
-      maximum: utils.getMonth(endOfYear) + 1
+      maximum: adapter.getMonth(endOfYear) + 1
     }),
     day: ({
       currentDate
     }) => ({
       minimum: 1,
-      maximum: utils.isValid(currentDate) ? utils.getDaysInMonth(currentDate) : maxDaysInMonth,
+      maximum: adapter.isValid(currentDate) ? adapter.getDaysInMonth(currentDate) : maxDaysInMonth,
       longestMonth: longestMonth
     }),
     weekDay: ({
@@ -284,7 +284,7 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
       contentType
     }) => {
       if (contentType === 'digit') {
-        const daysInWeek = getDaysInWeekStr(utils, format).map(Number);
+        const daysInWeek = getDaysInWeekStr(adapter, format).map(Number);
         return {
           minimum: Math.min(...daysInWeek),
           maximum: Math.max(...daysInWeek)
@@ -298,12 +298,12 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
     hours: ({
       format
     }) => {
-      const lastHourInDay = utils.getHours(endOfDay);
-      const hasMeridiem = removeLocalizedDigits(utils.formatByString(utils.endOfDay(today), format), localizedDigits) !== lastHourInDay.toString();
+      const lastHourInDay = adapter.getHours(endOfDay);
+      const hasMeridiem = removeLocalizedDigits(adapter.formatByString(adapter.endOfDay(today), format), localizedDigits) !== lastHourInDay.toString();
       if (hasMeridiem) {
         return {
           minimum: 1,
-          maximum: Number(removeLocalizedDigits(utils.formatByString(utils.startOfDay(today), format), localizedDigits))
+          maximum: Number(removeLocalizedDigits(adapter.formatByString(adapter.startOfDay(today), format), localizedDigits))
         };
       }
       return {
@@ -314,12 +314,12 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
     minutes: () => ({
       minimum: 0,
       // Assumption: All years have the same amount of minutes
-      maximum: utils.getMinutes(endOfDay)
+      maximum: adapter.getMinutes(endOfDay)
     }),
     seconds: () => ({
       minimum: 0,
       // Assumption: All years have the same amount of seconds
-      maximum: utils.getSeconds(endOfDay)
+      maximum: adapter.getSeconds(endOfDay)
     }),
     meridiem: () => ({
       minimum: 0,
@@ -350,55 +350,55 @@ export const validateSections = (sections, valueType) => {
     }
   }
 };
-const transferDateSectionValue = (utils, section, dateToTransferFrom, dateToTransferTo) => {
+const transferDateSectionValue = (adapter, section, dateToTransferFrom, dateToTransferTo) => {
   switch (section.type) {
     case 'year':
       {
-        return utils.setYear(dateToTransferTo, utils.getYear(dateToTransferFrom));
+        return adapter.setYear(dateToTransferTo, adapter.getYear(dateToTransferFrom));
       }
     case 'month':
       {
-        return utils.setMonth(dateToTransferTo, utils.getMonth(dateToTransferFrom));
+        return adapter.setMonth(dateToTransferTo, adapter.getMonth(dateToTransferFrom));
       }
     case 'weekDay':
       {
-        let dayInWeekStrOfActiveDate = utils.formatByString(dateToTransferFrom, section.format);
+        let dayInWeekStrOfActiveDate = adapter.formatByString(dateToTransferFrom, section.format);
         if (section.hasLeadingZerosInInput) {
           dayInWeekStrOfActiveDate = cleanLeadingZeros(dayInWeekStrOfActiveDate, section.maxLength);
         }
-        const formattedDaysInWeek = getDaysInWeekStr(utils, section.format);
+        const formattedDaysInWeek = getDaysInWeekStr(adapter, section.format);
         const dayInWeekOfActiveDate = formattedDaysInWeek.indexOf(dayInWeekStrOfActiveDate);
         const dayInWeekOfNewSectionValue = formattedDaysInWeek.indexOf(section.value);
         const diff = dayInWeekOfNewSectionValue - dayInWeekOfActiveDate;
-        return utils.addDays(dateToTransferFrom, diff);
+        return adapter.addDays(dateToTransferFrom, diff);
       }
     case 'day':
       {
-        return utils.setDate(dateToTransferTo, utils.getDate(dateToTransferFrom));
+        return adapter.setDate(dateToTransferTo, adapter.getDate(dateToTransferFrom));
       }
     case 'meridiem':
       {
-        const isAM = utils.getHours(dateToTransferFrom) < 12;
-        const mergedDateHours = utils.getHours(dateToTransferTo);
+        const isAM = adapter.getHours(dateToTransferFrom) < 12;
+        const mergedDateHours = adapter.getHours(dateToTransferTo);
         if (isAM && mergedDateHours >= 12) {
-          return utils.addHours(dateToTransferTo, -12);
+          return adapter.addHours(dateToTransferTo, -12);
         }
         if (!isAM && mergedDateHours < 12) {
-          return utils.addHours(dateToTransferTo, 12);
+          return adapter.addHours(dateToTransferTo, 12);
         }
         return dateToTransferTo;
       }
     case 'hours':
       {
-        return utils.setHours(dateToTransferTo, utils.getHours(dateToTransferFrom));
+        return adapter.setHours(dateToTransferTo, adapter.getHours(dateToTransferFrom));
       }
     case 'minutes':
       {
-        return utils.setMinutes(dateToTransferTo, utils.getMinutes(dateToTransferFrom));
+        return adapter.setMinutes(dateToTransferTo, adapter.getMinutes(dateToTransferFrom));
       }
     case 'seconds':
       {
-        return utils.setSeconds(dateToTransferTo, utils.getSeconds(dateToTransferFrom));
+        return adapter.setSeconds(dateToTransferTo, adapter.getSeconds(dateToTransferFrom));
       }
     default:
       {
@@ -417,11 +417,11 @@ const reliableSectionModificationOrder = {
   meridiem: 8,
   empty: 9
 };
-export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
+export const mergeDateIntoReferenceDate = (adapter, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
 // cloning sections before sort to avoid mutating it
 [...sections].sort((a, b) => reliableSectionModificationOrder[a.type] - reliableSectionModificationOrder[b.type]).reduce((mergedDate, section) => {
   if (!shouldLimitToEditedSections || section.modified) {
-    return transferDateSectionValue(utils, section, dateToTransferFrom, mergedDate);
+    return transferDateSectionValue(adapter, section, dateToTransferFrom, mergedDate);
   }
   return mergedDate;
 }, referenceDate);

package/esm/internals/hooks/useField/useFieldCharacterEditing.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useUtils } from "../useUtils.js";
 import { changeSectionValueFormat, cleanDigitSectionValue, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions, applyLocalizedDigits, removeLocalizedDigits, isStringNumber } from "./useField.utils.js";
+import { usePickerAdapter } from "../../../hooks/usePickerAdapter.js";
 const isQueryResponseWithoutValue = response => response.saveQuery != null;
 
 /**
@@ -24,7 +24,7 @@ export const useFieldCharacterEditing = ({
     updateSectionValue
   }
 }) => {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const applyQuery = ({
     keyPressed,
     sectionIndex
@@ -75,7 +75,7 @@ export const useFieldCharacterEditing = ({
       };
     };
     const testQueryOnFormatAndFallbackFormat = (queryValue, activeSection, fallbackFormat, formatFallbackValue) => {
-      const getOptions = format => getLetterEditingOptions(utils, timezone, activeSection.type, format);
+      const getOptions = format => getLetterEditingOptions(adapter, timezone, activeSection.type, format);
       if (activeSection.contentType === 'letter') {
         return findMatchingOptions(activeSection.format, getOptions(activeSection.format), queryValue);
       }
@@ -83,7 +83,7 @@ export const useFieldCharacterEditing = ({
       // When editing a digit-format month / weekDay and the user presses a letter,
       // We can support the letter editing by using the letter-format month / weekDay and re-formatting the result.
       // We just have to make sure that the default month / weekDay format is a letter format,
-      if (fallbackFormat && formatFallbackValue != null && getDateSectionConfigFromFormatToken(utils, fallbackFormat).contentType === 'letter') {
+      if (fallbackFormat && formatFallbackValue != null && getDateSectionConfigFromFormatToken(adapter, fallbackFormat).contentType === 'letter') {
         const fallbackOptions = getOptions(fallbackFormat);
         const response = findMatchingOptions(fallbackFormat, fallbackOptions, queryValue);
         if (isQueryResponseWithoutValue(response)) {
@@ -103,13 +103,13 @@ export const useFieldCharacterEditing = ({
       switch (activeSection.type) {
         case 'month':
           {
-            const formatFallbackValue = fallbackValue => changeSectionValueFormat(utils, fallbackValue, utils.formats.month, activeSection.format);
-            return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, utils.formats.month, formatFallbackValue);
+            const formatFallbackValue = fallbackValue => changeSectionValueFormat(adapter, fallbackValue, adapter.formats.month, activeSection.format);
+            return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, adapter.formats.month, formatFallbackValue);
           }
         case 'weekDay':
           {
             const formatFallbackValue = (fallbackValue, fallbackOptions) => fallbackOptions.indexOf(fallbackValue).toString();
-            return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, utils.formats.weekday, formatFallbackValue);
+            return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, adapter.formats.weekday, formatFallbackValue);
           }
         case 'meridiem':
           {
@@ -153,7 +153,7 @@ export const useFieldCharacterEditing = ({
         };
       }
       const shouldGoToNextSection = queryValueNumber * 10 > sectionBoundaries.maximum || cleanQueryValue.length === sectionBoundaries.maximum.toString().length;
-      const newSectionValue = cleanDigitSectionValue(utils, queryValueNumber, sectionBoundaries, localizedDigits, section);
+      const newSectionValue = cleanDigitSectionValue(adapter, queryValueNumber, sectionBoundaries, localizedDigits, section);
       return {
         sectionValue: newSectionValue,
         shouldGoToNextSection
@@ -171,7 +171,7 @@ export const useFieldCharacterEditing = ({
       // When editing a letter-format month and the user presses a digit,
       // We can support the numeric editing by using the digit-format month and re-formatting the result.
       if (activeSection.type === 'month') {
-        const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, 'digit', 'month', 'MM');
+        const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(adapter, 'digit', 'month', 'MM');
         const response = getNewSectionValue({
           queryValue,
           skipIfBelowMinimum: true,
@@ -187,7 +187,7 @@ export const useFieldCharacterEditing = ({
         if (isQueryResponseWithoutValue(response)) {
           return response;
         }
-        const formattedValue = changeSectionValueFormat(utils, response.sectionValue, 'MM', activeSection.format);
+        const formattedValue = changeSectionValueFormat(adapter, response.sectionValue, 'MM', activeSection.format);
         return _extends({}, response, {
           sectionValue: formattedValue
         });
@@ -204,7 +204,7 @@ export const useFieldCharacterEditing = ({
         if (isQueryResponseWithoutValue(response)) {
           return response;
         }
-        const formattedValue = getDaysInWeekStr(utils, activeSection.format)[Number(response.sectionValue) - 1];
+        const formattedValue = getDaysInWeekStr(adapter, activeSection.format)[Number(response.sectionValue) - 1];
         return _extends({}, response, {
           sectionValue: formattedValue
         });

package/esm/internals/hooks/useField/useFieldRootHandleKeyDown.js

@@ -1,12 +1,12 @@
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useUtils } from "../useUtils.js";
 import { cleanDigitSectionValue, getLetterEditingOptions, removeLocalizedDigits } from "./useField.utils.js";
+import { usePickerAdapter } from "../../../hooks/usePickerAdapter.js";
 
 /**
  * Returns the `onKeyDown` handler to pass to the root element of the field.
  */
 export function useFieldRootHandleKeyDown(parameters) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const {
     manager: {
       internal_fieldValueManager: fieldValueManager
@@ -112,7 +112,7 @@ export function useFieldRootHandleKeyDown(parameters) {
             setSelectedSections(activeSectionIndex);
           }
           const activeSection = state.sections[activeSectionIndex];
-          const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
+          const newSectionValue = adjustSectionValue(adapter, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
             minutesStep
           });
           updateSectionValue({
@@ -139,7 +139,7 @@ function getDeltaFromKeyCode(keyCode) {
       return 0;
   }
 }
-function adjustSectionValue(utils, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) {
+function adjustSectionValue(adapter, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) {
   const delta = getDeltaFromKeyCode(keyCode);
   const isStart = keyCode === 'Home';
   const isEnd = keyCode === 'End';
@@ -150,12 +150,12 @@ function adjustSectionValue(utils, timezone, section, keyCode, sectionsValueBoun
       format: section.format,
       contentType: section.contentType
     });
-    const getCleanValue = value => cleanDigitSectionValue(utils, value, sectionBoundaries, localizedDigits, section);
+    const getCleanValue = value => cleanDigitSectionValue(adapter, value, sectionBoundaries, localizedDigits, section);
     const step = section.type === 'minutes' && stepsAttributes?.minutesStep ? stepsAttributes.minutesStep : 1;
     let newSectionValueNumber;
     if (shouldSetAbsolute) {
       if (section.type === 'year' && !isEnd && !isStart) {
-        return utils.formatByString(utils.date(undefined, timezone), section.format);
+        return adapter.formatByString(adapter.date(undefined, timezone), section.format);
       }
       if (delta > 0 || isStart) {
         newSectionValueNumber = sectionBoundaries.minimum;
@@ -183,7 +183,7 @@ function adjustSectionValue(utils, timezone, section, keyCode, sectionsValueBoun
     return getCleanValue(newSectionValueNumber);
   };
   const adjustLetterSection = () => {
-    const options = getLetterEditingOptions(utils, timezone, section.type, section.format);
+    const options = getLetterEditingOptions(adapter, timezone, section.type, section.format);
     if (options.length === 0) {
       return section.value;
     }

package/esm/internals/hooks/useField/useFieldSectionContentProps.js

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useId from '@mui/utils/useId';
-import { useUtils } from "../useUtils.js";
-import { usePickerTranslations } from "../../../hooks/index.js";
+import { usePickerAdapter, usePickerTranslations } from "../../../hooks/index.js";
 import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
 /**
  * Generate the props to pass to the content element of each section of the field.
@@ -12,7 +11,7 @@ import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
  * @returns {UseFieldRootPropsReturnValue} The props to forward to the content element of each section of the field.
  */
 export function useFieldSectionContentProps(parameters) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const translations = usePickerTranslations();
   const id = useId();
   const {
@@ -150,10 +149,10 @@ export function useFieldSectionContentProps(parameters) {
       // Aria attributes
       'aria-labelledby': `${id}-${section.type}`,
       'aria-readonly': readOnly,
-      'aria-valuenow': getSectionValueNow(section, utils),
+      'aria-valuenow': getSectionValueNow(section, adapter),
       'aria-valuemin': sectionBoundaries.minimum,
       'aria-valuemax': sectionBoundaries.maximum,
-      'aria-valuetext': section.value ? getSectionValueText(section, utils) : translations.empty,
+      'aria-valuetext': section.value ? getSectionValueText(section, adapter) : translations.empty,
       'aria-label': translations[section.type],
       'aria-disabled': disabled,
       // Other
@@ -168,9 +167,9 @@ export function useFieldSectionContentProps(parameters) {
       children: section.value || section.placeholder,
       inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
     };
-  }, [sectionsValueBoundaries, id, isContainerEditable, disabled, readOnly, isEditable, translations, utils, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
+  }, [sectionsValueBoundaries, id, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
 }
-function getSectionValueText(section, utils) {
+function getSectionValueText(section, adapter) {
   if (!section.value) {
     return undefined;
   }
@@ -178,13 +177,13 @@ function getSectionValueText(section, utils) {
     case 'month':
       {
         if (section.contentType === 'digit') {
-          return utils.format(utils.setMonth(utils.date(), Number(section.value) - 1), 'month');
+          return adapter.format(adapter.setMonth(adapter.date(), Number(section.value) - 1), 'month');
         }
-        const parsedDate = utils.parse(section.value, section.format);
-        return parsedDate ? utils.format(parsedDate, 'month') : undefined;
+        const parsedDate = adapter.parse(section.value, section.format);
+        return parsedDate ? adapter.format(parsedDate, 'month') : undefined;
       }
     case 'day':
-      return section.contentType === 'digit' ? utils.format(utils.setDate(utils.startOfYear(utils.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
+      return section.contentType === 'digit' ? adapter.format(adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
     case 'weekDay':
       // TODO: improve by providing the label of the week day
       return undefined;
@@ -192,7 +191,7 @@ function getSectionValueText(section, utils) {
       return undefined;
   }
 }
-function getSectionValueNow(section, utils) {
+function getSectionValueNow(section, adapter) {
   if (!section.value) {
     return undefined;
   }
@@ -207,9 +206,9 @@ function getSectionValueNow(section, utils) {
       }
     case 'meridiem':
       {
-        const parsedDate = utils.parse(`01:00 ${section.value}`, `${utils.formats.hours12h}:${utils.formats.minutes} ${section.format}`);
+        const parsedDate = adapter.parse(`01:00 ${section.value}`, `${adapter.formats.hours12h}:${adapter.formats.minutes} ${section.format}`);
         if (parsedDate) {
-          return utils.getHours(parsedDate) >= 12 ? 1 : 0;
+          return adapter.getHours(parsedDate) >= 12 ? 1 : 0;
         }
         return undefined;
       }
@@ -220,8 +219,8 @@ function getSectionValueNow(section, utils) {
         if (section.contentType === 'digit') {
           return Number(section.value);
         }
-        const parsedDate = utils.parse(section.value, section.format);
-        return parsedDate ? utils.getMonth(parsedDate) + 1 : undefined;
+        const parsedDate = adapter.parse(section.value, section.format);
+        return parsedDate ? adapter.getMonth(parsedDate) + 1 : undefined;
       }
     default:
       return section.contentType !== 'letter' ? Number(section.value) : undefined;