[pickers] Rename ClockPicker into TimeClock

docs/data/date-pickers/time-picker/SubComponentsTimeCalendars.js

@@ -2,14 +2,14 @@ import * as React from 'react';
 import dayjs from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { ClockPicker } from '@mui/x-date-pickers/ClockPicker';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
 
 export default function SubComponentsTimeCalendars() {
   const [value, setValue] = React.useState(dayjs('2022-04-07T10:15'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <ClockPicker value={value} onChange={(newValue) => setValue(newValue)} />
+      <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
     </LocalizationProvider>
   );
 }

docs/data/date-pickers/time-picker/SubComponentsTimeCalendars.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import dayjs, { Dayjs } from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { ClockPicker } from '@mui/x-date-pickers/ClockPicker';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
 
 export default function SubComponentsTimeCalendars() {
   const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07T10:15'));
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <ClockPicker value={value} onChange={(newValue) => setValue(newValue)} />
+      <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
     </LocalizationProvider>
   );
 }

docs/data/date-pickers/time-picker/SubComponentsTimeCalendars.tsx.preview

@@ -1,3 +1,3 @@
 <LocalizationProvider dateAdapter={AdapterDayjs}>
-  <ClockPicker value={value} onChange={(newValue) => setValue(newValue)} />
+  <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
 </LocalizationProvider>

docs/data/migration/migration-pickers-v5/migration-pickers-v5.md

@@ -192,31 +192,26 @@ The `locale` prop of the `LocalizationProvider` component have been renamed `ada
 
 ### Rename the view components
 
-The view components allowing to pick a date or parts of a date without an input have been renamed to better fit their usage:
+The view components allowing to pick a time, a date or parts of a date without an input have been renamed to better fit their usage:
 
 ```diff
 -<CalendarPicker {...props} />
 +<DateCalendar {...props} />
-```
 
-```diff
 -<DayPicker {...props} />
 +<DayCalendar {...props} />
-```
 
-```diff
 -<CalendarPickerSkeleton {...props} />
 +<DayCalendarSkeleton {...props} />
-```
 
-```diff
 -<MonthPicker {...props} />
 +<MonthCalendar {...props} />
-```
 
-```diff
 -<YearPicker {...props} />
 +<YearCalendar {...props} />
+
+-<ClockPicker {...props} />
++<TimeClock {...props} />
 ```
 
 Component names in the theme have changed as well:
@@ -236,24 +231,27 @@ Component names in the theme have changed as well:
 
 -MuiYearPicker: {
 +MuiYearCalendar: {
+
+-MuiClockPicker: {
++MuiTimeClock: {
 ```
 
 ### Rename `date` prop to `value` on view components
 
-The `date` prop has been renamed `value` on `MonthPicker`, `YearPicker`, `ClockPicker` and `CalendarPicker`:
+The `date` prop has been renamed `value` on `MonthCalendar`, `YearCalendar`, `TimeClock` and `DateCalendar` (components renamed in previous section):
 
 ```diff
 -<MonthPicker date={dayjs()} onChange={handleMonthChange} />
-+<MonthPicker value={dayjs()} onChange={handleMonthChange} />
++<MonthCalendar value={dayjs()} onChange={handleMonthChange} />
 
 -<YearPicker date={dayjs()} onChange={handleYearChange} />
-+<YearPicker value={dayjs()} onChange={handleYearChange} />
++<YearCalendar value={dayjs()} onChange={handleYearChange} />
 
 -<ClockPicker date={dayjs()} onChange={handleTimeChange} />
-+<ClockPicker value={dayjs()} onChange={handleTimeChange} />
++<TimeClock value={dayjs()} onChange={handleTimeChange} />
 
 -<CalendarPicker date={dayjs()} onChange={handleDateChange} />
-+<CalendarPicker value={dayjs()} onChange={handleDateChange} />
++<DateCalendar value={dayjs()} onChange={handleDateChange} />
 ```
 
 ### Rename remaining `private` components

docs/data/pages.ts

