feat: support MUI v5

fix #76
fix #77

BREAKING CHANGE: MUI v4 is no longer supported

Author: jedwards1211

README.md

@@ -15,6 +15,11 @@ Also provides a [Render Props Component](https://reactjs.org/docs/render-props.h
 keeps track of the local state for a single popup, and passes the state and
 mutation functions to a child render function.
 
+# Beta version
+
+These are the docs for the beta version that supports the MUI v5 release candidate.
+For v4, see https://github.com/jcoreio/material-ui-popup-state.
+
 # Table of Contents
 
 <!-- toc -->
@@ -53,7 +58,7 @@ mutation functions to a child render function.
 # Installation
 
 ```sh
-npm install --save material-ui-popup-state
+npm install --save material-ui-popup-state@beta
 ```
 
 # Examples with React Hooks

demo/Demo.js

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { withStyles } from '@material-ui/styles'
-import Code from '@material-ui/icons/Code'
+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'
@@ -92,7 +92,7 @@ const Demo = ({
         )}
         <div className={classes.toolbarSpacer} />
         <Tooltip title="Show Source" placement="top">
-          <IconButton onClick={() => setShowSource(!showSource)}>
+          <IconButton onClick={() => setShowSource(!showSource)} size="large">
             <Code />
           </IconButton>
         </Tooltip>

demo/Root.js

@@ -34,7 +34,7 @@ import CascadingHoverMenusHooks from './examples/CascadingHoverMenus.hooks'
 import CascadingHoverMenusHooksCode from '!!raw-loader!./examples/CascadingHoverMenus.hooks'
 import Demo from './Demo'
 import Typography from '@mui/material/Typography'
-import { withStyles } from '@material-ui/styles'
+import { withStyles } from '@mui/styles'
 import { StyledEngineProvider } from '@mui/material/styles'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
 

demo/examples/CascadingHoverMenus.hooks.js

@@ -1,8 +1,8 @@
 import * as React from 'react'
-import { makeStyles } from '@material-ui/styles'
+import { makeStyles } from '@mui/styles'
 import HoverMenu from 'material-ui-popup-state/HoverMenu'
 import MenuItem from '@mui/material/MenuItem'
-import ChevronRight from '@material-ui/icons/ChevronRight'
+import ChevronRight from '@mui/icons-material/ChevronRight'
 import Button from '@mui/material/Button'
 import {
   usePopupState,

demo/examples/CascadingHoverMenus.js

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { makeStyles } from '@material-ui/styles'
+import { makeStyles } from '@mui/styles'
 import MenuItem from '@mui/material/MenuItem'
-import ChevronRight from '@material-ui/icons/ChevronRight'
+import ChevronRight from '@mui/icons-material/ChevronRight'
 import Button from '@mui/material/Button'
 import PopupState, { bindHover, bindMenu } from 'material-ui-popup-state'
 import HoverMenu from 'material-ui-popup-state/HoverMenu'

demo/examples/CustomAnchor.hooks.js

@@ -8,7 +8,7 @@ import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'
-import MoreVertIcon from '@material-ui/icons/MoreVert'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
 import PopupState, {
   anchorRef,
   bindTrigger,
@@ -34,7 +34,7 @@ const CustomAnchor = () => (
                 secondary="Last Modified Apr 9, 2019"
               />
               <ListItemSecondaryAction>
-                <IconButton {...bindTrigger(popupState)}>
+                <IconButton {...bindTrigger(popupState)} size="large">
                   <MoreVertIcon />
                 </IconButton>
               </ListItemSecondaryAction>

demo/examples/HoverPopper.hooks.js

@@ -19,7 +19,7 @@ const HoverPopperPopupState = ({ classes }) => {
       <Button variant="contained" {...bindHover(popupState)}>
         Hover to open Popper
       </Button>
-      <Popper {...bindPopper(popupState)} transition>
+      <Popper {...bindPopper(popupState)} placement="bottom">
         <Paper>
           <Typography style={{ margin: 10 }}>
             The content of the Popper.

demo/examples/TriggerPopover.hooks.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/styles'
+import { withStyles } from '@mui/styles'
 import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
 import Popover from '@mui/material/Popover'

demo/examples/TriggerPopover.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/styles'
+import { withStyles } from '@mui/styles'
 import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
 import Popover from '@mui/material/Popover'

package.json

@@ -111,6 +111,7 @@
     "@mui/material": "^5.0.0-rc.0",
     "@types/classnames": "^2.2.9",
     "@types/prop-types": "^15.7.3",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.5",
     "babel-plugin-istanbul": "^6.0.0",
@@ -119,7 +120,6 @@
     "copy": "^0.3.2",
     "cross-env": "^7.0.3",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.18.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-flowtype": "^5.2.0",
@@ -157,7 +157,16 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "@mui/material": "^4.0.0 || ^5.0.0-rc.0",
+    "@mui/material": "^5.0.0-rc.0",
     "react": "^15.0.0 || ^16.0.0 || ^17.0.0"
+  },
+  "release": {
+    "branches": [
+      "master",
+      {
+        "name": "beta",
+        "prerelease": true
+      }
+    ]
   }
 }