feat: new Menu Component API (#6034)

* feat: new Menu Component API

* allow valid children types

* introduce menu group to group items

* Add lang footer

* use display name

* displayName

* define types inside

* fix default menu

* add json export to menu

* fix

* simplify expression

* put open menu into own compo to optimize perf

So that we don't rerun `useOutsideClickHook` (and rebind event listeners
all the time)

* naming tweaks

* rename MenuComponents->MenuDefaultItems and export default items from Menu.Items

* import Menu.scss in Menu.tsx

* move menu scss to excal app

* Don't filter children inside menu group

* move E+ out of socials

* support style prop for MenuItem and MenuGroup

* Support header in menu group and add Excalidraw links header for default items in social section

* rename header to title

* fix padding for lang

* render menu in mobile

* review fixes

* tweaks

* Export collaborators and show in mobile menu

* revert .env

* lint :p

* again lint

* show correct actions in view mode for mobile

* Whitelist Collaborators Comp

* mobile styling

* padding

* don't show nerds when menu open in mobile

* lint :(

* hide shortcuts

* refactor userlist to support mobile and keep a wrapper comp for excal app

* use only UserList

* render only on mobile for default items

* remove unused hooks

* Show collab button in menu when onCollabButtonClick present and hide export when UIOptions.canvasActions.export is false

* fix tests

* lint

* inject userlist inside menu on mobile

* revert userlist

* move menu socials to default menu

* fix collab

* use meny in library

* Make Menu generic and create hamburgemenu for public excal menu and use menu in library as well

* use appState.openMenu for mobile

* fix tests

* styling fixes and support style and class name in menu content

* fix test

* rename MenuDefaultItems->DefaultItems

* move footer css to its own comp

* rename HamburgerMenu -> MainMenu

* rename menu -> dropdownMenu and update classes, onClick->onToggle

* close main menu when dialog closes

* by bye filtering

* update docs

* fix lint

* update example, docs for useDevice and footer in mobile, rename menu ->DropDownMenu everywhere

* spec

* remove isMenuOpenAtom and set openMenu as canvas for main menu, render decreases in specs :)

* [temp] remove cyclic depenedency to fix build

* hack- update appstate to sync lang change

* Add more specs

* wip: rewrite MainMenu footer

* fix margin

* fix snaps

* not needed as lang list no more imported

* simplify custom footer rendering

* Add DropdownMenuItemLink and DropdownMenuItemCustom and update API, docs

* fix `MainMenu.ItemCustom`

* naming

* use onSelect and base class for custom items

* fix lint

* fix snap

* use custom item for lang

* update docs

* fix

* properly use `MainMenu.ItemCustom` for `LanguageList`

* add margin top to custom items

* flex

Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/dropdownMenu/DropdownMenu.scss

@@ -0,0 +1,127 @@
+@import "../../css/variables.module";
+
+.excalidraw {
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    margin-top: 0.25rem;
+
+    &--mobile {
+      bottom: 55px;
+      top: auto;
+      left: 0;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      row-gap: 0.75rem;
+
+      .dropdown-menu-container {
+        padding: 8px 8px;
+        box-sizing: border-box;
+        background-color: var(--island-bg-color);
+        box-shadow: var(--shadow-island);
+        border-radius: var(--border-radius-lg);
+        position: relative;
+        transition: box-shadow 0.5s ease-in-out;
+
+        &.zen-mode {
+          box-shadow: none;
+        }
+      }
+    }
+
+    .dropdown-menu-container {
+      background-color: #fff !important;
+      max-height: calc(100vh - 150px);
+      overflow-y: auto;
+      --gap: 2;
+    }
+
+    .dropdown-menu-item-base {
+      display: flex;
+      padding: 0 0.625rem;
+      column-gap: 0.625rem;
+      font-size: 0.875rem;
+      color: var(--color-gray-100);
+      width: 100%;
+      box-sizing: border-box;
+      font-weight: normal;
+      font-family: inherit;
+    }
+
+    .dropdown-menu-item {
+      background-color: transparent;
+      border: 0;
+      align-items: center;
+      height: 2rem;
+      cursor: pointer;
+      border-radius: var(--border-radius-md);
+
+      @media screen and (min-width: 1921px) {
+        height: 2.25rem;
+      }
+
+      &__text {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      &__shortcut {
+        margin-inline-start: auto;
+        opacity: 0.5;
+      }
+
+      &:hover {
+        background-color: var(--button-hover);
+        text-decoration: none;
+      }
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+        display: block;
+      }
+    }
+
+    .dropdown-menu-item-custom {
+      margin-top: 0.5rem;
+    }
+
+    .dropdown-menu-group-title {
+      font-size: 14px;
+      text-align: left;
+      margin: 10px 0;
+      font-weight: 500;
+    }
+  }
+  &.theme--dark {
+    .dropdown-menu-item {
+      color: var(--color-gray-40);
+    }
+
+    .dropdown-menu-container {
+      background-color: var(--color-gray-90) !important;
+    }
+  }
+
+  .dropdown-menu-button {
+    @include outlineButtonStyles;
+    background-color: var(--island-bg-color);
+    width: var(--lg-button-size);
+    height: var(--lg-button-size);
+
+    svg {
+      width: var(--lg-icon-size);
+      height: var(--lg-icon-size);
+    }
+
+    &--mobile {
+      border: none;
+      margin: 0;
+      padding: 0;
+      width: var(--default-button-size);
+      height: var(--default-button-size);
+    }
+  }
+}

