Add ability to add seconds to DateTimePicker view

- Add seconds as an available view in DateTimePickerView
- Use DateTimePickerView type as the type for views and openTo
- Change typography variant depending on whether seconds are being displayed or not
- set number of grid elements depending on seconds view

docs/prop-types.json

@@ -2662,7 +2662,7 @@
       },
       "required": false,
       "type": {
-        "name": "(\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\")[]"
+        "name": "(\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\" | \"seconds\")[]"
       }
     },
     "openTo": {
@@ -2675,7 +2675,7 @@
       },
       "required": false,
       "type": {
-        "name": "\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\""
+        "name": "\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\" | \"seconds\""
       }
     },
     "hideTabs": {
@@ -3432,7 +3432,7 @@
       },
       "required": false,
       "type": {
-        "name": "(\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\")[]"
+        "name": "(\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\" | \"seconds\")[]"
       }
     },
     "openTo": {
@@ -3445,7 +3445,7 @@
       },
       "required": false,
       "type": {
-        "name": "\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\""
+        "name": "\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\" | \"seconds\""
       }
     },
     "hideTabs": {

lib/src/DateTimePicker/DateTimePicker.tsx

@@ -14,15 +14,15 @@ import {
   WithPureInputProps,
 } from '../Picker/makePickerWithState';
 
-export type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | 'minutes';
+export type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | 'minutes' | 'seconds';
 
 export type BaseDateTimePickerProps = BaseTimePickerProps & BaseDatePickerProps;
 
 export interface DateTimePickerViewsProps extends BaseDateTimePickerProps {
   /** Array of views to show */
-  views?: ('year' | 'date' | 'month' | 'hours' | 'minutes')[];
+  views?: ('year' | 'date' | 'month' | 'hours' | 'minutes' | 'seconds')[];
   /** First view to show in DatePicker */
-  openTo?: 'year' | 'date' | 'month' | 'hours' | 'minutes';
+  openTo?: 'year' | 'date' | 'month' | 'hours' | 'minutes' | 'seconds';
   /** To show tabs */
   hideTabs?: boolean;
   /** Date tab icon */

lib/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -9,6 +9,8 @@ import { DateTimePickerView } from './DateTimePicker';
 import { ToolbarComponentProps } from '../Picker/Picker';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useMeridiemMode } from '../TimePicker/TimePickerToolbar';
+import { arrayIncludes } from '../_helpers/utils';
+import { useMemo } from 'react';
 
 export const useStyles = makeStyles(
   _ => ({
@@ -34,6 +36,7 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = ({
   dateRangeIcon,
   timeIcon,
   onChange,
+  views,
 }) => {
   const utils = useUtils();
   const classes = useStyles();
@@ -42,6 +45,9 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = ({
   const theme = useTheme();
   const rtl = theme.direction === 'rtl';
 
+  const hasSeconds = useMemo(() => arrayIncludes(views, 'seconds'), [views]);
+  const timeTypographyText = hasSeconds ? 'h4' : 'h3';
+
   return (
     <>
       <PickerToolbar isLandscape={false} className={classes.toolbar}>
@@ -68,26 +74,39 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = ({
           <Grid
             item
             container
-            xs={6}
+            xs={hasSeconds ? 9 : 6}
             justify="center"
             alignItems="flex-end"
             direction={rtl ? 'row-reverse' : 'row'}
           >
             <ToolbarButton
-              variant="h3"
+              variant={timeTypographyText}
               onClick={() => setOpenView('hours')}
               selected={openView === 'hours'}
               label={utils.getHourText(date, ampm!)}
             />
 
-            <ToolbarText variant="h3" label=":" className={classes.separator} />
+            <ToolbarText variant={timeTypographyText} label=":" className={classes.separator} />
 
             <ToolbarButton
-              variant="h3"
+              variant={timeTypographyText}
               onClick={() => setOpenView('minutes')}
               selected={openView === 'minutes'}
               label={utils.getMinuteText(date)}
             />
+
+            {hasSeconds && (
+              <>
+                <ToolbarText variant={timeTypographyText} label=":" className={classes.separator} />
+
+                <ToolbarButton
+                  variant={timeTypographyText}
+                  onClick={() => setOpenView('seconds')}
+                  selected={openView === 'seconds'}
+                  label={utils.getSecondText(date)}
+                />
+              </>
+            )}
           </Grid>
 
           {ampm && (

lib/src/__tests__/e2e/DateTimePickerRoot.test.tsx

@@ -70,3 +70,33 @@ describe('e2e - DateTimePicker', () => {
     toHaveBeenCalledExceptMoment(onChangeMock, [utilsToUse.date('2018-01-01T12:00:00.000Z')]);
   });
 });
+
+describe('e2e - DateTimePicker with seconds', () => {
+  let component: ReactWrapper<DateTimePickerProps>;
+  const onChangeMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    component = mount(
+      <DateTimePicker
+        open
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+        onChange={onChangeMock}
+        openTo="hours"
+        leftArrowIcon="keyboard_arrow_left"
+        rightArrowIcon="keyboard_arrow_right"
+        dateRangeIcon="date_range"
+        timeIcon="access_time"
+        views={['year', 'month', 'date', 'hours', 'minutes', 'seconds']}
+      />
+    );
+  });
+
+  it('Should render minutes view', () => {
+    component
+      .find('ToolbarButton')
+      .at(4)
+      .simulate('click');
+    expect(component.find('TimePickerView').props().type).toBe('seconds');
+  });
+});