Update SUIR and react-popper

Author: ThiefMaster

indico/modules/rb/client/js/components/App.jsx

@@ -10,8 +10,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Overridable from 'react-overridable';
 import {connect} from 'react-redux';
+import MediaQuery from 'react-responsive';
 import {Link, Redirect, Route, Switch} from 'react-router-dom';
-import {Dimmer, Header, Icon, Loader, Responsive, Segment, Sidebar} from 'semantic-ui-react';
+import {Dimmer, Header, Icon, Loader, Segment, Sidebar} from 'semantic-ui-react';
 
 import {Translate} from 'indico/react/i18n';
 import {ConditionalRoute} from 'indico/react/util';
@@ -136,9 +137,9 @@ class App extends React.Component {
               <h1>
                 <Link to="/" onClick={() => resetPageState('bookRoom')}>
                   <Icon name={iconName} />
-                  <Responsive as="span" minWidth={500}>
+                  <MediaQuery as="span" minWidth={500}>
                     {title}
-                  </Responsive>
+                  </MediaQuery>
                 </Link>
               </h1>
             </div>

indico/web/client/js/react/components/principals/PermissionTree.jsx

@@ -38,14 +38,10 @@ const PermissionTree = ({tree, permissionMap, exclude, hide, disabled, onSelect}
                 trigger={triggerFactory(id, itemDisabled)}
                 content={description}
                 position="right center"
-                popperModifiers={{
-                  hide: {
-                    enabled: false,
-                  },
-                  preventOverflow: {
-                    enabled: false,
-                  },
-                }}
+                popperModifiers={[
+                  {name: 'hide', enabled: false},
+                  {name: 'preventOverflow', enabled: false},
+                ]}
                 inverted
               />
             </div>

indico/web/client/js/react/components/principals/PrincipalPermissions.jsx

@@ -66,14 +66,10 @@ const PrincipalPermissions = ({
         <Popup
           key={permission}
           position="right center"
-          popperModifiers={{
-            hide: {
-              enabled: false,
-            },
-            preventOverflow: {
-              enabled: false,
-            },
-          }}
+          popperModifiers={[
+            {name: 'hide', enabled: false},
+            {name: 'preventOverflow', enabled: false},
+          ]}
           trigger={
             <Label as="div" size="tiny" color={permissionMap[permission].color}>
               {permissionMap[permission].title}

package-lock.json

@@ -66,7 +66,7 @@
     "react-markdown": "^5.0.3",
     "react-modal": "^3.12.1",
     "react-overridable": "^0.0.3",
-    "react-popper": "^1.3.7",
+    "react-popper": "^2.2.4",
     "react-redux": "^7.2.2",
     "react-responsive": "^8.1.1",
     "react-router": "^5.2.0",
@@ -79,7 +79,7 @@
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "selectize": "^0.12.6",
-    "semantic-ui-react": "^1.3.1",
+    "semantic-ui-react": "^2.0.1",
     "shortid": "^2.2.16",
     "slugify": "^1.4.6",
     "tablesorter": "^2.31.3",