src/components/dropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import DropdownMenuTrigger from "./DropdownMenuTrigger";
+import DropdownMenuItem from "./DropdownMenuItem";
+import MenuSeparator from "./DropdownMenuSeparator";
+import DropdownMenuGroup from "./DropdownMenuGroup";
+import DropdownMenuContent from "./DropdownMenuContent";
+import DropdownMenuItemLink from "./DropdownMenuItemLink";
+import DropdownMenuItemCustom from "./DropdownMenuItemCustom";
+import {
+  getMenuContentComponent,
+  getMenuTriggerComponent,
+} from "./dropdownMenuUtils";
+
+import "./DropdownMenu.scss";
+
+const DropdownMenu = ({
+  children,
+  open,
+}: {
+  children?: React.ReactNode;
+  open: boolean;
+}) => {
+  const MenuTriggerComp = getMenuTriggerComponent(children);
+  const MenuContentComp = getMenuContentComponent(children);
+  return (
+    <>
+      {MenuTriggerComp}
+      {open && MenuContentComp}
+    </>
+  );
+};
+
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.ItemLink = DropdownMenuItemLink;
+DropdownMenu.ItemCustom = DropdownMenuItemCustom;
+DropdownMenu.Group = DropdownMenuGroup;
+DropdownMenu.Separator = MenuSeparator;
+
+export default DropdownMenu;
+
+DropdownMenu.displayName = "DropdownMenu";

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -0,0 +1,51 @@
+import { useOutsideClickHook } from "../../hooks/useOutsideClick";
+import { Island } from "../Island";
+
+import { useDevice } from "../App";
+import clsx from "clsx";
+import Stack from "../Stack";
+
+const MenuContent = ({
+  children,
+  onClickOutside,
+  className = "",
+  style,
+}: {
+  children?: React.ReactNode;
+  onClickOutside?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+}) => {
+  const device = useDevice();
+  const menuRef = useOutsideClickHook(() => {
+    onClickOutside?.();
+  });
+
+  const classNames = clsx(`dropdown-menu ${className}`, {
+    "dropdown-menu--mobile": device.isMobile,
+  }).trim();
+  return (
+    <div
+      ref={menuRef}
+      className={classNames}
+      style={style}
+      data-testid="dropdown-menu"
+    >
+      {/* the zIndex ensures this menu has higher stacking order,
+    see https://github.com/excalidraw/excalidraw/pull/1445 */}
+      {device.isMobile ? (
+        <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
+      ) : (
+        <Island
+          className="dropdown-menu-container"
+          padding={2}
+          style={{ zIndex: 1 }}
+        >
+          {children}
+        </Island>
+      )}
+    </div>
+  );
+};
+export default MenuContent;
+MenuContent.displayName = "DropdownMenuContent";

src/components/dropdownMenu/DropdownMenuGroup.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const MenuGroup = ({
+  children,
+  className = "",
+  style,
+  title,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  title?: string;
+}) => {
+  return (
+    <div className={`dropdown-menu-group ${className}`} style={style}>
+      {title && <p className="dropdown-menu-group-title">{title}</p>}
+      {children}
+    </div>
+  );
+};
+
+export default MenuGroup;
+MenuGroup.displayName = "DropdownMenuGroup";

src/components/dropdownMenu/DropdownMenuItem.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import MenuItemContent from "./DropdownMenuItemContent";
+
+export const getDrodownMenuItemClassName = (className = "") => {
+  return `dropdown-menu-item dropdown-menu-item-base ${className}`.trim();
+};
+
+const DropdownMenuItem = ({
+  icon,
+  onSelect,
+  children,
+  dataTestId,
+  shortcut,
+  className,
+  style,
+  ariaLabel,
+}: {
+  icon?: JSX.Element;
+  onSelect: () => void;
+  children: React.ReactNode;
+  dataTestId?: string;
+  shortcut?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  ariaLabel?: string;
+}) => {
+  return (
+    <button
+      aria-label={ariaLabel}
+      onClick={onSelect}
+      data-testid={dataTestId}
+      title={ariaLabel}
+      type="button"
+      className={getDrodownMenuItemClassName(className)}
+      style={style}
+    >
+      <MenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </MenuItemContent>
+    </button>
+  );
+};
+
+export default DropdownMenuItem;
+DropdownMenuItem.displayName = "DropdownMenuItem";

