Update deps

.babelrc.js

@@ -5,7 +5,7 @@ module.exports = {
     [
       "babel-plugin-import",
       {
-        libraryName: "@material-ui/core",
+        libraryName: "@mui/material",
         libraryDirectory: "",
         camel2DashComponentName: false,
       },
@@ -14,7 +14,7 @@ module.exports = {
     [
       "babel-plugin-import",
       {
-        libraryName: "@material-ui/icons",
+        libraryName: "@mui/icons-material",
         libraryDirectory: "",
         camel2DashComponentName: false,
       },

package.json

@@ -7,8 +7,8 @@
     "@emotion/react": "^11.4",
     "@emotion/server": "^11.4",
     "@emotion/styled": "^11.3",
-    "@material-ui/core": "^5.0.0-beta.5",
-    "@material-ui/icons": "^5.0.0-beta.5",
+    "@mui/icons-material": "^5.0.0-rc.1",
+    "@mui/material": "^5.0.0-rc.1",
     "@vertexvis/api-client-node": "^0.14",
     "@vertexvis/viewer-react": "^0.10.2-canary.7",
     "lodash.debounce": "^4.0",
@@ -18,7 +18,7 @@
     "next-iron-session": "^4.2.0",
     "react": "^17.0",
     "react-dom": "^17.0",
-    "react-hook-form": "^7.14",
+    "react-hook-form": "^7.15",
     "react-hotkeys-hook": "^3.4",
     "swr": "^0.5"
   },
@@ -38,7 +38,7 @@
     "eslint-plugin-react": "^7",
     "eslint-plugin-react-hooks": "^4",
     "eslint-plugin-simple-import-sort": "^7.0",
-    "prettier": "^2.3",
+    "prettier": "^2.4",
     "tslib": "^2.3",
     "typescript": "^4"
   },

src/components/file/CreateFileDialog.tsx

@@ -10,8 +10,8 @@ import {
   FormControlLabel,
   LinearProgress,
   TextField,
-} from "@material-ui/core";
-import { CloudUploadOutlined } from "@material-ui/icons";
+} from "@mui/material";
+import { CloudUploadOutlined } from "@mui/icons-material";
 import { CreateFileRequestDataAttributes } from "@vertexvis/api-client-node";
 import { useRouter } from "next/router";
 import React from "react";

src/components/file/FileTable.tsx

@@ -12,8 +12,8 @@ import {
   TablePagination,
   TableRow,
   TextField,
-} from "@material-ui/core";
-import { Add } from "@material-ui/icons";
+} from "@mui/material";
+import { Add } from "@mui/icons-material";
 import { Cursors } from "@vertexvis/api-client-node";
 import debounce from "lodash.debounce";
 import React from "react";

src/components/part/CreatePartDialog.tsx

