Hook to establish the relationship between a button and its popup menu

useMenu.ts

/**
 * A hook that helps establish the relationship between button and menu
 * Intended for Material-UI IconButton and Menu components, but would work nicely elsewhere
 */
import type { MouseEventHandler } from "react";
import { useMemo, useState } from "react";

interface UseMenuResults {
  ButtonProps: {
    "aria-controls"?: string,
    "aria-haspopup": "true",
    onClick: MouseEventHandler<HTMLButtonElement>,
  };
  MenuProps: {
    id?: string,
    anchorEl: Element | null,
    open: boolean,
    onClose: MouseEventHandler<HTMLButtonElement>,
  };
  closeMenu: MouseEventHandler<HTMLButtonElement>;
}

const useMenu = (id?: string): UseMenuResults => {
  const [anchorEl, setAnchorEl] = (useState < Element) | (null > null);

  const onClose = () => {
    setAnchorEl(null);
  };

  return useMemo(
    () => ({
      ButtonProps: {
        "aria-controls": id,
        "aria-haspopup": "true",
        onClick: (event) => {
          setAnchorEl(event.currentTarget);
        },
      },
      MenuProps: {
        id,
        anchorEl,
        open: Boolean(anchorEl),
        onClose,
      },
      closeMenu: onClose,
    }),
    [anchorEl, id]
  );
};

export default useMenu;