[Menu] Add new context menu demo (#17839)

docs/src/pages/components/menus/ContextMenu.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
+
+const initialState = {
+  mouseX: null,
+  mouseY: null,
+};
+
+export default function ContextMenu() {
+  const [state, setState] = React.useState(initialState);
+
+  const handleClick = event => {
+    event.preventDefault();
+    setState({
+      mouseX: event.clientX - 2,
+      mouseY: event.clientY - 4,
+    });
+  };
+
+  const handleClose = () => {
+    setState(initialState);
+  };
+
+  return (
+    <div onContextMenu={handleClick} style={{ cursor: 'context-menu' }}>
+      <Typography>
+        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
+        ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis
+        finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet
+        facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
+        lacinia tellus a libero volutpat maximus.
+      </Typography>
+      <Menu
+        keepMounted
+        open={state.mouseY !== null}
+        onClose={handleClose}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          state.mouseY !== null && state.mouseX !== null
+            ? { top: state.mouseY, left: state.mouseX }
+            : undefined
+        }
+      >
+        <MenuItem onClick={handleClose}>Copy</MenuItem>
+        <MenuItem onClick={handleClose}>Print</MenuItem>
+        <MenuItem onClick={handleClose}>Highlight</MenuItem>
+        <MenuItem onClick={handleClose}>Email</MenuItem>
+      </Menu>
+    </div>
+  );
+}

docs/src/pages/components/menus/ContextMenu.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
+
+const initialState = {
+  mouseX: null,
+  mouseY: null,
+};
+
+export default function ContextMenu() {
+  const [state, setState] = React.useState<{
+    mouseX: null | number;
+    mouseY: null | number;
+  }>(initialState);
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setState({
+      mouseX: event.clientX - 2,
+      mouseY: event.clientY - 4,
+    });
+  };
+
+  const handleClose = () => {
+    setState(initialState);
+  };
+
+  return (
+    <div onContextMenu={handleClick} style={{ cursor: 'context-menu' }}>
+      <Typography>
+        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
+        ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis
+        finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet
+        facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
+        lacinia tellus a libero volutpat maximus.
+      </Typography>
+      <Menu
+        keepMounted
+        open={state.mouseY !== null}
+        onClose={handleClose}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          state.mouseY !== null && state.mouseX !== null
+            ? { top: state.mouseY, left: state.mouseX }
+            : undefined
+        }
+      >
+        <MenuItem onClick={handleClose}>Copy</MenuItem>
+        <MenuItem onClick={handleClose}>Print</MenuItem>
+        <MenuItem onClick={handleClose}>Highlight</MenuItem>
+        <MenuItem onClick={handleClose}>Email</MenuItem>
+      </Menu>
+    </div>
+  );
+}

docs/src/pages/components/menus/menus.md

@@ -67,6 +67,12 @@ Use a different transition.
 
 {{"demo": "pages/components/menus/FadeMenu.js"}}
 
+## Context menu
+
+Here is an example of a context menu. (Right click to open.)
+
+{{"demo": "pages/components/menus/ContextMenu.js"}}
+
 ## Complementary projects
 
 For more advanced use cases you might be able to take advantage of: