[DateTimePicker] Use Digital Clock in all component variants (#16678)

Author: LukasTy

docs/data/date-pickers/date-time-picker/date-time-picker.md

@@ -17,14 +17,13 @@ materialDesign: https://m2.material.io/components/date-pickers
 
 ## Component composition
 
-The component is built using the `DateTimeField` for the keyboard editing, the `DateCalendar` for the date view editing, the `DigitalClock` for the desktop view editing, and the `TimeClock` for the mobile time view editing.
+The component is built using the `DateTimeField` for the keyboard editing, the `DateCalendar` for the date view editing and `DigitalClock` for the time view editing.
 
 Check-out their documentation page for more information:
 
 - [Date Field](/x/react-date-pickers/date-field/)
 - [Date Calendar](/x/react-date-pickers/date-calendar/)
 - [Digital Clock](/x/react-date-pickers/digital-clock/)
-- [Time Clock](/x/react-date-pickers/time-clock/)
 
 You can check the available props of the combined component on the dedicated [API page](/x/api/date-pickers/date-time-picker/#props).
 Some [DateTimeField props](/x/api/date-pickers/date-time-field/#props) are not available on the Picker component, you can use `slotProps.field` to pass them to the field.

docs/pages/x/api/date-pickers/mobile-date-time-picker.json

@@ -92,7 +92,7 @@
     "openTo": {
       "type": {
         "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
+        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
       }
     },
     "orientation": {
@@ -155,6 +155,7 @@
       }
     },
     "showDaysOutsideCurrentMonth": { "type": { "name": "bool" }, "default": "false" },
+    "skipDisabled": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },
@@ -168,6 +169,14 @@
       },
       "additionalInfo": { "sx": true }
     },
+    "thresholdToRenderTimeInASingleColumn": { "type": { "name": "number" }, "default": "24" },
+    "timeSteps": {
+      "type": {
+        "name": "shape",
+        "description": "{ hours?: number, minutes?: number, seconds?: number }"
+      },
+      "default": "{ hours: 1, minutes: 5, seconds: 5 }"
+    },
     "timezone": {
       "type": { "name": "string" },
       "default": "The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.",
@@ -180,13 +189,13 @@
     "view": {
       "type": {
         "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
+        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
       }
     },
     "viewRenderers": {
       "type": {
         "name": "shape",
-        "description": "{ day?: func, hours?: func, minutes?: func, month?: func, seconds?: func, year?: func }"
+        "description": "{ day?: func, hours?: func, meridiem?: func, minutes?: func, month?: func, seconds?: func, year?: func }"
       }
     },
     "views": {
@@ -247,6 +256,18 @@
       "default": "PickersModalDialogRoot",
       "class": null
     },
+    {
+      "name": "digitalClockItem",
+      "description": "Component responsible for rendering a single digital clock item.",
+      "default": "MenuItem from '@mui/material'",
+      "class": null
+    },
+    {
+      "name": "digitalClockSectionItem",
+      "description": "Component responsible for rendering a single multi section digital clock section item.",
+      "default": "MenuItem from '@mui/material'",
+      "class": null
+    },
     {
       "name": "field",
       "description": "Component used to enter the date with the keyboard.",

docs/pages/x/api/date-pickers/static-date-time-picker.json

@@ -81,7 +81,7 @@
     "openTo": {
       "type": {
         "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
+        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
       }
     },
     "orientation": {
@@ -138,6 +138,7 @@
       }
     },
     "showDaysOutsideCurrentMonth": { "type": { "name": "bool" }, "default": "false" },
+    "skipDisabled": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },
@@ -151,6 +152,14 @@
       },
       "additionalInfo": { "sx": true }
     },
