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

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,
   /**
@@ -313,7 +313,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * 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: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -1,22 +1,23 @@
 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';
+const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className", "referenceDate"];
+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 { calculateRangeChange, resolveReferenceDate } from "../internals/utils/date-range-manager.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
 /**
  * @ignore - internal component.
  */
 function DateTimeRangePickerTimeWrapper(props) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const {
       viewRenderer,
       value,
       onChange,
       defaultValue,
       onViewChange,
-      views
+      views,
+      referenceDate: referenceDateProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -27,6 +28,7 @@ function DateTimeRangePickerTimeWrapper(props) {
   }
   const currentValue = (rangePosition === 'start' ? value?.[0] : value?.[1]) ?? null;
   const currentDefaultValue = (rangePosition === 'start' ? defaultValue?.[0] : defaultValue?.[1]) ?? null;
+  const referenceDate = resolveReferenceDate(referenceDateProp, rangePosition);
   const handleOnChange = (newDate, selectionState, selectedView) => {
     if (!onChange || !value) {
       return;
@@ -35,14 +37,15 @@ 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, {
+    referenceDate,
     views,
     onViewChange,
     value: currentValue,

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',
@@ -278,7 +278,7 @@ DesktopDateRangePicker.propTypes = {
    * 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: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

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";
@@ -23,6 +24,7 @@ import { SingleInputDateTimeRangeField } from "../SingleInputDateTimeRangeField/
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
+import { resolveReferenceDate } from "../internals/utils/date-range-manager.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const STEPS = [{
   views: null,
@@ -55,8 +57,11 @@ const rendererInterceptor = function RendererInterceptor(props) {
     }]
   });
   const isTimeViewActive = isInternalTimeView(popperView);
+  const referenceDate = resolveReferenceDate(rendererProps.referenceDate, rangePosition);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [viewRenderers.day?.(_extends({}, rendererProps, {
+      referenceDate,
+      rangePosition,
       availableRangePositions: [rangePosition],
       view: !isTimeViewActive ? popperView : 'day',
       views: rendererProps.views.filter(isDatePickerView),
@@ -69,6 +74,7 @@ const rendererInterceptor = function RendererInterceptor(props) {
         gridColumn: 2
       }
     }), /*#__PURE__*/_jsx(DateTimeRangePickerTimeWrapper, _extends({}, finalProps, {
+      referenceDate: referenceDate,
       view: isTimeViewActive ? popperView : 'hours',
       views: finalProps.views.filter(isInternalTimeView),
       openTo: isInternalTimeView(openTo) ? openTo : 'hours',
@@ -91,7 +97,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 +115,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 +154,7 @@ DesktopDateTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**
@@ -402,7 +408,7 @@ DesktopDateTimeRangePicker.propTypes = {
    * 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: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/DesktopTimeRangePicker/DesktopTimeRangePicker.js

@@ -6,12 +6,13 @@ const _excluded = ["openTo"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
-import { useUtils, resolveTimeFormat, mergeSx, MULTI_SECTION_CLOCK_SECTION_WIDTH } from '@mui/x-date-pickers/internals';
+import { resolveTimeFormat, mergeSx, MULTI_SECTION_CLOCK_SECTION_WIDTH } from '@mui/x-date-pickers/internals';
 import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '@mui/x-date-pickers/MultiSectionDigitalClock';
 import { digitalClockClasses } from '@mui/x-date-pickers/DigitalClock';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
 import { pickersLayoutClasses } from '@mui/x-date-pickers/PickersLayout';
+import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { useTimeRangePickerDefaultizedProps } from "../TimeRangePicker/shared.js";
 import { SingleInputTimeRangeField } from "../SingleInputTimeRangeField/index.js";
@@ -62,7 +63,7 @@ const rendererInterceptor = function RendererInterceptor(props) {
 };
 if (process.env.NODE_ENV !== "production") rendererInterceptor.displayName = "rendererInterceptor";
 const DesktopTimeRangePicker = /*#__PURE__*/React.forwardRef(function DesktopTimeRangePicker(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
 
   // Props with the default values common to all time range pickers
   const defaultizedProps = useTimeRangePickerDefaultizedProps(inProps, 'MuiDesktopTimeRangePicker');
@@ -79,7 +80,7 @@ const DesktopTimeRangePicker = /*#__PURE__*/React.forwardRef(function DesktopTim
     views,
     viewRenderers,
     ampmInClock: true,
-    format: resolveTimeFormat(utils, defaultizedProps),
+    format: resolveTimeFormat(adapter, defaultizedProps),
     slots: _extends({
       field: SingleInputTimeRangeField
     }, defaultizedProps.slots),
@@ -122,7 +123,7 @@ DesktopTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**
@@ -308,7 +309,7 @@ DesktopTimeRangePicker.propTypes = {
    * 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: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/esm/MobileDateRangePicker/MobileDateRangePicker.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 resolveComponentProps from '@mui/utils/resolveComponentProps';
+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";
  * - [MobileDateRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-range-picker/)
  */
 const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRangePicker(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiMobileDateRangePicker');
@@ -34,7 +34,7 @@ const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateR
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
     // TODO: Replace with resolveDateFormat() once we support month and year views
-    format: defaultizedProps.format ?? utils.formats.keyboardDate,
+    format: defaultizedProps.format ?? adapter.formats.keyboardDate,
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     // force current calendar position, since we only have one calendar
@@ -275,7 +275,7 @@ MobileDateRangePicker.propTypes = {
    * 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: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -6,12 +6,13 @@ const _excluded = ["view", "openTo"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import refType from '@mui/utils/refType';
-import { DIALOG_WIDTH, VIEW_HEIGHT, isInternalTimeView, isDatePickerView, resolveDateTimeFormat, useUtils, TIME_VIEWS } from '@mui/x-date-pickers/internals';
+import { DIALOG_WIDTH, VIEW_HEIGHT, isInternalTimeView, isDatePickerView, resolveDateTimeFormat, TIME_VIEWS } from '@mui/x-date-pickers/internals';
 import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '@mui/x-date-pickers/MultiSectionDigitalClock';
 import { digitalClockClasses } from '@mui/x-date-pickers/DigitalClock';
+import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
 import { useMobileRangePicker } from "../internals/hooks/useMobileRangePicker/index.js";
@@ -104,7 +105,7 @@ const rendererInterceptor = function RendererInterceptor(props) {
  * - [MobileDateTimeRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-range-picker/)
  */
 const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimeRangePicker(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   // Props with the default values common to all date time range pickers
   const defaultizedProps = useDateTimeRangePickerDefaultizedProps(inProps, 'MuiMobileDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
@@ -117,7 +118,7 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
   }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
-    format: resolveDateTimeFormat(utils, defaultizedProps, true),
+    format: resolveDateTimeFormat(adapter, defaultizedProps, true),
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer
@@ -158,7 +159,7 @@ MobileDateTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**
@@ -407,7 +408,7 @@ MobileDateTimeRangePicker.propTypes = {
    * 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: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.

package/esm/MobileTimeRangePicker/MobileTimeRangePicker.js

@@ -3,13 +3,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DIALOG_WIDTH, resolveTimeFormat, useUtils, VIEW_HEIGHT } from '@mui/x-date-pickers/internals';
-import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import refType from '@mui/utils/refType';
+import resolveComponentProps from '@mui/utils/resolveComponentProps';
+import { DIALOG_WIDTH, resolveTimeFormat, VIEW_HEIGHT } from '@mui/x-date-pickers/internals';
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '@mui/x-date-pickers/MultiSectionDigitalClock';
 import { digitalClockClasses } from '@mui/x-date-pickers/DigitalClock';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
 import { extractValidationProps } from '@mui/x-date-pickers/validation';
+import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { useTimeRangePickerDefaultizedProps } from "../TimeRangePicker/shared.js";
 import { SingleInputTimeRangeField } from "../SingleInputTimeRangeField/index.js";
@@ -63,7 +64,7 @@ const rendererInterceptor = function rendererInterceptor(props) {
 };
 if (process.env.NODE_ENV !== "production") rendererInterceptor.displayName = "rendererInterceptor";
 const MobileTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileTimeRangePicker(inProps, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
 
   // Props with the default values common to all time range pickers
   const defaultizedProps = useTimeRangePickerDefaultizedProps(inProps, 'MuiMobileTimeRangePicker');
@@ -77,7 +78,7 @@ const MobileTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileTimeR
   const props = _extends({}, defaultizedProps, {
     ampmInClock: true,
     viewRenderers,
-    format: resolveTimeFormat(utils, defaultizedProps),
+    format: resolveTimeFormat(adapter, defaultizedProps),
     slots: _extends({
       field: SingleInputTimeRangeField
     }, defaultizedProps.slots),
@@ -112,7 +113,7 @@ MobileTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**
@@ -296,7 +297,7 @@ MobileTimeRangePicker.propTypes = {
    * 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: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/esm/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -130,7 +130,7 @@ MultiInputDateRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/esm/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -28,7 +28,7 @@ MultiInputDateTimeRangeField.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**
@@ -163,7 +163,7 @@ MultiInputDateTimeRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/esm/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -29,7 +29,7 @@ MultiInputTimeRangeField.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**
@@ -146,7 +146,7 @@ MultiInputTimeRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * The currently selected sections.
    * This prop accepts four formats:

package/esm/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -8,8 +8,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { PickersArrowSwitcher, useNextMonthDisabled, usePreviousMonthDisabled, useUtils } from '@mui/x-date-pickers/internals';
-import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { PickersArrowSwitcher, useNextMonthDisabled, usePreviousMonthDisabled } from '@mui/x-date-pickers/internals';
+import { usePickerAdapter, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSwitcher)({
   padding: '12px 16px 4px 16px',
@@ -18,7 +18,7 @@ const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSw
   justifyContent: 'space-between'
 });
 const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
-  const utils = useUtils();
+  const adapter = usePickerAdapter();
   const translations = usePickerTranslations();
   const {
       calendars,
@@ -57,8 +57,8 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
       ref: ref
     }));
   }
-  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1));
-  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1));
+  const selectNextMonth = () => onMonthChange(adapter.addMonths(currentMonth, 1));
+  const selectPreviousMonth = () => onMonthChange(adapter.addMonths(currentMonth, -1));
   return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, _extends({}, otherRangeProps, {
     ref: ref,
     onGoToPrevious: selectPreviousMonth,
@@ -72,7 +72,7 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
     slots: slots,
     slotProps: slotProps,
     labelId: labelId,
-    children: utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)
+    children: adapter.formatByString(month, format ?? `${adapter.formats.month} ${adapter.formats.year}`)
   }));
 });
 if (process.env.NODE_ENV !== "production") PickersRangeCalendarHeader.displayName = "PickersRangeCalendarHeader";

package/esm/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -230,7 +230,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/esm/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -52,7 +52,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**
@@ -263,7 +263,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/esm/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -52,7 +52,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: PropTypes.bool,
   /**
@@ -245,7 +245,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/esm/StaticDateRangePicker/StaticDateRangePicker.js

@@ -220,7 +220,7 @@ StaticDateRangePicker.propTypes = {
    * 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: PropTypes.object,
+  referenceDate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.