Initial attempt @ using radixdropdown for mainmenu

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -7,6 +7,8 @@ import Stack from "../Stack";
 import React from "react";
 import { DropdownMenuContentPropsContext } from "./common";
 
+import * as DropdownMenuRadix from "@radix-ui/react-dropdown-menu";
+
 const MenuContent = ({
   children,
   onClickOutside,
@@ -34,7 +36,7 @@ const MenuContent = ({
 
   return (
     <DropdownMenuContentPropsContext.Provider value={{ onSelect }}>
-      <div
+      <DropdownMenuRadix.Content
         ref={menuRef}
         className={classNames}
         style={style}
@@ -53,7 +55,7 @@ const MenuContent = ({
             {children}
           </Island>
         )}
-      </div>
+      </DropdownMenuRadix.Content>
     </DropdownMenuContentPropsContext.Provider>
   );
 };

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx";
 import { useDevice, useExcalidrawAppState } from "../App";
+import * as DropdownMenuRadix from "@radix-ui/react-dropdown-menu";
 
 const MenuTrigger = ({
   className = "",
@@ -21,7 +22,7 @@ const MenuTrigger = ({
     },
   ).trim();
   return (
-    <button
+    <DropdownMenuRadix.Trigger
       data-prevent-outside-click
       className={classNames}
       onClick={onToggle}
@@ -29,7 +30,7 @@ const MenuTrigger = ({
       data-testid="dropdown-menu-button"
     >
       {children}
-    </button>
+    </DropdownMenuRadix.Trigger>
   );
 };
 

src/components/main-menu/MainMenu.tsx

@@ -15,6 +15,8 @@ import { withInternalFallback } from "../hoc/withInternalFallback";
 import { composeEventHandlers } from "../../utils";
 import { useTunnels } from "../context/tunnels";
 
+import * as DropdownMenuRadix from "@radix-ui/react-dropdown-menu";
+
 const MainMenu = Object.assign(
   withInternalFallback(
     "MainMenu",
@@ -38,7 +40,7 @@ const MainMenu = Object.assign(
 
       return (
         <mainMenuTunnel.In>
-          <DropdownMenu open={appState.openMenu === "canvas"}>
+          <DropdownMenuRadix.Root open={appState.openMenu === "canvas"}>
             <DropdownMenu.Trigger
               onToggle={() => {
                 setAppState({
@@ -65,7 +67,7 @@ const MainMenu = Object.assign(
                 </fieldset>
               )}
             </DropdownMenu.Content>
-          </DropdownMenu>
+          </DropdownMenuRadix.Root>
         </mainMenuTunnel.In>
       );
     },