build(deps-dev): bump the js-mui-deps group across 1 directory with 6 updates

package.json

@@ -50,11 +50,11 @@
     "@lezer/highlight": "1.2.1",
     "@lezer/lr": "1.4.2",
     "@material/material-color-utilities": "0.3.0",
-    "@mui/icons-material": "5.16.7",
-    "@mui/lab": "5.0.0-alpha.170",
-    "@mui/material": "5.16.7",
-    "@mui/styles": "5.16.7",
-    "@mui/system": "5.16.7",
+    "@mui/icons-material": "6.3.0",
+    "@mui/lab": "5.0.0-alpha.175",
+    "@mui/material": "6.3.0",
+    "@mui/styles": "6.3.0",
+    "@mui/system": "6.3.0",
     "@mui/x-data-grid": "6.20.4",
     "@playwright/test": "1.49.1",
     "@storybook/addon-essentials": "8.4.7",

web/src/app/admin/AdminSection.tsx

@@ -14,7 +14,7 @@ import {
   BoolInput,
 } from './AdminFieldComponents'
 import { ConfigValue } from '../../schema'
-import { Alert } from '@mui/material'
+import { Alert, ListItemButton } from '@mui/material'
 
 const components = {
   string: StringInput,
@@ -40,6 +40,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     // 71px is the height of the checkbox field without w/o a desc
     minHeight: '71px',
     padding: '1em',
+    cursor: 'default',
   },
   listItemText: {
     maxWidth: '50%',
@@ -79,10 +80,11 @@ export default function AdminSection(props: AdminSectionProps): JSX.Element {
         {fields.map((f: FieldProps, idx: number) => {
           const Field = components[f.type]
           return (
-            <ListItem
+            <ListItemButton
               key={f.id}
               className={classes.listItem}
               divider={idx !== fields.length - 1}
+              disableRipple
               selected={_.has(value, f.id)}
             >
               <ListItemText
@@ -115,7 +117,7 @@ export default function AdminSection(props: AdminSectionProps): JSX.Element {
                   }
                 />
               </div>
-            </ListItem>
+            </ListItemButton>
           )
         })}
       </List>

web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx

@@ -15,6 +15,7 @@ import {
   FormControl,
   Box,
   Theme,
+  ListItemButton,
 } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles'
 import ServiceLabelFilterContainer from '../../../services/ServiceFilterContainer'
@@ -234,8 +235,7 @@ export function CreateAlertServiceSelect(
               </ListItem>
             )}
             {searchResults.map((service: Service) => (
-              <ListItem
-                button
+              <ListItemButton
                 data-cy='service-select-item'
                 key={service.id}
                 disabled={value.length >= CREATE_ALERT_LIMIT}
@@ -252,7 +252,7 @@ export function CreateAlertServiceSelect(
                     <FavoriteIcon />
                   </ListItemIcon>
                 )}
-              </ListItem>
+              </ListItemButton>
             ))}
 
             {Boolean(placeholderMsg) && (

web/src/app/details/DetailsPage.tsx

@@ -6,7 +6,6 @@ import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 import { ChevronRight } from '@mui/icons-material'
 import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 
 import Notices, { Notice } from './Notices'
@@ -16,7 +15,7 @@ import AppLink, { AppLinkProps } from '../util/AppLink'
 import { useIsWidthDown } from '../util/useWidth'
 import useStatusColors from '../theme/useStatusColors'
 import { Label } from '../../schema'
-import { Chip } from '@mui/material'
+import { Chip, ListItemButton } from '@mui/material'
 
 interface DetailsPageProps {
   title: string
@@ -178,7 +177,7 @@ export default function DetailsPage(p: DetailsPageProps): JSX.Element {
             />
             <List data-cy='route-links' className={classes.quickLinks} dense>
               {links.map((li, idx) => (
-                <ListItem
+                <ListItemButton
                   key={idx}
                   sx={{
                     borderLeft: `3px solid ${borderColor(
@@ -187,7 +186,6 @@ export default function DetailsPage(p: DetailsPageProps): JSX.Element {
                   }}
                   component={LIApplink}
                   to={li.url}
-                  button
                 >
                   <ListItemText
                     primary={li.label}
@@ -197,7 +195,7 @@ export default function DetailsPage(p: DetailsPageProps): JSX.Element {
                     secondary={li.subText}
                   />
                   <ChevronRight />
-                </ListItem>
+                </ListItemButton>
               ))}
             </List>
           </Card>

web/src/app/lists/FlatList.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react'
 import ButtonBase from '@mui/material/ButtonBase'
 import List, { ListProps } from '@mui/material/List'
-import MUIListItem, { ListItemProps } from '@mui/material/ListItem'
+import MUIListItem, { ListItemButtonProps } from '@mui/material/ListItemButton'
 import ListItemText from '@mui/material/ListItemText'
 import Typography from '@mui/material/Typography'
 import ListSubheader from '@mui/material/ListSubheader'
@@ -101,7 +101,8 @@ export interface FlatListNotice extends Notice {
   handleOnClick?: (event: MouseEvent) => void
   'data-cy'?: string
 }
-export interface FlatListItemOptions extends Omit<ListItemProps, 'title'> {
+export interface FlatListItemOptions
+  extends Omit<ListItemButtonProps, 'title'> {
   title?: React.ReactNode
   primaryText?: React.ReactNode
   highlight?: boolean
@@ -391,10 +392,14 @@ export default function FlatList({
             <List>
               {items
                 .filter(
-                  (item: FlatListItemOptions) => item.section === section.title,
+                  (item: FlatListListItem) =>
+                    'section' in item && item.section === section.title,
                 )
                 .map((item, idx) => {
-                  return <FlatListItem index={idx} key={idx} item={item} />
+                  if ('title' in item) {
+                    return <FlatListItem index={idx} key={idx} item={item} />
+                  }
+                  return null
                 })}
             </List>
           </Collapse>

web/src/app/lists/FlatListItem.tsx

@@ -1,8 +1,8 @@
 import React, { useLayoutEffect } from 'react'
 import classnames from 'classnames'
 import MUIListItem, {
-  ListItemProps as MUIListItemProps,
-} from '@mui/material/ListItem'
+  ListItemButtonProps as MUIListItemProps,
+} from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'
 import ListItemText from '@mui/material/ListItemText'
@@ -17,6 +17,9 @@ const useStyles = makeStyles(() => ({
     marginBottom: '8px',
     borderRadius: '4px',
   },
+  noButton: {
+    cursor: 'default',
+  },
   listItemDisabled: {
     opacity: 0.6,
     width: '100%',
@@ -87,7 +90,9 @@ export default function FlatListItem(props: FlatListItemProps): JSX.Element {
         [classes.listItem]: true,
         [classes.listItemDisabled]: disabled,
         [classes.listItemDraggable]: draggable,
+        [classes.noButton]: !url && !onClick,
       })}
+      disableRipple={!url && !onClick}
       selected={highlight}
     >
       {icon && <ListItemIcon tabIndex={-1}>{icon}</ListItemIcon>}

web/src/app/lists/PaginatedList.tsx

@@ -6,7 +6,7 @@ import ListItemText from '@mui/material/ListItemText'
 import Typography from '@mui/material/Typography'
 import ListItemAvatar from '@mui/material/ListItemAvatar'
 import makeStyles from '@mui/styles/makeStyles'
-import { Skeleton } from '@mui/material'
+import { ListItemButton, Skeleton } from '@mui/material'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useIsWidthDown } from '../util/useWidth'
 import { FavoriteIcon } from '../util/SetFavoriteButton'
@@ -146,7 +146,7 @@ export function PaginatedList(props: PaginatedListProps): JSX.Element {
     }
 
     return (
-      <ListItem
+      <ListItemButton
         sx={{
           borderLeft: `3px solid ${borderColor(item.status)}`,
         }}
@@ -167,7 +167,7 @@ export function PaginatedList(props: PaginatedListProps): JSX.Element {
         />
         {favIcon}
         {item.action && <div className={classes.itemAction}>{item.action}</div>}
-      </ListItem>
+      </ListItemButton>
     )
   }
 

web/src/app/main/NavBarLink.tsx

@@ -2,13 +2,12 @@ import React from 'react'
 import { useLocation } from 'wouter'
 import List from '@mui/material/List'
 import makeStyles from '@mui/styles/makeStyles'
-import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import Typography from '@mui/material/Typography'
 import { styles } from '../styles/materialStyles'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { Collapse, Theme } from '@mui/material'
+import { Collapse, ListItemButton, Theme } from '@mui/material'
 import AppLink from '../util/AppLink'
 import { OpenInNew } from '@mui/icons-material'
 
@@ -58,14 +57,14 @@ export function NavBarSubLink({
       to={to}
       newTab={newTab}
     >
-      <ListItem button tabIndex={-1}>
+      <ListItemButton tabIndex={-1}>
         <ListItemText className={subMenuLinkText}>
           {title}
           {newTab && (
             <OpenInNew fontSize='small' style={{ paddingLeft: '1em' }} />
           )}
         </ListItemText>
-      </ListItem>
+      </ListItemButton>
     </AppLink>
   )
 }
@@ -93,7 +92,7 @@ export default function NavBarLink({
         to={to}
         className={!children && isRoute ? classes.navSelected : classes.nav}
       >
-        <ListItem button tabIndex={-1}>
+        <ListItemButton tabIndex={-1}>
           <ListItemIcon>{icon}</ListItemIcon>
           <ListItemText
             disableTypography
@@ -113,7 +112,7 @@ export default function NavBarLink({
               }
             />
           )}
-        </ListItem>
+        </ListItemButton>
       </AppLink>
       {children && (
         <Collapse in={isRoute} mountOnEnter>