Merge branch 'beta'

fix #80
jcoreio · Oct 20, 2021 · e9aadee · e9aadee
2 parents 98e5f00 + db78c2e
commit e9aadee
Show file tree

Hide file tree

Showing 37 changed files with 378 additions and 392 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,4 +13,5 @@ node_modules
 !/demo/**/*.js
 !/.babelrc.js
 !/webpack.config.js
-/demo-dist
+/demo-dist
+.idea
diff --git a/README.md b/README.md
@@ -15,10 +15,9 @@ 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.
 
-# Using MUI v5?
+# Using MUI v4?
 
-For MUI v5 you'll need the [beta version of `material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state/tree/beta).
-The current production release is for v4. Once MUI v5 is officially released, I'll officially release the next major version of `material-ui-popup-state`.
+For MUI v4 you'll need `material-ui-popup-state@^1.9.3`. Use `^2.0.0` and up for MUI v5.
 
 # Table of Contents
 
@@ -67,9 +66,9 @@ npm install --save material-ui-popup-state
 
 ```js
 import * as React from 'react'
-import Button from '@material-ui/core/Button'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
 import {
   usePopupState,
   bindTrigger,
@@ -99,10 +98,10 @@ export default MenuPopupState
 ```js
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
-import Typography from '@material-ui/core/Typography'
-import Button from '@material-ui/core/Button'
-import Popover from '@material-ui/core/Popover'
+import { withStyles } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import Popover from '@mui/material/Popover'
 import {
   usePopupState,
   bindTrigger,
@@ -156,17 +155,17 @@ export default withStyles(styles)(PopoverPopupState)
 ```js
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
-import Typography from '@material-ui/core/Typography'
-import Button from '@material-ui/core/Button'
-import Popper from '@material-ui/core/Popper'
+import { withStyles } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import Popper from '@mui/material/Popper'
 import {
   usePopupState,
   bindToggle,
   bindPopper,
 } from 'material-ui-popup-state/hooks'
-import Fade from '@material-ui/core/Fade'
-import Paper from '@material-ui/core/Paper'
+import Fade from '@mui/material/Fade'
+import Paper from '@mui/material/Paper'
 
 const styles = (theme) => ({
   typography: {
@@ -229,9 +228,9 @@ element:
 
 ```js
 import * as React from 'react'
-import Button from '@material-ui/core/Button'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
 import {
   usePopupState,
   bindTrigger,
@@ -285,10 +284,10 @@ Defaults to `true` when the popup is opened by the `bindHover` or `bindFocus` el
 
 An object with the following properties:
 
-- `open([eventOrAnchorEl])`: opens the popup. You must pass in an anchor element or an event with a `currentTarget`, otherwise the popup will not position properly and you will get a warning; Material-UI needs an anchor element to position the popup.
+- `open([eventOrAnchorEl])`: opens the popup. You must pass in an anchor element or an event with a `currentTarget`, otherwise the popup will not position properly and you will get a warning; MUI needs an anchor element to position the popup.
 - `close()`: closes the popup
-- `toggle([eventOrAnchorEl])`: opens the popup if it is closed, or closes the popup if it is open. If the popup is currently closed, you must pass an anchor element or an event with a `currentTarget`, otherwise the popup will not position properly and you will get a warning; Material-UI needs an anchor element to position the popup.
-- `setOpen(open, [eventOrAnchorEl])`: sets whether the popup is open. If `open` is truthy, you must pass in an anchor element or an event with a `currentTarget`, otherwise the popup will not position properly and you will get a warning; Material-UI needs an anchor element to position the popup.
+- `toggle([eventOrAnchorEl])`: opens the popup if it is closed, or closes the popup if it is open. If the popup is currently closed, you must pass an anchor element or an event with a `currentTarget`, otherwise the popup will not position properly and you will get a warning; MUI needs an anchor element to position the popup.
+- `setOpen(open, [eventOrAnchorEl])`: sets whether the popup is open. If `open` is truthy, you must pass in an anchor element or an event with a `currentTarget`, otherwise the popup will not position properly and you will get a warning; MUI needs an anchor element to position the popup.
 - `isOpen`: `true`/`false` if the popup is open/closed
 - `anchorEl`: the current anchor element
 - `setAnchorEl`: sets the anchor element (the `currentTarget` of the triggering
@@ -302,9 +301,9 @@ An object with the following properties:
 
 ```js
 import * as React from 'react'
-import Button from '@material-ui/core/Button'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
 import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'
 
 const MenuPopupState = () => (
@@ -332,10 +331,10 @@ export default MenuPopupState
 ```js
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
-import Typography from '@material-ui/core/Typography'
-import Button from '@material-ui/core/Button'
-import Popover from '@material-ui/core/Popover'
+import { withStyles } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import Popover from '@mui/material/Popover'
 import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'
 
 const styles = (theme) => ({
@@ -383,8 +382,8 @@ export default withStyles(styles)(PopoverPopupState)
 ```js
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
-import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
 import HoverPopover from 'material-ui-popup-state/HoverPopover'
 import PopupState, { bindHover, bindPopover } from 'material-ui-popup-state'
 
@@ -438,13 +437,13 @@ export default withStyles(styles)(HoverPopoverPopupState)
 ```js
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
-import Typography from '@material-ui/core/Typography'
-import Button from '@material-ui/core/Button'
-import Popper from '@material-ui/core/Popper'
+import { withStyles } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import Popper from '@mui/material/Popper'
 import PopupState, { bindToggle, bindPopper } from 'material-ui-popup-state'
-import Fade from '@material-ui/core/Fade'
-import Paper from '@material-ui/core/Paper'
+import Fade from '@mui/material/Fade'
+import Paper from '@mui/material/Paper'
 
 const styles = (theme) => ({
   typography: {
@@ -508,9 +507,9 @@ element:
 
 ```js
 import * as React from 'react'
-import Button from '@material-ui/core/Button'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
 import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'
 
 const MenuPopupState = () => (
@@ -571,7 +570,7 @@ props (exported as the `InjectedProps` type):
 
 # Using `Popover` and `Menu` with `bindHover`
 
-Material-UI's `Modal` (used by `Popover` and `Menu`) blocks pointer events to all other components, interfering with `bindHover`
+MUI's `Modal` (used by `Popover` and `Menu`) blocks pointer events to all other components, interfering with `bindHover`
 (the popover or menu will open when the mouse enters the `bindHover` element, but won't close when the mouse leaves). You can
 use the following components to work around this:
 

diff --git a/demo/Demo.js b/demo/Demo.js
@@ -1,11 +1,11 @@
 import * as React from 'react'
-import { withStyles } from '@material-ui/styles'
-import Code from '@material-ui/icons/Code'
-import Collapse from '@material-ui/core/Collapse'
-import Button from '@material-ui/core/Button'
-import IconButton from '@material-ui/core/IconButton'
-import Typography from '@material-ui/core/Typography'
-import Tooltip from '@material-ui/core/Tooltip'
+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'
 
 const { useState, useCallback } = React
 
@@ -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>

diff --git a/demo/Root.js b/demo/Root.js
@@ -33,10 +33,10 @@ import CascadingHoverMenusCode from '!!raw-loader!./examples/CascadingHoverMenus
 import CascadingHoverMenusHooks from './examples/CascadingHoverMenus.hooks'
 import CascadingHoverMenusHooksCode from '!!raw-loader!./examples/CascadingHoverMenus.hooks'
 import Demo from './Demo'
-import Typography from '@material-ui/core/Typography'
-import { withStyles } from '@material-ui/styles'
-import { StyledEngineProvider } from '@material-ui/core/styles'
-import { createTheme, ThemeProvider } from '@material-ui/core/styles'
+import Typography from '@mui/material/Typography'
+import { withStyles } from '@mui/styles'
+import { StyledEngineProvider } from '@mui/material/styles'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 
 const theme = createTheme()
 

diff --git a/demo/examples/CascadingHoverMenus.hooks.js b/demo/examples/CascadingHoverMenus.hooks.js
@@ -1,9 +1,9 @@
 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 '@material-ui/core/MenuItem'
-import ChevronRight from '@material-ui/icons/ChevronRight'
-import Button from '@material-ui/core/Button'
+import MenuItem from '@mui/material/MenuItem'
+import ChevronRight from '@mui/icons-material/ChevronRight'
+import Button from '@mui/material/Button'
 import {
   usePopupState,
   bindHover,

diff --git a/demo/examples/CascadingHoverMenus.js b/demo/examples/CascadingHoverMenus.js
@@ -1,8 +1,8 @@
 import * as React from 'react'
-import { makeStyles } from '@material-ui/styles'
-import MenuItem from '@material-ui/core/MenuItem'
-import ChevronRight from '@material-ui/icons/ChevronRight'
-import Button from '@material-ui/core/Button'
+import { makeStyles } from '@mui/styles'
+import MenuItem from '@mui/material/MenuItem'
+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'
 

diff --git a/demo/examples/ContextMenu.hooks.js b/demo/examples/ContextMenu.hooks.js
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import Button from '@material-ui/core/Button'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
 import {
   usePopupState,
   bindContextMenu,

diff --git a/demo/examples/ContextMenu.js b/demo/examples/ContextMenu.js
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import Button from '@material-ui/core/Button'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
 import PopupState, { bindContextMenu, bindMenu } from 'material-ui-popup-state'
 
 const ContextMenu = () => (

diff --git a/demo/examples/CustomAnchor.hooks.js b/demo/examples/CustomAnchor.hooks.js
@@ -1,14 +1,14 @@
 import * as React from 'react'
-import IconButton from '@material-ui/core/IconButton'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
-import Paper from '@material-ui/core/Paper'
-import Typography from '@material-ui/core/Typography'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
-import MoreVertIcon from '@material-ui/icons/MoreVert'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+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 ListItemText from '@mui/material/ListItemText'
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'
+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>

diff --git a/demo/examples/FocusPopover.hooks.js b/demo/examples/FocusPopover.hooks.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import Typography from '@material-ui/core/Typography'
-import Popover from '@material-ui/core/Popover'
-import Input from '@material-ui/core/Input'
+import Typography from '@mui/material/Typography'
+import Popover from '@mui/material/Popover'
+import Input from '@mui/material/Input'
 import {
   usePopupState,
   bindFocus,

diff --git a/demo/examples/FocusPopover.js b/demo/examples/FocusPopover.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import Typography from '@material-ui/core/Typography'
-import Popover from '@material-ui/core/Popover'
-import Input from '@material-ui/core/Input'
+import Typography from '@mui/material/Typography'
+import Popover from '@mui/material/Popover'
+import Input from '@mui/material/Input'
 import PopupState, { bindFocus, bindPopover } from 'material-ui-popup-state'
 
 const FocusPopoverPopupState = ({ classes }) => (

diff --git a/demo/examples/HoverMenu.hooks.js b/demo/examples/HoverMenu.hooks.js
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import HoverMenu from 'material-ui-popup-state/HoverMenu'
-import MenuItem from '@material-ui/core/MenuItem'
-import Button from '@material-ui/core/Button'
+import MenuItem from '@mui/material/MenuItem'
+import Button from '@mui/material/Button'
 import {
   usePopupState,
   bindHover,

diff --git a/demo/examples/HoverMenu.js b/demo/examples/HoverMenu.js
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import HoverMenu from 'material-ui-popup-state/HoverMenu'
-import MenuItem from '@material-ui/core/MenuItem'
-import Button from '@material-ui/core/Button'
+import MenuItem from '@mui/material/MenuItem'
+import Button from '@mui/material/Button'
 import PopupState, { bindHover, bindMenu } from 'material-ui-popup-state'
 
 const MenuPopupState = () => (

diff --git a/demo/examples/HoverPopover.hooks.js b/demo/examples/HoverPopover.hooks.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import Typography from '@material-ui/core/Typography'
+import Typography from '@mui/material/Typography'
 import HoverPopover from 'material-ui-popup-state/HoverPopover'
-import Button from '@material-ui/core/Button'
+import Button from '@mui/material/Button'
 import {
   usePopupState,
   bindHover,

diff --git a/demo/examples/HoverPopover.js b/demo/examples/HoverPopover.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import Typography from '@material-ui/core/Typography'
+import Typography from '@mui/material/Typography'
 import HoverPopover from 'material-ui-popup-state/HoverPopover'
-import Button from '@material-ui/core/Button'
+import Button from '@mui/material/Button'
 import PopupState, { bindHover, bindPopover } from 'material-ui-popup-state'
 
 const HoverPopoverPopupState = ({ classes }) => (

diff --git a/demo/examples/HoverPopper.hooks.js b/demo/examples/HoverPopper.hooks.js
@@ -1,8 +1,8 @@
 import React from 'react'
-import Typography from '@material-ui/core/Typography'
-import Popper from '@material-ui/core/Popper'
-import Button from '@material-ui/core/Button'
-import Paper from '@material-ui/core/Paper'
+import Typography from '@mui/material/Typography'
+import Popper from '@mui/material/Popper'
+import Button from '@mui/material/Button'
+import Paper from '@mui/material/Paper'
 import {
   usePopupState,
   bindHover,
@@ -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.