@mui/x-date-pickers 8.5.3 → 8.7.0

package/internals/hooks/useField/useFieldRootHandleKeyDown.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFieldRootHandleKeyDown = useFieldRootHandleKeyDown;
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useUtils = require("../useUtils");
 var _useField = require("./useField.utils");
+var _usePickerAdapter = require("../../../hooks/usePickerAdapter");
 /**
  * Returns the `onKeyDown` handler to pass to the root element of the field.
  */
 function useFieldRootHandleKeyDown(parameters) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   const {
     manager: {
       internal_fieldValueManager: fieldValueManager
@@ -118,7 +118,7 @@ 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({
@@ -145,7 +145,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';
@@ -156,12 +156,12 @@ function adjustSectionValue(utils, timezone, section, keyCode, sectionsValueBoun
       format: section.format,
       contentType: section.contentType
     });
-    const getCleanValue = value => (0, _useField.cleanDigitSectionValue)(utils, value, sectionBoundaries, localizedDigits, section);
+    const getCleanValue = value => (0, _useField.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;
@@ -189,7 +189,7 @@ function adjustSectionValue(utils, timezone, section, keyCode, sectionsValueBoun
     return getCleanValue(newSectionValueNumber);
   };
   const adjustLetterSection = () => {
-    const options = (0, _useField.getLetterEditingOptions)(utils, timezone, section.type, section.format);
+    const options = (0, _useField.getLetterEditingOptions)(adapter, timezone, section.type, section.format);
     if (options.length === 0) {
       return section.value;
     }

package/internals/hooks/useField/useFieldSectionContentProps.js

@@ -9,7 +9,6 @@ exports.useFieldSectionContentProps = useFieldSectionContentProps;
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
-var _useUtils = require("../useUtils");
 var _hooks = require("../../../hooks");
 var _syncSelectionToDOM = require("./syncSelectionToDOM");
 /**
@@ -20,7 +19,7 @@ var _syncSelectionToDOM = require("./syncSelectionToDOM");
  * @returns {UseFieldRootPropsReturnValue} The props to forward to the content element of each section of the field.
  */
 function useFieldSectionContentProps(parameters) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const translations = (0, _hooks.usePickerTranslations)();
   const id = (0, _useId.default)();
   const {
@@ -158,10 +157,10 @@ 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
@@ -176,9 +175,9 @@ 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;
   }
@@ -186,13 +185,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;
@@ -200,7 +199,7 @@ function getSectionValueText(section, utils) {
       return undefined;
   }
 }
-function getSectionValueNow(section, utils) {
+function getSectionValueNow(section, adapter) {
   if (!section.value) {
     return undefined;
   }
@@ -215,9 +214,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;
       }
@@ -228,8 +227,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/internals/hooks/useField/useFieldState.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -12,8 +13,7 @@ var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"))
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _usePickerTranslations = require("../../../hooks/usePickerTranslations");
-var _useUtils = require("../useUtils");
+var _hooks = require("../../../hooks");
 var _useField = require("./useField.utils");
 var _buildSectionsFromFormat = require("./buildSectionsFromFormat");
 var _validation = require("../../../validation");
@@ -21,9 +21,8 @@ var _useControlledValue = require("../useControlledValue");
 var _getDefaultReferenceDate = require("../../utils/getDefaultReferenceDate");
 const QUERY_LIFE_DURATION_MS = 5000;
 const useFieldState = parameters => {
-  const utils = (0, _useUtils.useUtils)();
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const adapter = (0, _useUtils.useLocalizationContext)();
+  const adapter = (0, _hooks.usePickerAdapter)();
+  const translations = (0, _hooks.usePickerTranslations)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const {
     manager: {
@@ -84,10 +83,10 @@ const useFieldState = parameters => {
     }
     return hasValidationError;
   }, [hasValidationError, errorProp]);
-  const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(utils), [utils]);
-  const sectionsValueBoundaries = React.useMemo(() => (0, _useField.getSectionsBoundaries)(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
+  const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(adapter), [adapter]);
+  const sectionsValueBoundaries = React.useMemo(() => (0, _useField.getSectionsBoundaries)(adapter, localizedDigits, timezone), [adapter, localizedDigits, timezone]);
   const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, date => (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
-    utils,
+    adapter,
     localeText: translations,
     localizedDigits,
     format,
@@ -96,7 +95,7 @@ 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);
     (0, _useField.validateSections)(sections, valueType);
@@ -106,7 +105,7 @@ const useFieldState = parameters => {
       lastSectionsDependencies: {
         format,
         isRtl,
-        locale: utils.locale
+        locale: adapter.locale
       },
       tempValueStrAndroid: null,
       characterQuery: null
@@ -115,7 +114,7 @@ const useFieldState = parameters => {
     const referenceValue = valueManager.getInitialReferenceValue({
       referenceDate: referenceDateProp,
       value,
-      utils,
+      adapter,
       props: internalPropsWithDefaults,
       granularity,
       timezone
@@ -172,7 +171,7 @@ const useFieldState = parameters => {
     });
   };
   const clearValue = () => {
-    if (valueManager.areValuesEqual(utils, value, valueManager.emptyValue)) {
+    if (valueManager.areValuesEqual(adapter, value, valueManager.emptyValue)) {
       setState(prevState => (0, _extends2.default)({}, prevState, {
         sections: prevState.sections.map(section => (0, _extends2.default)({}, section, {
           value: ''
@@ -211,12 +210,12 @@ 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 = (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
-        utils,
+        adapter,
         localeText: translations,
         localizedDigits,
         format,
@@ -226,7 +225,7 @@ const useFieldState = parameters => {
         enableAccessibleFieldDOMStructure,
         isRtl
       });
-      return (0, _useField.mergeDateIntoReferenceDate)(utils, date, sections, referenceDate, false);
+      return (0, _useField.mergeDateIntoReferenceDate)(adapter, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
     publishValue(newValue);
@@ -253,15 +252,15 @@ const useFieldState = parameters => {
      */
     const newSections = setSectionValue(activeSectionIndex, newSectionValue);
     const newActiveDateSections = fieldValueManager.getDateSectionsFromValue(newSections, section);
-    const newActiveDate = (0, _useField.getDateFromDateSections)(utils, newActiveDateSections, localizedDigits);
+    const newActiveDate = (0, _useField.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 = (0, _useField.mergeDateIntoReferenceDate)(utils, newActiveDate, newActiveDateSections, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
+    if (adapter.isValid(newActiveDate)) {
+      const mergedDate = (0, _useField.mergeDateIntoReferenceDate)(adapter, newActiveDate, newActiveDateSections, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
       if (activeDate == null) {
         cleanActiveDateSectionsIfValueNullTimeout.start(0, () => {
           if (valueRef.current === value) {
@@ -279,7 +278,7 @@ 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));
     }
@@ -314,7 +313,7 @@ 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);
@@ -325,20 +324,20 @@ 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);
     (0, _useField.validateSections)(sections, valueType);
     setState(prevState => (0, _extends2.default)({}, prevState, {
       lastSectionsDependencies: {
         format,
         isRtl,
-        locale: utils.locale
+        locale: adapter.locale
       },
       sections,
       tempValueStrAndroid: null,

package/internals/hooks/useField/useFieldV6TextField.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/internals/hooks/useField/useFieldV7TextField.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/internals/hooks/useNullableFieldPrivateContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -11,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _warning = require("@mui/x-internals/warning");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useControlledValue = require("../../useControlledValue");
-var _useUtils = require("../../useUtils");
+var _usePickerAdapter = require("../../../../hooks/usePickerAdapter");
 var _validation = require("../../../../validation");
 function useValueAndOpenStates(parameters) {
   const {
@@ -40,7 +41,7 @@ function useValueAndOpenStates(parameters) {
   const {
     current: isOpenControlled
   } = React.useRef(openProp !== undefined);
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   if (process.env.NODE_ENV !== 'production') {
     if (props.renderInput != null) {
       (0, _warning.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).']);
@@ -121,13 +122,13 @@ 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 => (0, _extends2.default)({}, 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;
@@ -187,7 +188,7 @@ 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/internals/hooks/usePicker/usePicker.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -13,7 +14,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedE
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
-var _useUtils = require("../useUtils");
+var _usePickerAdapter = require("../../../hooks/usePickerAdapter");
 var _useReduceAnimations = require("../useReduceAnimations");
 var _timeUtils = require("../../utils/time-utils");
 var _useViews = require("../useViews");
@@ -70,8 +71,7 @@ const usePicker = ({
    * TODO: Improve how we generate the aria-label and aria-labelledby attributes.
    */
   const labelId = (0, _useId.default)();
-  const utils = (0, _useUtils.useUtils)();
-  const adapter = (0, _useUtils.useLocalizationContext)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   const reduceAnimations = (0, _useReduceAnimations.useReduceAnimations)(reduceAnimationsProp);
   const orientation = (0, _useOrientation.useOrientation)(views, orientationProp);
   const {
@@ -119,7 +119,7 @@ const usePicker = ({
     getStepNavigation
   });
   const clearValue = (0, _useEventCallback.default)(() => setValue(valueManager.emptyValue));
-  const setValueToToday = (0, _useEventCallback.default)(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
+  const setValueToToday = (0, _useEventCallback.default)(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType)));
   const acceptValueChanges = (0, _useEventCallback.default)(() => setValue(value));
   const cancelValueChanges = (0, _useEventCallback.default)(() => setValue(state.lastCommittedValue, {
     skipPublicationIfPristine: true
@@ -189,13 +189,13 @@ 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/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/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/internals/hooks/useUtils.js

@@ -1,38 +1,19 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useUtils = exports.useNow = exports.useLocalizationContext = exports.useDefaultDates = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.useNow = exports.useDefaultDates = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _LocalizationProvider = require("../../LocalizationProvider/LocalizationProvider");
-var _enUS = require("../../locales/enUS");
-const useLocalizationContext = () => {
-  const localization = React.useContext(_LocalizationProvider.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(() => (0, _extends2.default)({}, _enUS.DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
-  return React.useMemo(() => (0, _extends2.default)({}, localization, {
-    localeText
-  }), [localization, localeText]);
-};
-exports.useLocalizationContext = useLocalizationContext;
-const useUtils = () => useLocalizationContext().utils;
-exports.useUtils = useUtils;
-const useDefaultDates = () => useLocalizationContext().defaultDates;
+var _usePickerAdapter = require("../../hooks/usePickerAdapter");
+const useDefaultDates = () => (0, _usePickerAdapter.useLocalizationContext)().defaultDates;
 exports.useDefaultDates = useDefaultDates;
 const useNow = timezone => {
-  const utils = useUtils();
+  const adapter = (0, _usePickerAdapter.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/internals/hooks/useViews.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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

@@ -354,7 +354,7 @@ Object.defineProperty(exports, "useFieldTextFieldProps", {
 Object.defineProperty(exports, "useLocalizationContext", {
   enumerable: true,
   get: function () {
-    return _useUtils.useLocalizationContext;
+    return _usePickerAdapter.useLocalizationContext;
   }
 });
 Object.defineProperty(exports, "useNextMonthDisabled", {
@@ -423,12 +423,6 @@ Object.defineProperty(exports, "useToolbarOwnerState", {
     return _useToolbarOwnerState.useToolbarOwnerState;
   }
 });
-Object.defineProperty(exports, "useUtils", {
-  enumerable: true,
-  get: function () {
-    return _useUtils.useUtils;
-  }
-});
 Object.defineProperty(exports, "useViews", {
   enumerable: true,
   get: function () {
@@ -459,6 +453,7 @@ var _usePickerPrivateContext = require("./hooks/usePickerPrivateContext");
 var _useStaticPicker = require("./hooks/useStaticPicker");
 var _useToolbarOwnerState = require("./hooks/useToolbarOwnerState");
 var _useUtils = require("./hooks/useUtils");
+var _usePickerAdapter = require("../hooks/usePickerAdapter");
 var _useViews = require("./hooks/useViews");
 var _dateHelpersHooks = require("./hooks/date-helpers-hooks");
 var _createStepNavigation = require("./utils/createStepNavigation");