Migrate to Popper from Popover (#1850)

* Update deps

* Migrate all pickers to popovers

* Fix build errors

* Update tests

* Remove component related tests

* Remove duplicated useGlobalKeydown for tooltip popover hooks

* Fix eslint

* Restore focus back to the last activeElement on close

* Remove unused props

* Do not call `.focus()` while popper is not completely open

* Fix build issues and tests

* Add description comment for .skip test

* Fix review points

* Fix PR review points

* Rename mui component name of PickerPopper

* Remove unused global

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

* Back to MuiPickersPopper name

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

* Use role to query date range picker fields

* Fix build errors

* Use popper onCreate callback to allow autofocus in calendar

* Update lib/src/_shared/PickerPopper.tsx

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

* Update lib/src/__tests__/DatePicker.test.tsx

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

* Use inputRef as acnhorEl for Popper

* Refer PR review points

* Update lib/src/__tests__/DatePicker.test.tsx

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

* Skip keyboard test on CI

* Fix import from '@mateiral-ui/core'

* Fix 'act' testing lib crashes

* Update e2e/component/KeyboardNavigation.spec.tsx

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

.circleci/config.yml

@@ -85,7 +85,7 @@ jobs:
       - attach_workspace:
           at: .
       # --runInBand required to not get out of memory @see https://discuss.circleci.com/t/memory-problems-with-jest-and-workers/10297
-      - run: cd lib && yarn test:<<parameters.lib>> -- -- --runInBand
+      - run: cd lib && yarn test:<<parameters.lib>> --runInBand
       - steps: << parameters.after-tests >>
 
   cypress_tests:

e2e/component/KeyboardNavigation.spec.tsx

@@ -46,8 +46,6 @@ describe('Keyboard navigation', () => {
       // @see https://github.com/cypress-io/cypress/issues/299
       cy.findByLabelText('calendar view is open, switch to year view').click();
 
-      // cy.contains('button', '2017').should('be.focused');
-
       cy.get('body').type('{downarrow}{leftarrow}{rightarrow}{rightarrow}');
       cy.focused().type(' ');
 
@@ -74,6 +72,7 @@ describe('Keyboard navigation', () => {
     });
   });
 
+  // TODO fix on CI
   context.skip('TimePicker', () => {
     it('Allows keyboard control on hours view', () => {
       mountPickerWithState(props => <TimePicker {...props} open />);

lib/.size-snapshot.json

@@ -1,26 +1,26 @@
 {
   "material-ui-pickers.esm.js": {
-    "bundled": 199554,
-    "minified": 106790,
-    "gzipped": 27475,
+    "bundled": 202219,
+    "minified": 107788,
+    "gzipped": 27928,
     "treeshaked": {
       "rollup": {
-        "code": 86534,
-        "import_statements": 2123
+        "code": 87268,
+        "import_statements": 2098
       },
       "webpack": {
-        "code": 96137
+        "code": 97011
       }
     }
   },
   "material-ui-pickers.umd.js": {
-    "bundled": 314914,
-    "minified": 121594,
-    "gzipped": 34397
+    "bundled": 317509,
+    "minified": 122269,
+    "gzipped": 34637
   },
   "material-ui-pickers.umd.min.js": {
-    "bundled": 269976,
-    "minified": 111766,
-    "gzipped": 31581
+    "bundled": 272605,
+    "minified": 112449,
+    "gzipped": 31811
   }
 }

lib/src/CalendarSkeleton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Skeleton from '@material-ui/lab/Skeleton';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { DAY_SIZE, DAY_MARGIN } from './constants/dimensions';
 import { withDefaultProps } from './_shared/withDefaultProps';
 import { useStyles as useCalendarStyles } from './views/Calendar/Calendar';