@mui/x-date-pickers 8.5.3 → 8.7.0

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;

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

@@ -1,11 +1,12 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import useTimeout from '@mui/utils/useTimeout';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useRtl } from '@mui/system/RtlProvider';
-import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
-import { useUtils, useLocalizationContext } from "../useUtils.js";
+import { usePickerAdapter, usePickerTranslations } from "../../../hooks/index.js";
 import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits, getSectionOrder } from "./useField.utils.js";
 import { buildSectionsFromFormat } from "./buildSectionsFromFormat.js";
 import { useValidation } from "../../../validation/index.js";
@@ -13,9 +14,8 @@ import { useControlledValue } from "../useControlledValue.js";
 import { getSectionTypeGranularity } from "../../utils/getDefaultReferenceDate.js";
 const QUERY_LIFE_DURATION_MS = 5000;
 export const useFieldState = parameters => {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const translations = usePickerTranslations();
-  const adapter = useLocalizationContext();
   const isRtl = useRtl();
   const {
     manager: {
@@ -76,10 +76,10 @@ export const useFieldState = parameters => {
     }
     return hasValidationError;
   }, [hasValidationError, errorProp]);
-  const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
-  const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
+  const localizedDigits = React.useMemo(() => getLocalizedDigits(adapter), [adapter]);
+  const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(adapter, localizedDigits, timezone), [adapter, localizedDigits, timezone]);
   const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, date => buildSectionsFromFormat({
-    utils,
+    adapter,
     localeText: translations,
     localizedDigits,
     format,
@@ -88,7 +88,7 @@ export const useFieldState = parameters => {
     shouldRespectLeadingZeros,
     enableAccessibleFieldDOMStructure,
     isRtl
-  })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, enableAccessibleFieldDOMStructure]);
+  })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, adapter, formatDensity, enableAccessibleFieldDOMStructure]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(value);
     validateSections(sections, valueType);
