fix: add @mui/material 7 to peerDependencies

jedwards1211 · jedwards1211 · commit 252df83e2f6a · 2025-04-01T12:58:23.000-05:00
fix #153
diff --git a/demo/Demo.js b/demo/Demo.js
@@ -1,79 +1,49 @@
 import * as React from 'react'
-import { withStyles } from '@mui/styles'
 import Code from '@mui/icons-material/Code'
 import Collapse from '@mui/material/Collapse'
 import Button from '@mui/material/Button'
 import IconButton from '@mui/material/IconButton'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
+import Box from '@mui/material/Box'
 
 const { useState, useCallback } = React
 
-const styles = {
-  title: {
-    marginTop: 40,
-    marginBottom: 0,
-  },
-  root: {
-    margin: '20px auto',
-  },
-  toolbar: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  toolbarSpacer: {
-    flex: '1 1 auto',
-  },
-  code: {
-    margin: 0,
-    padding: 20,
-    backgroundColor: 'white',
-    borderRadius: 4,
-  },
-  example: {
-    backgroundColor: '#eee',
-    borderRadius: 4,
-    display: 'flex',
-    alignContent: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 40,
-  },
-  titleAnchor: {
-    color: '#aaa',
-    marginLeft: 10,
-    textDecoration: 'none',
-    visibility: 'hidden',
-    '$title:hover > &': {
-      visibility: 'visible',
-    },
-  },
-}
-
-const Demo = ({
-  headerId,
-  classes,
-  title,
-  code,
-  example,
-  hooksCode,
-  hooksExample,
-}) => {
+const Demo = ({ headerId, title, code, example, hooksCode, hooksExample }) => {
   const [showSource, setShowSource] = useState(false)
   const [api, setApi] = useState('hooks')
   const setRenderProps = useCallback(() => setApi('render-props'), [])
   const setHooks = useCallback(() => setApi('hooks'), [])
   return (
-    <div className={classes.root}>
-      <Typography variant="h4" className={classes.title} id={headerId}>
+    <Box sx={{ margin: '20px auto' }}>
+      <Typography
+        variant="h4"
+        sx={{
+          marginTop: '40px',
+          marginBottom: 0,
+          '&:hover > a': {
+            visibility: 'visible',
+          },
+        }}
+        id={headerId}
+      >
         {title}
         {headerId && (
-          <a href={`#${headerId}`} className={classes.titleAnchor}>
+          <Box
+            component="a"
+            href={`#${headerId}`}
+            sx={{
+              color: '#aaa',
+              marginLeft: '10px',
+              textDecoration: 'none',
+              visibility: 'hidden',
+            }}
+          >
             #
-          </a>
+          </Box>
         )}
       </Typography>
-      <div className={classes.toolbar}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
         {code != null && hooksCode != null && (
           <React.Fragment>
             <Button
@@ -90,23 +60,41 @@ const Demo = ({
             </Button>
           </React.Fragment>
         )}
-        <div className={classes.toolbarSpacer} />
+        <Box sx={{ flex: '1 1 auto' }} />
         <Tooltip title="Show Source" placement="top">
           <IconButton onClick={() => setShowSource(!showSource)} size="large">
             <Code />
           </IconButton>
         </Tooltip>
-      </div>
+      </Box>
       <Collapse in={showSource}>
-        <pre className={classes.code}>
+        <Box
+          component="pre"
+          sx={{
+            margin: 0,
+            padding: '20px',
+            backgroundColor: 'white',
+            borderRadius: '4px',
+          }}
+        >
           {api === 'hooks' ? hooksCode || code : code || hooksCode}
-        </pre>
+        </Box>
       </Collapse>
-      <div className={classes.example}>
+      <Box
+        sx={{
+          backgroundColor: '#eee',
+          borderRadius: '4px',
+          display: 'flex',
+          alignContent: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '40px',
+        }}
+      >
         {api === 'hooks' ? hooksExample || example : example || hooksExample}
-      </div>
-    </div>
+      </Box>
+    </Box>
   )
 }
 
-export default withStyles(styles)(Demo)
+export default Demo
diff --git a/demo/Root.js b/demo/Root.js
@@ -48,23 +48,16 @@ import ChainingEventHandlers from './examples/ChainingEventHandlers'
 import ChainingEventHandlersCode from '!!raw-loader!./examples/ChainingEventHandlers'
 import Demo from './Demo'
 import Typography from '@mui/material/Typography'
-import { withStyles } from '@mui/styles'
+import Box from '@mui/material/Box'
 import { StyledEngineProvider } from '@mui/material/styles'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
 
 const theme = createTheme()
 
-const styles = {
-  root: {
-    margin: '0 auto',
-    maxWidth: 800,
-  },
-}
-
 const Root = ({ classes }) => (
   <StyledEngineProvider>
     <ThemeProvider theme={theme}>
-      <div className={classes.root}>
+      <Box sx={{ margin: '0 auto', maxWidth: 800 }}>
         <Typography variant="h3">material-ui-popup-state demos</Typography>
         <Demo
           title="Left Click to open Menu"
@@ -136,7 +129,6 @@ const Root = ({ classes }) => (
           hooksExample={<HoverFocusMenuHooks />}
           hooksCode={HoverFocusMenuHooksCode}
         />
-
         <Demo
           title="Custom Anchor"
           headerId="custom-anchor"
@@ -165,9 +157,9 @@ const Root = ({ classes }) => (
           example={<ChainingEventHandlers />}
           code={ChainingEventHandlersCode}
         />
-      </div>
+      </Box>
     </ThemeProvider>
   </StyledEngineProvider>
 )
 
-export default withStyles(styles)(Root)
+export default Root
diff --git a/demo/examples/CascadingHoverMenus.hooks.js b/demo/examples/CascadingHoverMenus.hooks.js
@@ -1,28 +1,16 @@
 import * as React from 'react'
-import { makeStyles } from '@mui/styles'
 import HoverMenu from 'material-ui-popup-state/HoverMenu'
 import MenuItem from '@mui/material/MenuItem'
 import ChevronRight from '@mui/icons-material/ChevronRight'
 import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
 import {
   usePopupState,
   bindHover,
   bindFocus,
   bindMenu,
 } from 'material-ui-popup-state/hooks'
 
-const useCascadingMenuStyles = makeStyles((theme) => ({
-  submenu: {
-    marginTop: theme.spacing(-1),
-  },
-  title: {
-    flexGrow: 1,
-  },
-  moreArrow: {
-    marginRight: theme.spacing(-1),
-  },
-}))
-
 const CascadingContext = React.createContext({
   parentPopupState: null,
   rootPopupState: null,
@@ -43,7 +31,6 @@ function CascadingMenuItem({ onClick, ...props }) {
 }
 
 function CascadingSubmenu({ title, popupId, ...props }) {
-  const classes = useCascadingMenuStyles()
   const { parentPopupState } = React.useContext(CascadingContext)
   const popupState = usePopupState({
     popupId,
@@ -53,12 +40,16 @@ function CascadingSubmenu({ title, popupId, ...props }) {
   return (
     <React.Fragment>
       <MenuItem {...bindHover(popupState)} {...bindFocus(popupState)}>
-        <span className={classes.title}>{title}</span>
-        <ChevronRight className={classes.moreArrow} />
+        <Box component="span" sx={{ flexGrow: 1 }}>
+          {title}
+        </Box>
+        <ChevronRight sx={{ marginRight: -1 }} />
       </MenuItem>
       <CascadingMenu
         {...props}
-        classes={{ ...props.classes, paper: classes.submenu }}
+        slotProps={{
+          paper: { sx: { marginTop: -1 } },
+        }}
         anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
         transformOrigin={{ vertical: 'top', horizontal: 'left' }}
         popupState={popupState}
diff --git a/demo/examples/CascadingHoverMenus.js b/demo/examples/CascadingHoverMenus.js
@@ -1,22 +1,10 @@
 import * as React from 'react'
-import { makeStyles } from '@mui/styles'
+import HoverMenu from 'material-ui-popup-state/HoverMenu'
 import MenuItem from '@mui/material/MenuItem'
 import ChevronRight from '@mui/icons-material/ChevronRight'
 import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
 import PopupState, { bindHover, bindMenu } from 'material-ui-popup-state'
-import HoverMenu from 'material-ui-popup-state/HoverMenu'
-
-const useCascadingMenuStyles = makeStyles((theme) => ({
-  submenu: {
-    marginTop: theme.spacing(-1),
-  },
-  title: {
-    flexGrow: 1,
-  },
-  moreArrow: {
-    marginRight: theme.spacing(-1),
-  },
-}))
 
 const CascadingContext = React.createContext({
   parentPopupState: null,
@@ -38,7 +26,6 @@ function CascadingMenuItem({ onClick, ...props }) {
 }
 
 function CascadingSubmenu({ title, popupId, ...props }) {
-  const classes = useCascadingMenuStyles()
   const { parentPopupState } = React.useContext(CascadingContext)
   return (
     <PopupState
@@ -50,12 +37,16 @@ function CascadingSubmenu({ title, popupId, ...props }) {
       {(popupState) => (
         <React.Fragment>
           <MenuItem {...bindHover(popupState)}>
-            <span className={classes.title}>{title}</span>
-            <ChevronRight className={classes.moreArrow} />
+            <Box component="span" sx={{ flexGrow: 1 }}>
+              {title}
+            </Box>
+            <ChevronRight sx={{ marginRight: -1 }} />
           </MenuItem>
           <CascadingMenu
             {...props}
-            classes={{ ...props.classes, paper: classes.submenu }}
+            slotProps={{
+              paper: { sx: { marginTop: -1 } },
+            }}
             anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
             transformOrigin={{ vertical: 'top', horizontal: 'left' }}
             popupState={popupState}
diff --git a/demo/examples/CustomAnchor.hooks.js b/demo/examples/CustomAnchor.hooks.js
@@ -5,7 +5,7 @@ import MenuItem from '@mui/material/MenuItem'
 import Paper from '@mui/material/Paper'
 import Typography from '@mui/material/Typography'
 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 ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'
 import MoreVertIcon from '@mui/icons-material/MoreVert'
@@ -28,7 +28,7 @@ const CustomAnchor = () => (
 
         <Paper>
           <List>
-            <ListItem button ContainerProps={{ ref: anchorRef(popupState) }}>
+            <ListItemButton ref={anchorRef(popupState)}>
               <ListItemText
                 primary="Stuff"
                 secondary="Last Modified Apr 9, 2019"
@@ -38,7 +38,7 @@ const CustomAnchor = () => (
                   <MoreVertIcon />
                 </IconButton>
               </ListItemSecondaryAction>
-            </ListItem>
+            </ListItemButton>
           </List>
         </Paper>
         <Menu
diff --git a/demo/examples/TriggerPopover.hooks.js b/demo/examples/TriggerPopover.hooks.js
@@ -1,6 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { withStyles } from '@mui/styles'
 import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
 import Popover from '@mui/material/Popover'
@@ -10,13 +8,7 @@ import {
   bindPopover,
 } from 'material-ui-popup-state/hooks'
 
-const styles = (theme) => ({
-  typography: {
-    margin: theme.spacing(2),
-  },
-})
-
-const TriggerPopover = ({ classes }) => {
+const TriggerPopover = () => {
   const popupState = usePopupState({
     variant: 'popover',
     popupId: 'demoPopover',
@@ -37,16 +29,10 @@ const TriggerPopover = ({ classes }) => {
           horizontal: 'center',
         }}
       >
-        <Typography className={classes.typography}>
-          The content of the Popover.
-        </Typography>
+        <Typography sx={{ margin: 2 }}>The content of the Popover.</Typography>
       </Popover>
     </div>
   )
 }
 
-TriggerPopover.propTypes = {
-  classes: PropTypes.object.isRequired,
-}
-
-export default withStyles(styles)(TriggerPopover)
+export default TriggerPopover
diff --git a/demo/examples/TriggerPopover.js b/demo/examples/TriggerPopover.js
diff --git a/package.json b/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
