fix: close floating sidebar on main menu open (#10295)

packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx

@@ -35,10 +35,16 @@ const DropdownMenu = ({
       : MenuContentComp;
 
   return (
-    <>
+    <div
+      className="dropdown-menu-container"
+      style={{
+        // remove this div from box layout
+        display: "contents",
+      }}
+    >
       {MenuTriggerComp}
       {open && MenuContentCompWithPlacement}
-    </>
+    </div>
   );
 };
 

packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx

@@ -34,8 +34,15 @@ const MenuContent = ({
 
   const callbacksRef = useStable({ onClickOutside });
 
-  useOutsideClick(menuRef, () => {
+  useOutsideClick(menuRef, (event) => {
-    callbacksRef.onClickOutside?.();
+    // prevents closing if clicking on the trigger button
+    if (
+      !menuRef.current
+        ?.closest(".dropdown-menu-container")
+        ?.contains(event.target)
+    ) {
+      callbacksRef.onClickOutside?.();
+    }
   });
 
   useEffect(() => {

packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -24,7 +24,6 @@ const MenuTrigger = ({
   ).trim();
   return (
     <button
-      data-prevent-outside-click
       className={classNames}
       onClick={onToggle}
       type="button"

packages/excalidraw/css/styles.scss

@@ -13,10 +13,10 @@
   --zIndex-hyperlinkContainer: 7;
 
   --zIndex-ui-bottom: 60;
-  --zIndex-ui-library: 80;
   --zIndex-ui-context-menu: 90;
   --zIndex-ui-styles-popup: 100;
   --zIndex-ui-top: 100;
+  --zIndex-ui-library: 120;
 
   --zIndex-modal: 1000;
   --zIndex-popup: 1001;

packages/excalidraw/hooks/useOutsideClick.ts

@@ -5,7 +5,7 @@ import { EVENT } from "@excalidraw/common";
 export function useOutsideClick<T extends HTMLElement>(
   ref: React.RefObject<T | null>,
   /** if performance is of concern, memoize the callback */
-  callback: (event: Event) => void,
+  callback: (event: Event & { target: T }) => void,
   /**
    * Optional callback which is called on every click.
    *