@mui/x-date-pickers 8.0.0-alpha.12 → 8.0.0-alpha.14

package/esm/AdapterDateFnsV2/AdapterDateFnsV2.js

@@ -1,49 +1,51 @@
-/* eslint-disable class-methods-use-this */
+// date-fns@<3 has no exports field defined
+// See https://github.com/date-fns/date-fns/issues/1781
+/* eslint-disable import/extensions, class-methods-use-this */
 // @ts-nocheck
-import addDays from 'date-fns/addDays';
-import addSeconds from 'date-fns/addSeconds';
-import addMinutes from 'date-fns/addMinutes';
-import addHours from 'date-fns/addHours';
-import addWeeks from 'date-fns/addWeeks';
-import addMonths from 'date-fns/addMonths';
-import addYears from 'date-fns/addYears';
-import endOfDay from 'date-fns/endOfDay';
-import endOfWeek from 'date-fns/endOfWeek';
-import endOfYear from 'date-fns/endOfYear';
-import dateFnsFormat from 'date-fns/format';
-import getDate from 'date-fns/getDate';
-import getDaysInMonth from 'date-fns/getDaysInMonth';
-import getHours from 'date-fns/getHours';
-import getMinutes from 'date-fns/getMinutes';
-import getMonth from 'date-fns/getMonth';
-import getSeconds from 'date-fns/getSeconds';
-import getMilliseconds from 'date-fns/getMilliseconds';
-import getWeek from 'date-fns/getWeek';
-import getYear from 'date-fns/getYear';
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
-import isEqual from 'date-fns/isEqual';
-import isSameDay from 'date-fns/isSameDay';
-import isSameYear from 'date-fns/isSameYear';
-import isSameMonth from 'date-fns/isSameMonth';
-import isSameHour from 'date-fns/isSameHour';
-import isValid from 'date-fns/isValid';
-import dateFnsParse from 'date-fns/parse';
-import setDate from 'date-fns/setDate';
-import setHours from 'date-fns/setHours';
-import setMinutes from 'date-fns/setMinutes';
-import setMonth from 'date-fns/setMonth';
-import setSeconds from 'date-fns/setSeconds';
-import setMilliseconds from 'date-fns/setMilliseconds';
-import setYear from 'date-fns/setYear';
-import startOfDay from 'date-fns/startOfDay';
-import startOfMonth from 'date-fns/startOfMonth';
-import endOfMonth from 'date-fns/endOfMonth';
-import startOfWeek from 'date-fns/startOfWeek';
-import startOfYear from 'date-fns/startOfYear';
-import isWithinInterval from 'date-fns/isWithinInterval';
-import defaultLocale from 'date-fns/locale/en-US';
-import longFormatters from 'date-fns/_lib/format/longFormatters';
+import addDays from 'date-fns/addDays/index.js';
+import addSeconds from 'date-fns/addSeconds/index.js';
+import addMinutes from 'date-fns/addMinutes/index.js';
+import addHours from 'date-fns/addHours/index.js';
+import addWeeks from 'date-fns/addWeeks/index.js';
+import addMonths from 'date-fns/addMonths/index.js';
+import addYears from 'date-fns/addYears/index.js';
+import endOfDay from 'date-fns/endOfDay/index.js';
+import endOfWeek from 'date-fns/endOfWeek/index.js';
+import endOfYear from 'date-fns/endOfYear/index.js';
+import dateFnsFormat from 'date-fns/format/index.js';
+import getDate from 'date-fns/getDate/index.js';
+import getDaysInMonth from 'date-fns/getDaysInMonth/index.js';
+import getHours from 'date-fns/getHours/index.js';
+import getMinutes from 'date-fns/getMinutes/index.js';
+import getMonth from 'date-fns/getMonth/index.js';
+import getSeconds from 'date-fns/getSeconds/index.js';
+import getMilliseconds from 'date-fns/getMilliseconds/index.js';
+import getWeek from 'date-fns/getWeek/index.js';
+import getYear from 'date-fns/getYear/index.js';
+import isAfter from 'date-fns/isAfter/index.js';
+import isBefore from 'date-fns/isBefore/index.js';
+import isEqual from 'date-fns/isEqual/index.js';
+import isSameDay from 'date-fns/isSameDay/index.js';
+import isSameYear from 'date-fns/isSameYear/index.js';
+import isSameMonth from 'date-fns/isSameMonth/index.js';
+import isSameHour from 'date-fns/isSameHour/index.js';
+import isValid from 'date-fns/isValid/index.js';
+import dateFnsParse from 'date-fns/parse/index.js';
+import setDate from 'date-fns/setDate/index.js';
+import setHours from 'date-fns/setHours/index.js';
+import setMinutes from 'date-fns/setMinutes/index.js';
+import setMonth from 'date-fns/setMonth/index.js';
+import setSeconds from 'date-fns/setSeconds/index.js';
+import setMilliseconds from 'date-fns/setMilliseconds/index.js';
+import setYear from 'date-fns/setYear/index.js';
+import startOfDay from 'date-fns/startOfDay/index.js';
+import startOfMonth from 'date-fns/startOfMonth/index.js';
+import endOfMonth from 'date-fns/endOfMonth/index.js';
+import startOfWeek from 'date-fns/startOfWeek/index.js';
+import startOfYear from 'date-fns/startOfYear/index.js';
+import isWithinInterval from 'date-fns/isWithinInterval/index.js';
+import defaultLocale from 'date-fns/locale/en-US/index.js';
+import longFormatters from 'date-fns/_lib/format/longFormatters/index.js';
 import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
 /**
  * Based on `@date-io/date-fns`

package/esm/AdapterDayjs/AdapterDayjs.js

@@ -1,11 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 /* eslint-disable class-methods-use-this */
 import defaultDayjs from 'dayjs';
