Migrate to Popper from Popover

.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:

docs/pages/demo/daterangepicker/index.mdx

@@ -20,7 +20,7 @@ import * as CustomRangeInputs from './CustomRangeInputs.example';
 > The date range picker will be made available in the coming months for production use as part of a paid extension to the community edition (MIT license) of Material-UI.
 > This paid extension will include advanced components (rich data grid, date range picker, tree view drag & drop, etc.). Pricing for early access will start with an affordable plan.
 
-The [date range pickers](https://material.io/components/pickers/) let users select a range of dates. 
+The [date range pickers](https://material.io/components/pickers/) let users select a range of dates.
 
 <Ad />
 

e2e/component/KeyboardNavigation.spec.tsx

@@ -5,6 +5,7 @@ import { DesktopDatePicker, MobileDatePicker, TimePicker } from '@material-ui/pi
 describe('Keyboard navigation', () => {
   context('DatePicker', () => {
     function testCalendarKeyboardNavigation() {
+      console.log(document.activeElement);
       cy.get('body').type('{rightarrow}');
       cy.findByLabelText('Oct 8, 2017').should('be.focused');
 
@@ -46,8 +47,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 +73,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';