[docs] Add some Render Props demos

docs/src/pages/demos/menus/FadeMenu.js

@@ -19,11 +19,12 @@ class FadeMenu extends React.Component {
 
   render() {
     const { anchorEl } = this.state;
+    const open = Boolean(anchorEl);
 
     return (
       <div>
         <Button
-          aria-owns={anchorEl ? 'fade-menu' : null}
+          aria-owns={open ? 'fade-menu' : null}
           aria-haspopup="true"
           onClick={this.handleClick}
         >
@@ -32,7 +33,7 @@ class FadeMenu extends React.Component {
         <Menu
           id="fade-menu"
           anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
+          open={open}
           onClose={this.handleClose}
           TransitionComponent={Fade}
         >

docs/src/pages/demos/menus/LongMenu.js

@@ -38,12 +38,13 @@ class LongMenu extends React.Component {
 
   render() {
     const { anchorEl } = this.state;
+    const open = Boolean(anchorEl);
 
     return (
       <div>
         <IconButton
           aria-label="More"
-          aria-owns={anchorEl ? 'long-menu' : null}
+          aria-owns={open ? 'long-menu' : null}
           aria-haspopup="true"
           onClick={this.handleClick}
         >
@@ -52,7 +53,7 @@ class LongMenu extends React.Component {
         <Menu
           id="long-menu"
           anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
+          open={open}
           onClose={this.handleClose}
           PaperProps={{
             style: {

docs/src/pages/demos/menus/RenderPropsMenu.js

@@ -0,0 +1,42 @@
+import 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 toRenderProps from 'recompose/toRenderProps';
+import withState from 'recompose/withState';
+
+const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
+
+function RenderPropsMenu() {
+  return (
+    <WithState>
+      {({ anchorEl, updateAnchorEl }) => {
+        const open = Boolean(anchorEl);
+        const handleClose = () => {
+          updateAnchorEl(null);
+        };
+
+        return (
+          <React.Fragment>
+            <Button
+              aria-owns={open ? 'render-props-menu' : null}
+              aria-haspopup="true"
+              onClick={event => {
+                updateAnchorEl(event.currentTarget);
+              }}
+            >
+              Open Menu
+            </Button>
+            <Menu id="render-props-menu" anchorEl={anchorEl} open={open} onClose={handleClose}>
+              <MenuItem onClick={handleClose}>Profile</MenuItem>
+              <MenuItem onClick={handleClose}>My account</MenuItem>
+              <MenuItem onClick={handleClose}>Logout</MenuItem>
+            </Menu>
+          </React.Fragment>
+        );
+      }}
+    </WithState>
+  );
+}
+
+export default RenderPropsMenu;

docs/src/pages/demos/menus/menus.md

@@ -55,3 +55,10 @@ You can use the same list composition features with the `MenuItem` component:
 Use a different transition altogether.
 
 {{"demo": "pages/demos/menus/FadeMenu.js"}}
+
+## Render Props
+
+It is a [render props](https://reactjs.org/docs/render-props.html) demo that
+keeps track of the local state for a single menu.
+
+{{"demo": "pages/demos/menus/RenderPropsMenu.js"}}

docs/src/pages/utils/popover/MouseOverPopover.js

@@ -21,7 +21,7 @@ class MouseOverPopover extends React.Component {
   };
 
   handlePopoverOpen = event => {
-    this.setState({ anchorEl: event.target });
+    this.setState({ anchorEl: event.currentTarget });
   };
 
   handlePopoverClose = () => {
@@ -35,10 +35,16 @@ class MouseOverPopover extends React.Component {
 
     return (
       <div>
-        <Typography onMouseEnter={this.handlePopoverOpen} onMouseLeave={this.handlePopoverClose}>
+        <Typography
+          aria-owns={open ? 'mouse-over-popover' : null}
+          aria-haspopup="true"
+          onMouseEnter={this.handlePopoverOpen}
+          onMouseLeave={this.handlePopoverClose}
+        >
           Hover with a Popover.
         </Typography>
         <Popover
+          id="mouse-over-popover"
           className={classes.popover}
           classes={{
             paper: classes.paper,

docs/src/pages/utils/popover/RenderPropsPopover.js

@@ -0,0 +1,66 @@
+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 toRenderProps from 'recompose/toRenderProps';
+import withState from 'recompose/withState';
+
+const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
+
+const styles = theme => ({
+  typography: {
+    margin: theme.spacing.unit * 2,
+  },
+});
+
+function RenderPropsPopover(props) {
+  const { classes } = props;
+
+  return (
+    <WithState>
+      {({ anchorEl, updateAnchorEl }) => {
+        const open = Boolean(anchorEl);
+        return (
+          <React.Fragment>
+            <Button
+              aria-owns={open ? 'render-props-popover' : null}
+              aria-haspopup="true"
+              variant="contained"
+              onClick={event => {
+                updateAnchorEl(event.currentTarget);
+              }}
+            >
+              Open Popover
+            </Button>
+            <Popover
+              id="render-props-popover"
+              open={open}
+              anchorEl={anchorEl}
+              onClose={() => {
+                updateAnchorEl(null);
+              }}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'center',
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center',
+              }}
+            >
+              <Typography className={classes.typography}>The content of the Popover.</Typography>
+            </Popover>
+          </React.Fragment>
+        );
+      }}
+    </WithState>
+  );
+}
+
+RenderPropsPopover.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(RenderPropsPopover);

docs/src/pages/utils/popover/SimplePopover.js

@@ -31,14 +31,21 @@ class SimplePopover extends React.Component {
   render() {
     const { classes } = this.props;
     const { anchorEl } = this.state;
+    const open = Boolean(anchorEl);
 
     return (
       <div>
-        <Button variant="contained" onClick={this.handleClick}>
+        <Button
+          aria-owns={open ? 'simple-popper' : null}
+          aria-haspopup="true"
+          variant="contained"
+          onClick={this.handleClick}
+        >
           Open Popover
         </Button>
         <Popover
-          open={Boolean(anchorEl)}
+          id="simple-popper"
+          open={open}
           anchorEl={anchorEl}
           onClose={this.handleClose}
           anchorOrigin={{

docs/src/pages/utils/popover/popover.md

@@ -30,3 +30,10 @@ the position of the popover.
 We demonstrate how to use the `Popover` component to implement a popover behavior based on the mouse over event.
 
 {{"demo": "pages/utils/popover/MouseOverPopover.js"}}
+
+## Render Props
+
+It is a [render props](https://reactjs.org/docs/render-props.html) demo that
+keeps track of the local state for a single popover.
+
+{{"demo": "pages/utils/popover/RenderPropsPopover.js"}}

docs/src/pages/utils/popper/FakedReferencePopper.js

@@ -50,10 +50,11 @@ class FakedReferencePopper extends React.Component {
   render() {
     const { classes } = this.props;
     const { anchorEl, open } = this.state;
+    const id = open ? 'faked-reference-popper' : null;
 
     return (
       <div onMouseLeave={this.handleClose}>
-        <Typography onMouseUp={this.handleMouseUp}>
+        <Typography aria-describedby={id} onMouseUp={this.handleMouseUp}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit
           amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi
           finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada
@@ -62,7 +63,7 @@ class FakedReferencePopper extends React.Component {
           facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
           lacinia tellus a libero volutpat maximus.
         </Typography>
-        <Popper open={open} anchorEl={anchorEl} transition placement="bottom-start">
+        <Popper id={id} open={open} anchorEl={anchorEl} transition placement="bottom-start">
           {({ TransitionProps }) => (
             <Fade {...TransitionProps} timeout={350}>
               <Paper>

docs/src/pages/utils/popper/RenderPropsPopper.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import Fade from '@material-ui/core/Fade';
+import Paper from '@material-ui/core/Paper';
+import toRenderProps from 'recompose/toRenderProps';
+import withState from 'recompose/withState';
+
+const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
+
+const styles = theme => ({
+  typography: {
+    padding: theme.spacing.unit * 2,
+  },
+});
+
+function RenderPropsPopper(props) {
+  const { classes } = props;
+
+  return (
+    <WithState>
+      {({ anchorEl, updateAnchorEl }) => {
+        const open = Boolean(anchorEl);
+        const id = open ? 'render-props-popper' : null;
+        return (
+          <React.Fragment>
+            <Button
+              aria-describedby={id}
+              variant="contained"
+              onClick={event => {
+                updateAnchorEl(anchorEl ? null : event.currentTarget);
+              }}
+            >
+              Toggle Popper
+            </Button>
+            <Popper id={id} open={open} anchorEl={anchorEl} transition>
+              {({ TransitionProps }) => (
+                <Fade {...TransitionProps} timeout={350}>
+                  <Paper>
+                    <Typography className={classes.typography}>
+                      The content of the Popper.
+                    </Typography>
+                  </Paper>
+                </Fade>
+              )}
+            </Popper>
+          </React.Fragment>
+        );
+      }}
+    </WithState>
+  );
+}
+
+RenderPropsPopper.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(RenderPropsPopper);

docs/src/pages/utils/popper/ScrollPlayground.js

@@ -175,6 +175,7 @@ class AnchorPlayground extends React.Component {
 >
 \`\`\`
 `;
+    const id = open ? 'scroll-playground' : null;
 
     return (
       <div className={classes.root}>
@@ -188,6 +189,7 @@ class AnchorPlayground extends React.Component {
                   }}
                   variant="contained"
                   onClick={this.handleClickButton}
+                  aria-describedby={id}
                 >
                   Toggle Popper
                 </Button>
@@ -196,6 +198,7 @@ class AnchorPlayground extends React.Component {
                   modifiers.
                 </Typography>
                 <Popper
+                  id={id}
                   open={open}
                   anchorEl={this.anchorEl}
                   placement={placement}

docs/src/pages/utils/popper/popper.md

@@ -40,3 +40,10 @@ You just need to create an object shaped like the [`ReferenceObject`](https://gi
 Highlight part of the text to see the popper:
 
 {{"demo": "pages/utils/popper/FakedReferencePopper.js"}}
+
+## Render Props
+
+It is a [render props](https://reactjs.org/docs/render-props.html) demo that
+keeps track of the local state for a single popper.
+
+{{"demo": "pages/utils/popper/RenderPropsPopper.js"}}

pages/demos/menus.js

@@ -48,6 +48,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/menus/FadeMenu'), 'utf8')
+`,
+        },
+        'pages/demos/menus/RenderPropsMenu.js': {
+          js: require('docs/src/pages/demos/menus/RenderPropsMenu').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/menus/RenderPropsMenu'), 'utf8')
 `,
         },
       }}

pages/utils/popover.js

@@ -27,6 +27,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/utils/popover/MouseOverPopover'), 'utf8')
+`,
+        },
+        'pages/utils/popover/RenderPropsPopover.js': {
+          js: require('docs/src/pages/utils/popover/RenderPropsPopover').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/utils/popover/RenderPropsPopover'), 'utf8')
 `,
         },
       }}

pages/utils/popper.js

@@ -41,6 +41,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/utils/popper/ScrollPlayground'), 'utf8')
+`,
+        },
+        'pages/utils/popper/RenderPropsPopper.js': {
+          js: require('docs/src/pages/utils/popper/RenderPropsPopper').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/utils/popper/RenderPropsPopper'), 'utf8')
 `,
         },
       }}