-import weekOfYearPlugin from 'dayjs/plugin/weekOfYear';
-import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
-import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
-import isBetweenPlugin from 'dayjs/plugin/isBetween';
-import advancedFormatPlugin from 'dayjs/plugin/advancedFormat';
+// dayjs has no exports field defined
+// See https://github.com/iamkun/dayjs/issues/2562
+/* eslint-disable import/extensions */
+import weekOfYearPlugin from 'dayjs/plugin/weekOfYear.js';
+import customParseFormatPlugin from 'dayjs/plugin/customParseFormat.js';
+import localizedFormatPlugin from 'dayjs/plugin/localizedFormat.js';
+import isBetweenPlugin from 'dayjs/plugin/isBetween.js';
+import advancedFormatPlugin from 'dayjs/plugin/advancedFormat.js';
+/* eslint-enable import/extensions */
 import { warnOnce } from '@mui/x-internals/warning';
 defaultDayjs.extend(localizedFormatPlugin);
 defaultDayjs.extend(weekOfYearPlugin);

package/esm/DateCalendar/DateCalendar.js

@@ -344,6 +344,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           referenceDate: referenceDate
         })), view === 'day' && /*#__PURE__*/_jsx(DayCalendar, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
+          hasFocus: hasFocus,
           onFocusedDayChange: focusedDate => setVisibleDate({
             target: focusedDate,
             reason: 'cell-interaction'
@@ -354,7 +355,6 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           shouldDisableDate: shouldDisableDate,
           shouldDisableMonth: shouldDisableMonth,
           shouldDisableYear: shouldDisableYear,
-          hasFocus: hasFocus,
           onFocusedViewChange: isViewFocused => setFocusedView('day', isViewFocused),
           showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
           fixedWeekNumber: fixedWeekNumber,

package/esm/DateField/useDateField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateFieldProps } from "./DateField.types.js";
-export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "timezone" | keyof import("../internals").BaseDateValidationProps | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;
+export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | keyof import("../internals").BaseDateValidationProps | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "referenceDate" | "formatDensity" | "timezone" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;

package/esm/DatePicker/DatePicker.types.d.ts

@@ -1,5 +1,5 @@
 import { DesktopDatePickerProps, DesktopDatePickerSlots, DesktopDatePickerSlotProps } from "../DesktopDatePicker/index.js";
-import { BaseSingleInputFieldProps, PickerValue } from "../internals/models/index.js";
+import { BaseSingleInputFieldProps } from "../internals/models/index.js";
 import { MobileDatePickerProps, MobileDatePickerSlots, MobileDatePickerSlotProps } from "../MobileDatePicker/index.js";
 import { ValidateDateProps } from "../validation/validateDate.js";
 export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {}
@@ -35,4 +35,4 @@ export interface DatePickerProps<TEnableAccessibleFieldDOMStructure extends bool
 /**
  * Props the field can receive when used inside a date picker (<DatePicker />, <DesktopDatePicker /> or <MobileDatePicker /> component).
  */
-export type DatePickerFieldProps = ValidateDateProps & BaseSingleInputFieldProps<PickerValue>;
+export type DatePickerFieldProps = ValidateDateProps & BaseSingleInputFieldProps;

package/esm/DatePicker/shared.d.ts

@@ -5,7 +5,7 @@ import { DateValidationError, DateView } from "../models/index.js";
 import { BasePickerInputProps } from "../internals/models/props/basePickerProps.js";
 import { LocalizedComponent } from "../locales/utils/pickersLocaleTextApi.js";
 import { DatePickerToolbarProps, ExportedDatePickerToolbarProps } from "./DatePickerToolbar.js";
-import { PickerViewRendererLookup } from "../internals/hooks/usePicker/usePickerViews.js";
+import { PickerViewRendererLookup } from "../internals/hooks/usePicker/index.js";
 import { DateViewRendererProps } from "../dateViewRenderers/index.js";
 import { PickerValue } from "../internals/models/index.js";
 import { ValidateDatePropsToDefault } from "../validation/validateDate.js";

package/esm/DateTimeField/useDateTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateTimeFieldProps } from "./DateTimeField.types.js";
-export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "ampm" | "disableFuture" | "disablePast" | "maxDate" | "minDate" | "timezone" | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;
+export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | "maxDate" | "minDate" | "disablePast" | "disableFuture" | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "ampm" | "minDateTime" | "maxDateTime" | "referenceDate" | "formatDensity" | "timezone" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;

package/esm/DateTimePicker/DateTimePicker.types.d.ts

@@ -1,11 +1,11 @@
 import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from "../DesktopDateTimePicker/index.js";
-import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem, PickerValue } from "../internals/models/index.js";
+import { BaseSingleInputFieldProps } from "../internals/models/index.js";
 import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from "../MobileDateTimePicker/index.js";
 import { ValidateDateTimeProps } from "../validation/index.js";
 import { ExportedYearCalendarProps } from "../YearCalendar/YearCalendar.types.js";
 export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, MobileDateTimePickerSlots {}
 export interface DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