@@ -209,7 +209,6 @@ const pages: MuiPage[] = [
         title: 'API Reference',
         children: [
           { pathname: '/x/api/date-pickers', title: 'Index' },
-          { pathname: '/x/api/date-pickers/clock-picker', title: 'ClockPicker' },
           { pathname: '/x/api/date-pickers/date-calendar', title: 'DateCalendar' },
           { pathname: '/x/api/date-pickers/date-picker', title: 'DatePicker' },
           {
@@ -263,6 +262,7 @@ const pages: MuiPage[] = [
             title: 'StaticDateTimePicker',
           },
           { pathname: '/x/api/date-pickers/static-time-picker', title: 'StaticTimePicker' },
+          { pathname: '/x/api/date-pickers/time-clock', title: 'TimeClock' },
           { pathname: '/x/api/date-pickers/time-picker', title: 'TimePicker' },
           { pathname: '/x/api/date-pickers/year-calendar', title: 'YearCalendar' },
         ],

docs/pages/x/api/date-pickers/index.md

@@ -4,7 +4,6 @@
 
 ## Components
 
-- [ClockPicker](/x/api/date-pickers/clock-picker/)
 - [DateCalendar](/x/api/date-pickers/date-calendar/)
 - [DatePicker](/x/api/date-pickers/date-picker/)
 - [DateRangePicker](/x/api/date-pickers/date-range-picker/)
@@ -26,5 +25,6 @@
 - [StaticDateRangePicker](/x/api/date-pickers/static-date-range-picker/)
 - [StaticDateTimePicker](/x/api/date-pickers/static-date-time-picker/)
 - [StaticTimePicker](/x/api/date-pickers/static-time-picker/)
+- [TimeClock](/x/api/date-pickers/time-clock/)
 - [TimePicker](/x/api/date-pickers/time-picker/)
 - [YearCalendar](/x/api/date-pickers/year-calendar/)

docs/pages/x/api/date-pickers/clock-picker.js → docs/pages/x/api/date-pickers/time-clock.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ApiPage from 'docsx/src/modules/components/ApiPage';
 import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './clock-picker.json';
+import jsonPageContent from './time-clock.json';
 
 export default function Page(props) {
   const { descriptions, pageContent } = props;
@@ -12,7 +12,7 @@ Page.getInitialProps = () => {
   const req = require.context(
     'docsx/translations/api-docs/date-pickers',
     false,
-    /\/clock-picker(-[a-z]{2})?\.json$/,
+    /\/time-clock(-[a-z]{2})?\.json$/,
   );
   const descriptions = mapApiPageTranslations(req);
 

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

@@ -51,11 +51,11 @@
     "PreviousIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
     "RightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }
   },
-  "name": "ClockPicker",
-  "styles": { "classes": ["root", "arrowSwitcher"], "globalClasses": {}, "name": "MuiClockPicker" },
+  "name": "TimeClock",
+  "styles": { "classes": ["root", "arrowSwitcher"], "globalClasses": {}, "name": "MuiTimeClock" },
   "spread": false,
   "forwardsRefTo": "HTMLDivElement",
-  "filename": "/packages/x-date-pickers/src/ClockPicker/ClockPicker.tsx",
+  "filename": "/packages/x-date-pickers/src/TimeClock/TimeClock.tsx",
   "inheritance": null,
   "demos": "<ul></ul>",
   "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
-import { ExportedClockPickerProps } from '../ClockPicker/ClockPicker';
+import { ExportedTimeClockProps } from '../TimeClock/TimeClock';
 import { ExportedDateCalendarProps } from '../DateCalendar/DateCalendar';
 import { DateTimeValidationError } from '../internals/hooks/validation/useDateTimeValidation';
 import { ValidationCommonProps } from '../internals/hooks/validation/useValidation';
@@ -51,7 +51,7 @@ export interface BaseDateTimePickerSlotsComponentsProps<TDate>
 }
 
 export interface BaseDateTimePickerProps<TDate>
-  extends ExportedClockPickerProps<TDate>,
+  extends ExportedTimeClockProps<TDate>,
     ExportedDateCalendarProps<TDate>,
     BasePickerProps<TDate | null, TDate>,
     ValidationCommonProps<DateTimeValidationError, TDate | null>,

packages/x-date-pickers/src/NextDateTimePicker/shared.tsx

@@ -9,10 +9,10 @@ import {
   ExportedDateCalendarProps,
 } from '../DateCalendar/DateCalendar';
 import {
-  ClockPickerSlotsComponent,
-  ClockPickerSlotsComponentsProps,
-  ExportedClockPickerProps,
-} from '../ClockPicker/ClockPicker';
+  TimeClockSlotsComponent,
+  TimeClockSlotsComponentsProps,
+  ExportedTimeClockProps,
+} from '../TimeClock/TimeClock';
 import { BaseNextPickerProps } from '../internals/models/props/basePickerProps';
 import { applyDefaultDate } from '../internals/utils/date-utils';
 import {
@@ -34,7 +34,7 @@ import { DateTimeValidationError } from '../internals/hooks/validation/useDateTi
 
 export interface BaseNextDateTimePickerSlotsComponent<TDate>
   extends DateCalendarSlotsComponent<TDate>,
-    ClockPickerSlotsComponent {
+    TimeClockSlotsComponent {
   /**
    * Tabs enabling toggling between date and time pickers.
    * @default DateTimePickerTabs
@@ -49,7 +49,7 @@ export interface BaseNextDateTimePickerSlotsComponent<TDate>
 
 export interface BaseNextDateTimePickerSlotsComponentsProps<TDate>
   extends DateCalendarSlotsComponentsProps<TDate>,
-    ClockPickerSlotsComponentsProps {
+    TimeClockSlotsComponentsProps {
   /**
    * Props passed down to the tabs component.
    */
@@ -66,7 +66,7 @@ export interface BaseNextDateTimePickerProps<TDate>
       'views' | 'openTo'
     >,
     Omit<ExportedDateCalendarProps<TDate>, 'onViewChange'>,
-    ExportedClockPickerProps<TDate> {
+    ExportedTimeClockProps<TDate> {
   /**
    * 12h/24h view for hour selection clock.
    * @default `utils.is12HourCycleInCurrentLocale()`

packages/x-date-pickers/src/NextTimePicker/shared.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
-import { ClockPickerView } from '../ClockPicker';
+import { ClockPickerView } from '../TimeClock';
 import { useUtils } from '../internals/hooks/useUtils';
 import {
-  ClockPickerSlotsComponent,
-  ClockPickerSlotsComponentsProps,
-  ExportedClockPickerProps,
-} from '../ClockPicker/ClockPicker';
+  TimeClockSlotsComponent,
+  TimeClockSlotsComponentsProps,
+  ExportedTimeClockProps,
+} from '../TimeClock/TimeClock';
 import { BaseNextPickerProps } from '../internals/models/props/basePickerProps';
 import { BaseTimeValidationProps } from '../internals/hooks/validation/models';
 import { LocalizedComponent, PickersInputLocaleText } from '../locales/utils/pickersLocaleTextApi';
@@ -18,15 +18,15 @@ import {
 } from '../TimePicker/TimePickerToolbar';
 import { TimeValidationError } from '../internals/hooks/validation/useTimeValidation';
 
-export interface BaseNextTimePickerSlotsComponent<TDate> extends ClockPickerSlotsComponent {
+export interface BaseNextTimePickerSlotsComponent<TDate> extends TimeClockSlotsComponent {
   /**
    * Custom component for the toolbar rendered above the views.
    * @default TimePickerToolbar
    */
   Toolbar?: React.JSXElementConstructor<TimePickerToolbarProps<TDate>>;
 }
 
-export interface BaseNextTimePickerSlotsComponentsProps extends ClockPickerSlotsComponentsProps {
+export interface BaseNextTimePickerSlotsComponentsProps extends TimeClockSlotsComponentsProps {
   toolbar?: ExportedTimePickerToolbarProps;
 }
 
@@ -35,7 +35,7 @@ export interface BaseNextTimePickerProps<TDate>
       BaseNextPickerProps<TDate | null, TDate, ClockPickerView, TimeValidationError>,
       'views' | 'openTo'
     >,
-    ExportedClockPickerProps<TDate> {
+    ExportedTimeClockProps<TDate> {
   /**
    * 12h/24h view for hour selection clock.
    * @default `utils.is12HourCycleInCurrentLocale()`

packages/x-date-pickers/src/TimeClock/TimeClock.spec.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+
+// External components are generic
+<TimeClock<Date> view="hours" value={null} onChange={(date) => date?.getDate()} />;