Remove keycode in favour of event.key (mui#859)

* Remove keycode in favour of event.key

Ref https://twitter.com/olivtassinari/status/1084819202412818432

We can already see size improvement (which will be visible for end user
only after material-ui upgrade) in 1.5kB.

* Fix test

lib/.size-snapshot.json

@@ -1,26 +1,26 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-    "bundled": 105990,
-    "minified": 61649,
-    "gzipped": 14542,
+    "bundled": 105952,
+    "minified": 61625,
+    "gzipped": 14531,
     "treeshaked": {
       "rollup": {
-        "code": 48352,
-        "import_statements": 1317
+        "code": 48350,
+        "import_statements": 1294
       },
       "webpack": {
-        "code": 55348
+        "code": 55301
       }
     }
   },
   "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 219234,
-    "minified": 94953,
-    "gzipped": 25382
+    "bundled": 214636,
+    "minified": 93497,
+    "gzipped": 24654
   },
   "build/dist/material-ui-pickers.umd.min.js": {
-    "bundled": 199462,
-    "minified": 89267,
-    "gzipped": 24165
+    "bundled": 194864,
+    "minified": 87812,
+    "gzipped": 23434
   }
 }

lib/package.json

@@ -41,7 +41,6 @@
   "dependencies": {
     "@types/react-text-mask": "^5.4.3",
     "clsx": "^1.0.1",
-    "keycode": "^2.2.0",
     "react-event-listener": "^0.6.5",
     "react-text-mask": "=5.4.1",
     "react-transition-group": "^2.5.2",

lib/src/DatePicker/components/Calendar.tsx

@@ -1,5 +1,4 @@
 import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
-import keycode from 'keycode';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import EventListener from 'react-event-listener';
@@ -156,25 +155,25 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
   public handleKeyDown = (event: KeyboardEvent) => {
     const { theme, date, utils } = this.props;
 
-    switch (keycode(event)) {
-      case 'up':
+    switch (event.key) {
+      case 'ArrowUp':
         this.moveToDay(utils.addDays(date, -7));
         break;
-      case 'down':
+      case 'ArrowDown':
         this.moveToDay(utils.addDays(date, 7));
         break;
-      case 'left':
+      case 'ArrowLeft':
         theme.direction === 'ltr'
           ? this.moveToDay(utils.addDays(date, -1))
           : this.moveToDay(utils.addDays(date, 1));
         break;
-      case 'right':
+      case 'ArrowRight':
         theme.direction === 'ltr'
           ? this.moveToDay(utils.addDays(date, 1))
           : this.moveToDay(utils.addDays(date, -1));
         break;
       default:
-        // if keycode is not handled, stop execution
+        // if key is not handled, stop execution
         return;
     }
 

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

@@ -70,7 +70,7 @@ describe('e2e - DateTimePickerModal', () => {
     }
 
     onKeyDown({
-      keyCode: 13, // enter
+      key: 'Enter',
       preventDefault: jest.fn(),
     } as any);
 

lib/src/wrappers/InlineWrapper.tsx

@@ -1,7 +1,6 @@
 import { Omit } from '@material-ui/core';
 import Popover, { PopoverProps as PopoverPropsType } from '@material-ui/core/Popover';
 import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
-import keycode from 'keycode';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import EventListener from 'react-event-listener';
@@ -78,15 +77,15 @@ export class InlineWrapper extends React.PureComponent<
     }
   };
 
-  public handleKeyDown = (event: Event) => {
-    switch (keycode(event)) {
-      case 'enter': {
+  public handleKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'Enter': {
         this.props.handleAccept();
         this.close();
         break;
       }
       default:
-        // if keycode is not handled, stop execution
+        // if key is not handled, stop execution
         return;
     }
 

lib/src/wrappers/ModalWrapper.tsx

@@ -1,6 +1,5 @@
 import { Omit } from '@material-ui/core';
 import { DialogProps as DialogPropsType } from '@material-ui/core/Dialog';
-import keycode from 'keycode';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import DateTextField, { DateTextFieldProps } from '../_shared/DateTextField';
@@ -78,12 +77,12 @@ export default class ModalWrapper extends React.PureComponent<ModalWrapperProps>
   };
 
   public handleKeyDown = (event: KeyboardEvent) => {
-    switch (keycode(event)) {
-      case 'enter':
+    switch (event.key) {
+      case 'Enter':
         this.handleAccept();
         break;
       default:
-        // if keycode is not handled, stop execution
+        // if key is not handled, stop execution
         return;
     }