@mui/x-date-pickers-pro 8.5.3 → 8.6.0

package/esm/DateRangeCalendar/DateRangeCalendar.js

@@ -15,8 +15,9 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
-import { DayCalendar, useReduceAnimations, useCalendarState, useUtils, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValue, useViews, usePickerPrivateContext, areDatesEqual, useApplyDefaultValuesToDateValidationProps } from '@mui/x-date-pickers/internals';
+import { DayCalendar, useReduceAnimations, useCalendarState, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValue, useViews, usePickerPrivateContext, areDatesEqual, useApplyDefaultValuesToDateValidationProps } from '@mui/x-date-pickers/internals';
 import { warnOnce } from '@mui/x-internals/warning';
+import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from "../internals/utils/date-utils.js";
 import { calculateRangeChange, calculateRangePreview } from "../internals/utils/date-range-manager.js";
@@ -29,7 +30,7 @@ import { PickersRangeCalendarHeader } from "../PickersRangeCalendarHeader/index.
 import { useNullablePickerRangePositionContext } from "../internals/hooks/useNullablePickerRangePositionContext.js";
 import { dateRangePickerDay2Classes } from "../DateRangePickerDay2/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc1MDI4NDAwMDAwMA==";
+const releaseInfo = "MTc1MDk3NTIwMDAwMA==";
 const DateRangeCalendarRoot = styled('div', {
   name: 'MuiDateRangeCalendar',
   slot: 'Root'
@@ -187,7 +188,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     focusedView: focusedViewProp,
     onFocusedViewChange
   });
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const id = useId();
   const {
     rangePosition,
@@ -208,7 +209,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       newRange
     } = calculateRangeChange({
       newDate,
-      utils,
+      adapter,
       range: value,
       rangePosition,
       allowRangeFlip,
@@ -219,7 +220,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     if (isNextSectionAvailable) {
       setRangePosition(nextSelection);
     }
-    const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
+    const isFullRangeSelected = rangePosition === 'end' && isRangeValid(adapter, newRange);
     setValueAndGoToNextView(newRange, isFullRangeSelected || !isNextSectionAvailable ? 'finish' : 'partial', view);
   });
   const handleDrop = useEventCallback(newDate => {
@@ -229,12 +230,12 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
 
   // Range going for the start of the start day to the end of the end day.
   // This makes sure that `isWithinRange` works with any time in the start and end day.
-  const valueDayRange = React.useMemo(() => [!utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]), !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])], [value, utils]);
+  const valueDayRange = React.useMemo(() => [!adapter.isValid(value[0]) ? value[0] : adapter.startOfDay(value[0]), !adapter.isValid(value[1]) ? value[1] : adapter.endOfDay(value[1])], [value, adapter]);
   const _useDragRange = useDragRange({
       disableDragEditing: shouldDisableDragEditing,
       onDrop: handleDrop,
       onDatePositionChange: handleDatePositionChange,
-      utils,
+      adapter,
       dateRange: valueDayRange,
       timezone
     }),
@@ -256,14 +257,14 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       return [null, null];
     }
     const newRange = calculateRangeChange({
-      utils,
+      adapter,
       range: valueDayRange,
       newDate: rangeDragDay,
       rangePosition,
       allowRangeFlip: true
     }).newRange;
