@mui/x-date-pickers 8.5.2 → 8.6.0

package/DateCalendar/useCalendarState.js

@@ -11,28 +11,28 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useIsDateDisabled = require("./useIsDateDisabled");
-var _useUtils = require("../internals/hooks/useUtils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDate");
 var _dateUtils = require("../internals/utils/date-utils");
-const createCalendarStateReducer = (reduceAnimations, utils) => (state, action) => {
+var _usePickerAdapter = require("../hooks/usePickerAdapter");
+const createCalendarStateReducer = (reduceAnimations, adapter) => (state, action) => {
   switch (action.type) {
     case 'setVisibleDate':
       return (0, _extends2.default)({}, state, {
         slideDirection: action.direction,
         currentMonth: action.month,
-        isMonthSwitchingAnimating: !utils.isSameMonth(action.month, state.currentMonth) && !reduceAnimations && !action.skipAnimation,
+        isMonthSwitchingAnimating: !adapter.isSameMonth(action.month, state.currentMonth) && !reduceAnimations && !action.skipAnimation,
         focusedDay: action.focusedDay
       });
     case 'changeMonthTimezone':
       {
         const newTimezone = action.newTimezone;
-        if (utils.getTimezone(state.currentMonth) === newTimezone) {
+        if (adapter.getTimezone(state.currentMonth) === newTimezone) {
           return state;
         }
-        let newCurrentMonth = utils.setTimezone(state.currentMonth, newTimezone);
-        if (utils.getMonth(newCurrentMonth) !== utils.getMonth(state.currentMonth)) {
-          newCurrentMonth = utils.setMonth(newCurrentMonth, utils.getMonth(state.currentMonth));
+        let newCurrentMonth = adapter.setTimezone(state.currentMonth, newTimezone);
+        if (adapter.getMonth(newCurrentMonth) !== adapter.getMonth(state.currentMonth)) {
+          newCurrentMonth = adapter.setMonth(newCurrentMonth, adapter.getMonth(state.currentMonth));
         }
         return (0, _extends2.default)({}, state, {
           currentMonth: newCurrentMonth
@@ -61,12 +61,12 @@ const useCalendarState = params => {
     timezone,
     getCurrentMonthFromVisibleDate
   } = params;
-  const utils = (0, _useUtils.useUtils)();
-  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), utils)).current;
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
+  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), adapter)).current;
   const referenceDate = React.useMemo(() => {
     return _valueManagers.singleItemValueManager.getInitialReferenceValue({
       value,
-      utils,
+      adapter,
       timezone,
       props: params,
       referenceDate: referenceDateProp,
@@ -79,7 +79,7 @@ const useCalendarState = params => {
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: referenceDate,
-    currentMonth: utils.startOfMonth(referenceDate),
+    currentMonth: adapter.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
   const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
@@ -96,14 +96,14 @@ const useCalendarState = params => {
   React.useEffect(() => {
     dispatch({
       type: 'changeMonthTimezone',
-      newTimezone: utils.getTimezone(referenceDate)
+      newTimezone: adapter.getTimezone(referenceDate)
     });
-  }, [referenceDate, utils]);
+  }, [referenceDate, adapter]);
   const setVisibleDate = (0, _useEventCallback.default)(({
     target,
     reason
   }) => {
-    if (reason === 'cell-interaction' && calendarState.focusedDay != null && utils.isSameDay(target, calendarState.focusedDay)) {
+    if (reason === 'cell-interaction' && calendarState.focusedDay != null && adapter.isSameDay(target, calendarState.focusedDay)) {
       return;
     }
     const skipAnimation = reason === 'cell-interaction';
@@ -113,18 +113,18 @@ const useCalendarState = params => {
       month = getCurrentMonthFromVisibleDate(target, calendarState.currentMonth);
       focusedDay = target;
     } else {
-      month = utils.isSameMonth(target, calendarState.currentMonth) ? calendarState.currentMonth : utils.startOfMonth(target);
+      month = adapter.isSameMonth(target, calendarState.currentMonth) ? calendarState.currentMonth : adapter.startOfMonth(target);
       focusedDay = target;
 
       // If the date is disabled, we try to find a non-disabled date inside the same month.
       if (isDateDisabled(focusedDay)) {
-        const startOfMonth = utils.startOfMonth(target);
-        const endOfMonth = utils.endOfMonth(target);
+        const startOfMonth = adapter.startOfMonth(target);
+        const endOfMonth = adapter.endOfMonth(target);
         focusedDay = (0, _dateUtils.findClosestEnabledDate)({
-          utils,
+          adapter,
           date: focusedDay,
-          minDate: utils.isBefore(minDate, startOfMonth) ? startOfMonth : minDate,
-          maxDate: utils.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
+          minDate: adapter.isBefore(minDate, startOfMonth) ? startOfMonth : minDate,
+          maxDate: adapter.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
           disablePast,
           disableFuture,
           isDateDisabled,
@@ -132,19 +132,19 @@ const useCalendarState = params => {
         });
       }
     }
-    const hasChangedMonth = !utils.isSameMonth(calendarState.currentMonth, month);
-    const hasChangedYear = !utils.isSameYear(calendarState.currentMonth, month);
+    const hasChangedMonth = !adapter.isSameMonth(calendarState.currentMonth, month);
+    const hasChangedYear = !adapter.isSameYear(calendarState.currentMonth, month);
     if (hasChangedMonth) {
       onMonthChange?.(month);
     }
     if (hasChangedYear) {
-      onYearChange?.(utils.startOfYear(month));
+      onYearChange?.(adapter.startOfYear(month));
     }
     dispatch({
       type: 'setVisibleDate',
       month,
-      direction: utils.isAfterDay(month, calendarState.currentMonth) ? 'left' : 'right',
-      focusedDay: calendarState.focusedDay != null && focusedDay != null && utils.isSameDay(focusedDay, calendarState.focusedDay) ? calendarState.focusedDay : focusedDay,
+      direction: adapter.isAfterDay(month, calendarState.currentMonth) ? 'left' : 'right',
+      focusedDay: calendarState.focusedDay != null && focusedDay != null && adapter.isSameDay(focusedDay, calendarState.focusedDay) ? calendarState.focusedDay : focusedDay,
       skipAnimation
     });
   });

package/DateCalendar/useIsDateDisabled.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useIsDateDisabled = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _validation = require("../validation");
-var _useUtils = require("../internals/hooks/useUtils");
+var _usePickerAdapter = require("../hooks/usePickerAdapter");
 const useIsDateDisabled = ({
   shouldDisableDate,
   shouldDisableMonth,
@@ -19,7 +19,7 @@ const useIsDateDisabled = ({
   disablePast,
   timezone
 }) => {
-  const adapter = (0, _useUtils.useLocalizationContext)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   return React.useCallback(day => (0, _validation.validateDate)({
     adapter,
     value: day,

package/DatePicker/DatePickerToolbar.js

@@ -16,12 +16,10 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _PickersToolbar = require("../internals/components/PickersToolbar");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
-var _useUtils = require("../internals/hooks/useUtils");
+var _hooks = require("../hooks");
 var _datePickerToolbarClasses = require("./datePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
 var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
-var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"];
 const useUtilityClasses = classes => {
@@ -70,25 +68,25 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
       classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const {
     value,
     views,
     orientation
   } = (0, _hooks.usePickerContext)();
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
+  const translations = (0, _hooks.usePickerTranslations)();
   const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
   const classes = useUtilityClasses(classesProp);
   const dateText = React.useMemo(() => {
-    if (!utils.isValid(value)) {
+    if (!adapter.isValid(value)) {
       return toolbarPlaceholder;
     }
-    const formatFromViews = (0, _dateUtils.resolveDateFormat)(utils, {
+    const formatFromViews = (0, _dateUtils.resolveDateFormat)(adapter, {
       format: toolbarFormat,
       views
     }, true);
-    return utils.formatByString(value, formatFromViews);
-  }, [value, toolbarFormat, toolbarPlaceholder, utils, views]);
+    return adapter.formatByString(value, formatFromViews);
+  }, [value, toolbarFormat, toolbarPlaceholder, adapter, views]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerToolbarRoot, (0, _extends2.default)({
     ref: ref,
     toolbarTitle: translations.datePickerToolbarTitle,

package/DateTimeField/DateTimeField.js

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

package/DateTimePicker/DateTimePicker.js

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

package/DateTimePicker/DateTimePickerToolbar.js

@@ -19,8 +19,7 @@ var _createStyled = require("@mui/system/createStyled");
 var _PickersToolbarText = require("../internals/components/PickersToolbarText");
 var _PickersToolbar = require("../internals/components/PickersToolbar");
 var _PickersToolbarButton = require("../internals/components/PickersToolbarButton");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
-var _useUtils = require("../internals/hooks/useUtils");
+var _hooks = require("../hooks");
 var _dateTimePickerToolbarClasses = require("./dateTimePickerToolbarClasses");
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _dimensions = require("../internals/constants/dimensions");
@@ -252,10 +251,10 @@ function DateTimePickerToolbar(inProps) {
     setView: setViewContext,
     views
   } = (0, _usePickerContext.usePickerContext)();
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
+  const translations = (0, _hooks.usePickerTranslations)();
   const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
   const classes = useUtilityClasses(classesProp, ownerState);
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const overrides = React.useContext(DateTimePickerToolbarOverrideContext);
   const value = overrides ? overrides.value : valueContext;
   const setValue = overrides ? overrides.setValue : setValueContext;
@@ -272,19 +271,19 @@ function DateTimePickerToolbar(inProps) {
   const showAmPmControl = Boolean(ampm && !ampmInClock);
   const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle;
   const dateText = React.useMemo(() => {
-    if (!utils.isValid(value)) {
+    if (!adapter.isValid(value)) {
       return toolbarPlaceholder;
     }
     if (toolbarFormat) {
-      return utils.formatByString(value, toolbarFormat);
+      return adapter.formatByString(value, toolbarFormat);
     }
-    return utils.format(value, 'shortDate');
-  }, [value, toolbarFormat, toolbarPlaceholder, utils]);
+    return adapter.format(value, 'shortDate');
+  }, [value, toolbarFormat, toolbarPlaceholder, adapter]);
   const formatSection = (format, fallback) => {
-    if (!utils.isValid(value)) {
+    if (!adapter.isValid(value)) {
       return fallback;
     }
-    return utils.format(value, format);
+    return adapter.format(value, format);
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
@@ -359,14 +358,14 @@ function DateTimePickerToolbar(inProps) {
           variant: "subtitle2",
           selected: meridiemMode === 'am',
           typographyClassName: classes.ampmLabel,
-          value: (0, _dateUtils.formatMeridiem)(utils, 'am'),
+          value: (0, _dateUtils.formatMeridiem)(adapter, 'am'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
           disabled: disabled
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
           variant: "subtitle2",
           selected: meridiemMode === 'pm',
           typographyClassName: classes.ampmLabel,
-          value: (0, _dateUtils.formatMeridiem)(utils, 'pm'),
+          value: (0, _dateUtils.formatMeridiem)(adapter, 'pm'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
           disabled: disabled
         })]
@@ -374,7 +373,7 @@ function DateTimePickerToolbar(inProps) {
         variant: "h5",
         onClick: () => setView('meridiem'),
         selected: view === 'meridiem',
-        value: value && meridiemMode ? (0, _dateUtils.formatMeridiem)(utils, meridiemMode) : '--',
+        value: value && meridiemMode ? (0, _dateUtils.formatMeridiem)(adapter, meridiemMode) : '--',
         width: _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH
       })]
     })]

package/DateTimePicker/shared.js

@@ -9,20 +9,20 @@ exports.useDateTimePickerDefaultizedProps = useDateTimePickerDefaultizedProps;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
-var _useUtils = require("../internals/hooks/useUtils");
+var _usePickerAdapter = require("../hooks/usePickerAdapter");
 var _DateTimePickerTabs = require("./DateTimePickerTabs");
 var _DateTimePickerToolbar = require("./DateTimePickerToolbar");
 var _views = require("../internals/utils/views");
 var _dateTimeUtils = require("../internals/utils/date-time-utils");
 var _useDateTimeManager = require("../managers/useDateTimeManager");
 function useDateTimePickerDefaultizedProps(props, name) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
   const validationProps = (0, _useDateTimeManager.useApplyDefaultValuesToDateTimeValidationProps)(themeProps);
-  const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
+  const ampm = themeProps.ampm ?? adapter.is12HourCycleInCurrentLocale();
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;

package/DesktopDatePicker/DesktopDatePicker.js

@@ -14,7 +14,7 @@ var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveC
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _valueManagers = require("../internals/utils/valueManagers");
 var _shared = require("../DatePicker/shared");
-var _useUtils = require("../internals/hooks/useUtils");
+var _usePickerAdapter = require("../hooks/usePickerAdapter");
 var _validation = require("../validation");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _DateField = require("../DateField");
@@ -31,7 +31,7 @@ var _dateUtils = require("../internals/utils/date-utils");
  * - [DesktopDatePicker API](https://mui.com/x/api/date-pickers/desktop-date-picker/)
  */
 const DesktopDatePicker = exports.DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
 
   // Props with the default values common to all date pickers
   const defaultizedProps = (0, _shared.useDatePickerDefaultizedProps)(inProps, 'MuiDesktopDatePicker');
@@ -45,7 +45,7 @@ const DesktopDatePicker = exports.DesktopDatePicker = /*#__PURE__*/React.forward
   const props = (0, _extends2.default)({}, defaultizedProps, {
     closeOnSelect: defaultizedProps.closeOnSelect ?? true,
     viewRenderers,
-    format: (0, _dateUtils.resolveDateFormat)(utils, defaultizedProps, false),
+    format: (0, _dateUtils.resolveDateFormat)(adapter, defaultizedProps, false),
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     slots: (0, _extends2.default)({
       field: _DateField.DateField

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -18,7 +18,7 @@ var _valueManagers = require("../internals/utils/valueManagers");
 var _DateTimeField = require("../DateTimeField");
 var _shared = require("../DateTimePicker/shared");
 var _dateViewRenderers = require("../dateViewRenderers/dateViewRenderers");
-var _useUtils = require("../internals/hooks/useUtils");
+var _usePickerAdapter = require("../hooks/usePickerAdapter");
 var _validation = require("../validation");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _dateTimeUtils = require("../internals/utils/date-time-utils");
@@ -97,7 +97,7 @@ if (process.env.NODE_ENV !== "production") rendererInterceptor.displayName = "re
  * - [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/)
  */
 const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = (0, _shared.useDateTimePickerDefaultizedProps)(inProps, 'MuiDesktopDateTimePicker');
@@ -119,7 +119,7 @@ const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React
   // Props with the default values specific to the desktop variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
-    format: (0, _dateTimeUtils.resolveDateTimeFormat)(utils, defaultizedProps),
+    format: (0, _dateTimeUtils.resolveDateTimeFormat)(adapter, defaultizedProps),
     views,
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     ampmInClock,
@@ -159,7 +159,7 @@ DesktopDateTimePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**

package/DesktopTimePicker/DesktopTimePicker.js

@@ -15,7 +15,7 @@ var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _valueManagers = require("../internals/utils/valueManagers");
 var _TimeField = require("../TimeField");
 var _shared = require("../TimePicker/shared");
-var _useUtils = require("../internals/hooks/useUtils");
+var _usePickerAdapter = require("../hooks/usePickerAdapter");
 var _validation = require("../validation");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _timeViewRenderers = require("../timeViewRenderers");
@@ -32,7 +32,7 @@ var _dateTimeUtils = require("../internals/utils/date-time-utils");
  * - [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/)
  */
 const DesktopTimePicker = exports.DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = (0, _shared.useTimePickerDefaultizedProps)(inProps, 'MuiDesktopTimePicker');
@@ -58,7 +58,7 @@ const DesktopTimePicker = exports.DesktopTimePicker = /*#__PURE__*/React.forward
     ampmInClock,
     timeSteps,
     viewRenderers,
-    format: (0, _timeUtils.resolveTimeFormat)(utils, defaultizedProps),
+    format: (0, _timeUtils.resolveTimeFormat)(adapter, defaultizedProps),
     // Setting only `hours` time view in case of single column time picker
     // Allows for easy view lifecycle management
     views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
@@ -93,7 +93,7 @@ DesktopTimePicker.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**

package/DigitalClock/DigitalClock.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DigitalClockProps } from "./DigitalClock.types.js";
-export declare const DigitalClockItem: import("@emotion/styled").StyledComponent<import("@mui/material/MenuItem").MenuItemOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "disabled" | "autoFocus" | "dense" | "tabIndex" | "classes" | "className" | "style" | "children" | "sx" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableGutters" | "divider" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const DigitalClockItem: import("@emotion/styled").StyledComponent<import("@mui/material/MenuItem").MenuItemOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "disabled" | "autoFocus" | "dense" | "style" | "tabIndex" | "className" | "children" | "classes" | "sx" | "disableGutters" | "divider" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 type DigitalClockComponent = ((props: DigitalClockProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/DigitalClock/DigitalClock.js

@@ -20,7 +20,7 @@ var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
+var _hooks = require("../hooks");
 var _useUtils = require("../internals/hooks/useUtils");
 var _timeUtils = require("../internals/utils/time-utils");
 var _PickerViewRoot = require("../internals/components/PickerViewRoot");
@@ -107,7 +107,7 @@ const DigitalClockItem = exports.DigitalClockItem = (0, _styles.styled)(_MenuIte
  * - [DigitalClock API](https://mui.com/x/api/date-pickers/digital-clock/)
  */
 const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(inProps, ref) {
-  const utils = (0, _useUtils.useUtils)();
+  const adapter = (0, _hooks.usePickerAdapter)();
   const containerRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, containerRef);
   const listRef = React.useRef(null);
@@ -116,7 +116,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
     name: 'MuiDigitalClock'
   });
   const {
-      ampm = utils.is12HourCycleInCurrentLocale(),
+      ampm = adapter.is12HourCycleInCurrentLocale(),
       timeStep = 30,
       autoFocus,
       slots,
@@ -159,7 +159,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
+  const translations = (0, _hooks.usePickerTranslations)();
   const now = (0, _useUtils.useNow)(timezone);
   const {
     ownerState: pickerOwnerState
@@ -178,7 +178,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
   const valueOrReferenceDate = (0, _useClockReferenceDate.useClockReferenceDate)({
     value,
     referenceDate: referenceDateProp,
-    utils,
+    adapter,
     props,
     timezone
   });
@@ -214,7 +214,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
     containerRef.current.scrollTop = offsetTop - 4;
   });
   const isTimeDisabled = React.useCallback(valueToCheck => {
-    const isAfter = (0, _timeUtils.createIsAfterIgnoreDatePart)(disableIgnoringDatePartForTimeValidation, utils);
+    const isAfter = (0, _timeUtils.createIsAfterIgnoreDatePart)(disableIgnoringDatePartForTimeValidation, adapter);
     const containsValidTime = () => {
       if (minTime && isAfter(minTime, valueToCheck)) {
         return false;
@@ -231,7 +231,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
       return true;
     };
     const isValidValue = () => {
-      if (utils.getMinutes(valueToCheck) % minutesStep !== 0) {
+      if (adapter.getMinutes(valueToCheck) % minutesStep !== 0) {
         return false;
       }
       if (shouldDisableTime) {
@@ -240,18 +240,18 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
       return true;
     };
     return !containsValidTime() || !isValidValue();
-  }, [disableIgnoringDatePartForTimeValidation, utils, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableTime]);
+  }, [disableIgnoringDatePartForTimeValidation, adapter, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableTime]);
   const timeOptions = React.useMemo(() => {
     const result = [];
-    const startOfDay = utils.startOfDay(valueOrReferenceDate);
+    const startOfDay = adapter.startOfDay(valueOrReferenceDate);
     let nextTimeStepOption = startOfDay;
-    while (utils.isSameDay(valueOrReferenceDate, nextTimeStepOption)) {
+    while (adapter.isSameDay(valueOrReferenceDate, nextTimeStepOption)) {
       result.push(nextTimeStepOption);
-      nextTimeStepOption = utils.addMinutes(nextTimeStepOption, timeStep);
+      nextTimeStepOption = adapter.addMinutes(nextTimeStepOption, timeStep);
     }
     return result;
-  }, [valueOrReferenceDate, timeStep, utils]);
-  const focusedOptionIndex = timeOptions.findIndex(option => utils.isEqual(option, valueOrReferenceDate));
+  }, [valueOrReferenceDate, timeStep, adapter]);
+  const focusedOptionIndex = timeOptions.findIndex(option => adapter.isEqual(option, valueOrReferenceDate));
   const handleKeyDown = event => {
     switch (event.key) {
       case 'PageUp':
@@ -297,8 +297,8 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
         if (skipDisabled && optionDisabled) {
           return null;
         }
-        const isSelected = utils.isEqual(option, value);
-        const formattedValue = utils.format(option, ampm ? 'fullTime12h' : 'fullTime24h');
+        const isSelected = adapter.isEqual(option, value);
+        const formattedValue = adapter.format(option, ampm ? 'fullTime12h' : 'fullTime24h');
         const isFocused = focusedOptionIndex === index || focusedOptionIndex === -1 && index === 0;
         const tabIndex = isFocused ? 0 : -1;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockItem, (0, _extends2.default)({
@@ -329,7 +329,7 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * 12h/24h view for hour selection clock.
-   * @default utils.is12HourCycleInCurrentLocale()
+   * @default adapter.is12HourCycleInCurrentLocale()
    */
   ampm: _propTypes.default.bool,
   /**

package/LocalizationProvider/LocalizationProvider.d.ts

@@ -1,16 +1,22 @@
 import * as React from 'react';
 import { AdapterFormats, MuiPickersAdapter, PickerValidDate } from "../models/index.js";
 import { PickersInputLocaleText } from "../locales/index.js";
-export interface MuiPickersAdapterContextValue {
+export interface PickersAdapterContextValue {
   defaultDates: {
     minDate: PickerValidDate;
     maxDate: PickerValidDate;
   };
   utils: MuiPickersAdapter;
+  adapter: MuiPickersAdapter;
   localeText: PickersInputLocaleText | undefined;
 }
-export type MuiPickersAdapterContextNullableValue = { [K in keyof MuiPickersAdapterContextValue]: MuiPickersAdapterContextValue[K] | null };
-export declare const MuiPickersAdapterContext: React.Context<MuiPickersAdapterContextNullableValue | null>;
+export type PickerAdapterContextNullableValue = { [K in keyof PickersAdapterContextValue]: PickersAdapterContextValue[K] | null };
+export declare const PickerAdapterContext: React.Context<PickerAdapterContextNullableValue | null>;
+/**
+ * The context that provides the date adapter and default dates to the pickers.
+ * @deprecated Use `usePickersAdapter` hook if you need access to the adapter instead.
+ */
+export declare const MuiPickersAdapterContext: React.Context<PickerAdapterContextNullableValue | null>;
 export interface LocalizationProviderProps<TLocale> {
   children?: React.ReactNode;
   /**