Merge pull request #676 from barbalex/mui6

Mui6

package.json

@@ -27,7 +27,7 @@
     "@fontsource/roboto": "5.0.14",
     "@fontsource/roboto-mono": "5.0.19",
     "@json2csv/plainjs": "7.0.6",
-    "@mui/material": "5.16.7",
+    "@mui/material": "6.0.0",
     "@react-leaflet/core": "2.1.0",
     "@tanstack/react-query": "5.52.2",
     "@turf/ellipse": "7.1.0",

src/components/Docs/Sidebar/MenuItems.jsx

@@ -6,7 +6,7 @@ import styled from '@emotion/styled'
 import MenuItem from './MenuItem.jsx'
 import storeContext from '../../../storeContext.js'
 
-// dont know why but divider is too thick,
+// don't know why but divider is too thick,
 // thicker than ListItemButton divider
 const StyledDivider = styled(Divider)`
   height: unset !important;

src/components/EkPlan/Choose.jsx

@@ -72,7 +72,7 @@ const CheckboxDensifier = styled.div`
   margin: -8px 2px -8px -4px;
 `
 
-// placing mateiral-ui checkboxes denser
+// placing material-ui checkboxes denser
 // see: https://github.com/mui-org/material-ui/issues/6098#issuecomment-380451242
 // but styling with styled-components
 const DenserCheckbox = (props) => (
@@ -154,9 +154,7 @@ const EkPlanChoose = () => {
             onBlur={onBlurPastYears}
             size="small"
             type="number"
-            InputLabelProps={{
-              shrink: true,
-            }}
+            slotProps={{ inputLabel: { shrink: true } }}
           />
         </PastYearsContainer>
         <FelderButton
@@ -242,7 +240,10 @@ const EkPlanChoose = () => {
         <DialogTitle id="alert-dialog-title">{'Felder wählen:'}</DialogTitle>
         <Fields />
         <DialogActions>
-          <Button onClick={closeFieldsDialog} color="inherit">
+          <Button
+            onClick={closeFieldsDialog}
+            color="inherit"
+          >
             schliessen
           </Button>
         </DialogActions>

src/components/EkPlan/Table/CellForYearMenu/EkfsMenu/Ekf.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react'
 import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
 import ListItemText from '@mui/material/ListItemText'
 import Collapse from '@mui/material/Collapse'
 import {
@@ -28,7 +29,12 @@ const StyledListItemText = styled(ListItemText)`
     font-size: 0.85rem !important;
   }
 `
-const SyledListItem = styled(ListItem)`
+const StyledListItem = styled(ListItem)`
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  font-size: 0.85rem !important;
+`
+const StyledListItemButton = styled(ListItemButton)`
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   font-size: 0.85rem !important;
@@ -60,7 +66,7 @@ const EkfMenu = ({ tpop, ekf, border }) => {
 
   return (
     <OuterList component="nav" border={border.toString()}>
-      <SyledListItem button onClick={toggleOpen}>
+      <ListItemButton onClick={toggleOpen}>
         <StyledListItemText primary={title} />
         <OutsideLink
           onClick={() => {
@@ -74,7 +80,7 @@ const EkfMenu = ({ tpop, ekf, border }) => {
           <FaExternalLinkAlt />
         </OutsideLink>
         {open ? <CloseIcon /> : <ExpandIcon />}
-      </SyledListItem>
+      </ListItemButton>
       <Collapse in={open} timeout="auto" unmountOnExit>
         <InnerList>
           {zaehls.map((z) => {
@@ -86,9 +92,9 @@ const EkfMenu = ({ tpop, ekf, border }) => {
               z.anzahl !== null ? z.anzahl : '(Anzahl nicht erfasst)'
 
             return (
-              <SyledListItem key={z.id} component="div">
+              <StyledListItem key={z.id} component="div">
                 {`${anzahl} ${einheit}, ${methode}`}
-              </SyledListItem>
+              </StyledListItem>
             )
           })}
         </InnerList>