feat: allow @material-ui/core@^5.0.0-beta in peerDependencies

fix #70
jcoreio · Jul 21, 2021 · 6abdaa1 · 6abdaa1
1 parent c971692
commit 6abdaa1
Show file tree

Hide file tree

Showing 22 changed files with 3,636 additions and 4,185 deletions.
diff --git a/demo/Demo.js b/demo/Demo.js
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import withStyles from '@material-ui/core/styles/withStyles'
+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'

diff --git a/demo/Root.js b/demo/Root.js
@@ -34,7 +34,11 @@ 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/core/styles/withStyles'
+import { withStyles } from '@material-ui/styles'
+import { StyledEngineProvider } from '@material-ui/core/styles'
+import { createTheme, ThemeProvider } from '@material-ui/core/styles'
+
+const theme = createTheme()
 
 const styles = {
   root: {
@@ -44,77 +48,81 @@ const styles = {
 }
 
 const Root = ({ classes }) => (
-  <div className={classes.root}>
-    <Typography variant="h3">material-ui-popup-state demos</Typography>
-    <Demo
-      title="Left Click to open Menu"
-      headerId="trigger-menu"
-      example={<TriggerMenu />}
-      code={TriggerMenuCode}
-      hooksExample={<TriggerMenuHooks />}
-      hooksCode={TriggerMenuHooksCode}
-    />
-    <Demo
-      title="Left Click to open Popover"
-      headerId="trigger-popover"
-      example={<TriggerPopover />}
-      code={TriggerPopoverCode}
-      hooksExample={<TriggerPopoverHooks />}
-      hooksCode={TriggerPopoverHooksCode}
-    />
-    <Demo
-      title="Context Menu"
-      headerId="trigger-menu"
-      example={<ContextMenu />}
-      code={ContextMenuCode}
-      hooksExample={<ContextMenuHooks />}
-      hooksCode={ContextMenuHooksCode}
-    />
-    <Demo
-      title="Hover Popover"
-      headerId="hover-popover"
-      example={<HoverPopover />}
-      code={HoverPopoverCode}
-      hooksExample={<HoverPopoverHooks />}
-      hooksCode={HoverPopoverHooksCode}
-    />
-    <Demo
-      title="Hover Popper"
-      headerId="hover-popper"
-      hooksExample={<HoverPopperHooks />}
-      hooksCode={HoverPopperHooksCode}
-    />
-    <Demo
-      title="Focus Popover"
-      headerId="focus-popover"
-      example={<FocusPopover />}
-      code={FocusPopoverCode}
-      hooksExample={<FocusPopoverHooks />}
-      hooksCode={FocusPopoverHooksCode}
-    />
-    <Demo
-      title="Hover Menu"
-      headerId="hover-menu"
-      example={<HoverMenu />}
-      code={HoverMenuCode}
-      hooksExample={<HoverMenuHooks />}
-      hooksCode={HoverMenuHooksCode}
-    />
-    <Demo
-      title="Custom Anchor"
-      headerId="custom-anchor"
-      hooksExample={<CustomAnchorHooks />}
-      hooksCode={CustomAnchorHooksCode}
-    />
-    <Demo
-      title="Cascading Hover Menus"
-      headerId="cascading-hover-menus"
-      example={<CascadingHoverMenus />}
-      code={CascadingHoverMenusCode}
-      hooksExample={<CascadingHoverMenusHooks />}
-      hooksCode={CascadingHoverMenusHooksCode}
-    />
-  </div>
+  <StyledEngineProvider>
+    <ThemeProvider theme={theme}>
+      <div className={classes.root}>
+        <Typography variant="h3">material-ui-popup-state demos</Typography>
+        <Demo
+          title="Left Click to open Menu"
+          headerId="trigger-menu"
+          example={<TriggerMenu />}
+          code={TriggerMenuCode}
+          hooksExample={<TriggerMenuHooks />}
+          hooksCode={TriggerMenuHooksCode}
+        />
+        <Demo
+          title="Left Click to open Popover"
+          headerId="trigger-popover"
+          example={<TriggerPopover />}
+          code={TriggerPopoverCode}
+          hooksExample={<TriggerPopoverHooks />}
+          hooksCode={TriggerPopoverHooksCode}
+        />
+        <Demo
+          title="Context Menu"
+          headerId="trigger-menu"
+          example={<ContextMenu />}
+          code={ContextMenuCode}
+          hooksExample={<ContextMenuHooks />}
+          hooksCode={ContextMenuHooksCode}
+        />
+        <Demo
+          title="Hover Popover"
+          headerId="hover-popover"
+          example={<HoverPopover />}
+          code={HoverPopoverCode}
+          hooksExample={<HoverPopoverHooks />}
+          hooksCode={HoverPopoverHooksCode}
+        />
+        <Demo
+          title="Hover Popper"
+          headerId="hover-popper"
+          hooksExample={<HoverPopperHooks />}
+          hooksCode={HoverPopperHooksCode}
+        />
+        <Demo
+          title="Focus Popover"
+          headerId="focus-popover"
+          example={<FocusPopover />}
+          code={FocusPopoverCode}
+          hooksExample={<FocusPopoverHooks />}
+          hooksCode={FocusPopoverHooksCode}
+        />
+        <Demo
+          title="Hover Menu"
+          headerId="hover-menu"
+          example={<HoverMenu />}
+          code={HoverMenuCode}
+          hooksExample={<HoverMenuHooks />}
+          hooksCode={HoverMenuHooksCode}
+        />
+        <Demo
+          title="Custom Anchor"
+          headerId="custom-anchor"
+          hooksExample={<CustomAnchorHooks />}
+          hooksCode={CustomAnchorHooksCode}
+        />
+        <Demo
+          title="Cascading Hover Menus"
+          headerId="cascading-hover-menus"
+          example={<CascadingHoverMenus />}
+          code={CascadingHoverMenusCode}
+          hooksExample={<CascadingHoverMenusHooks />}
+          hooksCode={CascadingHoverMenusHooksCode}
+        />
+      </div>
+    </ThemeProvider>
+  </StyledEngineProvider>
 )
 
 export default withStyles(styles)(Root)
diff --git a/demo/examples/CascadingHoverMenus.hooks.js b/demo/examples/CascadingHoverMenus.hooks.js
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import withStyles from '@material-ui/core/styles/withStyles'
+import { withStyles } from '@material-ui/styles'
 import Menu from 'material-ui-popup-state/HoverMenu'
 import MenuItem from '@material-ui/core/MenuItem'
 import ChevronRight from '@material-ui/icons/ChevronRight'
@@ -28,7 +28,6 @@ const CascadingHoverMenus = () => {
           {...bindMenu(popupState)}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
           transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-          getContentAnchorEl={null}
         >
           <MenuItem onClick={popupState.close}>Tea</MenuItem>
           <MenuItem onClick={popupState.close}>Cake</MenuItem>
@@ -91,7 +90,6 @@ const Submenu = withStyles(submenuStyles)(
           classes={{ paper: classes.menu }}
           anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
           transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-          getContentAnchorEl={null}
           {...props}
         >
           {children}

diff --git a/demo/examples/CascadingHoverMenus.js b/demo/examples/CascadingHoverMenus.js
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import withStyles from '@material-ui/core/styles/withStyles'
+import { withStyles } from '@material-ui/styles'
 import Menu from 'material-ui-popup-state/HoverMenu'
 import MenuItem from '@material-ui/core/MenuItem'
 import ChevronRight from '@material-ui/icons/ChevronRight'
@@ -20,7 +20,6 @@ const CascadingHoverMenus = () => (
             {...bindMenu(popupState)}
             anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
             transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-            getContentAnchorEl={null}
           >
             <MenuItem onClick={popupState.close}>Tea</MenuItem>
             <MenuItem onClick={popupState.close}>Cake</MenuItem>
@@ -88,7 +87,6 @@ const Submenu = withStyles(submenuStyles)(
                   classes={{ paper: classes.menu }}
                   anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
                   transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-                  getContentAnchorEl={null}
                   {...props}
                 >
                   {children}

diff --git a/demo/examples/ContextMenu.hooks.js b/demo/examples/ContextMenu.hooks.js
@@ -17,7 +17,6 @@ const ContextMenu = () => {
       </Button>
       <Menu
         {...bindMenu(popupState)}
-        getContentAnchorEl={null}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
         transformOrigin={{ vertical: 'top', horizontal: 'left' }}
       >

diff --git a/demo/examples/ContextMenu.js b/demo/examples/ContextMenu.js
@@ -13,7 +13,6 @@ const ContextMenu = () => (
         </Button>
         <Menu
           {...bindMenu(popupState)}
-          getContentAnchorEl={null}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
           transformOrigin={{ vertical: 'top', horizontal: 'left' }}
         >

diff --git a/demo/examples/CustomAnchor.hooks.js b/demo/examples/CustomAnchor.hooks.js
@@ -43,7 +43,6 @@ const CustomAnchor = () => (
         </Paper>
         <Menu
           {...bindMenu(popupState)}
-          getContentAnchorEl={null}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
           transformOrigin={{ vertical: 'top', horizontal: 'right' }}
         >

diff --git a/demo/examples/HoverMenu.hooks.js b/demo/examples/HoverMenu.hooks.js
@@ -17,7 +17,6 @@ const MenuPopupState = () => {
       </Button>
       <Menu
         {...bindMenu(popupState)}
-        getContentAnchorEl={null}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
         transformOrigin={{ vertical: 'top', horizontal: 'left' }}
       >

diff --git a/demo/examples/HoverMenu.js b/demo/examples/HoverMenu.js
@@ -13,7 +13,6 @@ const MenuPopupState = () => (
         </Button>
         <Menu
           {...bindMenu(popupState)}
-          getContentAnchorEl={null}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
           transformOrigin={{ vertical: 'top', horizontal: 'left' }}
         >

diff --git a/demo/examples/TriggerMenu.hooks.js b/demo/examples/TriggerMenu.hooks.js
@@ -17,7 +17,6 @@ const TriggerMenu = () => {
       </Button>
       <Menu
         {...bindMenu(popupState)}
-        getContentAnchorEl={null}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
         transformOrigin={{ vertical: 'top', horizontal: 'left' }}
       >

diff --git a/demo/examples/TriggerMenu.js b/demo/examples/TriggerMenu.js
@@ -13,7 +13,6 @@ const TriggerMenu = () => (
         </Button>
         <Menu
           {...bindMenu(popupState)}
-          getContentAnchorEl={null}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
           transformOrigin={{ vertical: 'top', horizontal: 'left' }}
         >

diff --git a/demo/examples/TriggerPopover.hooks.js b/demo/examples/TriggerPopover.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
+import { withStyles } from '@material-ui/styles'
 import Typography from '@material-ui/core/Typography'
 import Button from '@material-ui/core/Button'
 import Popover from '@material-ui/core/Popover'

diff --git a/demo/examples/TriggerPopover.js b/demo/examples/TriggerPopover.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
+import { withStyles } from '@material-ui/styles'
 import Typography from '@material-ui/core/Typography'
 import Button from '@material-ui/core/Button'
 import Popover from '@material-ui/core/Popover'

diff --git a/package.json b/package.json
@@ -102,12 +102,15 @@
     "@babel/register": "^7.12.10",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "@jedwards1211/commitlint-config": "^1.0.2",
     "@jedwards1211/eslint-config": "^2.0.2",
     "@jedwards1211/eslint-config-flow": "^3.0.0",
     "@jedwards1211/eslint-config-react": "^4.0.0",
-    "@material-ui/core": "^4.0.2",
-    "@material-ui/icons": "^4.0.1",
+    "@material-ui/core": "^5.0.0-beta.1",
+    "@material-ui/icons": "^5.0.0-beta.1",
+    "@material-ui/styles": "^5.0.0-beta.1",
     "@types/classnames": "^2.2.9",
     "@types/prop-types": "^15.7.3",
     "babel-eslint": "^10.1.0",
@@ -148,12 +151,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@material-ui/types": "^4.1.1",
+    "@material-ui/types": "^6.0.1",
     "classnames": "^2.2.6",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
-    "@material-ui/core": "^4.0.0"
+    "@material-ui/core": "^4.0.0 || ^5.0.0-beta",
+    "react": "^15.0.0 || ^16.0.0 || ^17.0.0"
   }
 }