update material ui from v4 to v5

bigbluebutton-html5/imports/ui/components/common/checkbox/styles.js

@@ -1,23 +1,23 @@
 import { colorText, colorSuccess } from '/imports/ui/stylesheets/styled-components/palette';
-import BaseCheckbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { withStyles } from '@material-ui/core/styles';
+import BaseCheckbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { styled } from '@mui/system';
 
-const Checkbox = withStyles({
-  checked: {
+const Checkbox = styled(BaseCheckbox)(() => ({
+  '&.Mui-checked': {
     color: `${colorSuccess} !important`,
   },
-})(BaseCheckbox);
+}));
 
-const Label = withStyles({
-  label: {
+const Label = styled(FormControlLabel)(() => ({
+  '& .MuiFormControlLabel-label': {
     fontFamily: 'inherit !important',
     color: `${colorText} !important`,
   },
-  disabled: {
+  '&.Mui-disabled': {
     cursor: 'not-allowed !important',
   },
-})(FormControlLabel);
+}));
 
 export default {
   Checkbox,

bigbluebutton-html5/imports/ui/components/common/menu/component.jsx

@@ -2,14 +2,12 @@ import React from "react";
 import PropTypes from "prop-types";
 import { defineMessages, injectIntl } from "react-intl";
 
-import Menu from "@material-ui/core/Menu";
-import { Divider } from "@material-ui/core";
+import Menu from "@mui/material/Menu";
+import { Divider } from "@mui/material";
 import Icon from "/imports/ui/components/common/icon/component";
 import { SMALL_VIEWPORT_BREAKPOINT } from '/imports/ui/components/layout/enums';
 import KEY_CODES from '/imports/utils/keyCodes';
 
-import { ENTER } from "/imports/utils/keyCodes";
-
 import Styled from './styles';
 
 const intlMessages = defineMessages({
@@ -150,7 +148,7 @@ class BBBMenu extends React.Component {
 
   render() {
     const { anchorEl } = this.state;
-    const { trigger, intl, customStyles, dataTest, opts, accessKey } = this.props;
+    const { trigger, intl, customStyles, dataTest, opts, accessKey, open } = this.props;
     const actionsItems = this.makeMenuItems();
 
     let menuStyles = { zIndex: 9999 };
@@ -172,11 +170,13 @@ class BBBMenu extends React.Component {
           }}
           onKeyPress={(e) => {
             e.persist();
-            if (e.which !== ENTER) return null;
+            if (e.which !== KEY_CODES.ENTER) return null;
             this.handleClick(e);
           }}
           accessKey={accessKey}
           ref={(ref) => this.anchorElRef = ref}
+          role="button"
+          tabIndex={0}
         >
           {trigger}
         </div>
@@ -206,8 +206,6 @@ class BBBMenu extends React.Component {
   }
 }
 
-export default injectIntl(BBBMenu);
-
 BBBMenu.defaultProps = {
   opts: {
     id: "default-dropdown-menu",
@@ -215,12 +213,13 @@ BBBMenu.defaultProps = {
     keepMounted: true,
     transitionDuration: 0,
     elevation: 3,
-    getContentAnchorEl: null,
+    getcontentanchorel: null,
     fullwidth: "true",
     anchorOrigin: { vertical: 'top', horizontal: 'right' },
     transformorigin: { vertical: 'top', horizontal: 'right' },
   },
   onCloseCallback: () => { },
+  dataTest: '',
 };
 
 BBBMenu.propTypes = {
@@ -245,4 +244,10 @@ BBBMenu.propTypes = {
 
   onCloseCallback: PropTypes.func,
   dataTest: PropTypes.string,
+  open: PropTypes.bool,
+  customStyles: PropTypes.object,
+  opts: PropTypes.object,
+  accessKey: PropTypes.string,
 };
+
+export default injectIntl(BBBMenu);

bigbluebutton-html5/imports/ui/components/common/menu/styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import Button from "/imports/ui/components/common/button/component";
 import Icon from '/imports/ui/components/common/icon/component';
-import MenuItem from "@material-ui/core/MenuItem";
+import MenuItem from "@mui/material/MenuItem";
 import { colorWhite, colorPrimary } from '/imports/ui/stylesheets/styled-components/palette';
 import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography';
 import { mediumUp } from '/imports/ui/stylesheets/styled-components/breakpoints';

bigbluebutton-html5/imports/ui/components/common/radio/styles.js

@@ -1,25 +1,25 @@
 import styled from 'styled-components';
 import { colorText, colorSuccess } from '/imports/ui/stylesheets/styled-components/palette';
 import Icon from '/imports/ui/components/common/icon/component';
-import BaseRadio from '@material-ui/core/Radio';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { withStyles } from '@material-ui/core/styles';
+import BaseRadio from '@mui/material/Radio';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { styled as muiStyled } from '@mui/system';
 
-const Radio = withStyles({
-  checked: {
+const Radio = muiStyled(BaseRadio)(() => ({
+  '&.Mui-checked': {
     color: `${colorSuccess} !important`,
   },
-})(BaseRadio);
+}));
 
-const Label = withStyles({
-  label: {
+const Label = muiStyled(FormControlLabel)(() => ({
+  '& .MuiFormControlLabel-label': {
     fontFamily: 'inherit !important',
     color: `${colorText} !important`,
   },
-  disabled: {
+  '&.Mui-disabled': {
     cursor: 'not-allowed !important',
   },
-})(FormControlLabel);
+}));
 
 const RadioIcon = styled(Icon)``;
 

bigbluebutton-html5/package.json

@@ -31,9 +31,12 @@
   "dependencies": {
     "@babel/runtime": "^7.17.9",
     "@browser-bunyan/server-stream": "^1.8.0",
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
     "@jitsi/sdp-interop": "0.1.14",
-    "@material-ui/core": "^4.12.4",
     "@mconf/bbb-diff": "^1.2.0",
+    "@mui/material": "^5.12.2",
+    "@mui/system": "^5.12.3",
     "@tldraw/tldraw": "^1.27.0",
     "autoprefixer": "^10.4.4",
     "axios": "^0.21.3",