@@ -12,7 +12,7 @@ import {
   RadioGroup,
   TextField,
   Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 import React from "react";
 import useSWR from "swr";
 

src/components/part/PartRow.tsx

@@ -9,8 +9,8 @@ import {
   TableHead,
   TableRow,
   Typography,
-} from "@material-ui/core";
-import { Add, KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
+} from "@mui/material";
+import { Add, KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
 import React from "react";
 
 import { toLocaleString } from "../../lib/dates";

src/components/part/PartTable.tsx

@@ -11,8 +11,8 @@ import {
   TablePagination,
   TableRow,
   TextField,
-} from "@material-ui/core";
-import { Add } from "@material-ui/icons";
+} from "@mui/material";
+import { Add } from "@mui/icons-material";
 import { Cursors } from "@vertexvis/api-client-node";
 import debounce from "lodash.debounce";
 import { useRouter } from "next/router";

src/components/part/QueuedTranslationsTable.tsx

@@ -9,7 +9,7 @@ import {
   TableHead,
   TableRow,
   Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 import React from "react";
 import useSWR from "swr";
 

src/components/scene/SceneDrawer.tsx

@@ -10,8 +10,8 @@ import {
   TableRow,
   Tooltip,
   Typography,
-} from "@material-ui/core";
-import { Close, FileCopyOutlined } from "@material-ui/icons";
+} from "@mui/material";
+import { Close, FileCopyOutlined } from "@mui/icons-material";
 import React from "react";
 import { useForm } from "react-hook-form";
 

src/components/scene/SceneTable.tsx

@@ -15,13 +15,13 @@ import {
   TableRow,
   TextField,
   Tooltip,
-} from "@material-ui/core";
+} from "@mui/material";
 import {
   EditOutlined,
   MergeTypeOutlined,
   VisibilityOutlined,
   VpnKeyOutlined,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 import { Cursors, SceneData } from "@vertexvis/api-client-node";
 import { Environment } from "@vertexvis/viewer";
 import debounce from "lodash.debounce";

src/components/shared/CreateSceneDialog.tsx

@@ -6,7 +6,7 @@ import {
   DialogTitle,
   TextField,
   Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 import React from "react";
 
 import { MergeSceneReq, MergeSceneRes } from "../../pages/api/merged-scenes";

src/components/shared/DataLoadError.tsx

@@ -1,4 +1,4 @@
-import { TableCell, TableRow } from "@material-ui/core";
+import { TableCell, TableRow } from "@mui/material";
 import React from "react";
 
 interface NewType {

src/components/shared/Header.tsx

@@ -1,6 +1,6 @@
 /* @jsx jsx */ /** @jsxRuntime classic */ import { jsx } from "@emotion/react";
-import { Box, Button, IconButton, Link } from "@material-ui/core";
-import { Menu as MenuIcon } from "@material-ui/icons";
+import { Box, Button, IconButton, Link } from "@mui/material";
+import { Menu as MenuIcon } from "@mui/icons-material";
 import Image from "next/image";
 import { useRouter } from "next/router";
 

src/components/shared/Input.tsx

@@ -1,4 +1,4 @@
-import { TextField, TextFieldProps } from "@material-ui/core";
+import { TextField, TextFieldProps } from "@mui/material";
 import React from "react";
 import {
   Control,

src/components/shared/Layout.tsx

@@ -3,8 +3,8 @@ import {
   AppBarProps as MuiAppBarProps,
   Box,
   Toolbar,
-} from "@material-ui/core";
-import { styled } from "@material-ui/core/styles";
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
 
 import useUser from "../../lib/hooks/use-user";
 import { easeOutEntering, sharpLeaving } from "../../lib/transitions";

src/components/shared/LeftDrawer.tsx

@@ -5,13 +5,13 @@ import {
   ListItemIcon,
   ListItemText,
   Toolbar,
-} from "@material-ui/core";
-import { drawerClasses } from "@material-ui/core/Drawer";
+} from "@mui/material";
+import { drawerClasses } from "@mui/material/Drawer";
 import {
   DescriptionOutlined,
   LocalLibraryOutlined,
   PhotoLibraryOutlined,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 import { useRouter } from "next/router";
 import React from "react";
 

src/components/shared/SkeletonBody.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Skeleton, TableCell, TableRow } from "@material-ui/core";
+import { Checkbox, Skeleton, TableCell, TableRow } from "@mui/material";
 import React from "react";
 
 interface Props {

src/components/shared/TableHead.tsx

@@ -3,7 +3,7 @@ import {
   TableCell,
   TableHead as MuiTableHead,
   TableRow,
-} from "@material-ui/core";
+} from "@mui/material";
 import React from "react";
 
 export interface HeadCell {

src/components/shared/TableToolbar.tsx

@@ -1,6 +1,6 @@
-import { IconButton, Toolbar, Tooltip, Typography } from "@material-ui/core";
-import { alpha } from "@material-ui/core/styles";
-import { Delete } from "@material-ui/icons";
+import { IconButton, Toolbar, Tooltip, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import { Delete } from "@mui/icons-material";
 import React from "react";
 
 interface Props {

src/components/shared/VectorTable.tsx

@@ -4,7 +4,7 @@ import {
   TableCell,
   TableRow,
   Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 import { Vector3 } from "@vertexvis/geometry";
 import React from "react";
 

src/components/viewer/CreateSceneViewStateDialog.tsx

@@ -5,7 +5,7 @@ import {
   DialogContent,
   DialogTitle,
   TextField,
-} from "@material-ui/core";
+} from "@mui/material";
 import React from "react";
 
 import {

src/components/viewer/Layout.tsx

@@ -1,5 +1,5 @@
-import { AppBar as MuiAppBar, Box, Toolbar } from "@material-ui/core";
-import { styled } from "@material-ui/core/styles";
+import { AppBar as MuiAppBar, Box, Toolbar } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import React from "react";
 
 export const BottomDrawerHeight = 240;

src/components/viewer/LeftDrawer.tsx

@@ -1,6 +1,6 @@
-import { Box, Divider, Drawer, IconButton, Tooltip } from "@material-ui/core";
-import { drawerClasses } from "@material-ui/core/Drawer";
-import { ChevronLeft } from "@material-ui/icons";
+import { Box, Divider, Drawer, IconButton, Tooltip } from "@mui/material";
+import { drawerClasses } from "@mui/material/Drawer";
+import { ChevronLeft } from "@mui/icons-material";
 import { Environment } from "@vertexvis/viewer";
 import React from "react";
 

src/components/viewer/MetadataProperties.tsx

@@ -6,7 +6,7 @@ import {
   TableHead,
   TableRow,
   Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 import React from "react";
 
 import { Metadata } from "../../lib/metadata";

src/components/viewer/RightDrawer.tsx

@@ -1,12 +1,7 @@
-import {
-  Accordion,
-  AccordionSummary,
-  Drawer,
-  Typography,
-} from "@material-ui/core";
-import { drawerClasses } from "@material-ui/core/Drawer";
-import { styled } from "@material-ui/core/styles";
-import { ExpandMore } from "@material-ui/icons";
+import { Accordion, AccordionSummary, Drawer, Typography } from "@mui/material";
+import { drawerClasses } from "@mui/material/Drawer";
+import { styled } from "@mui/material/styles";
+import { ExpandMore } from "@mui/icons-material";
 import { SceneViewStateData } from "@vertexvis/api-client-node";
 import React from "react";
 

src/components/viewer/SceneViewStateList.tsx

@@ -1,9 +1,4 @@
-import {
-  List,
-  ListItemButton,
-  ListItemText,
-  Typography,
-} from "@material-ui/core";
+import { List, ListItemButton, ListItemText, Typography } from "@mui/material";
 import { SceneViewStateData } from "@vertexvis/api-client-node";
 import React from "react";
 

src/components/viewer/Viewer.tsx

@@ -9,13 +9,13 @@ import {
   ListItemText,
   Snackbar,
   TextField,
-} from "@material-ui/core";
+} from "@mui/material";
 import {
   CameraAltOutlined,
   FileCopyOutlined,
   SystemUpdateAltOutlined,
   ZoomOutMapOutlined,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 import { vertexvis } from "@vertexvis/frame-streaming-protos";
 import { TapEventDetails } from "@vertexvis/viewer";
 import {

src/components/viewer/ViewerSpeedDial.tsx

@@ -1,4 +1,4 @@
-import { SpeedDial, SpeedDialAction } from "@material-ui/core";
+import { SpeedDial, SpeedDialAction } from "@mui/material";
 
 import { Action } from "./Viewer";
 

src/lib/theme.ts

@@ -1,5 +1,5 @@
-import { blue, orange } from "@material-ui/core/colors";
-import { createTheme } from "@material-ui/core/styles";
+import { blue, orange } from "@mui/material/colors";
+import { createTheme } from "@mui/material/styles";
 
 export default createTheme({
   palette: {

src/lib/transitions.ts

@@ -1,4 +1,4 @@
-import { Theme } from "@material-ui/core/styles";
+import { Theme } from "@mui/material/styles";
 
 interface Transition {
   readonly easing: string;

src/pages/_app.tsx

@@ -2,8 +2,8 @@ import "@vertexvis/viewer/dist/viewer/viewer.css";
 
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
-import CssBaseline from "@material-ui/core/CssBaseline";
-import { ThemeProvider } from "@material-ui/core/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
 import { AppProps } from "next/app";
 import Head from "next/head";
 import React from "react";

src/pages/login.tsx

@@ -10,7 +10,7 @@ import {
   Select,
   TextField,
   Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import React from "react";