Append a Menu close demo

[tiyee]

Close the opened state inside of the Menu.

you can show it like this

/** @format */

import {Popover, Menu, Position, MenuIcon, IconButton} from 'evergreen-ui'
import React from 'react'
import ReactDOM from 'react-dom'

function MenuWithClose() {
    const [open, setOpen] = React.useState(false)
    return (
        <Popover
            isShown={open}
            onOpen={() => {
                setOpen(true)
            }}
            position={Position.BOTTOM_LEFT}
            content={
                <Menu>
                    <Menu.Group>
                        <Menu.Item onSelect={() => setOpen(false)}>Close</Menu.Item>
                    </Menu.Group>
                </Menu>
            }
            shouldCloseOnExternalClick={true}>
            <IconButton icon={MenuIcon} height={40} />
        </Popover>
    )
}

ReactDOM.render(<MenuWithClose />, document.getElementById('root'))

[netlify[bot]]

✔️ Deploy Preview for evergreen-storybook ready!

🔨 Explore the source changes: 617d8d4bd770c274edbe87a5caecfa16d18757b6

🔍 Inspect the deploy log: https://app.netlify.com/sites/evergreen-storybook/deploys/62061ee9a26da7000725dd07

😎 Browse the preview: https://deploy-preview-1406--evergreen-storybook.netlify.app

[brandongregoryscott]

Hi @tiyee, thanks for the contribution. While this is certainly an acceptable usage of the Popover and Menu components, it is a more advanced use-case that we aren't necessarily trying to push people to use unless there's a good case for it. Specifically, controlling the Popover state yourself has some drawbacks:

The shouldCloseOnExternalClick prop has no effect (which you should notice in your example), as well as losing out on the automatic close when the ESC key is hit.