@mui/x-date-pickers 8.5.2 → 8.6.0

package/esm/TimeClock/TimeClock.js

@@ -9,8 +9,8 @@ import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
-import { useUtils, useNow } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.js";
+import { useNow } from "../internals/hooks/useUtils.js";
 import { PickersArrowSwitcher } from "../internals/components/PickersArrowSwitcher/index.js";
 import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from "../internals/utils/time-utils.js";
 import { useViews } from "../internals/hooks/useViews.js";
@@ -60,13 +60,13 @@ const TIME_CLOCK_DEFAULT_VIEWS = ['hours', 'minutes'];
  * - [TimeClock API](https://mui.com/x/api/date-pickers/time-clock/)
  */
 export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTimeClock'
   });
   const {
-      ampm = utils.is12HourCycleInCurrentLocale(),
+      ampm = adapter.is12HourCycleInCurrentLocale(),
       ampmInClock = false,
       autoFocus,
       slots,
@@ -112,7 +112,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
   const valueOrReferenceDate = useClockReferenceDate({
     value,
     referenceDate: referenceDateProp,
-    utils,
+    adapter,
     props,
     timezone
   });
@@ -142,7 +142,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     handleMeridiemChange
   } = useMeridiemMode(valueOrReferenceDate, ampm, setValueAndGoToNextView);
   const isTimeDisabled = React.useCallback((rawValue, viewType) => {
-    const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils);
+    const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, adapter);
     const shouldCheckPastEnd = viewType === 'hours' || viewType === 'minutes' && views.includes('seconds');
     const containsValidTime = ({
       start,
@@ -169,11 +169,11 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       if (shouldDisableTime) {
         switch (viewType) {
           case 'hours':
-            return !shouldDisableTime(utils.setHours(valueOrReferenceDate, timeValue), 'hours');
+            return !shouldDisableTime(adapter.setHours(valueOrReferenceDate, timeValue), 'hours');
           case 'minutes':
-            return !shouldDisableTime(utils.setMinutes(valueOrReferenceDate, timeValue), 'minutes');
+            return !shouldDisableTime(adapter.setMinutes(valueOrReferenceDate, timeValue), 'minutes');
           case 'seconds':
-            return !shouldDisableTime(utils.setSeconds(valueOrReferenceDate, timeValue), 'seconds');
+            return !shouldDisableTime(adapter.setSeconds(valueOrReferenceDate, timeValue), 'seconds');
           default:
             return false;
         }
@@ -184,12 +184,12 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       case 'hours':
         {
           const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
-          const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
-          if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
+          const dateWithNewHours = adapter.setHours(valueOrReferenceDate, valueWithMeridiem);
+          if (adapter.getHours(dateWithNewHours) !== valueWithMeridiem) {
             return true;
           }
-          const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
-          const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
+          const start = adapter.setSeconds(adapter.setMinutes(dateWithNewHours, 0), 0);
+          const end = adapter.setSeconds(adapter.setMinutes(dateWithNewHours, 59), 59);
           return !containsValidTime({
             start,
             end
@@ -197,9 +197,9 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       case 'minutes':
         {
-          const dateWithNewMinutes = utils.setMinutes(valueOrReferenceDate, rawValue);
-          const start = utils.setSeconds(dateWithNewMinutes, 0);
-          const end = utils.setSeconds(dateWithNewMinutes, 59);
+          const dateWithNewMinutes = adapter.setMinutes(valueOrReferenceDate, rawValue);
+          const start = adapter.setSeconds(dateWithNewMinutes, 0);
+          const end = adapter.setSeconds(dateWithNewMinutes, 59);
           return !containsValidTime({
             start,
             end
@@ -207,7 +207,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       case 'seconds':
         {
-          const dateWithNewSeconds = utils.setSeconds(valueOrReferenceDate, rawValue);
+          const dateWithNewSeconds = adapter.setSeconds(valueOrReferenceDate, rawValue);
           const start = dateWithNewSeconds;
           const end = dateWithNewSeconds;
           return !containsValidTime({
@@ -218,16 +218,16 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       default:
         throw new Error('not supported');
     }
-  }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
+  }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, adapter, disableFuture, disablePast, now, views]);
   const viewProps = React.useMemo(() => {
     switch (view) {
       case 'hours':
         {
           const handleHoursChange = (hourValue, isFinish) => {
             const valueWithMeridiem = convertValueToMeridiem(hourValue, meridiemMode, ampm);
-            setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
+            setValueAndGoToNextView(adapter.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
           };
-          const viewValue = utils.getHours(valueOrReferenceDate);
+          const viewValue = adapter.getHours(valueOrReferenceDate);
           let viewRange;
           if (ampm) {
             if (viewValue > 12) {
@@ -243,7 +243,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
             viewValue,
             children: getHourNumbers({
               value,
-              utils,
+              adapter,
               ampm,
               onChange: handleHoursChange,
               getClockNumberText: translations.hoursClockNumberText,
@@ -255,15 +255,15 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       case 'minutes':
         {
-          const minutesValue = utils.getMinutes(valueOrReferenceDate);
+          const minutesValue = adapter.getMinutes(valueOrReferenceDate);
           const handleMinutesChange = (minuteValue, isFinish) => {
-            setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minuteValue), isFinish, 'minutes');
+            setValueAndGoToNextView(adapter.setMinutes(valueOrReferenceDate, minuteValue), isFinish, 'minutes');
           };
           return {
             viewValue: minutesValue,
             onChange: handleMinutesChange,
             children: getMinutesNumbers({
-              utils,
+              adapter,
               value: minutesValue,
               onChange: handleMinutesChange,
               getClockNumberText: translations.minutesClockNumberText,
@@ -275,15 +275,15 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         }
       case 'seconds':
         {
-          const secondsValue = utils.getSeconds(valueOrReferenceDate);
+          const secondsValue = adapter.getSeconds(valueOrReferenceDate);
           const handleSecondsChange = (secondValue, isFinish) => {
-            setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, secondValue), isFinish, 'seconds');
+            setValueAndGoToNextView(adapter.setSeconds(valueOrReferenceDate, secondValue), isFinish, 'seconds');
           };
           return {
             viewValue: secondsValue,
             onChange: handleSecondsChange,
             children: getMinutesNumbers({
-              utils,
+              adapter,
               value: secondsValue,
               onChange: handleSecondsChange,
               getClockNumberText: translations.secondsClockNumberText,
@@ -296,7 +296,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       default:
         throw new Error('You must provide the type for ClockView');
     }
-  }, [view, utils, value, ampm, translations.hoursClockNumberText, translations.minutesClockNumberText, translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
+  }, [view, adapter, value, ampm, translations.hoursClockNumberText, translations.minutesClockNumberText, translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
   const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsxs(TimeClockRoot, _extends({
     ref: ref,
@@ -338,7 +338,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**

package/esm/TimeField/TimeField.js

@@ -51,7 +51,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**

package/esm/TimePicker/TimePicker.js

@@ -53,7 +53,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**

package/esm/TimePicker/TimePickerToolbar.js

@@ -12,12 +12,10 @@ import { PickersToolbarText } from "../internals/components/PickersToolbarText.j
 import { PickersToolbarButton } from "../internals/components/PickersToolbarButton.js";
 import { PickersToolbar } from "../internals/components/PickersToolbar.js";
 import { arrayIncludes } from "../internals/utils/utils.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { usePickerAdapter, usePickerContext, usePickerTranslations } from "../hooks/index.js";
 import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from "./timePickerToolbarClasses.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
-import { usePickerContext } from "../hooks/index.js";
 import { useToolbarOwnerState } from "../internals/hooks/useToolbarOwnerState.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = (classes, ownerState) => {
@@ -124,7 +122,7 @@ function TimePickerToolbar(inProps) {
       classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
   const classes = useUtilityClasses(classesProp, ownerState);
@@ -145,10 +143,10 @@ function TimePickerToolbar(inProps) {
     changeImportance: 'set'
   }));
   const formatSection = format => {
-    if (!utils.isValid(value)) {
+    if (!adapter.isValid(value)) {
       return '--';
     }
-    return utils.format(value, format);
+    return adapter.format(value, format);
   };
   const separator = /*#__PURE__*/_jsx(TimePickerToolbarSeparator, {
     tabIndex: -1,
@@ -192,7 +190,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'am',
         typographyClassName: classes.ampmLabel,
-        value: formatMeridiem(utils, 'am'),
+        value: formatMeridiem(adapter, 'am'),
         onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
         disabled: disabled
       }), /*#__PURE__*/_jsx(PickersToolbarButton, {
@@ -200,7 +198,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'pm',
         typographyClassName: classes.ampmLabel,
-        value: formatMeridiem(utils, 'pm'),
+        value: formatMeridiem(adapter, 'pm'),
         onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
         disabled: disabled
       })]

package/esm/TimePicker/shared.js

@@ -1,18 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useUtils } from "../internals/hooks/useUtils.js";
 import { TimePickerToolbar } from "./TimePickerToolbar.js";
 import { applyDefaultViewProps } from "../internals/utils/views.js";
 import { useApplyDefaultValuesToTimeValidationProps } from "../managers/useTimeManager.js";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.js";
 export function useTimePickerDefaultizedProps(props, name) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const themeProps = useThemeProps({
     props,
     name
   });
   const validationProps = useApplyDefaultValuesToTimeValidationProps(themeProps);
-  const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
+  const ampm = themeProps.ampm ?? adapter.is12HourCycleInCurrentLocale();
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;

package/esm/YearCalendar/YearCalendar.js

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

package/esm/hooks/index.d.ts

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

package/esm/hooks/index.js

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

package/esm/hooks/useParsedFormat.js

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

package/esm/hooks/usePickerAdapter.d.ts

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

package/esm/hooks/usePickerAdapter.js

@@ -0,0 +1,20 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DEFAULT_LOCALE } from "../locales/enUS.js";
+import { PickerAdapterContext } from "../LocalizationProvider/LocalizationProvider.js";
+export const useLocalizationContext = () => {
+  const localization = React.useContext(PickerAdapterContext);
+  if (localization === null) {
+    throw new Error(['MUI X: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
+  }
+  if (localization.adapter === null) {
+    throw new Error(['MUI X: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
+  }
+  const localeText = React.useMemo(() => _extends({}, DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
+  return React.useMemo(() => _extends({}, localization, {
+    localeText
+  }), [localization, localeText]);
+};
+export const usePickerAdapter = () => useLocalizationContext().adapter;

package/esm/hooks/usePickerTranslations.js

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

package/esm/index.js

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

package/esm/internals/components/pickersToolbarClasses.d.ts

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

package/esm/internals/demo/DemoContainer.d.ts

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

package/esm/internals/demo/DemoContainer.js

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

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

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

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

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

package/esm/internals/hooks/useClockReferenceDate.js

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