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

package/DateTimeRangePicker/shared.js

@@ -8,16 +8,17 @@ exports.useDateTimeRangePickerDefaultizedProps = useDateTimeRangePickerDefaultiz
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-date-pickers/internals");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _DateTimeRangePickerToolbar = require("./DateTimeRangePickerToolbar");
 var _DateTimeRangePickerTabs = require("./DateTimeRangePickerTabs");
 function useDateTimeRangePickerDefaultizedProps(props, name) {
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
   const validationProps = (0, _internals.useApplyDefaultValuesToDateTimeValidationProps)(themeProps);
-  const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
+  const ampm = themeProps.ampm ?? adapter.is12HourCycleInCurrentLocale();
   const {
     openTo,
     views: defaultViews

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -10,10 +10,10 @@ exports.DesktopDateRangePicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _internals = require("@mui/x-date-pickers/internals");
-var _validation = require("@mui/x-date-pickers/validation");
 var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _validation = require("@mui/x-date-pickers/validation");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _shared = require("../DateRangePicker/shared");
 var _dateRangeViewRenderers = require("../dateRangeViewRenderers");
@@ -31,7 +31,7 @@ var _validation2 = require("../validation");
  * - [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/)
  */
 const DesktopDateRangePicker = exports.DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateRangePicker(inProps, ref) {
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = (0, _shared.useDateRangePickerDefaultizedProps)(inProps, 'MuiDesktopDateRangePicker');
@@ -42,7 +42,7 @@ const DesktopDateRangePicker = exports.DesktopDateRangePicker = /*#__PURE__*/Rea
     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/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -11,15 +11,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _internals = require("@mui/x-date-pickers/internals");
-var _validation = require("@mui/x-date-pickers/validation");
 var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _internals = require("@mui/x-date-pickers/internals");
+var _validation = require("@mui/x-date-pickers/validation");
 var _timeViewRenderers = require("@mui/x-date-pickers/timeViewRenderers");
 var _MultiSectionDigitalClock = require("@mui/x-date-pickers/MultiSectionDigitalClock");
-var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _DigitalClock = require("@mui/x-date-pickers/DigitalClock");
 var _DesktopDateTimePicker = require("@mui/x-date-pickers/DesktopDateTimePicker");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _dateRangeViewRenderers = require("../dateRangeViewRenderers");
 var _useDesktopRangePicker = require("../internals/hooks/useDesktopRangePicker");
@@ -28,7 +29,7 @@ var _shared = require("../DateTimeRangePicker/shared");
 var _SingleInputDateTimeRangeField = require("../SingleInputDateTimeRangeField");
 var _DateTimeRangePickerTimeWrapper = require("../DateTimeRangePicker/DateTimeRangePickerTimeWrapper");
 var _dimensions = require("../internals/constants/dimensions");
-var _hooks = require("../hooks");
+var _hooks2 = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["openTo"];
 const STEPS = [{
@@ -50,7 +51,7 @@ const rendererInterceptor = function RendererInterceptor(props) {
     otherProps = (0, _objectWithoutPropertiesLoose2.default)(rendererProps, _excluded);
   const {
     rangePosition
-  } = (0, _hooks.usePickerRangePositionContext)();
+  } = (0, _hooks2.usePickerRangePositionContext)();
   const finalProps = (0, _extends2.default)({}, otherProps, {
     sx: [{
       [`&.${_MultiSectionDigitalClock.multiSectionDigitalClockClasses.root}`]: {
@@ -98,7 +99,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 = exports.DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimeRangePicker(inProps, ref) {
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   // Props with the default values common to all date time range pickers
   const defaultizedProps = (0, _shared.useDateTimeRangePickerDefaultizedProps)(inProps, 'MuiDesktopDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? _timeViewRenderers.renderDigitalClockTimeView : _timeViewRenderers.renderMultiSectionDigitalClockTimeView;
@@ -116,7 +117,7 @@ const DesktopDateTimeRangePicker = exports.DesktopDateTimeRangePicker = /*#__PUR
   const props = (0, _extends2.default)({}, defaultizedProps, {
     views,
     viewRenderers,
-    format: (0, _internals.resolveDateTimeFormat)(utils, defaultizedProps, true),
+    format: (0, _internals.resolveDateTimeFormat)(adapter, defaultizedProps, true),
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
     calendars: defaultizedProps.calendars ?? 1,
@@ -155,7 +156,7 @@ DesktopDateTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**

package/DesktopTimeRangePicker/DesktopTimeRangePicker.js

@@ -18,6 +18,7 @@ var _MultiSectionDigitalClock = require("@mui/x-date-pickers/MultiSectionDigital
 var _DigitalClock = require("@mui/x-date-pickers/DigitalClock");
 var _timeViewRenderers = require("@mui/x-date-pickers/timeViewRenderers");
 var _PickersLayout = require("@mui/x-date-pickers/PickersLayout");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _shared = require("../TimeRangePicker/shared");
 var _SingleInputTimeRangeField = require("../SingleInputTimeRangeField");
@@ -69,7 +70,7 @@ const rendererInterceptor = function RendererInterceptor(props) {
 };
 if (process.env.NODE_ENV !== "production") rendererInterceptor.displayName = "rendererInterceptor";
 const DesktopTimeRangePicker = exports.DesktopTimeRangePicker = /*#__PURE__*/React.forwardRef(function DesktopTimeRangePicker(inProps, ref) {
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
 
   // Props with the default values common to all time range pickers
   const defaultizedProps = (0, _shared.useTimeRangePickerDefaultizedProps)(inProps, 'MuiDesktopTimeRangePicker');
@@ -86,7 +87,7 @@ const DesktopTimeRangePicker = exports.DesktopTimeRangePicker = /*#__PURE__*/Rea
     views,
     viewRenderers,
     ampmInClock: true,
-    format: (0, _internals.resolveTimeFormat)(utils, defaultizedProps),
+    format: (0, _internals.resolveTimeFormat)(adapter, defaultizedProps),
     slots: (0, _extends2.default)({
       field: _SingleInputTimeRangeField.SingleInputTimeRangeField
     }, defaultizedProps.slots),
@@ -129,7 +130,7 @@ DesktopTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -10,10 +10,10 @@ exports.MobileDateRangePicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _internals = require("@mui/x-date-pickers/internals");
-var _validation = require("@mui/x-date-pickers/validation");
-var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
+var _validation = require("@mui/x-date-pickers/validation");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _shared = require("../DateRangePicker/shared");
 var _dateRangeViewRenderers = require("../dateRangeViewRenderers");
@@ -31,7 +31,7 @@ var _validation2 = require("../validation");
  * - [MobileDateRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-range-picker/)
  */
 const MobileDateRangePicker = exports.MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRangePicker(inProps, ref) {
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = (0, _shared.useDateRangePickerDefaultizedProps)(inProps, 'MuiMobileDateRangePicker');
@@ -41,7 +41,7 @@ const MobileDateRangePicker = exports.MobileDateRangePicker = /*#__PURE__*/React
   const props = (0, _extends2.default)({}, 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

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -18,6 +18,7 @@ var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveC
 var _timeViewRenderers = require("@mui/x-date-pickers/timeViewRenderers");
 var _MultiSectionDigitalClock = require("@mui/x-date-pickers/MultiSectionDigitalClock");
 var _DigitalClock = require("@mui/x-date-pickers/DigitalClock");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _dateRangeViewRenderers = require("../dateRangeViewRenderers");
 var _useMobileRangePicker = require("../internals/hooks/useMobileRangePicker");
@@ -26,7 +27,7 @@ var _shared = require("../DateTimeRangePicker/shared");
 var _SingleInputDateTimeRangeField = require("../SingleInputDateTimeRangeField");
 var _DateTimeRangePickerTimeWrapper = require("../DateTimeRangePicker/DateTimeRangePickerTimeWrapper");
 var _dimensions = require("../internals/constants/dimensions");
-var _hooks = require("../hooks");
+var _hooks2 = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["view", "openTo"];
 const STEPS = [{
@@ -50,7 +51,7 @@ const rendererInterceptor = function RendererInterceptor(props) {
   } = props;
   const {
     rangePosition
-  } = (0, _hooks.usePickerRangePositionContext)();
+  } = (0, _hooks2.usePickerRangePositionContext)();
   const {
       view,
       openTo
@@ -111,7 +112,7 @@ const rendererInterceptor = function RendererInterceptor(props) {
  * - [MobileDateTimeRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-range-picker/)
  */
 const MobileDateTimeRangePicker = exports.MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimeRangePicker(inProps, ref) {
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   // Props with the default values common to all date time range pickers
   const defaultizedProps = (0, _shared.useDateTimeRangePickerDefaultizedProps)(inProps, 'MuiMobileDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? _timeViewRenderers.renderDigitalClockTimeView : _timeViewRenderers.renderMultiSectionDigitalClockTimeView;
@@ -124,7 +125,7 @@ const MobileDateTimeRangePicker = exports.MobileDateTimeRangePicker = /*#__PURE_
   }, defaultizedProps.viewRenderers);
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
-    format: (0, _internals.resolveDateTimeFormat)(utils, defaultizedProps, true),
+    format: (0, _internals.resolveDateTimeFormat)(adapter, defaultizedProps, true),
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer
@@ -165,7 +166,7 @@ MobileDateTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**

package/MobileTimeRangePicker/MobileTimeRangePicker.js

@@ -10,13 +10,14 @@ exports.MobileTimeRangePicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _internals = require("@mui/x-date-pickers/internals");
-var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
+var _internals = require("@mui/x-date-pickers/internals");
 var _MultiSectionDigitalClock = require("@mui/x-date-pickers/MultiSectionDigitalClock");
 var _DigitalClock = require("@mui/x-date-pickers/DigitalClock");
 var _timeViewRenderers = require("@mui/x-date-pickers/timeViewRenderers");
 var _validation = require("@mui/x-date-pickers/validation");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _shared = require("../TimeRangePicker/shared");
 var _SingleInputTimeRangeField = require("../SingleInputTimeRangeField");
@@ -70,7 +71,7 @@ const rendererInterceptor = function rendererInterceptor(props) {
 };
 if (process.env.NODE_ENV !== "production") rendererInterceptor.displayName = "rendererInterceptor";
 const MobileTimeRangePicker = exports.MobileTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileTimeRangePicker(inProps, ref) {
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
 
   // Props with the default values common to all time range pickers
   const defaultizedProps = (0, _shared.useTimeRangePickerDefaultizedProps)(inProps, 'MuiMobileTimeRangePicker');
@@ -84,7 +85,7 @@ const MobileTimeRangePicker = exports.MobileTimeRangePicker = /*#__PURE__*/React
   const props = (0, _extends2.default)({}, defaultizedProps, {
     ampmInClock: true,
     viewRenderers,
-    format: (0, _internals.resolveTimeFormat)(utils, defaultizedProps),
+    format: (0, _internals.resolveTimeFormat)(adapter, defaultizedProps),
     slots: (0, _extends2.default)({
       field: _SingleInputTimeRangeField.SingleInputTimeRangeField
     }, defaultizedProps.slots),
@@ -119,7 +120,7 @@ MobileTimeRangePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -32,7 +32,7 @@ MultiInputDateTimeRangeField.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -33,7 +33,7 @@ MultiInputTimeRangeField.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -25,7 +25,7 @@ const PickersRangeCalendarHeaderContentMultipleCalendars = (0, _styles.styled)(_
   justifyContent: 'space-between'
 });
 const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const translations = (0, _hooks.usePickerTranslations)();
   const {
       calendars,
@@ -64,8 +64,8 @@ const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PUR
       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__*/(0, _jsxRuntime.jsx)(PickersRangeCalendarHeaderContentMultipleCalendars, (0, _extends2.default)({}, otherRangeProps, {
     ref: ref,
     onGoToPrevious: selectPreviousMonth,
@@ -79,7 +79,7 @@ const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PUR
     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/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

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

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

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

package/TimeRangePicker/TimeRangePicker.js

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

package/TimeRangePicker/TimeRangePickerTimeWrapper.js

@@ -7,16 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.TimeRangePickerTimeWrapper = TimeRangePickerTimeWrapper;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _internals = require("@mui/x-date-pickers/internals");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _dateUtils = require("../internals/utils/date-utils");
 var _dateRangeManager = require("../internals/utils/date-range-manager");
-var _hooks = require("../hooks");
+var _hooks2 = require("../hooks");
 const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
 /**
  * @ignore - internal component.
  */
 function TimeRangePickerTimeWrapper(props) {
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const {
       viewRenderer,
       value,
@@ -28,7 +28,7 @@ function TimeRangePickerTimeWrapper(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     rangePosition
-  } = (0, _hooks.usePickerRangePositionContext)();
+  } = (0, _hooks2.usePickerRangePositionContext)();
   if (!viewRenderer) {
     return null;
   }
@@ -42,11 +42,11 @@ function TimeRangePickerTimeWrapper(props) {
       newRange
     } = (0, _dateRangeManager.calculateRangeChange)({
       newDate,
-      utils,
+      adapter,
       range: value,
       rangePosition
     });
-    const isFullRangeSelected = rangePosition === 'end' && (0, _dateUtils.isRangeValid)(utils, newRange);
+    const isFullRangeSelected = rangePosition === 'end' && (0, _dateUtils.isRangeValid)(adapter, newRange);
     onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
   };
   return viewRenderer((0, _extends2.default)({}, other, {

package/TimeRangePicker/TimeRangePickerToolbar.js

@@ -99,13 +99,13 @@ function TimeRangePickerToolbarTimeElement(props) {
     separatorClasses,
     toolbarPlaceholder
   } = props;
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const {
     variant,
     views
   } = (0, _hooks.usePickerContext)();
-  const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
-  const meridiemMode = (0, _internals.getMeridiem)(value, utils);
+  const formatHours = time => ampm ? adapter.format(time, 'hours12h') : adapter.format(time, 'hours24h');
+  const meridiemMode = (0, _internals.getMeridiem)(value, adapter);
   const sectionWidth = variant === 'desktop' ? _internals.MULTI_SECTION_CLOCK_SECTION_WIDTH : '100%';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TimeRangePickerToolbarTimeContainer, {
     children: [views.includes('hours') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -114,7 +114,7 @@ function TimeRangePickerToolbarTimeElement(props) {
         width: sectionWidth,
         onClick: () => onViewChange('hours'),
         selected: view === 'hours',
-        value: utils.isValid(value) ? formatHours(value) : toolbarPlaceholder
+        value: adapter.isValid(value) ? formatHours(value) : toolbarPlaceholder
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TimeRangePickerToolbarSeparator, {
         variant: "h5",
         value: ":",
@@ -124,7 +124,7 @@ function TimeRangePickerToolbarTimeElement(props) {
         width: sectionWidth,
         onClick: () => onViewChange('minutes'),
         selected: view === 'minutes' || !views.includes('minutes') && view === 'hours',
-        value: utils.isValid(value) ? utils.format(value, 'minutes') : toolbarPlaceholder,
+        value: adapter.isValid(value) ? adapter.format(value, 'minutes') : toolbarPlaceholder,
         disabled: !views.includes('minutes')
       })]
     }), views.includes('seconds') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -137,13 +137,13 @@ function TimeRangePickerToolbarTimeElement(props) {
         width: sectionWidth,
         onClick: () => onViewChange('seconds'),
         selected: view === 'seconds',
-        value: value ? utils.format(value, 'seconds') : toolbarPlaceholder
+        value: value ? adapter.format(value, 'seconds') : toolbarPlaceholder
       })]
     }), ampm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersToolbarButton, {
       variant: "h5",
       onClick: () => onViewChange('meridiem'),
       selected: view === 'meridiem',
-      value: value && meridiemMode ? (0, _internals.formatMeridiem)(utils, meridiemMode) : toolbarPlaceholder,
+      value: value && meridiemMode ? (0, _internals.formatMeridiem)(adapter, meridiemMode) : toolbarPlaceholder,
       width: sectionWidth
     })]
   });

package/TimeRangePicker/shared.js

@@ -10,16 +10,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-date-pickers/internals");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _TimeRangePickerToolbar = require("./TimeRangePickerToolbar");
 var _TimeRangePickerTabs = require("./TimeRangePickerTabs");
 function useTimeRangePickerDefaultizedProps(props, name) {
-  const utils = (0, _internals.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
   const validationProps = (0, _internals.useApplyDefaultValuesToTimeValidationProps)(themeProps);
-  const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
+  const ampm = themeProps.ampm ?? adapter.is12HourCycleInCurrentLocale();
   const {
     openTo,
     views: defaultViews