-export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, ExportedYearCalendarProps, Omit<MobileDateTimePickerProps<DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
+export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, ExportedYearCalendarProps, Omit<MobileDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, 'views'> {
   /**
    * CSS media query when `Mobile` mode will be changed to `Desktop`.
    * @default '@media (pointer: fine)'
@@ -31,4 +31,4 @@ export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends
 /**
  * Props the field can receive when used inside a date time picker (<DateTimePicker />, <DesktopDateTimePicker /> or <MobileDateTimePicker /> component).
  */
-export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps<PickerValue>;
+export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps;

package/esm/DateTimePicker/DateTimePickerToolbar.d.ts

@@ -3,7 +3,7 @@ import { BaseToolbarProps, ExportedBaseToolbarProps } from "../internals/models/
 import { DateTimePickerToolbarClasses } from "./dateTimePickerToolbarClasses.js";
 import { DateOrTimeViewWithMeridiem, PickerValue } from "../internals/models/index.js";
 import { DateTimeValidationError } from "../models/index.js";
-import { SetValueActionOptions } from "../internals/hooks/usePicker/usePickerValue.types.js";
+import { SetValueActionOptions } from "../internals/components/PickerProvider.js";
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
   /**
    * Override or extend the styles applied to the component.

package/esm/DateTimePicker/DateTimePickerToolbar.js

@@ -57,7 +57,7 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
     },
     style: {
       borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-      [`& .${pickersToolbarClasses.content} .${pickersToolbarTextClasses.selected}`]: {
+      [`& .${pickersToolbarClasses.content} .${pickersToolbarTextClasses.root}[data-selected]`]: {
         color: (theme.vars || theme).palette.primary.main,
         fontWeight: theme.typography.fontWeightBold
       }

package/esm/DateTimePicker/shared.d.ts

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
-import { DateTimeValidationError } from "../models/index.js";
+import { DateOrTimeView, DateTimeValidationError } from "../models/index.js";
 import { DateCalendarSlots, DateCalendarSlotProps, ExportedDateCalendarProps } from "../DateCalendar/DateCalendar.types.js";
-import { TimeClockSlots, TimeClockSlotProps } from "../TimeClock/TimeClock.types.js";
 import { BasePickerInputProps } from "../internals/models/props/basePickerProps.js";
 import { DateTimePickerTabsProps } from "./DateTimePickerTabs.js";
 import { LocalizedComponent } from "../locales/utils/pickersLocaleTextApi.js";
 import { DateTimePickerToolbarProps, ExportedDateTimePickerToolbarProps } from "./DateTimePickerToolbar.js";
-import { PickerViewRendererLookup } from "../internals/hooks/usePicker/usePickerViews.js";
+import { PickerViewRendererLookup } from "../internals/hooks/usePicker/index.js";
 import { DateViewRendererProps } from "../dateViewRenderers/index.js";
 import { TimeViewRendererProps } from "../timeViewRenderers/index.js";
-import { BaseClockProps, ExportedBaseClockProps } from "../internals/models/props/time.js";
+import { BaseClockProps, DigitalTimePickerProps } from "../internals/models/props/time.js";
 import { DateOrTimeViewWithMeridiem, PickerValue, TimeViewWithMeridiem } from "../internals/models/index.js";
 import { ExportedValidateDateTimeProps, ValidateDateTimePropsToDefault } from "../validation/validateDateTime.js";
-export interface BaseDateTimePickerSlots extends DateCalendarSlots, TimeClockSlots {
+import { DigitalClockSlotProps, DigitalClockSlots } from "../DigitalClock/index.js";
+import { MultiSectionDigitalClockSlotProps, MultiSectionDigitalClockSlots } from "../MultiSectionDigitalClock/index.js";
+export interface BaseDateTimePickerSlots extends DateCalendarSlots, DigitalClockSlots, MultiSectionDigitalClockSlots {
   /**
    * Tabs enabling toggling between date and time pickers.
    * @default DateTimePickerTabs
@@ -25,7 +26,7 @@ export interface BaseDateTimePickerSlots extends DateCalendarSlots, TimeClockSlo
    */
   toolbar?: React.JSXElementConstructor<DateTimePickerToolbarProps>;
 }