src/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -0,0 +1,23 @@
+import { useDevice } from "../App";
+
+const MenuItemContent = ({
+  icon,
+  shortcut,
+  children,
+}: {
+  icon?: JSX.Element;
+  shortcut?: string;
+  children: React.ReactNode;
+}) => {
+  const device = useDevice();
+  return (
+    <>
+      <div className="dropdown-menu-item__icon">{icon}</div>
+      <div className="dropdown-menu-item__text">{children}</div>
+      {shortcut && !device.isMobile && (
+        <div className="dropdown-menu-item__shortcut">{shortcut}</div>
+      )}
+    </>
+  );
+};
+export default MenuItemContent;

src/components/dropdownMenu/DropdownMenuItemCustom.tsx

@@ -0,0 +1,23 @@
+const DropdownMenuItemCustom = ({
+  children,
+  className = "",
+  style,
+  dataTestId,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  dataTestId?: string;
+}) => {
+  return (
+    <div
+      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
+      style={style}
+      data-testid={dataTestId}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DropdownMenuItemCustom;

src/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -0,0 +1,42 @@
+import MenuItemContent from "./DropdownMenuItemContent";
+import React from "react";
+import { getDrodownMenuItemClassName } from "./DropdownMenuItem";
+const DropdownMenuItemLink = ({
+  icon,
+  dataTestId,
+  shortcut,
+  href,
+  children,
+  className = "",
+  style,
+  ariaLabel,
+}: {
+  icon?: JSX.Element;
+  children: React.ReactNode;
+  dataTestId?: string;
+  shortcut?: string;
+  className?: string;
+  href: string;
+  style?: React.CSSProperties;
+  ariaLabel?: string;
+}) => {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className={getDrodownMenuItemClassName(className)}
+      style={style}
+      data-testid={dataTestId}
+      title={ariaLabel}
+      aria-label={ariaLabel}
+    >
+      <MenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </MenuItemContent>
+    </a>
+  );
+};
+
+export default DropdownMenuItemLink;
+DropdownMenuItemLink.displayName = "DropdownMenuItemLink";

src/components/dropdownMenu/DropdownMenuSeparator.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const MenuSeparator = () => (
+  <div
+    style={{
+      height: "1px",
+      backgroundColor: "var(--default-border-color)",
+      margin: ".5rem 0",
+    }}
+  />
+);
+
+export default MenuSeparator;
+MenuSeparator.displayName = "DropdownMenuSeparator";

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import { useDevice, useExcalidrawAppState } from "../App";
+
+const MenuTrigger = ({
+  className = "",
+  children,
+  onToggle,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  onToggle: () => void;
+}) => {
+  const appState = useExcalidrawAppState();
+  const device = useDevice();
+  const classNames = clsx(
+    `dropdown-menu-button ${className}`,
+    "zen-mode-transition",
+    {
+      "transition-left": appState.zenModeEnabled,
+      "dropdown-menu-button--mobile": device.isMobile,
+    },
+  ).trim();
+  return (
+    <button
+      data-prevent-outside-click
+      className={classNames}
+      onClick={onToggle}
+      type="button"
+      data-testid="dropdown-menu-button"
+    >
+      {children}
+    </button>
+  );
+};
+
+export default MenuTrigger;
+MenuTrigger.displayName = "DropdownMenuTrigger";

src/components/dropdownMenu/dropdownMenuUtils.ts

@@ -0,0 +1,35 @@
+import React from "react";
+
+export const getMenuTriggerComponent = (children: React.ReactNode) => {
+  const comp = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      typeof child.type !== "string" &&
+      //@ts-ignore
+      child?.type.displayName &&
+      //@ts-ignore
+      child.type.displayName === "DropdownMenuTrigger",
+  );
+  if (!comp) {
+    return null;
+  }
+  //@ts-ignore
+  return comp;
+};
+
+export const getMenuContentComponent = (children: React.ReactNode) => {
+  const comp = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      typeof child.type !== "string" &&
+      //@ts-ignore
+      child?.type.displayName &&
+      //@ts-ignore
+      child.type.displayName === "DropdownMenuContent",
+  );
+  if (!comp) {
+    return null;
+  }
+  //@ts-ignore
+  return comp;
+};