[docs] New page for TimeClock

docs/data/date-pickers/date-calendar/date-calendar.md

@@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers'
 
 # Date Calendar
 
-<p class="description">The date calendar lets the user select a date without any input or popper / modal.</p>
+<p class="description">The Date Calendar lets the user select a date without any input or popper / modal.</p>
 
 ## Basic usage
 

docs/data/date-pickers/date-picker/ViewsDatePicker.js → docs/data/date-pickers/date-picker/DatePickerViews.js

@@ -1,38 +1,29 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
 import { DemoContainer } from 'docsx/src/modules/components/DemoContainer';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { Unstable_NextDatePicker as NextDatePicker } from '@mui/x-date-pickers/NextDatePicker';
 
-export default function ViewsDatePicker() {
+export default function DatePickerViews() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer>
         <NextDatePicker
-          label="Year only"
-          views={['year']}
-          openTo="year"
-          defaultValue={dayjs('2022-04-07')}
-        />
-        <NextDatePicker
-          label="Year and Month"
-          views={['year', 'month']}
-          openTo="year"
+          label={'"year", "month" and "day"'}
           defaultValue={dayjs('2022-04-07')}
+          views={['year', 'month', 'day']}
         />
         <NextDatePicker
-          label="Year, month and date"
-          openTo="year"
-          views={['year', 'month', 'day']}
+          label={'"day"'}
           defaultValue={dayjs('2022-04-07')}
+          views={['day']}
         />
         <NextDatePicker
-          label="Invert the order of views"
-          views={['day', 'month', 'year']}
+          label={'"month" and "year"'}
           defaultValue={dayjs('2022-04-07')}
+          views={['month', 'year']}
         />
-        <NextDatePicker label="Just date" views={['day']} />
       </DemoContainer>
     </LocalizationProvider>
   );

docs/data/date-pickers/date-picker/ViewsDatePicker.tsx → docs/data/date-pickers/date-picker/DatePickerViews.tsx

@@ -1,38 +1,29 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
 import { DemoContainer } from 'docsx/src/modules/components/DemoContainer';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { Unstable_NextDatePicker as NextDatePicker } from '@mui/x-date-pickers/NextDatePicker';
 
-export default function ViewsDatePicker() {
+export default function DatePickerViews() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer>
         <NextDatePicker
-          label="Year only"
-          views={['year']}
-          openTo="year"
-          defaultValue={dayjs('2022-04-07')}
-        />
-        <NextDatePicker
-          label="Year and Month"
-          views={['year', 'month']}
-          openTo="year"
+          label={'"year", "month" and "day"'}
           defaultValue={dayjs('2022-04-07')}
+          views={['year', 'month', 'day']}
         />
         <NextDatePicker
-          label="Year, month and date"
-          openTo="year"
-          views={['year', 'month', 'day']}
+          label={'"day"'}
           defaultValue={dayjs('2022-04-07')}
+          views={['day']}
         />
         <NextDatePicker
-          label="Invert the order of views"
-          views={['day', 'month', 'year']}
+          label={'"month" and "year"'}
           defaultValue={dayjs('2022-04-07')}
+          views={['month', 'year']}
         />
-        <NextDatePicker label="Just date" views={['day']} />
       </DemoContainer>
     </LocalizationProvider>
   );

docs/data/date-pickers/date-picker/DatePickerViews.tsx.preview

@@ -0,0 +1,15 @@
+<NextDatePicker
+  label={'"year", "month" and "day"'}
+  defaultValue={dayjs('2022-04-07')}
+  views={['year', 'month', 'day']}
+/>
+<NextDatePicker
+  label={'"day"'}
+  defaultValue={dayjs('2022-04-07')}
+  views={['day']}
+/>
+<NextDatePicker
+  label={'"month" and "year"'}
+  defaultValue={dayjs('2022-04-07')}
+  views={['month', 'year']}
+/>

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

@@ -9,10 +9,10 @@ materialDesign: https://m2.material.io/components/date-pickers
 
 # Date Picker
 
-<p class="description">The date picker let the user select a date.</p>
+<p class="description">The Date Picker let the user select a date.</p>
 
 :::warning
-The new date pickers are unstable.
+The new Date Pickers are unstable.
 They might receive breaking changes on their props to have the best component possible by the time of the stable release.
 
 They will be renamed at the end of the v6 beta phase to have the same name as the current legacy pickers
@@ -26,7 +26,7 @@ Date pickers are displayed with:
 
 ## Basic usage
 
-The date picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.
+The Date Picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.
 
 {{"demo": "BasicDatePicker.js"}}
 
@@ -48,7 +48,7 @@ The component can be uncontrolled or controlled
 
 ## Responsiveness
 
-The date picker component is designed and optimized for the device it runs on.
+The Date Picker component is designed and optimized for the device it runs on.
 
 - The `MobileNextDatePicker` component works best for touch devices and small screens.
 - The `DesktopNextDatePicker` component works best for mouse devices and large screens.
