Merge pull request #829 from L4Ph/upgrade-mui-latest

Upgrade MUI

package.json

@@ -3,12 +3,11 @@
   "version": "0.2.3",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.2.5",
-    "@mui/lab": "^5.0.0-alpha.64",
-    "@mui/material": "^5.2.8",
-    "@mui/styles": "^5.2.3",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.19",
+    "@mui/material": "^5.15.19",
+    "@mui/styles": "^5.15.19",
     "@pdf-lib/fontkit": "^1.1.1",
     "@types/react-helmet-async": "^1.0.3",
     "@types/react-image-gallery": "^1.0.4",

src/components/common/keyboarddefformpart/KeyboardDefinitionFormPart.tsx

@@ -16,7 +16,7 @@ import {
   CircularProgress,
   Typography,
 } from '@mui/material';
-import { Alert, AlertTitle } from '@mui/lab';
+import { Alert, AlertTitle } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import './KeyboardDefinitionFormPart.scss';
 import { IKeyboardDefinitionDocument } from '../../../services/storage/Storage';

src/components/common/layer/LayerPagination.tsx

@@ -1,6 +1,6 @@
 import { Badge, Chip, IconButton } from '@mui/material';
 import { makeStyles, withStyles } from '@mui/styles';
-import { usePagination } from '@mui/lab';
+import usePagination from '@mui/material/usePagination';
 import {
   KeyboardArrowDown,
   KeyboardArrowLeft,
@@ -43,7 +43,7 @@ type LayerPaginationOrientation = 'horizontal' | 'vertical';
 type LayerPaginationProps = {
   count: number;
   invisiblePages: boolean[];
-  page: number;
+  page: number | null;
   // eslint-disable-next-line no-unused-vars
   onClickPage: (page: number) => void;
   orientation: LayerPaginationOrientation;
@@ -61,7 +61,7 @@ export default function LayerPagination(props: LayerPaginationProps) {
   const classes = useLayerPaginationStyles();
   const { items } = usePagination({
     count: props.count,
-    page: props.page,
+    page: props.page !== null ? props.page : 1,
     onChange: (event, page) => {
       props.onClickPage(page);
     },
@@ -77,7 +77,7 @@ export default function LayerPagination(props: LayerPaginationProps) {
       >
         {items.map(({ page, type, selected, ...item }, index) => {
           let children = null;
-          if (type === 'page') {
+          if (type === 'page' && page !== null) {
             children = (
               <StyledBadge
                 color="primary"

src/components/configure/customkey/AutocompleteKeys.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import './AutocompleteKeys.scss';
-import Autocomplete from '@mui/lab/Autocomplete';
+import Autocomplete from '@mui/material/Autocomplete';
 import { TextField } from '@mui/material';
 import { IKeymap } from '../../../services/hid/Hid';
 import { KeymapCategory } from '../../../services/hid/KeycodeList';
@@ -89,6 +89,9 @@ export default class AutocompleteKeys extends React.Component<
           this.setInputValue(newInputValue.split('::')[0]);
         }}
         getOptionLabel={(option) => {
+          if (typeof option === 'string') {
+            return option;
+          }
           return `${option.keycodeInfo!.label}::${option.kinds.join('::')}`;
         }}
         renderOption={(props, option) => (

src/components/configure/importDef/ImportDefDialog.tsx

@@ -8,7 +8,7 @@ import {
 import { Button, Dialog, DialogContent, DialogTitle } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import Paper, { PaperProps } from '@mui/material/Paper';
-import { Alert, AlertTitle } from '@mui/lab';
+import { Alert, AlertTitle } from '@mui/material';
 
 import { KeyboardDefinitionSchema } from '../../../gen/types/KeyboardDefinition';
 import { KeyboardDefinitionFormPart } from '../../common/keyboarddefformpart/KeyboardDefinitionFormPart';