+    "thresholdToRenderTimeInASingleColumn": { "type": { "name": "number" }, "default": "24" },
+    "timeSteps": {
+      "type": {
+        "name": "shape",
+        "description": "{ hours?: number, minutes?: number, seconds?: number }"
+      },
+      "default": "{ hours: 1, minutes: 5, seconds: 5 }"
+    },
     "timezone": {
       "type": { "name": "string" },
       "default": "The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.",
@@ -163,13 +172,13 @@
     "view": {
       "type": {
         "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
+        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
       }
     },
     "viewRenderers": {
       "type": {
         "name": "shape",
-        "description": "{ day?: func, hours?: func, minutes?: func, month?: func, seconds?: func, year?: func }"
+        "description": "{ day?: func, hours?: func, meridiem?: func, minutes?: func, month?: func, seconds?: func, year?: func }"
       }
     },
     "views": {
@@ -212,6 +221,18 @@
       "default": "PickersDay",
       "class": null
     },
+    {
+      "name": "digitalClockItem",
+      "description": "Component responsible for rendering a single digital clock item.",
+      "default": "MenuItem from '@mui/material'",
+      "class": null
+    },
+    {
+      "name": "digitalClockSectionItem",
+      "description": "Component responsible for rendering a single multi section digital clock section item.",
+      "default": "MenuItem from '@mui/material'",
+      "class": null
+    },
     {
       "name": "layout",
       "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts.",

docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json

@@ -172,11 +172,20 @@
     "showDaysOutsideCurrentMonth": {
       "description": "If <code>true</code>, days outside the current month are rendered:<br>- if <code>fixedWeekNumber</code> is defined, renders days to have the weeks requested.<br>- if <code>fixedWeekNumber</code> is not defined, renders day to fill the first and last week of the current month.<br>- ignored if <code>calendars</code> equals more than <code>1</code> on range pickers."
     },
+    "skipDisabled": {
+      "description": "If <code>true</code>, disabled digital clock items will not be rendered."
+    },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
+    "thresholdToRenderTimeInASingleColumn": {
+      "description": "Amount of time options below or at which the single column time renderer is used."
+    },
+    "timeSteps": {
+      "description": "The time steps between two time unit options. For example, if <code>timeStep.minutes = 8</code>, then the available minute options will be <code>[0, 8, 16, 24, 32, 40, 48, 56]</code>. When single column time renderer is used, only <code>timeStep.minutes</code> will be used."
+    },
     "timezone": {
       "description": "Choose which timezone to use for the value. Example: &quot;default&quot;, &quot;system&quot;, &quot;UTC&quot;, &quot;America/New_York&quot;. If you pass values from other timezones to some props, they will be converted to this timezone before being used.",
       "seeMoreText": "See the {{link}} for more details."
@@ -202,6 +211,8 @@
     "clearIcon": "Icon to display inside the clear button.",
     "day": "Custom component for day. Check the <a href=\"https://mui.com/x/api/date-pickers/pickers-day/\">PickersDay</a> component.",
     "dialog": "Custom component for the dialog inside which the views are rendered on mobile.",
+    "digitalClockItem": "Component responsible for rendering a single digital clock item.",
+    "digitalClockSectionItem": "Component responsible for rendering a single multi section digital clock section item.",
     "field": "Component used to enter the date with the keyboard.",
     "inputAdornment": "Component displayed on the start or end input adornment used to open the picker on desktop.",
     "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.",

docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json

@@ -147,11 +147,20 @@
     "showDaysOutsideCurrentMonth": {
       "description": "If <code>true</code>, days outside the current month are rendered:<br>- if <code>fixedWeekNumber</code> is defined, renders days to have the weeks requested.<br>- if <code>fixedWeekNumber</code> is not defined, renders day to fill the first and last week of the current month.<br>- ignored if <code>calendars</code> equals more than <code>1</code> on range pickers."
     },
+    "skipDisabled": {
+      "description": "If <code>true</code>, disabled digital clock items will not be rendered."
+    },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
+    "thresholdToRenderTimeInASingleColumn": {
+      "description": "Amount of time options below or at which the single column time renderer is used."
+    },
+    "timeSteps": {
+      "description": "The time steps between two time unit options. For example, if <code>timeStep.minutes = 8</code>, then the available minute options will be <code>[0, 8, 16, 24, 32, 40, 48, 56]</code>. When single column time renderer is used, only <code>timeStep.minutes</code> will be used."
+    },
     "timezone": {
       "description": "Choose which timezone to use for the value. Example: &quot;default&quot;, &quot;system&quot;, &quot;UTC&quot;, &quot;America/New_York&quot;. If you pass values from other timezones to some props, they will be converted to this timezone before being used.",
       "seeMoreText": "See the {{link}} for more details."
@@ -174,6 +183,8 @@
     "actionBar": "Custom component for the action bar, it is placed below the picker views.",
     "calendarHeader": "Custom component for calendar header. Check the <a href=\"https://mui.com/x/api/date-pickers/pickers-calendar-header/\">PickersCalendarHeader</a> component.",
     "day": "Custom component for day. Check the <a href=\"https://mui.com/x/api/date-pickers/pickers-day/\">PickersDay</a> component.",
+    "digitalClockItem": "Component responsible for rendering a single digital clock item.",
+    "digitalClockSectionItem": "Component responsible for rendering a single multi section digital clock section item.",
     "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.",
     "leftArrowIcon": "Icon displayed in the left view switch button.",
     "monthButton": "Button displayed to render a single month in the <code>month</code> view.",

packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx

@@ -9,7 +9,7 @@ import {
   BasePickerInputProps,
   PickerViewRendererLookup,
   BaseClockProps,
-  DesktopOnlyTimePickerProps,
+  DigitalTimePickerProps,
   applyDefaultViewProps,
   TimeViewWithMeridiem,
   resolveTimeViewsResponse,
@@ -94,7 +94,7 @@ export interface BaseDateTimeRangePickerProps
     >,
     ExportedDateRangeCalendarProps,
     ExportedValidateDateTimeRangeProps,
-    DesktopOnlyTimePickerProps,
+    DigitalTimePickerProps,
     Partial<
       Pick<UseViewsOptions<PickerRangeValue, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>
     > {

packages/x-date-pickers/src/DateTimePicker/DateTimePicker.types.ts

@@ -3,7 +3,7 @@ import {
   DesktopDateTimePickerSlots,
   DesktopDateTimePickerSlotProps,
 } from '../DesktopDateTimePicker';
-import { BaseSingleInputFieldProps, DateOrTimeViewWithMeridiem } from '../internals/models';
+import { BaseSingleInputFieldProps } from '../internals/models';
 import {
   MobileDateTimePickerProps,
   MobileDateTimePickerSlots,
@@ -23,10 +23,7 @@ export interface DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure exte
 export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true>
   extends DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure>,
     ExportedYearCalendarProps,
-    Omit<
-      MobileDateTimePickerProps<DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>,
-      'views'
-    > {
+    Omit<MobileDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, 'views'> {
   /**
    * CSS media query when `Mobile` mode will be changed to `Desktop`.
    * @default '@media (pointer: fine)'

packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -82,7 +82,7 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
       props: { toolbarVariant: 'desktop' },
       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,
         },