init project

test/regressions/fixtures/Menu/DenseMenu.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import Divider from '@mui/material/Divider';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Check from '@mui/icons-material/Check';
+
+export default function DenseMenu() {
+  return (
+    <Paper sx={{ width: 320 }}>
+      <MenuList dense>
+        <MenuItem>
+          <ListItemText inset>Single</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemText inset>1.15</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemText inset>Double</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <Check />
+          </ListItemIcon>
+          Custom: 1.2
+        </MenuItem>
+        <Divider />
+        <MenuItem>
+          <ListItemText>Add space before paragraph</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemText>Add space after paragraph</ListItemText>
+        </MenuItem>
+        <Divider />
+        <MenuItem>
+          <ListItemText>Custom spacing...</ListItemText>
+        </MenuItem>
+      </MenuList>
+    </Paper>
+  );
+}

test/regressions/fixtures/Menu/LongMenu.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+
+const options = [
+  'None',
+  'Atria',
+  'Callisto',
+  'Dione',
+  'Ganymede',
+  'Hangouts Call',
+  'Luna',
+  'Oberon',
+  'Phobos',
+  'Pyxis',
+  'Sedna',
+  'Titania',
+  'Triton',
+  'Umbriel',
+];
+
+const ITEM_HEIGHT = 48;
+
+class LongMenu extends React.Component {
+  buttonRef = React.createRef();
+
+  state = {
+    anchorEl: null,
+  };
+
+  componentDidMount() {
+    this.setState({ anchorEl: this.buttonRef.current });
+  }
+
+  render() {
+    const { anchorEl } = this.state;
+    const open = Boolean(anchorEl);
+
+    return (
+      <Box sx={{ m: '200px 0 200px', background: 'papayawhip', p: '0 100px' }}>
+        <IconButton
+          ref={this.buttonRef}
+          aria-label="more"
+          aria-owns={open ? 'long-menu' : undefined}
+          aria-haspopup="true"
+          onClick={this.handleClick}
+        >
+          <MoreVertIcon />
+        </IconButton>
+        <Menu
+          id="long-menu"
+          anchorEl={anchorEl}
+          open={open}
+          PaperProps={{
+            style: {
+              maxHeight: ITEM_HEIGHT * 4.5,
+              width: 200,
+            },
+          }}
+        >
+          {options.map((option) => (
+            <MenuItem key={option} selected={option === 'Pyxis'}>
+              {option}
+            </MenuItem>
+          ))}
+        </Menu>
+      </Box>
+    );
+  }
+}
+
+export default LongMenu;

test/regressions/fixtures/Menu/MenuContentAnchors.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
+
+const MenuItemStyled = styled(MenuItem)({
+  '&.Mui-focusVisible': { border: '3px dashed black' },
+  '&.Mui-selected': { border: '3px dotted black' },
+  '&.Mui-focusVisible.Mui-selected': { border: '3px solid black' },
+});
+
+/**
+ * Item 1 or 2 can be pre-selected to check alignment between anchorEl and menuitem
+ */
+function SimpleMenu({ selectedItem, ...props }) {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  return (
+    <Grid>
+      <Button
+        style={{
+          // give the anchor enough space so that the menu can align the selected item
+          margin: '80px 0',
+        }}
+        ref={setAnchorEl}
+      >
+        open button
+      </Button>
+      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} transitionDuration={0} {...props}>
+        {null}
+        <MenuItemStyled selected={selectedItem === 1}>Item 1</MenuItemStyled>
+        <MenuItemStyled selected={selectedItem === 2}>Item 2</MenuItemStyled>
+        <MenuItemStyled>Item 3</MenuItemStyled>
+      </Menu>
+    </Grid>
+  );
+}
+
+SimpleMenu.propTypes = { selectedItem: PropTypes.number };
+
+export default function MenuContentAnchors() {
+  return (
+    <Grid container>
+      <SimpleMenu variant="selectedMenu" />
+      <SimpleMenu variant="menu" />
+      <SimpleMenu selectedItem={1} variant="selectedMenu" />
+      <SimpleMenu selectedItem={1} variant="menu" />
+      <SimpleMenu selectedItem={2} variant="selectedMenu" />
+      <SimpleMenu selectedItem={2} variant="menu" />
+    </Grid>
+  );
+}

test/regressions/fixtures/Menu/SimpleMenuList.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+
+export default function SimpleMenuList() {
+  return (
+    <Paper elevation={8}>
+      <MenuList>
+        <MenuItem>Profile</MenuItem>
+        <MenuItem selected>My Account</MenuItem>
+        <MenuItem>Logout</MenuItem>
+      </MenuList>
+    </Paper>
+  );
+}