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

package/modern/DateTimePicker/DateTimePicker.types.d.ts

@@ -1,11 +1,11 @@
 import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from "../DesktopDateTimePicker/index.js";
-import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem } 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)'

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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, {

package/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -4,11 +4,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
-import { renderTimeViewClock } from "../timeViewRenderers/index.js";
+import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useStaticPicker } from "../internals/hooks/useStaticPicker/index.js";
 import { validateDateTime } from "../validation/index.js";
+import { mergeSx } from "../internals/utils/utils.js";
+import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
+import { DIALOG_WIDTH, VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { digitalClockClasses } from "../DigitalClock/index.js";
 /**
  * Demos:
  *
@@ -23,19 +27,26 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiStaticDateTimePicker');
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
   const ampmInClock = defaultizedProps.ampmInClock ?? displayStaticWrapperAs === 'desktop';
+  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);
 
+  // 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 static variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
     displayStaticWrapperAs,
+    views,
     ampmInClock,
     yearsPerRow: defaultizedProps.yearsPerRow ?? (displayStaticWrapperAs === 'mobile' ? 3 : 4),
     slotProps: _extends({}, defaultizedProps.slotProps, {
@@ -46,7 +57,28 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
         hidden: displayStaticWrapperAs === 'desktop',
         ampmInClock
       }, defaultizedProps.slotProps?.toolbar)
-    })
+    }),
+    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?.sx)
   });
   const {
     renderPicker
@@ -236,7 +268,7 @@ StaticDateTimePicker.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.
    */
@@ -302,6 +334,11 @@ StaticDateTimePicker.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 {}
@@ -316,6 +353,22 @@ StaticDateTimePicker.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".
@@ -334,7 +387,7 @@ StaticDateTimePicker.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.
@@ -343,6 +396,7 @@ StaticDateTimePicker.propTypes = {
   viewRenderers: PropTypes.shape({
     day: PropTypes.func,
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     month: PropTypes.func,
     seconds: PropTypes.func,

package/modern/StaticDateTimePicker/StaticDateTimePicker.types.d.ts

@@ -1,10 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.js";
 import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.js";
-import { DateOrTimeView } from "../models/index.js";
 export interface StaticDateTimePickerSlots extends BaseDateTimePickerSlots, UseStaticPickerSlots {}
 export interface StaticDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, UseStaticPickerSlotProps {}
-export interface StaticDateTimePickerProps extends BaseDateTimePickerProps<DateOrTimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
+export interface StaticDateTimePickerProps extends BaseDateTimePickerProps, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
   /**
    * Overridable component slots.
    * @default {}

package/modern/TimePicker/shared.d.ts

@@ -5,7 +5,7 @@ import { BasePickerInputProps } from "../internals/models/props/basePickerProps.
 import { LocalizedComponent } from "../locales/utils/pickersLocaleTextApi.js";
 import { TimePickerToolbarProps, ExportedTimePickerToolbarProps } from "./TimePickerToolbar.js";
 import { TimeValidationError } from "../models/index.js";
-import { PickerViewRendererLookup } from "../internals/hooks/usePicker/usePickerViews.js";
+import { PickerViewRendererLookup } from "../internals/hooks/usePicker/index.js";
 import { TimeViewRendererProps } from "../timeViewRenderers/index.js";
 import { BaseClockProps, ExportedBaseClockProps } from "../internals/models/props/time.js";
 import { PickerValue, TimeViewWithMeridiem } from "../internals/models/index.js";

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-alpha.13
+ * @mui/x-date-pickers v8.0.0-alpha.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/PickerFieldUI.js

@@ -154,7 +154,9 @@ export function PickerFieldUI(props) {
         disabled: triggerStatus === 'disabled',
         onClick: handleClickOpeningButton,
         'aria-label': openPickerAriaLabel,
-        edge: clearButtonPosition === 'start' && openPickerButtonPosition === 'start' ? undefined : openPickerButtonPosition
+        edge:
+        // open button is always rendered at the edge
+        textFieldProps.variant !== 'standard' ? openPickerButtonPosition : false
       },
       ownerState
     }),
@@ -176,7 +178,9 @@ export function PickerFieldUI(props) {
         tabIndex: -1,
         onClick: onClear,
         disabled: fieldResponse.disabled || fieldResponse.readOnly,
-        edge: clearButtonPosition === 'end' && openPickerButtonPosition === 'end' ? undefined : clearButtonPosition
+        edge:
+        // clear button can only be at the edge if it's position differs from the open button
+        textFieldProps.variant !== 'standard' && clearButtonPosition !== openPickerButtonPosition ? clearButtonPosition : false
       },
       ownerState
     }),

package/modern/internals/components/PickerPopper/PickerPopper.js

@@ -219,7 +219,7 @@ export function PickerPopper(inProps) {
   } = usePickerContext();
   const {
     dismissViews,
-    doesTheCurrentViewHasAnUI,
+    getCurrentViewMode,
     viewContainerRole
   } = usePickerPrivateContext();
   React.useEffect(() => {
@@ -235,7 +235,7 @@ export function PickerPopper(inProps) {
   }, [dismissViews, open]);
   const lastFocusedElementRef = React.useRef(null);
   React.useEffect(() => {
-    if (viewContainerRole === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
+    if (viewContainerRole === 'tooltip' || getCurrentViewMode() === 'field') {
       return;
     }
     if (open) {
@@ -249,7 +249,7 @@ export function PickerPopper(inProps) {
         }
       });
     }
-  }, [open, viewContainerRole, doesTheCurrentViewHasAnUI]);
+  }, [open, viewContainerRole, getCurrentViewMode]);
   const classes = useUtilityClasses(classesProp);
   const {
     ownerState: pickerOwnerState,