Add hook to ease menu implementation

packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx

@@ -21,57 +21,36 @@ import HierarchyExplorer from './HierarchyExplorer';
 import client from '../../api';
 import { useDom } from '../DomLoader';
 import JsonView from '../../components/JsonView';
+import useMenu from '../../utils/useMenu';
 
 const PagePanelRoot = styled('div')({
   display: 'flex',
   flexDirection: 'column',
 });
 
 function AppMenu() {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleAppMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleAppMenuClose = () => {
-    setAnchorEl(null);
-  };
-  const buttonId = React.useId();
-  const menuId = React.useId();
+  const { buttonProps, menuProps, onMenuClose } = useMenu();
+
   const dialogTitleId = React.useId();
 
   const [viewDomDialogOpen, setViewDomDialogOpen] = React.useState(false);
 
   const dom = useDom();
 
   const handleViewDomClick = React.useCallback(() => {
-    handleAppMenuClose();
+    onMenuClose();
     setViewDomDialogOpen(true);
-  }, []);
+  }, [onMenuClose]);
 
   const handleViewDomDialogClose = React.useCallback(() => setViewDomDialogOpen(false), []);
 
   return (
     <React.Fragment>
-      <IconButton
-        id={buttonId}
-        aria-controls={open ? menuId : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? 'true' : undefined}
-        onClick={handleAppMenuClick}
-      >
+      <IconButton {...buttonProps} aria-label="Application menu">
         <MoreVertIcon />
       </IconButton>
 
-      <Menu
-        id={menuId}
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleAppMenuClose}
-        MenuListProps={{
-          'aria-labelledby': buttonId,
-        }}
-      >
+      <Menu {...menuProps}>
         <MenuItem onClick={handleViewDomClick}>View DOM</MenuItem>
       </Menu>
 

packages/toolpad-app/src/toolpad/ToolpadShell.tsx

@@ -15,6 +15,7 @@ import {
 import HomeIcon from '@mui/icons-material/Home';
 import HelpOutlinedIcon from '@mui/icons-material/HelpOutlined';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import useMenu from '../utils/useMenu';
 
 const DOCUMENTATION_URL = 'https://mui.com/toolpad/getting-started/setup/';
 const REPORT_BUG_URL =
@@ -55,39 +56,16 @@ const ViewPort = styled('div')({
 });
 
 function UserFeedback() {
-  const menuId = React.useId();
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
+  const { buttonProps, menuProps } = useMenu();
 
   return (
     <React.Fragment>
       <Tooltip title="Help and resources">
-        <IconButton
-          id={menuId}
-          aria-controls={open ? menuId : undefined}
-          aria-haspopup="true"
-          aria-expanded={open ? 'true' : undefined}
-          onClick={handleClick}
-          color="inherit"
-        >
+        <IconButton {...buttonProps} color="inherit">
           <HelpOutlinedIcon />
         </IconButton>
       </Tooltip>
-      <Menu
-        id={menuId}
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        MenuListProps={{
-          'aria-labelledby': menuId,
-        }}
-      >
+      <Menu {...menuProps}>
         <FeedbackMenuItemLink href={DOCUMENTATION_URL}>Documentation</FeedbackMenuItemLink>
         <FeedbackMenuItemLink href={REPORT_BUG_URL}>Report bug</FeedbackMenuItemLink>
         <FeedbackMenuItemLink href={FEATURE_REQUEST_URL}>

packages/toolpad-app/src/utils/useMenu.ts

@@ -0,0 +1,46 @@
+import { ButtonProps, MenuProps } from '@mui/material';
+import * as React from 'react';
+
+export default function useMenu() {
+  const buttonId = React.useId();
+  const menuId = React.useId();
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const onMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  const buttonProps = React.useMemo<ButtonProps>(
+    () => ({
+      id: buttonId,
+      'aria-controls': open ? menuId : undefined,
+      'aria-haspopup': 'true',
+      'aria-expanded': open ? 'true' : undefined,
+      onClick: handleClick,
+    }),
+    [buttonId, menuId, open],
+  );
+
+  const menuProps = React.useMemo<MenuProps>(
+    () => ({
+      id: menuId,
+      anchorEl,
+      open,
+      onClose: onMenuClose,
+      MenuListProps: {
+        'aria-labelledby': buttonId,
+      },
+    }),
+    [anchorEl, buttonId, menuId, open],
+  );
+
+  return {
+    buttonProps,
+    menuProps,
+    onMenuClose,
+  };
+}