-export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, TimeClockSlotProps {
+export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
   /**
    * Props passed down to the tabs component.
    */
@@ -36,7 +37,7 @@ export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, Time
   toolbar?: ExportedDateTimePickerToolbarProps;
 }
 export type DateTimePickerViewRenderers<TView extends DateOrTimeViewWithMeridiem> = PickerViewRendererLookup<PickerValue, TView, Omit<DateViewRendererProps<TView>, 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'slots' | 'slotProps'>>;
-export interface BaseDateTimePickerProps<TView extends DateOrTimeViewWithMeridiem> extends BasePickerInputProps<PickerValue, TView, DateTimeValidationError>, Omit<ExportedDateCalendarProps, 'onViewChange'>, ExportedBaseClockProps, ExportedValidateDateTimeProps {
+export interface BaseDateTimePickerProps extends Omit<BasePickerInputProps<PickerValue, DateOrTimeViewWithMeridiem, DateTimeValidationError>, 'views'>, Omit<ExportedDateCalendarProps, 'onViewChange' | 'views'>, DigitalTimePickerProps, ExportedValidateDateTimeProps {
   /**
    * Display ampm controls under the clock (instead of in the toolbar).
    * @default true on desktop, false on mobile
@@ -57,8 +58,15 @@ export interface BaseDateTimePickerProps<TView extends DateOrTimeViewWithMeridie
    * If `null`, the section will only have field editing.
    * If `undefined`, internally defined view will be used.
    */
-  viewRenderers?: Partial<DateTimePickerViewRenderers<TView>>;
+  viewRenderers?: Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>;
+  /**
+   * Available views.
+   */
+  views?: readonly DateOrTimeView[];
 }
-type UseDateTimePickerDefaultizedProps<TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps<TView>> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | 'orientation' | 'ampm' | ValidateDateTimePropsToDefault>>;
-export declare function useDateTimePickerDefaultizedProps<TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps<TView>>(props: Props, name: string): UseDateTimePickerDefaultizedProps<TView, Props>;
+type UseDateTimePickerDefaultizedProps<Props extends BaseDateTimePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'orientation' | 'ampm' | ValidateDateTimePropsToDefault>, 'views'>> & {
+  shouldRenderTimeInASingleColumn: boolean;
+  views: readonly DateOrTimeViewWithMeridiem[];
+};
+export declare function useDateTimePickerDefaultizedProps<Props extends BaseDateTimePickerProps>(props: Props, name: string): UseDateTimePickerDefaultizedProps<Props>;
 export {};

package/esm/DateTimePicker/shared.js

@@ -6,6 +6,7 @@ import { applyDefaultDate } from "../internals/utils/date-utils.js";
 import { DateTimePickerTabs } from "./DateTimePickerTabs.js";
 import { DateTimePickerToolbar } from "./DateTimePickerToolbar.js";
 import { applyDefaultViewProps } from "../internals/utils/views.js";
+import { resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js";
 export function useDateTimePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
@@ -22,12 +23,32 @@ export function useDateTimePickerDefaultizedProps(props, name) {
       dateTimePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return _extends({}, themeProps, applyDefaultViewProps({
+  const {
+    openTo,
+    views: defaultViews
+  } = applyDefaultViewProps({
     views: themeProps.views,
     openTo: themeProps.openTo,
     defaultViews: ['year', 'day', 'hours', 'minutes'],
     defaultOpenTo: 'day'
-  }), {
+  });
+  const {
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
+    timeSteps
+  } = resolveTimeViewsResponse({
+    thresholdToRenderTimeInASingleColumn: themeProps.thresholdToRenderTimeInASingleColumn,
+    ampm,
+    timeSteps: themeProps.timeSteps,
+    views: defaultViews
+  });
+  return _extends({}, themeProps, {
+    timeSteps,
+    openTo,
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
     ampm,
     localeText,
     orientation: themeProps.orientation ?? 'portrait',

package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -15,7 +15,7 @@ import { renderDateViewCalendar } from "../dateViewRenderers/dateViewRenderers.j
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { validateDateTime, extractValidationProps } from "../validation/index.js";
 import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
-import { resolveDateTimeFormat, resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js";
+import { resolveDateTimeFormat } from "../internals/utils/date-time-utils.js";
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
 import { digitalClockClasses } from "../DigitalClock/index.js";
@@ -91,13 +91,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiDesktopDateTimePicker');
-  const {
-    shouldRenderTimeInASingleColumn,
-    thresholdToRenderTimeInASingleColumn,
-    views: resolvedViews,
-    timeSteps
-  } = resolveTimeViewsResponse(defaultizedProps);
-  const renderTimeView = shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
+  const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
   const viewRenderers = _extends({
     day: renderDateViewCalendar,
     month: renderDateViewCalendar,
@@ -110,7 +104,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
   const ampmInClock = defaultizedProps.ampmInClock ?? true;
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
-  const views = !shouldHoursRendererContainMeridiemView ? resolvedViews.filter(view => view !== 'meridiem') : resolvedViews;
+  const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter(view => view !== 'meridiem') : defaultizedProps.views;
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
@@ -119,9 +113,6 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
     views,
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     ampmInClock,
-    timeSteps,
-    thresholdToRenderTimeInASingleColumn,
-    shouldRenderTimeInASingleColumn,
     slots: _extends({
       field: DateTimeField,
       layout: DesktopDateTimePickerLayout

package/esm/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts

@@ -2,14 +2,11 @@ import { MakeOptional } from '@mui/x-internals/types';
 import { UseDesktopPickerSlots, ExportedUseDesktopPickerSlotProps, DesktopOnlyPickerProps } from "../internals/hooks/useDesktopPicker/index.js";
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.js";
 import { DateOrTimeView } from "../models/index.js";
-import { DesktopOnlyTimePickerProps } from "../internals/models/props/time.js";
-import { DateOrTimeViewWithMeridiem } from "../internals/models/index.js";
-import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from "../MultiSectionDigitalClock/index.js";
-import { DigitalClockSlots, DigitalClockSlotProps } from "../DigitalClock/index.js";
+import { DigitalTimePickerProps } from "../internals/models/props/time.js";
 import { ExportedYearCalendarProps } from "../YearCalendar/YearCalendar.types.js";
-export interface DesktopDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {}
-export interface DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {}
-export interface DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps<DateOrTimeViewWithMeridiem>, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps, ExportedYearCalendarProps {
+export interface DesktopDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'> {}
+export interface DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
+export interface DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps, DesktopOnlyPickerProps, DigitalTimePickerProps, ExportedYearCalendarProps {
   /**
    * Overridable component slots.
    * @default {}

package/esm/DesktopTimePicker/DesktopTimePicker.types.d.ts

@@ -2,13 +2,13 @@ import { MakeOptional } from '@mui/x-internals/types';
 import { UseDesktopPickerSlots, ExportedUseDesktopPickerSlotProps, DesktopOnlyPickerProps } from "../internals/hooks/useDesktopPicker/index.js";
 import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from "../TimePicker/shared.js";
 import { TimeViewWithMeridiem } from "../internals/models/index.js";
-import { DesktopOnlyTimePickerProps } from "../internals/models/props/time.js";
+import { DigitalTimePickerProps } from "../internals/models/props/time.js";
 import { DigitalClockSlots, DigitalClockSlotProps } from "../DigitalClock/index.js";
 import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from "../MultiSectionDigitalClock/index.js";
 import { TimeView } from "../models/index.js";
 export interface DesktopTimePickerSlots extends BaseTimePickerSlots, MakeOptional<UseDesktopPickerSlots, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {}
 export interface DesktopTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {}
-export interface DesktopTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseTimePickerProps<TimeViewWithMeridiem>, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps {
+export interface DesktopTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseTimePickerProps<TimeViewWithMeridiem>, DesktopOnlyPickerProps, DigitalTimePickerProps {
   /**
    * Available views.
    */

package/esm/MobileDateTimePicker/MobileDateTimePicker.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { MobileDateTimePickerProps } from "./MobileDateTimePicker.types.js";
-import { DateOrTimeView } from "../models/index.js";
-type MobileDateTimePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: MobileDateTimePickerProps<DateOrTimeView, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type MobileDateTimePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: MobileDateTimePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };
 /**

package/esm/MobileDateTimePicker/MobileDateTimePicker.js

@@ -12,8 +12,12 @@ import { useUtils } from "../internals/hooks/useUtils.js";
 import { extractValidationProps, validateDateTime } from "../validation/index.js";
 import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
-import { renderTimeViewClock } from "../timeViewRenderers/index.js";
+import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
 import { resolveDateTimeFormat } from "../internals/utils/date-time-utils.js";
+import { DIALOG_WIDTH, VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
+import { mergeSx } from "../internals/utils/utils.js";
+import { digitalClockClasses } from "../DigitalClock/index.js";
 /**
  * Demos:
  *
@@ -29,20 +33,26 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiMobileDateTimePicker');
+  const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
   const viewRenderers = _extends({
     day: renderDateViewCalendar,
     month: renderDateViewCalendar,
     year: renderDateViewCalendar,
-    hours: renderTimeViewClock,
-    minutes: renderTimeViewClock,
-    seconds: renderTimeViewClock
+    hours: renderTimeView,
+    minutes: renderTimeView,
+    seconds: renderTimeView,
+    meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? false;
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
+  const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter(view => view !== 'meridiem') : defaultizedProps.views;
 
   // Props with the default values specific to the mobile variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
     format: resolveDateTimeFormat(utils, defaultizedProps),
+    views,
     ampmInClock,
     slots: _extends({
       field: DateTimeField
@@ -55,7 +65,30 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
       }, defaultizedProps.slotProps?.toolbar),
       tabs: _extends({
         hidden: false
-      }, defaultizedProps.slotProps?.tabs)
+      }, defaultizedProps.slotProps?.tabs),
+      layout: _extends({}, defaultizedProps.slotProps?.layout, {
+        sx: mergeSx([{
+          [`& .${multiSectionDigitalClockClasses.root}`]: {
+            width: DIALOG_WIDTH
+          },
+          [`& .${multiSectionDigitalClockSectionClasses.root}`]: {
+            flex: 1,
+            // account for the border on `MultiSectionDigitalClock`
+            maxHeight: VIEW_HEIGHT - 1,
+            [`.${multiSectionDigitalClockSectionClasses.item}`]: {
+              width: 'auto'
+            }
+          },
+          [`& .${digitalClockClasses.root}`]: {
+            width: DIALOG_WIDTH,
+            maxHeight: VIEW_HEIGHT,
+            flex: 1,
+            [`.${digitalClockClasses.item}`]: {
+              justifyContent: 'center'
+            }
+          }
+        }], defaultizedProps.slotProps?.layout?.sx)
+      })
     })
   });
   const {
@@ -292,7 +325,7 @@ MobileDateTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  openTo: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Force rendering in particular orientation.
    */
@@ -368,6 +401,11 @@ MobileDateTimePicker.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -382,6 +420,22 @@ MobileDateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: PropTypes.number,
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: PropTypes.shape({
+    hours: PropTypes.number,
+    minutes: PropTypes.number,
+    seconds: PropTypes.number
+  }),
   /**
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
@@ -400,7 +454,7 @@ MobileDateTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -409,6 +463,7 @@ MobileDateTimePicker.propTypes = {
   viewRenderers: PropTypes.shape({
     day: PropTypes.func,
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     month: PropTypes.func,
     seconds: PropTypes.func,

package/esm/MobileDateTimePicker/MobileDateTimePicker.types.d.ts

@@ -1,11 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseMobilePickerSlots, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps } from "../internals/hooks/useMobilePicker/index.js";
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.js";
-import { DateOrTimeView } from "../models/index.js";
-import { DateOrTimeViewWithMeridiem } from "../internals/models/index.js";
 export interface MobileDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional<UseMobilePickerSlots, 'field'> {}
 export interface MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
-export interface MobileDateTimePickerProps<TView extends DateOrTimeViewWithMeridiem = DateOrTimeView, TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps<TView>, MobileOnlyPickerProps {
+export interface MobileDateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps, MobileOnlyPickerProps {
   /**
    * Overridable component slots.
    * @default {}

package/esm/PickersTextField/PickersTextField.js

@@ -154,7 +154,9 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
         label: label,
         name: name,
         role: "group",
-        "aria-labelledby": inputLabelId
+        "aria-labelledby": inputLabelId,
+        "aria-describedby": helperTextId,
+        "aria-live": helperTextId ? 'polite' : undefined
       }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
         id: helperTextId
       }, FormHelperTextProps, {