-    return newRange[0] !== null && newRange[1] !== null ? [utils.startOfDay(newRange[0]), utils.endOfDay(newRange[1])] : newRange;
-  }, [rangePosition, rangeDragDay, utils, valueDayRange]);
+    return newRange[0] !== null && newRange[1] !== null ? [adapter.startOfDay(newRange[0]), adapter.endOfDay(newRange[1])] : newRange;
+  }, [rangePosition, rangeDragDay, adapter, valueDayRange]);
   const wrappedShouldDisableDate = React.useMemo(() => {
     if (!shouldDisableDate) {
       return undefined;
@@ -286,24 +287,24 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     shouldDisableDate: wrappedShouldDisableDate,
     timezone,
     getCurrentMonthFromVisibleDate: (visibleDate, prevMonth) => {
-      const firstVisibleMonth = utils.addMonths(prevMonth, 1 - currentMonthCalendarPosition);
-      const lastVisibleMonth = utils.endOfMonth(utils.addMonths(firstVisibleMonth, calendars - 1));
+      const firstVisibleMonth = adapter.addMonths(prevMonth, 1 - currentMonthCalendarPosition);
+      const lastVisibleMonth = adapter.endOfMonth(adapter.addMonths(firstVisibleMonth, calendars - 1));
 
       // The new focused day is inside the visible calendars,
       // Do not change the current month
-      if (utils.isWithinRange(visibleDate, [firstVisibleMonth, lastVisibleMonth])) {
+      if (adapter.isWithinRange(visibleDate, [firstVisibleMonth, lastVisibleMonth])) {
         return prevMonth;
       }
 
       // The new focused day is after the last visible month,
       // Move the current month so that the new focused day is inside the first visible month
-      if (utils.isAfter(visibleDate, lastVisibleMonth)) {
-        return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - 1));
+      if (adapter.isAfter(visibleDate, lastVisibleMonth)) {
+        return adapter.startOfMonth(adapter.addMonths(visibleDate, currentMonthCalendarPosition - 1));
       }
 
       // The new focused day is before the first visible month,
       // Move the current month so that the new focused day is inside the last visible month
-      return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - calendars));
+      return adapter.startOfMonth(adapter.addMonths(visibleDate, currentMonthCalendarPosition - calendars));
     }
   });
   const CalendarHeader = slots?.calendarHeader ?? PickersRangeCalendarHeader;
