Feature Request: render props components for managing menu, popover, etc. state

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

I find that using a render props component is almost always more convenient for managing local state, especially for cases like Menus and Popovers where the pattern is almost always going to be the same.

Not to mention components like this would help users avoid forgetting to write ARIA attributes.

For example, I just coded up the following MenuState component for myself. I’d be happy to make a PR including docs once you guys say you’re interested in this.

// @flow

import * as React from 'react'

export type Props = {
  menuId?: ?string,
  children: (props: ChildProps) => ?React.Node,
}

export type ChildProps = {
  open: (event: Event) => any,
  close: () => any,
  isOpen: boolean,
  bindTrigger: {
    'aria-owns': ?string,
    'aria-haspopup': true,
    onClick: (event: Event) => any,
  },
  bindMenu: {
    id: ?string,
    anchorEl: ?HTMLElement,
    open: boolean,
    onClose: () => any,
  },
}

export type State = {
  anchorEl: ?HTMLElement,
}

export default class MenuState extends React.Component<Props, State> {
  state: State = {anchorEl: null}

  open = (event: Event) => this.setState({anchorEl: (event: any).target})
  close = () => this.setState({anchorEl: null})

  render(): ?React.Node {
    const {open, close} = this
    const {menuId, children} = this.props
    const {anchorEl} = this.state

    const isOpen = Boolean(anchorEl)

    return children({
      open,
      close,
      isOpen,
      bindTrigger: {
        'aria-owns': isOpen ? menuId : null,
        'aria-haspopup': true,
        onClick: open,
      },
      bindMenu: {
        id: menuId,
        anchorEl,
        open: isOpen,
        onClose: close,
      },
    })
  }
}

Usage example:

const AddDeviceGroupButton = ({onConfirm}: Props) => (
  <MenuState menuId="add-device-group-menu">
    {({close, bindTrigger, bindMenu}) => (
      <React.Fragment>
        <Button {...bindTrigger}>
          <IconInButtonStyles>
            {({classes}) => <AddRectangle className={classes.leftIcon} />}
          </IconInButtonStyles>
          Add Topic
        </Button>
        <Menu {...bindMenu}>
          <MenuItem
            onClick={() => {
              close()
              if (onConfirm) onConfirm(FROM_DEVICE)
            }}
          >
            From MQTT
          </MenuItem>
          <MenuItem
            onClick={() => {
              close()
              if (onConfirm) onConfirm(TO_DEVICE)
            }}
          >
            To MQTT
          </MenuItem>
        </Menu>
      </React.Fragment>
    )}
  </MenuState>
)

[jedwards1211]

Yeah, will do soon

[jedwards1211]

@mattbrookes that’s a good idea, though i think there should be an option to choose between pressing enter or space to open a submenu, or opening it automatically when stepping to the menu item with arrow keys. I think i’ve seen menus before where the submenu opens automatically but one has to press the right arrow to move into it (and the left arrow to move back to the parent menu)