feat: close MainMenu and Library dropdown on item select (#6152)

src/components/main-menu/MainMenu.tsx

@@ -11,14 +11,25 @@ import * as DefaultItems from "./DefaultItems";
 import { UserList } from "../UserList";
 import { t } from "../../i18n";
 import { HamburgerMenuIcon } from "../icons";
+import { composeEventHandlers } from "../../utils";
 
-const MainMenu = ({ children }: { children?: React.ReactNode }) => {
+const MainMenu = ({
+  children,
+  onSelect,
+}: {
+  children?: React.ReactNode;
+  /**
+   * Called when any menu item is selected (clicked on).
+   */
+  onSelect?: (event: Event) => void;
+}) => {
   const device = useDevice();
   const appState = useExcalidrawAppState();
   const setAppState = useExcalidrawSetAppState();
   const onClickOutside = device.isMobile
     ? undefined
     : () => setAppState({ openMenu: null });
+
   return (
     <DropdownMenu open={appState.openMenu === "canvas"}>
       <DropdownMenu.Trigger
@@ -30,7 +41,12 @@ const MainMenu = ({ children }: { children?: React.ReactNode }) => {
       >
         {HamburgerMenuIcon}
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content onClickOutside={onClickOutside}>
+      <DropdownMenu.Content
+        onClickOutside={onClickOutside}
+        onSelect={composeEventHandlers(onSelect, () => {
+          setAppState({ openMenu: null });
+        })}
+      >
         {children}
         {device.isMobile && appState.collaborators.size > 0 && (
           <fieldset className="UserList-Wrapper">