import { Box, Icon, IconButton, Menu, MenuItem } from "@mui/material"; import React from "react"; const options = [ "None", "Atria", "Callisto", "Dione", "Ganymede", "Hangouts Call", "Luna", "Oberon", "Phobos", "Pyxis", "Sedna", "Titania", "Triton", "Umbriel", ]; const ITEM_HEIGHT = 48; function MaxHeightMenu() { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); function handleClick(event) { setAnchorEl(event.currentTarget); } function handleClose() { setAnchorEl(null); } return ( <Box> <IconButton aria-label="More" aria-owns={open ? "long-menu" : undefined} aria-haspopup="true" onClick={handleClick} > <Icon>more_vert</Icon> </IconButton> <Menu open={open} id="long-menu" anchorEl={anchorEl} onClose={handleClose} PaperProps={{ style: { maxHeight: ITEM_HEIGHT * 4.5, width: 200 } }} > {options.map((option) => ( <MenuItem key={option} selected={option === "Pyxis"} onClick={handleClose}> {option} </MenuItem> ))} </Menu> </Box> ); } export default MaxHeightMenu;