@@ -98,7 +98,7 @@ export const useFieldState = parameters => {
       lastSectionsDependencies: {
         format,
         isRtl,
-        locale: utils.locale
+        locale: adapter.locale
       },
       tempValueStrAndroid: null,
       characterQuery: null
@@ -107,7 +107,7 @@ export const useFieldState = parameters => {
     const referenceValue = valueManager.getInitialReferenceValue({
       referenceDate: referenceDateProp,
       value,
-      utils,
+      adapter,
       props: internalPropsWithDefaults,
       granularity,
       timezone
@@ -164,7 +164,7 @@ export const useFieldState = parameters => {
     });
   };
   const clearValue = () => {
-    if (valueManager.areValuesEqual(utils, value, valueManager.emptyValue)) {
+    if (valueManager.areValuesEqual(adapter, value, valueManager.emptyValue)) {
       setState(prevState => _extends({}, prevState, {
         sections: prevState.sections.map(section => _extends({}, section, {
           value: ''
@@ -203,12 +203,12 @@ export const useFieldState = parameters => {
   };
   const updateValueFromValueStr = valueStr => {
     const parseDateStr = (dateStr, referenceDate) => {
-      const date = utils.parse(dateStr, format);
-      if (!utils.isValid(date)) {
+      const date = adapter.parse(dateStr, format);
+      if (!adapter.isValid(date)) {
         return null;
       }
       const sections = buildSectionsFromFormat({
-        utils,
+        adapter,
         localeText: translations,
         localizedDigits,
         format,
@@ -218,7 +218,7 @@ export const useFieldState = parameters => {
         enableAccessibleFieldDOMStructure,
         isRtl
       });
-      return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
+      return mergeDateIntoReferenceDate(adapter, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
     publishValue(newValue);
@@ -245,15 +245,15 @@ export const useFieldState = parameters => {
      */
     const newSections = setSectionValue(activeSectionIndex, newSectionValue);
     const newActiveDateSections = fieldValueManager.getDateSectionsFromValue(newSections, section);
-    const newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits);
+    const newActiveDate = getDateFromDateSections(adapter, newActiveDateSections, localizedDigits);
 
     /**
      * If the new date is valid,
      * Then we merge the value of the modified sections into the reference date.
      * This makes sure that we don't lose some information of the initial date (like the time on a date field).
      */
-    if (utils.isValid(newActiveDate)) {
-      const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
+    if (adapter.isValid(newActiveDate)) {
+      const mergedDate = mergeDateIntoReferenceDate(adapter, newActiveDate, newActiveDateSections, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
       if (activeDate == null) {
         cleanActiveDateSectionsIfValueNullTimeout.start(0, () => {
           if (valueRef.current === value) {
@@ -271,7 +271,7 @@ export const useFieldState = parameters => {
      * If all the sections are filled but the date is invalid and the previous date is valid or null,
      * Then we publish an invalid date.
      */
-    if (newActiveDateSections.every(sectionBis => sectionBis.value !== '') && (activeDate == null || utils.isValid(activeDate))) {
+    if (newActiveDateSections.every(sectionBis => sectionBis.value !== '') && (activeDate == null || adapter.isValid(activeDate))) {
       setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
       return publishValue(fieldValueManager.updateDateInValue(value, section, newActiveDate));
     }
@@ -306,7 +306,7 @@ export const useFieldState = parameters => {
   // If `prop.value` changes, we update the state to reflect the new value
   if (value !== state.lastExternalValue) {
     let sections;
-    if (sectionToUpdateOnNextInvalidDateRef.current != null && !utils.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]))) {
+    if (sectionToUpdateOnNextInvalidDateRef.current != null && !adapter.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]))) {
       sections = setSectionValue(sectionToUpdateOnNextInvalidDateRef.current.sectionIndex, sectionToUpdateOnNextInvalidDateRef.current.value);
     } else {
       sections = getSectionsFromValue(value);
@@ -317,20 +317,20 @@ export const useFieldState = parameters => {
       sectionsDependencies: {
         format,
         isRtl,
-        locale: utils.locale
+        locale: adapter.locale
       },
-      referenceValue: fieldValueManager.updateReferenceValue(utils, value, prevState.referenceValue),
+      referenceValue: fieldValueManager.updateReferenceValue(adapter, value, prevState.referenceValue),
       tempValueStrAndroid: null
     }));
   }
-  if (isRtl !== state.lastSectionsDependencies.isRtl || format !== state.lastSectionsDependencies.format || utils.locale !== state.lastSectionsDependencies.locale) {
+  if (isRtl !== state.lastSectionsDependencies.isRtl || format !== state.lastSectionsDependencies.format || adapter.locale !== state.lastSectionsDependencies.locale) {
     const sections = getSectionsFromValue(value);
     validateSections(sections, valueType);
     setState(prevState => _extends({}, prevState, {
       lastSectionsDependencies: {
         format,
         isRtl,
-        locale: utils.locale
+        locale: adapter.locale
       },
       sections,
       tempValueStrAndroid: null,

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

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';

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

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';

package/esm/internals/hooks/useNullableFieldPrivateContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") PickerFieldPrivateContext.displayName = "PickerFieldPrivateContext";

package/esm/internals/hooks/usePicker/hooks/useOrientation.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { arrayIncludes } from "../../../utils/utils.js";

package/esm/internals/hooks/usePicker/hooks/useValueAndOpenStates.js

@@ -1,9 +1,11 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { warnOnce } from '@mui/x-internals/warning';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useControlledValue } from "../../useControlledValue.js";
-import { useUtils } from "../../useUtils.js";
+import { usePickerAdapter } from "../../../../hooks/usePickerAdapter.js";
 import { useValidation } from "../../../../validation/index.js";
 export function useValueAndOpenStates(parameters) {
   const {
@@ -32,7 +34,7 @@ export function useValueAndOpenStates(parameters) {
   const {
     current: isOpenControlled
   } = React.useRef(openProp !== undefined);
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   if (process.env.NODE_ENV !== 'production') {
     if (props.renderInput != null) {
       warnOnce(['MUI X: The `renderInput` prop has been removed in version 6.0 of the Date and Time Pickers.', 'You can replace it with the `textField` component slot in most cases.', 'For more information, please have a look at the migration guide (https://mui.com/x/migration/migration-pickers-v5/#input-renderer-required-in-v5).']);
@@ -113,13 +115,13 @@ export function useValueAndOpenStates(parameters) {
       shouldFireOnChange = true;
       shouldFireOnAccept = changeImportance === 'accept';
     } else {
-      shouldFireOnChange = !valueManager.areValuesEqual(utils, newValue, value);
-      shouldFireOnAccept = changeImportance === 'accept' && !valueManager.areValuesEqual(utils, newValue, state.lastCommittedValue);
+      shouldFireOnChange = !valueManager.areValuesEqual(adapter, newValue, value);
+      shouldFireOnAccept = changeImportance === 'accept' && !valueManager.areValuesEqual(adapter, newValue, state.lastCommittedValue);
     }
     setState(prevState => _extends({}, prevState, {
       // We reset the shallow value whenever we fire onChange.
       clockShallowValue: shouldFireOnChange ? undefined : prevState.clockShallowValue,
-      lastCommittedValue: shouldFireOnAccept ? value : prevState.lastCommittedValue,
+      lastCommittedValue: shouldFireOnAccept ? newValue : prevState.lastCommittedValue,
       hasBeenModifiedSinceMount: true
     }));
     let cachedContext = null;
@@ -179,7 +181,7 @@ export function useValueAndOpenStates(parameters) {
       }));
     }
   }, [isOpenControlled, openProp]);
-  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, state.clockShallowValue === undefined ? value : state.clockShallowValue), [utils, valueManager, state.clockShallowValue, value]);
+  const viewValue = React.useMemo(() => valueManager.cleanValue(adapter, state.clockShallowValue === undefined ? value : state.clockShallowValue), [adapter, valueManager, state.clockShallowValue, value]);
   return {
     timezone,
     state,

package/esm/internals/hooks/usePicker/usePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "sx"];
@@ -6,7 +8,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
 import useId from '@mui/utils/useId';
-import { useLocalizationContext, useUtils } from "../useUtils.js";
+import { usePickerAdapter } from "../../../hooks/usePickerAdapter.js";
 import { useReduceAnimations } from "../useReduceAnimations.js";
 import { isTimeView } from "../../utils/time-utils.js";
 import { useViews } from "../useViews.js";
@@ -62,8 +64,7 @@ export const usePicker = ({
    * TODO: Improve how we generate the aria-label and aria-labelledby attributes.
    */
   const labelId = useId();
-  const utils = useUtils();
-  const adapter = useLocalizationContext();
+  const adapter = usePickerAdapter();
   const reduceAnimations = useReduceAnimations(reduceAnimationsProp);
   const orientation = useOrientation(views, orientationProp);
   const {
@@ -111,7 +112,7 @@ export const usePicker = ({
     getStepNavigation
   });
   const clearValue = useEventCallback(() => setValue(valueManager.emptyValue));
-  const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
+  const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType)));
   const acceptValueChanges = useEventCallback(() => setValue(value));
   const cancelValueChanges = useEventCallback(() => setValue(state.lastCommittedValue, {
     skipPublicationIfPristine: true
@@ -181,13 +182,13 @@ export const usePicker = ({
   }, [state.open]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const ownerState = React.useMemo(() => ({
-    isPickerValueEmpty: valueManager.areValuesEqual(utils, value, valueManager.emptyValue),
+    isPickerValueEmpty: valueManager.areValuesEqual(adapter, value, valueManager.emptyValue),
     isPickerOpen: state.open,
     isPickerDisabled: props.disabled ?? false,
     isPickerReadOnly: props.readOnly ?? false,
     pickerOrientation: orientation,
     pickerVariant: variant
-  }), [utils, valueManager, value, state.open, orientation, variant, props.disabled, props.readOnly]);
+  }), [adapter, valueManager, value, state.open, orientation, variant, props.disabled, props.readOnly]);
   const triggerStatus = React.useMemo(() => {
     if (disableOpenPicker || !hasUIView) {
       return 'hidden';

package/esm/internals/hooks/usePicker/usePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { InferError, OnErrorProps, PickerChangeHandlerContext, PickerOwnerState, PickerValidDate, PickerValueType, TimezoneProps } from "../../../models/index.js";
-import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerValueManager, PickerVariant } from "../../models/index.js";
+import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerRangeValue, PickerValidValue, PickerValueManager, PickerVariant } from "../../models/index.js";
 import { Validator } from "../../../validation/index.js";
 import { UseViewsOptions } from "../useViews.js";
 import { PickerProviderProps } from "../../components/PickerProvider.js";
@@ -48,7 +48,7 @@ export interface UsePickerBaseProps<TValue extends PickerValidValue, TView exten
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate?: PickerValidDate;
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
   /**
    * Force rendering in particular orientation.
    */
@@ -108,7 +108,7 @@ export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextV
   name?: string;
 }
 export interface UsePickerProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<TValue, TView, TError, any>> extends UsePickerBaseProps<TValue, TView, TError, TExternalProps>, UsePickerNonStaticProps {
-  referenceDate?: PickerValidDate;
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
   className?: string;
   sx?: SxProps<Theme>;
 }

package/esm/internals/hooks/useUtils.d.ts

@@ -1,13 +1,6 @@
-import { MuiPickersAdapterContextValue } from "../../LocalizationProvider/LocalizationProvider.js";
-import { PickersLocaleText } from "../../locales/utils/pickersLocaleTextApi.js";
 import { PickersTimezone, PickerValidDate } from "../../models/index.js";
-export declare const useLocalizationContext: () => UseLocalizationContextReturnValue;
-export declare const useUtils: () => import("@mui/x-date-pickers/models").MuiPickersAdapter<any>;
 export declare const useDefaultDates: () => {
   minDate: PickerValidDate;
   maxDate: PickerValidDate;
 };
-export declare const useNow: (timezone: PickersTimezone) => PickerValidDate;
-export interface UseLocalizationContextReturnValue extends Omit<MuiPickersAdapterContextValue, 'localeText'> {
-  localeText: PickersLocaleText;
-}
+export declare const useNow: (timezone: PickersTimezone) => PickerValidDate;

package/esm/internals/hooks/useUtils.js

@@ -1,27 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { MuiPickersAdapterContext } from "../../LocalizationProvider/LocalizationProvider.js";
-import { DEFAULT_LOCALE } from "../../locales/enUS.js";
-export const useLocalizationContext = () => {
-  const localization = React.useContext(MuiPickersAdapterContext);
-  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.utils === 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 useUtils = () => useLocalizationContext().utils;
+import { useLocalizationContext, usePickerAdapter } from "../../hooks/usePickerAdapter.js";
 export const useDefaultDates = () => useLocalizationContext().defaultDates;
 export const useNow = timezone => {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const now = React.useRef(undefined);
   if (now.current === undefined) {
-    now.current = utils.date(undefined, timezone);
+    now.current = adapter.date(undefined, timezone);
   }
   return now.current;
 };

package/esm/internals/hooks/useViews.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';

package/esm/internals/index.d.ts

@@ -39,7 +39,8 @@ export { useStaticPicker } from "./hooks/useStaticPicker/index.js";
 export type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "./hooks/useStaticPicker/index.js";
 export { useToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
 export type { PickerToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
-export { useLocalizationContext, useDefaultDates, useUtils, useNow } from "./hooks/useUtils.js";
+export { useDefaultDates, useNow } from "./hooks/useUtils.js";
+export { useLocalizationContext } from "../hooks/usePickerAdapter.js";
 export type { ExportedUseViewsOptions, UseViewsOptions } from "./hooks/useViews.js";
 export { useViews } from "./hooks/useViews.js";
 export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";

package/esm/internals/index.js

@@ -21,7 +21,8 @@ export { usePicker } from "./hooks/usePicker/index.js";
 export { usePickerPrivateContext } from "./hooks/usePickerPrivateContext.js";
 export { useStaticPicker } from "./hooks/useStaticPicker/index.js";
 export { useToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
-export { useLocalizationContext, useDefaultDates, useUtils, useNow } from "./hooks/useUtils.js";
+export { useDefaultDates, useNow } from "./hooks/useUtils.js";
+export { useLocalizationContext } from "../hooks/usePickerAdapter.js";
 export { useViews } from "./hooks/useViews.js";
 export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
 export { createStepNavigation } from "./utils/createStepNavigation.js";