@@ -336,7 +337,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
-    if (!utils.isValid(date)) {
+    if (!adapter.isValid(date)) {
       return;
     }
     const prevDate = rangePosition === 'start' ? prevValue.current?.[0] : prevValue.current?.[1];
@@ -344,16 +345,16 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
 
     // The current date did not change, this call comes either from a `rangePosition` change or a change in the other date.
     // In both cases, we don't want to change the visible month(s).
-    if (disableAutoMonthSwitching && prevDate && utils.isEqual(prevDate, date)) {
+    if (disableAutoMonthSwitching && prevDate && adapter.isEqual(prevDate, date)) {
       return;
     }
     const displayingMonthRange = calendars - currentMonthCalendarPosition;
-    const currentMonthNumber = utils.getMonth(calendarState.currentMonth);
-    const requestedMonthNumber = utils.getMonth(date);
-    if (!utils.isSameYear(calendarState.currentMonth, date) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {
+    const currentMonthNumber = adapter.getMonth(calendarState.currentMonth);
+    const requestedMonthNumber = adapter.getMonth(date);
+    if (!adapter.isSameYear(calendarState.currentMonth, date) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {
       const newMonth = rangePosition === 'start' ? date :
       // If need to focus end, scroll to the state when "end" is displaying in the last calendar
-      utils.addMonths(date, -displayingMonthRange);
+      adapter.addMonths(date, -displayingMonthRange);
       setVisibleDate({
         target: newMonth,
         reason: 'controlled-value-change'
@@ -377,7 +378,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     onMouseLeave: () => setRangePreviewDay(null)
   }), []);
   const previewingRange = calculateRangePreview({
-    utils,
+    adapter,
     range: valueDayRange,
     newDate: rangePreviewDay,
     rangePosition
@@ -386,12 +387,12 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     let cleanNewRangePreviewDay;
     if (valueDayRange[0] == null && valueDayRange[1] == null) {
       cleanNewRangePreviewDay = null;
-    } else if (isWithinRange(utils, newRangePreviewDay, valueDayRange)) {
+    } else if (isWithinRange(adapter, newRangePreviewDay, valueDayRange)) {
       cleanNewRangePreviewDay = null;
     } else {
       cleanNewRangePreviewDay = newRangePreviewDay;
     }
-    if (!areDatesEqual(utils, cleanNewRangePreviewDay, rangePreviewDay)) {
+    if (!areDatesEqual(adapter, cleanNewRangePreviewDay, rangePreviewDay)) {
       setRangePreviewDay(cleanNewRangePreviewDay);
     }
   });
@@ -404,8 +405,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         day,
         isDaySelected
       } = dayOwnerState;
-      const isSelectedStartDate = isStartOfRange(utils, day, valueDayRange);
-      const isSelectedEndDate = isEndOfRange(utils, day, valueDayRange);
+      const isSelectedStartDate = isStartOfRange(adapter, day, valueDayRange);
+      const isSelectedEndDate = isEndOfRange(adapter, day, valueDayRange);
       const shouldInitDragging = !shouldDisableDragEditing && valueDayRange[0] && valueDayRange[1];
       const isElementDraggable = shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
       let datePosition;
@@ -414,15 +415,15 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       } else if (isSelectedEndDate) {
         datePosition = 'end';
       }
-      const isStartOfHighlighting = isDragging ? isStartOfRange(utils, day, draggingRange) : isSelectedStartDate;
-      const isEndOfHighlighting = isDragging ? isEndOfRange(utils, day, draggingRange) : isSelectedEndDate;
+      const isStartOfHighlighting = isDragging ? isStartOfRange(adapter, day, draggingRange) : isSelectedStartDate;
+      const isEndOfHighlighting = isDragging ? isEndOfRange(adapter, day, draggingRange) : isSelectedEndDate;
       return _extends({
-        isPreviewing: shouldHavePreview ? isWithinRange(utils, day, previewingRange) : false,
-        isStartOfPreviewing: shouldHavePreview ? isStartOfRange(utils, day, previewingRange) : false,
-        isEndOfPreviewing: shouldHavePreview ? isEndOfRange(utils, day, previewingRange) : false,
-        isHighlighting: isWithinRange(utils, day, isDragging ? draggingRange : valueDayRange),
+        isPreviewing: shouldHavePreview ? isWithinRange(adapter, day, previewingRange) : false,
+        isStartOfPreviewing: shouldHavePreview ? isStartOfRange(adapter, day, previewingRange) : false,
+        isEndOfPreviewing: shouldHavePreview ? isEndOfRange(adapter, day, previewingRange) : false,
+        isHighlighting: isWithinRange(adapter, day, isDragging ? draggingRange : valueDayRange),
         isStartOfHighlighting,
-        isEndOfHighlighting: isDragging ? isEndOfRange(utils, day, draggingRange) : isSelectedEndDate,
+        isEndOfHighlighting: isDragging ? isEndOfRange(adapter, day, draggingRange) : isSelectedEndDate,
         onMouseEnter: shouldHavePreview ? handleDayMouseEnter : undefined,
         // apply selected styling to the dragging start or end day
         isVisuallySelected: isDaySelected || isDragging && (isStartOfHighlighting || isEndOfHighlighting),
@@ -441,11 +442,11 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         warnOnce(['MUI X: The `currentMonthCalendarPosition` prop must be an integer between `1` and the amount of calendars rendered.', 'For example if you have 2 calendars rendered, it should be equal to either 1 or 2.']);
       }
     }
-    const firstMonth = utils.addMonths(calendarState.currentMonth, 1 - currentMonthCalendarPosition);
+    const firstMonth = adapter.addMonths(calendarState.currentMonth, 1 - currentMonthCalendarPosition);
     return Array.from({
       length: calendars
-    }).map((_, index) => utils.addMonths(firstMonth, index));
-  }, [utils, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
+    }).map((_, index) => adapter.addMonths(firstMonth, index));
+  }, [adapter, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
   const hasFocus = focusedView !== null;
   const prevOpenViewRef = React.useRef(view);
   React.useEffect(() => {

package/esm/DateRangeCalendar/useDragRange.d.ts

@@ -4,7 +4,7 @@ import { PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { RangePosition } from "../models/index.js";
 interface UseDragRangeParams {
   disableDragEditing?: boolean;
-  utils: MuiPickersAdapter;
+  adapter: MuiPickersAdapter;
   setRangeDragDay: (value: PickerValidDate | null) => void;
   setIsDragging: (value: boolean) => void;
   isDragging: boolean;
@@ -31,7 +31,7 @@ interface UseDragRangeResponse extends UseDragRangeEvents {
 }
 export declare const useDragRange: ({
   disableDragEditing,
-  utils,
+  adapter,
   onDatePositionChange,
   onDrop,
   dateRange,

package/esm/DateRangeCalendar/useDragRange.js

@@ -4,13 +4,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { isEndOfRange, isStartOfRange } from "../internals/utils/date-utils.js";
-const resolveDateFromTarget = (target, utils, timezone) => {
+const resolveDateFromTarget = (target, adapter, timezone) => {
   const timestampString = target.dataset.timestamp;
   if (!timestampString) {
     return null;
   }
   const timestamp = +timestampString;
-  return utils.date(new Date(timestamp).toISOString(), timezone);
+  return adapter.date(new Date(timestamp).toISOString(), timezone);
 };
 const isSameAsDraggingDate = event => {
   const timestampString = event.target.dataset.timestamp;
@@ -43,7 +43,7 @@ const resolveElementFromTouch = (event, ignoreTouchTarget) => {
   return null;
 };
 const useDragRangeEvents = ({
-  utils,
+  adapter,
   setRangeDragDay,
   setIsDragging,
   isDragging,
@@ -64,12 +64,12 @@ const useDragRangeEvents = ({
       return false;
     }
     const shouldInitDragging = !disableDragEditing && !!dateRange[0] && !!dateRange[1];
-    const isSelectedStartDate = isStartOfRange(utils, day, dateRange);
-    const isSelectedEndDate = isEndOfRange(utils, day, dateRange);
+    const isSelectedStartDate = isStartOfRange(adapter, day, dateRange);
+    const isSelectedEndDate = isEndOfRange(adapter, day, dateRange);
     return shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
   };
   const handleDragStart = useEventCallback(event => {
-    const newDate = resolveDateFromTarget(event.target, utils, timezone);
+    const newDate = resolveDateFromTarget(event.target, adapter, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -93,7 +93,7 @@ const useDragRangeEvents = ({
     if (!target) {
       return;
     }
-    const newDate = resolveDateFromTarget(target, utils, timezone);
+    const newDate = resolveDateFromTarget(target, adapter, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -106,14 +106,14 @@ const useDragRangeEvents = ({
     event.preventDefault();
     event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
-    setRangeDragDay(resolveDateFromTarget(event.target, utils, timezone));
+    setRangeDragDay(resolveDateFromTarget(event.target, adapter, timezone));
   });
   const handleTouchMove = useEventCallback(event => {
     const target = resolveElementFromTouch(event);
     if (!target) {
       return;
     }
-    const newDate = resolveDateFromTarget(target, utils, timezone);
+    const newDate = resolveDateFromTarget(target, adapter, timezone);
     if (newDate) {
       setRangeDragDay(newDate);
     }
@@ -160,7 +160,7 @@ const useDragRangeEvents = ({
 
     // make sure the focused element is the element where touch ended
     target.focus();
-    const newDate = resolveDateFromTarget(target, utils, timezone);
+    const newDate = resolveDateFromTarget(target, adapter, timezone);
     if (newDate) {
       onDrop(newDate);
     }
@@ -187,7 +187,7 @@ const useDragRangeEvents = ({
     if (isSameAsDraggingDate(event)) {
       return;
     }
-    const newDate = resolveDateFromTarget(event.target, utils, timezone);
+    const newDate = resolveDateFromTarget(event.target, adapter, timezone);
     if (newDate) {
       onDrop(newDate);
     }
@@ -206,7 +206,7 @@ const useDragRangeEvents = ({
 };
 export const useDragRange = ({
   disableDragEditing,
-  utils,
+  adapter,
   onDatePositionChange,
   onDrop,
   dateRange,
@@ -215,24 +215,24 @@ export const useDragRange = ({
   const [isDragging, setIsDragging] = React.useState(false);
   const [rangeDragDay, setRangeDragDay] = React.useState(null);
   const handleRangeDragDayChange = useEventCallback(newValue => {
-    if (!utils.isEqual(newValue, rangeDragDay)) {
+    if (!adapter.isEqual(newValue, rangeDragDay)) {
       setRangeDragDay(newValue);
     }
   });
   const draggingDatePosition = React.useMemo(() => {
     const [start, end] = dateRange;
     if (rangeDragDay) {
-      if (start && utils.isBefore(rangeDragDay, start)) {
+      if (start && adapter.isBefore(rangeDragDay, start)) {
         return 'start';
       }
-      if (end && utils.isAfter(rangeDragDay, end)) {
+      if (end && adapter.isAfter(rangeDragDay, end)) {
         return 'end';
       }
     }
     return null;
-  }, [dateRange, rangeDragDay, utils]);
+  }, [dateRange, rangeDragDay, adapter]);
   const dragRangeEvents = useDragRangeEvents({
-    utils,
+    adapter,
     onDatePositionChange,
     onDrop,
     setIsDragging,

package/esm/DateRangePicker/DateRangePickerToolbar.js

@@ -9,8 +9,8 @@ import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { PickersToolbar, PickersToolbarButton, useUtils, useToolbarOwnerState } from '@mui/x-date-pickers/internals';
-import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { PickersToolbar, PickersToolbarButton, useToolbarOwnerState } from '@mui/x-date-pickers/internals';
+import { usePickerAdapter, usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { getDateRangePickerToolbarUtilityClass } from "./dateRangePickerToolbarClasses.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,7 +42,7 @@ const DateRangePickerToolbarContainer = styled('div', {
  * - [DateRangePickerToolbar API](https://mui.com/x/api/date-pickers/date-range-picker-toolbar/)
  */
 const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangePickerToolbar(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiDateRangePickerToolbar'
@@ -65,12 +65,12 @@ const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangeP
   const classes = useUtilityClasses(classesProp);
 
   // This can't be a default value when spreading because it breaks the API generation.
-  const toolbarFormat = toolbarFormatProp ?? utils.formats.shortDate;
+  const toolbarFormat = toolbarFormatProp ?? adapter.formats.shortDate;
   const formatDate = (date, fallback) => {
-    if (!utils.isValid(date)) {
+    if (!adapter.isValid(date)) {
       return fallback;
     }
-    return utils.formatByString(date, toolbarFormat);
+    return adapter.formatByString(date, toolbarFormat);
   };
   return /*#__PURE__*/_jsx(DateRangePickerToolbarRoot, _extends({}, other, {
     toolbarTitle: translations.dateRangePickerToolbarTitle,

package/esm/DateRangePickerDay/DateRangePickerDay.js

@@ -9,8 +9,9 @@ import clsx from 'clsx';
 import { useLicenseVerifier } from '@mui/x-license';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { useUtils, usePickerDayOwnerState } from '@mui/x-date-pickers/internals';
+import { usePickerDayOwnerState } from '@mui/x-date-pickers/internals';
 import { PickersDay } from '@mui/x-date-pickers/PickersDay';
+import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { getDateRangePickerDayUtilityClass, dateRangePickerDayClasses } from "./dateRangePickerDayClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = (classes, ownerState) => {
@@ -227,8 +228,8 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
       showDaysOutsideCurrentMonth
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  useLicenseVerifier('x-date-pickers-pro', "MTc1MDI4NDAwMDAwMA==");
-  const utils = useUtils();
+  useLicenseVerifier('x-date-pickers-pro', "MTc1MDk3NTIwMDAwMA==");
+  const adapter = usePickerAdapter();
   const shouldRenderHighlight = isHighlighting && !outsideCurrentMonth;
   const shouldRenderPreview = isPreviewing && !outsideCurrentMonth;
   const pickersDayOwnerState = usePickerDayOwnerState({
@@ -252,8 +253,8 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
     isDayPreviewEnd: isEndOfPreviewing,
     isDayInsidePreview: isPreviewing && !isStartOfPreviewing && !isEndOfPreviewing,
     // Properties specific to the MUI implementation (some might be removed in the next major)
-    isDayStartOfMonth: utils.isSameDay(day, utils.startOfMonth(day)),
-    isDayEndOfMonth: utils.isSameDay(day, utils.endOfMonth(day)),
+    isDayStartOfMonth: adapter.isSameDay(day, adapter.startOfMonth(day)),
+    isDayEndOfMonth: adapter.isSameDay(day, adapter.endOfMonth(day)),
     isDayFirstVisibleCell: isFirstVisibleCell,
     isDayLastVisibleCell: isLastVisibleCell,
     isDayFillerCell: outsideCurrentMonth && !showDaysOutsideCurrentMonth

package/esm/DateRangePickerDay2/DateRangePickerDay2.js

@@ -9,7 +9,8 @@ import ButtonBase from '@mui/material/ButtonBase';
 import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { usePickerDayOwnerState, useUtils } from '@mui/x-date-pickers/internals';
+import { usePickerDayOwnerState } from '@mui/x-date-pickers/internals';
+import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { dateRangePickerDay2Classes, getDateRangePickerDay2UtilityClass } from "./dateRangePickerDay2Classes.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = (ownerState, classes) => {
@@ -302,7 +303,7 @@ const DateRangePickerDay2Raw = /*#__PURE__*/React.forwardRef(function DateRangeP
     props: inProps,
     name: 'MuiDateRangePickerDay2'
   });
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const {
       autoFocus = false,
       className,
@@ -355,8 +356,8 @@ const DateRangePickerDay2Raw = /*#__PURE__*/React.forwardRef(function DateRangeP
     isDayPreviewEnd: isEndOfPreviewing,
     isDayInsidePreview: isPreviewing && !isStartOfPreviewing && !isEndOfPreviewing,
     // Properties specific to the MUI implementation (some might be removed in the next major)
-    isDayStartOfMonth: utils.isSameDay(day, utils.startOfMonth(day)),
-    isDayEndOfMonth: utils.isSameDay(day, utils.endOfMonth(day)),
+    isDayStartOfMonth: adapter.isSameDay(day, adapter.startOfMonth(day)),
+    isDayEndOfMonth: adapter.isSameDay(day, adapter.endOfMonth(day)),
     isDayFirstVisibleCell: isFirstVisibleCell,
     isDayLastVisibleCell: isLastVisibleCell,
     isDayFillerCell: outsideCurrentMonth && !showDaysOutsideCurrentMonth,
@@ -412,7 +413,7 @@ const DateRangePickerDay2Raw = /*#__PURE__*/React.forwardRef(function DateRangeP
   }, other, {
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    children: children ?? (ownerState.isDayFillerCell ? null : utils.format(day, 'dayOfMonth'))
+    children: children ?? (ownerState.isDayFillerCell ? null : adapter.format(day, 'dayOfMonth'))
   }));
 });
 if (process.env.NODE_ENV !== "production") DateRangePickerDay2Raw.displayName = "DateRangePickerDay2Raw";

package/esm/DateTimeRangePicker/DateTimeRangePicker.js

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

package/esm/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
-import { useUtils } from '@mui/x-date-pickers/internals';
+import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { isRangeValid } from "../internals/utils/date-utils.js";
 import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
@@ -9,7 +9,7 @@ import { usePickerRangePositionContext } from "../hooks/index.js";
  * @ignore - internal component.
  */
 function DateTimeRangePickerTimeWrapper(props) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const {
       viewRenderer,
       value,
@@ -35,11 +35,11 @@ function DateTimeRangePickerTimeWrapper(props) {
       newRange
     } = calculateRangeChange({
       newDate,
-      utils,
+      adapter,
       range: value,
       rangePosition
     });
-    const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
+    const isFullRangeSelected = rangePosition === 'end' && isRangeValid(adapter, newRange);
     onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
   };
   return viewRenderer(_extends({}, other, {

package/esm/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { useUtils, useToolbarOwnerState, DateTimePickerToolbarOverrideContext } from '@mui/x-date-pickers/internals';
-import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { useToolbarOwnerState, DateTimePickerToolbarOverrideContext } from '@mui/x-date-pickers/internals';
+import { usePickerAdapter, usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
 import { getDateTimeRangePickerToolbarUtilityClass } from "./dateTimeRangePickerToolbarClasses.js";
 import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
@@ -46,7 +46,7 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     props: inProps,
     name: 'MuiDateTimeRangePickerToolbar'
   });
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const {
       className,
       classes: classesProp,
@@ -89,7 +89,7 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
       newRange
     } = calculateRangeChange({
       newDate,
-      utils,
+      adapter,
       range: value,
       rangePosition,
       allowRangeFlip: true
@@ -98,7 +98,7 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     setValue(newRange, {
       changeImportance: 'set'
     });
-  }, [setValue, setRangePosition, value, rangePosition, utils]);
+  }, [setValue, setRangePosition, value, rangePosition, adapter]);
   const startOverrides = React.useMemo(() => {
     const handleStartRangeViewChange = newView => {
       if (newView === 'year' || newView === 'month') {

package/esm/DateTimeRangePicker/shared.js

@@ -1,16 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useThemeProps } from '@mui/material/styles';
-import { useUtils, applyDefaultViewProps, resolveTimeViewsResponse, useApplyDefaultValuesToDateTimeValidationProps } from '@mui/x-date-pickers/internals';
+import { applyDefaultViewProps, resolveTimeViewsResponse, useApplyDefaultValuesToDateTimeValidationProps } from '@mui/x-date-pickers/internals';
+import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { DateTimeRangePickerToolbar } from "./DateTimeRangePickerToolbar.js";
 import { DateTimeRangePickerTabs } from "./DateTimeRangePickerTabs.js";
 export function useDateTimeRangePickerDefaultizedProps(props, name) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const themeProps = useThemeProps({
     props,
     name
   });
   const validationProps = useApplyDefaultValuesToDateTimeValidationProps(themeProps);
-  const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
+  const ampm = themeProps.ampm ?? adapter.is12HourCycleInCurrentLocale();
   const {
     openTo,
     views: defaultViews

package/esm/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -3,10 +3,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useUtils } from '@mui/x-date-pickers/internals';
-import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import refType from '@mui/utils/refType';
+import { extractValidationProps } from '@mui/x-date-pickers/validation';
+import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { useDateRangePickerDefaultizedProps } from "../DateRangePicker/shared.js";
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
@@ -24,7 +24,7 @@ import { validateDateRange } from "../validation/index.js";
  * - [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/)
  */
 const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateRangePicker(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiDesktopDateRangePicker');
@@ -35,7 +35,7 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
     closeOnSelect: defaultizedProps.closeOnSelect ?? true,
     viewRenderers,
     // TODO: Replace with resolveDateFormat() once we support month and year views
-    format: defaultizedProps.format ?? utils.formats.keyboardDate,
+    format: defaultizedProps.format ?? adapter.formats.keyboardDate,
     calendars: defaultizedProps.calendars ?? 2,
     views: ['day'],
     openTo: 'day',

package/esm/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -5,15 +5,16 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["openTo"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { isDatePickerView, isInternalTimeView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
-import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import refType from '@mui/utils/refType';
+import Divider from '@mui/material/Divider';
+import { isDatePickerView, isInternalTimeView, resolveDateTimeFormat } from '@mui/x-date-pickers/internals';
+import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '@mui/x-date-pickers/MultiSectionDigitalClock';
-import Divider from '@mui/material/Divider';
 import { digitalClockClasses } from '@mui/x-date-pickers/DigitalClock';
 import { DesktopDateTimePickerLayout } from '@mui/x-date-pickers/DesktopDateTimePicker';
+import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
 import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
@@ -91,7 +92,7 @@ if (process.env.NODE_ENV !== "production") rendererInterceptor.displayName = "re
  * - [DesktopDateTimeRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-range-picker/)
  */
 const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimeRangePicker(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   // Props with the default values common to all date time range pickers
   const defaultizedProps = useDateTimeRangePickerDefaultizedProps(inProps, 'MuiDesktopDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
@@ -109,7 +110,7 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   const props = _extends({}, defaultizedProps, {
     views,
     viewRenderers,
-    format: resolveDateTimeFormat(utils, defaultizedProps, true),
+    format: resolveDateTimeFormat(adapter, defaultizedProps, true),
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
     calendars: defaultizedProps.calendars ?? 1,
@@ -148,7 +149,7 @@ DesktopDateTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**