Merge commit 'c862d2c1' into annotation-on-video

__tests__/src/components/WindowTopMenu.test.js

@@ -42,8 +42,10 @@ describe('WindowTopMenu', () => {
     expect(wrapper.find(Menu).first().props().anchorEl).toBe(null);
     expect(wrapper.find(Menu).first().props().open).toBe(false);
     expect(wrapper.find(Menu).first().props().onClose).toBe(handleClose);
-    expect(wrapper.find(Menu).first().props().onEntering).toBe(toggleDraggingEnabled);
-    expect(wrapper.find(Menu).first().props().onExit).toBe(toggleDraggingEnabled);
+    expect(wrapper.find(Menu).first().props().TransitionProps.onEntering)
+      .toBe(toggleDraggingEnabled);
+    expect(wrapper.find(Menu).first().props().TransitionProps.onExit)
+      .toBe(toggleDraggingEnabled);
   });
 
   it('passses correct props to <Menu/> when achor element given', () => {
@@ -54,7 +56,9 @@ describe('WindowTopMenu', () => {
     expect(wrapper.find(Menu).first().props().anchorEl).toBe(anchorEl);
     expect(wrapper.find(Menu).first().props().open).toBe(true);
     expect(wrapper.find(Menu).first().props().onClose).toBe(handleClose);
-    expect(wrapper.find(Menu).first().props().onEntering).toBe(toggleDraggingEnabled);
-    expect(wrapper.find(Menu).first().props().onExit).toBe(toggleDraggingEnabled);
+    expect(wrapper.find(Menu).first().props().TransitionProps.onEntering)
+      .toBe(toggleDraggingEnabled);
+    expect(wrapper.find(Menu).first().props().TransitionProps.onExit)
+      .toBe(toggleDraggingEnabled);
   });
 });

__tests__/src/components/WorkspaceAddButton.test.js

@@ -65,7 +65,7 @@ describe('WorkspaceAddButton', () => {
       const wrapper = createWrapper({ useExtendedFab: false });
 
       expect(extendedWrapper.find(Fab).props().variant).toBe('extended');
-      expect(wrapper.find(Fab).props().variant).toEqual('round');
+      expect(wrapper.find(Fab).props().variant).toEqual('circular');
     });
   });
 });

package.json

@@ -33,7 +33,7 @@
   ],
   "repository": "https://github.com/ProjectMirador/mirador",
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
+    "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.53",
     "@researchgate/react-intersection-observer": "^1.0.0",

src/components/AppProviders.js

@@ -4,7 +4,7 @@ import Fullscreen from 'react-full-screen';
 import { I18nextProvider } from 'react-i18next';
 import { LiveAnnouncer } from 'react-aria-live';
 import {
-  ThemeProvider, StylesProvider, createMuiTheme, jssPreset, createGenerateClassName,
+  ThemeProvider, StylesProvider, createTheme, jssPreset, createGenerateClassName,
 } from '@material-ui/core/styles';
 import { DndContext, DndProvider } from 'react-dnd';
 import MultiBackend from 'react-dnd-multi-backend';
@@ -100,7 +100,7 @@ export class AppProviders extends Component {
         <I18nextProvider i18n={this.i18n}>
           <LiveAnnouncer>
             <ThemeProvider
-              theme={createMuiTheme(theme)}
+              theme={createTheme(theme)}
             >
               <StylesProvider
                 jss={create({ plugins: [...jssPreset().plugins, rtl()] })}

src/components/ManifestListItemError.js

@@ -23,7 +23,7 @@ export class ManifestListItemError extends Component {
         <Grid container>
           <Grid container item xs={12} sm={6}>
             <Grid item xs={4} sm={3}>
-              <Grid container justify="center">
+              <Grid container justifyContent="center">
                 <ErrorIcon className={classes.errorIcon} />
               </Grid>
             </Grid>
@@ -35,7 +35,7 @@ export class ManifestListItemError extends Component {
         </Grid>
 
         <Grid container>
-          <Grid container item xs={12} sm={6} justify="flex-end">
+          <Grid container item xs={12} sm={6} justifyContent="flex-end">
             <Grid item>
               <Button onClick={() => { onDismissClick(manifestId); }}>
                 {t('dismiss')}

src/components/SelectCollection.js

@@ -30,7 +30,7 @@ export class SelectCollection extends Component {
       t,
     } = this.props;
     return (
-      <Grid container justify="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center">
         <Grid container direction="column" alignItems="center">
           <Typography variant="h4" paragraph>
             <em>

src/components/WindowList.js

@@ -54,7 +54,9 @@ export class WindowList extends Component {
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
         onClose={handleClose}
-        onEntering={WindowList.focus2ndListIitem}
+        TransitionProps={{
+          onEntering: WindowList.focus2ndListIitem,
+        }}
       >
         <ListSubheader role="presentation" selected={false} disabled tabIndex="-1">
           {t('openWindows')}

src/components/WindowTopMenu.js

@@ -47,8 +47,10 @@ export class WindowTopMenu extends Component {
         getContentAnchorEl={null}
         open={Boolean(anchorEl)}
         onClose={handleClose}
-        onEntering={toggleDraggingEnabled}
-        onExit={toggleDraggingEnabled}
+        TransitionProps={{
+          onEntering: toggleDraggingEnabled,
+          onExit: toggleDraggingEnabled,
+        }}
         orientation="horizontal"
       >
         <WindowViewSettings windowId={windowId} handleClose={handleClose} />

src/components/WorkspaceAddButton.js

@@ -30,7 +30,7 @@ export class WorkspaceAddButton extends Component {
           }
           className={classes.fab}
           classes={{ primary: classes.fabPrimary, secondary: classes.fabSecondary }}
-          variant={useExtendedFab ? 'extended' : 'round'}
+          variant={useExtendedFab ? 'extended' : 'circular'}
           onClick={() => { setWorkspaceAddVisibility(!isWorkspaceAddVisible); }}
         >
           {

src/containers/SidebarIndexTableOfContents.js

@@ -2,7 +2,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import { withPlugins } from '../extend/withPlugins';
 import { SidebarIndexTableOfContents } from '../components/SidebarIndexTableOfContents';
 import {
@@ -65,7 +65,7 @@ const styles = theme => ({
     },
   },
   visibleNode: {
-    backgroundColor: fade(theme.palette.highlights.primary, 0.35),
+    backgroundColor: alpha(theme.palette.highlights.primary, 0.35),
     display: 'inline',
   },
 });

src/containers/WindowAuthenticationBar.js

 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import { withPlugins } from '../extend/withPlugins';
 import { WindowAuthenticationBar } from '../components/WindowAuthenticationBar';
 
@@ -13,7 +13,7 @@ import { WindowAuthenticationBar } from '../components/WindowAuthenticationBar';
 const styles = theme => ({
   buttonInvert: {
     '&:hover': {
-      backgroundColor: fade(
+      backgroundColor: alpha(
         theme.palette.secondary.contrastText, 1 - theme.palette.action.hoverOpacity,
       ),
     },

src/containers/WindowCanvasNavigationControls.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withSize } from 'react-sizeme';
 import { withStyles } from '@material-ui/core';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import { withPlugins } from '../extend/withPlugins';
 import { getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls';
@@ -28,7 +28,7 @@ const styles = theme => ({
     flexDirection: 'column',
   },
   controls: {
-    backgroundColor: fade(theme.palette.background.paper, 0.5),
+    backgroundColor: alpha(theme.palette.background.paper, 0.5),
     bottom: 0,
     position: 'absolute',
     width: '100%',