Merge branch 'master' into barnabasmolnar/mainmenu-radix

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -1,11 +1,10 @@
-import { useOutsideClickHook } from "../../hooks/useOutsideClick";
 import { Island } from "../Island";
-
 import { useDevice } from "../App";
 import clsx from "clsx";
 import Stack from "../Stack";
-import React from "react";
+import React, { useRef } from "react";
 import { DropdownMenuContentPropsContext } from "./common";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
@@ -28,7 +27,9 @@ const MenuContent = ({
   sideOffset?: number;
 }) => {
   const device = useDevice();
-  const menuRef = useOutsideClickHook(() => {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useOutsideClick(menuRef, () => {
     onClickOutside?.();
   });
 
@@ -55,7 +56,7 @@ const MenuContent = ({
           <Island
             className="dropdown-menu-container"
             padding={2}
-            style={{ zIndex: 1 }}
+            style={{ zIndex: 2 }}
           >
             {children}
           </Island>

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -1,23 +1,24 @@
 import clsx from "clsx";
-import { useDevice, useExcalidrawAppState } from "../App";
+import { useDevice } from "../App";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 const MenuTrigger = ({
   className = "",
   children,
   onToggle,
+  title,
+  ...rest
 }: {
   className?: string;
   children: React.ReactNode;
   onToggle: () => void;
-}) => {
-  const appState = useExcalidrawAppState();
+  title?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
   const device = useDevice();
   const classNames = clsx(
     `dropdown-menu-button ${className}`,
     "zen-mode-transition",
     {
-      "transition-left": appState.zenModeEnabled,
       "dropdown-menu-button--mobile": device.isMobile,
     },
   ).trim();
@@ -28,6 +29,8 @@ const MenuTrigger = ({
       onClick={onToggle}
       type="button"
       data-testid="dropdown-menu-button"
+      title={title}
+      {...rest}
     >
       {children}
     </DropdownMenuPrimitive.Trigger>