update mui and conversations packages

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:12-browsers
+      - image: circleci/node:16-browsers
     working_directory: ~/twilio-video-react-app
 
     steps:

package.json

@@ -4,10 +4,10 @@
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
-    "@material-ui/core": "^4.9.1",
-    "@material-ui/icons": "^4.9.1",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
     "@twilio-labs/plugin-rtc": "^0.8.2",
-    "@twilio/conversations": "^1.1.0",
+    "@twilio/conversations": "^1.2.3",
     "@types/d3-timer": "^1.0.9",
     "@types/dotenv": "^8.2.0",
     "@types/express": "^4.17.11",

src/components/ChatWindow/ChatInput/ChatInput.tsx

@@ -143,8 +143,8 @@ export default function ChatInput({ conversation, isChatWindowOpen }: ChatInputP
         component does not work well in Firefox. See: https://github.com/twilio/twilio-video-app-react/issues/498
         */}
         <TextareaAutosize
-          rowsMin={1}
-          rowsMax={3}
+          minRows={1}
+          maxRows={3}
           className={classes.textArea}
           aria-label="chat input"
           placeholder="Write a message..."
@@ -158,7 +158,7 @@ export default function ChatInput({ conversation, isChatWindowOpen }: ChatInputP
         />
       </div>
 
-      <Grid container alignItems="flex-end" justify="flex-end" wrap="nowrap">
+      <Grid container alignItems="flex-end" justifyContent="flex-end" wrap="nowrap">
         {/* Since the file input element is invisible, we can hardcode an empty string as its value.
         This allows users to upload the same file multiple times. */}
         <input

src/components/ChatWindow/MessageList/__snapshots__/MessageList.test.tsx.snap

@@ -155,10 +155,10 @@ exports[`the messageList component should render correctly 1`] = `
           </div>
         </div>
         <div
-          class="makeStyles-messageContainer-45"
+          class="makeStyles-messageContainer-9"
         >
           <div
-            class="makeStyles-iconContainer-46"
+            class="makeStyles-iconContainer-10"
           >
             <svg
               fill="none"
@@ -212,15 +212,15 @@ exports[`the messageList component should render correctly 1`] = `
             </svg>
           </div>
           <div
-            class="makeStyles-mediaInfo-47"
+            class="makeStyles-mediaInfo-11"
           >
             <p
-              class="makeStyles-filename-48"
+              class="makeStyles-filename-12"
             >
               test1.txt
             </p>
             <p
-              class="makeStyles-size-49"
+              class="makeStyles-size-13"
             >
               120.56 KB
                - Click to open
@@ -243,7 +243,6 @@ exports[`the messageList component should render correctly 1`] = `
                 aria-hidden="true"
                 class="MuiSvgIcon-root"
                 focusable="false"
-                role="presentation"
                 viewBox="0 0 24 24"
               >
                 <path

src/components/DeviceSelectionDialog/AudioInputList/AudioInputList.tsx

@@ -25,7 +25,7 @@ export default function AudioInputList() {
       <Typography variant="subtitle2" gutterBottom>
         Audio Input
       </Typography>
-      <Grid container alignItems="center" justify="space-between">
+      <Grid container alignItems="center" justifyContent="space-between">
         <div className="inputSelect">
           {audioInputDevices.length > 1 ? (
             <FormControl fullWidth>

src/components/LoginPage/LoginPage.tsx

@@ -105,7 +105,7 @@ export default function LoginPage() {
             Enter passcode to join a room
           </Typography>
           <form onSubmit={handleSubmit}>
-            <Grid container justify="space-between">
+            <Grid container justifyContent="space-between">
               <div className={classes.passcodeContainer}>
                 <InputLabel shrink htmlFor="input-passcode">
                   Passcode
@@ -127,7 +127,7 @@ export default function LoginPage() {
                 </div>
               </div>
             </Grid>
-            <Grid container justify="flex-end">
+            <Grid container justifyContent="flex-end">
               <Button
                 variant="contained"
                 color="primary"

src/components/MenuBar/MenuBar.tsx

@@ -72,20 +72,20 @@ export default function MenuBar() {
   return (
     <>
       {isSharingScreen && (
-        <Grid container justify="center" alignItems="center" className={classes.screenShareBanner}>
+        <Grid container justifyContent="center" alignItems="center" className={classes.screenShareBanner}>
           <Typography variant="h6">You are sharing your screen</Typography>
           <Button onClick={() => toggleScreenShare()}>Stop Sharing</Button>
         </Grid>
       )}
       <footer className={classes.container}>
-        <Grid container justify="space-around" alignItems="center">
+        <Grid container justifyContent="space-around" alignItems="center">
           <Hidden smDown>
             <Grid style={{ flex: 1 }}>
               <Typography variant="body1">{room!.name}</Typography>
             </Grid>
           </Hidden>
           <Grid item>
-            <Grid container justify="center">
+            <Grid container justifyContent="center">
               <ToggleAudioButton disabled={isReconnecting} />
               <ToggleVideoButton disabled={isReconnecting} />
               {!isSharingScreen && !isMobile && <ToggleScreenShareButton disabled={isReconnecting} />}
@@ -94,7 +94,7 @@ export default function MenuBar() {
           </Grid>
           <Hidden smDown>
             <Grid style={{ flex: 1 }}>
-              <Grid container justify="flex-end">
+              <Grid container justifyContent="flex-end">
                 <Menu />
                 <EndCallButton />
               </Grid>

src/components/MobileTopMenuBar/MobileTopMenuBar.tsx

@@ -35,7 +35,7 @@ export default function MobileTopMenuBar() {
   const { room } = useVideoContext();
 
   return (
-    <Grid container alignItems="center" justify="space-between" className={classes.container}>
+    <Grid container alignItems="center" justifyContent="space-between" className={classes.container}>
       <Typography variant="subtitle1">{room!.name}</Typography>
       <div>
         <EndCallButton className={classes.endCallButton} />

src/components/PreJoinScreens/DeviceSelectionScreen/DeviceSelectionScreen.tsx

@@ -74,7 +74,7 @@ export default function DeviceSelectionScreen({ name, roomName, setStep }: Devic
 
   if (isFetching || isConnecting) {
     return (
-      <Grid container justify="center" alignItems="center" direction="column" style={{ height: '100%' }}>
+      <Grid container justifyContent="center" alignItems="center" direction="column" style={{ height: '100%' }}>
         <div>
           <CircularProgress variant="indeterminate" />
         </div>
@@ -93,7 +93,7 @@ export default function DeviceSelectionScreen({ name, roomName, setStep }: Devic
         Join {roomName}
       </Typography>
 
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item md={7} sm={12} xs={12}>
           <div className={classes.localPreviewContainer}>
             <LocalVideoPreview identity={name} />
@@ -107,7 +107,7 @@ export default function DeviceSelectionScreen({ name, roomName, setStep }: Devic
           </div>
         </Grid>
         <Grid item md={5} sm={12} xs={12}>
-          <Grid container direction="column" justify="space-between" style={{ height: '100%' }}>
+          <Grid container direction="column" justifyContent="space-between" style={{ height: '100%' }}>
             <div>
               <Hidden smDown>
                 <ToggleAudioButton className={classes.deviceButton} disabled={disableButtons} />

src/components/PreJoinScreens/RoomNameScreen/RoomNameScreen.tsx

@@ -91,7 +91,7 @@ export default function RoomNameScreen({ name, roomName, setName, setRoomName, h
             />
           </div>
         </div>
-        <Grid container justify="flex-end">
+        <Grid container justifyContent="flex-end">
           <Button
             variant="contained"
             type="submit"

src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap

@@ -47,7 +47,7 @@ exports[`the Snackbar component should render correctly with "error" variant 1`]
         onClick={[Function]}
         size="small"
       >
-        <CloseIcon
+        <Memo([object Object])
           fontSize="small"
         />
       </WithStyles(ForwardRef(IconButton))>
@@ -103,7 +103,7 @@ exports[`the Snackbar component should render correctly with "info" variant 1`]
         onClick={[Function]}
         size="small"
       >
-        <CloseIcon
+        <Memo([object Object])
           fontSize="small"
         />
       </WithStyles(ForwardRef(IconButton))>
@@ -159,7 +159,7 @@ exports[`the Snackbar component should render correctly with "warning" variant 1
         onClick={[Function]}
         size="small"
       >
-        <CloseIcon
+        <Memo([object Object])
           fontSize="small"
         />
       </WithStyles(ForwardRef(IconButton))>

src/components/UnsupportedBrowserWarning/UnsupportedBrowserWarning.tsx

@@ -21,7 +21,7 @@ export default function UnsupportedBrowserWarning({ children }: { children: Reac
   if (!Video.isSupported) {
     return (
       <Container>
-        <Grid container justify="center" className={classes.container}>
+        <Grid container justifyContent="center" className={classes.container}>
           <Grid item xs={12} sm={6}>
             <Paper className={classes.paper}>
               <Typography variant="h4" className={classes.heading}>

src/components/UnsupportedBrowserWarning/__snapshots__/UnsupportedBrowserWarning.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`the UnsupportedBrowserWarning component should render correctly when is
   <WithStyles(ForwardRef(Grid))
     className="makeStyles-container-1"
     container={true}
-    justify="center"
+    justifyContent="center"
   >
     <WithStyles(ForwardRef(Grid))
       item={true}

src/theme.ts

@@ -1,6 +1,6 @@
-import { createMuiTheme } from '@material-ui/core';
+import { createTheme } from '@material-ui/core';
 
-declare module '@material-ui/core/styles/createMuiTheme' {
+declare module '@material-ui/core/styles/createTheme' {
   interface Theme {
     sidebarWidth: number;
     sidebarMobileHeight: number;
@@ -27,9 +27,9 @@ declare module '@material-ui/core/styles/createMuiTheme' {
   }
 }
 
-const defaultTheme = createMuiTheme();
+const defaultTheme = createTheme();
 
-export default createMuiTheme({
+export default createTheme({
   overrides: {
     MuiCssBaseline: {
       '@global': {