@@ -62,27 +62,32 @@ There are certain caveats when testing pickers, please refer to [this section](/
 
 ## Static mode
 
-It is also possible to render any date picker without the modal/popover and text field.
+It is also possible to render the Date Picker without the modal/popover and text field.
 This can be helpful when building custom popover/modal containers.
 
 {{"demo": "StaticDatePickerDemo.js", "bg": true}}
 
 ## Form props
 
-The date picker component can be disabled or read-only.
+The Date Picker component can be disabled or read-only.
 
 {{"demo": "FormPropsDatePickers.js"}}
 
-## Views playground
+## Views
 
-It's possible to combine `year`, `month`, and `date` selection views.
-The views will appear in the order they're included in the `views` array.
+The component can contain three views: `day`, `month`, and `year`.
+By default, only the `day` and `year` views are enabled.
 
-{{"demo": "ViewsDatePicker.js"}}
+You can customize the enabled views using the `views` prop.
+Views will appear in the order they're included in the `views` array.
+
+{{"demo": "DatePickerViews.js"}}
 
 ## Landscape orientation
 
-For ease of use, the date picker will automatically change the layout between portrait and landscape by subscription to the `window.orientation` change. You can force a specific layout using the `orientation` prop.
+By default, the Date Picker automatically sets the orientation based on the `window.orientation` value.
+
+You can force a specific orientation using the `orientation` prop.
 
 {{"demo": "StaticDatePickerLandscape.js", "bg": true}}
 

docs/data/date-pickers/time-clock/BasicTimeClock.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+
+export default function BasicTimeClock() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <TimeClock />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/time-clock/BasicTimeClock.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+
+export default function BasicTimeClock() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <TimeClock />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/time-clock/BasicTimeClock.tsx.preview

@@ -0,0 +1 @@
+<TimeClock />

docs/data/date-pickers/time-clock/TimeClockAmPm.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+
+export default function TimeClockAmPm() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer>
+        <DemoItem label="Locale default behavior (enabled for enUS)">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} />
+        </DemoItem>
+        <DemoItem label="AM PM enabled">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} ampm />
+        </DemoItem>
+        <DemoItem label="AM PM disabled">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} ampm={false} />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/time-clock/TimeClockAmPm.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+
+export default function TimeClockAmPm() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer>
+        <DemoItem label="Locale default behavior (enabled for enUS)">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} />
+        </DemoItem>
+        <DemoItem label="AM PM enabled">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} ampm />
+        </DemoItem>
+        <DemoItem label="AM PM disabled">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} ampm={false} />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/time-clock/TimeClockAmPm.tsx.preview

@@ -0,0 +1,9 @@
+<DemoItem label="Locale default behavior (enabled for enUS)">
+  <TimeClock defaultValue={dayjs('2022-04-07T15:30')} />
+</DemoItem>
+<DemoItem label="AM PM enabled">
+  <TimeClock defaultValue={dayjs('2022-04-07T15:30')} ampm />
+</DemoItem>
+<DemoItem label="AM PM disabled">
+  <TimeClock defaultValue={dayjs('2022-04-07T15:30')} ampm={false} />
+</DemoItem>

docs/data/date-pickers/time-clock/TimeClockFormProps.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+
+export default function TimeClockFormProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer>
+        <DemoItem label="disabled">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} disabled />
+        </DemoItem>
+        <DemoItem label="readOnly">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} readOnly />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/time-clock/TimeClockFormProps.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+
+export default function TimeClockFormProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer>
+        <DemoItem label="disabled">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} disabled />
+        </DemoItem>
+        <DemoItem label="readOnly">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} readOnly />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/time-clock/TimeClockFormProps.tsx.preview

@@ -0,0 +1,6 @@
+<DemoItem label="disabled">
+  <TimeClock defaultValue={dayjs('2022-04-07T15:30')} disabled />
+</DemoItem>
+<DemoItem label="readOnly">
+  <TimeClock defaultValue={dayjs('2022-04-07T15:30')} readOnly />
+</DemoItem>

docs/data/date-pickers/time-clock/TimeClockValue.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+
+export default function TimeClockValue() {
+  const [value, setValue] = React.useState(dayjs('2022-04-07T15:30'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer>
+        <DemoItem label="Uncontrolled clock">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} />
+        </DemoItem>
+        <DemoItem label="Controlled clock">
+          <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/time-clock/TimeClockValue.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+
+export default function TimeClockValue() {
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07T15:30'));
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer>
+        <DemoItem label="Uncontrolled clock">
+          <TimeClock defaultValue={dayjs('2022-04-07T15:30')} />
+        </DemoItem>
+        <DemoItem label="Controlled clock">
+          <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/time-clock/TimeClockValue.tsx.preview

@@ -0,0 +1,6 @@
+<DemoItem label="Uncontrolled clock">
+  <TimeClock defaultValue={dayjs('2022-04-07T15:30')} />
+</DemoItem>
+<DemoItem label="Controlled clock">
+  <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
+</DemoItem>