refactor: packages/

14 files changed, 801 insertions, 0 deletions

diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
new file mode 100644
index 0000000..e48f6d7
--- /dev/null
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
@@ -0,0 +1,218 @@
+@import "../../css/variables.module.scss";
+
+.excalidraw {
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    margin-top: 0.5rem;
+
+    &--mobile {
+      left: 0;
+      width: 100%;
+      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: var(--island-bg-color);
+      max-height: calc(100vh - 150px);
+      overflow-y: auto;
+      --gap: 2;
+    }
+
+    .dropdown-menu-item-base {
+      display: flex;
+      column-gap: 0.625rem;
+      font-size: 0.875rem;
+      color: var(--color-on-surface);
+      width: 100%;
+      box-sizing: border-box;
+      font-weight: 400;
+      font-family: inherit;
+    }
+
+    &.manual-hover {
+      // disable built-in hover due to keyboard navigation
+      .dropdown-menu-item {
+        &:hover {
+          background-color: transparent;
+        }
+
+        &--hovered {
+          background-color: var(--button-hover-bg) !important;
+        }
+
+        &--selected {
+          background-color: var(--color-primary-light) !important;
+        }
+      }
+    }
+
+    &.fonts {
+      margin-top: 1rem;
+      // display max 7 items per list, where each has 2rem (2.25) height and 1px margin top & bottom
+      // count in 2 groups, where each allocates 1.3*0.75rem font-size and 0.5rem margin bottom, plus one extra 1rem margin top
+      max-height: calc(7 * (2rem + 2px) + 2 * (0.5rem + 1.3 * 0.75rem) + 1rem);
+
+      @media screen and (min-width: 1921px) {
+        max-height: calc(
+          7 * (2.25rem + 2px) + 2 * (0.5rem + 1.3 * 0.75rem) + 1rem
+        );
+      }
+
+      .dropdown-menu-item-base {
+        display: inline-flex;
+      }
+
+      .dropdown-menu-group:not(:first-child) {
+        margin-top: 1rem;
+      }
+
+      .dropdown-menu-group-title {
+        font-size: 0.75rem;
+        text-align: left;
+        font-weight: 400;
+        margin: 0 0 0.5rem;
+        line-height: 1.3;
+      }
+    }
+
+    .dropdown-menu-item {
+      height: 2rem;
+      margin: 1px;
+      padding: 0 0.5rem;
+      width: calc(100% - 2px);
+      background-color: transparent;
+      border: 1px solid transparent;
+      align-items: center;
+      cursor: pointer;
+      border-radius: var(--border-radius-md);
+
+      @media screen and (min-width: 1921px) {
+        height: 2.25rem;
+      }
+
+      &__text {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        gap: 0.75rem;
+      }
+
+      &__shortcut {
+        margin-inline-start: auto;
+        opacity: 0.5;
+
+        &--orphaned {
+          text-align: right;
+          font-size: 0.875rem;
+          padding: 0 0.625rem;
+        }
+      }
+
+      &--selected {
+        background: var(--color-primary-light);
+        --icon-fill-color: var(--color-primary-darker);
+      }
+
+      &:hover {
+        background-color: var(--button-hover-bg);
+        text-decoration: none;
+      }
+
+      &:active {
+        background-color: var(--button-hover-bg);
+        border-color: var(--color-brand-active);
+      }
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+        display: block;
+      }
+    }
+
+    .dropdown-menu-item-bare {
+      align-items: center;
+      height: 2rem;
+      justify-content: space-between;
+
+      @media screen and (min-width: 1921px) {
+        height: 2.25rem;
+      }
+
+      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;
+    }
+  }
+
+  .dropdown-menu-button {
+    @include outlineButtonStyles;
+    width: var(--lg-button-size);
+    height: var(--lg-button-size);
+
+    --background: var(--color-surface-mid);
+
+    background-color: var(--background);
+
+    @at-root .excalidraw.theme--dark#{&} {
+      --background: var(--color-surface-high);
+      &:hover {
+        --background: #363541;
+      }
+    }
+
+    &:hover {
+      --background: var(--color-surface-high);
+      background-color: var(--background);
+      text-decoration: none;
+    }
+
+    &:active {
+      border-color: var(--color-primary);
+    }
+
+    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);
+    }
+  }
+}
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenu.test.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenu.test.tsx
new file mode 100644
index 0000000..0c8deec
--- /dev/null
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenu.test.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Excalidraw } from "../../index";
+import { KEYS } from "../../keys";
+import { Keyboard } from "../../tests/helpers/ui";
+import {
+  render,
+  waitFor,
+  getByTestId,
+  fireEvent,
+} from "../../tests/test-utils";
+
+describe("Test <DropdownMenu/>", () => {
+  it("should", async () => {
+    const { container } = await render(<Excalidraw />);
+
+    expect(window.h.state.openMenu).toBe(null);
+
+    fireEvent.click(getByTestId(container, "main-menu-trigger"));
+    expect(window.h.state.openMenu).toBe("canvas");
+
+    await waitFor(() => {
+      Keyboard.keyDown(KEYS.ESCAPE);
+      expect(window.h.state.openMenu).toBe(null);
+    });
+  });
+});
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx
new file mode 100644
index 0000000..8f4ce43
--- /dev/null
+++ b/packages/excalidraw/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";
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx
new file mode 100644
index 0000000..a203124
--- /dev/null
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx
@@ -0,0 +1,88 @@
+import { Island } from "../Island";
+import { useDevice } from "../App";
+import clsx from "clsx";
+import Stack from "../Stack";
+import React, { useEffect, useRef } from "react";
+import { DropdownMenuContentPropsContext } from "./common";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
+import { KEYS } from "../../keys";
+import { EVENT } from "../../constants";
+import { useStable } from "../../hooks/useStable";
+
+const MenuContent = ({
+  children,
+  onClickOutside,
+  className = "",
+  onSelect,
+  style,
+}: {
+  children?: React.ReactNode;
+  onClickOutside?: () => void;
+  className?: string;
+  /**
+   * Called when any menu item is selected (clicked on).
+   */
+  onSelect?: (event: Event) => void;
+  style?: React.CSSProperties;
+}) => {
+  const device = useDevice();
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const callbacksRef = useStable({ onClickOutside });
+
+  useOutsideClick(menuRef, () => {
+    callbacksRef.onClickOutside?.();
+  });
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === KEYS.ESCAPE) {
+        event.stopImmediatePropagation();
+        callbacksRef.onClickOutside?.();
+      }
+    };
+
+    const option = {
+      // so that we can stop propagation of the event before it reaches
+      // event handlers that were bound before this one
+      capture: true,
+    };
+
+    document.addEventListener(EVENT.KEYDOWN, onKeyDown, option);
+    return () => {
+      document.removeEventListener(EVENT.KEYDOWN, onKeyDown, option);
+    };
+  }, [callbacksRef]);
+
+  const classNames = clsx(`dropdown-menu ${className}`, {
+    "dropdown-menu--mobile": device.editor.isMobile,
+  }).trim();
+
+  return (
+    <DropdownMenuContentPropsContext.Provider value={{ onSelect }}>
+      <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.editor.isMobile ? (
+          <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
+        ) : (
+          <Island
+            className="dropdown-menu-container"
+            padding={2}
+            style={{ zIndex: 2 }}
+          >
+            {children}
+          </Island>
+        )}
+      </div>
+    </DropdownMenuContentPropsContext.Provider>
+  );
+};
+MenuContent.displayName = "DropdownMenuContent";
+
+export default MenuContent;
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuGroup.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuGroup.tsx
new file mode 100644
index 0000000..aa4b49a
--- /dev/null
+++ b/packages/excalidraw/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";
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx
new file mode 100644
index 0000000..1ff53f8
--- /dev/null
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx
@@ -0,0 +1,123 @@
+import type { JSX } from "react";
+import React, { useEffect, useRef } from "react";
+import {
+  getDropdownMenuItemClassName,
+  useHandleDropdownMenuItemClick,
+} from "./common";
+import MenuItemContent from "./DropdownMenuItemContent";
+import { useExcalidrawAppState } from "../App";
+import { THEME } from "../../constants";
+import type { ValueOf } from "../../utility-types";
+
+const DropdownMenuItem = ({
+  icon,
+  value,
+  order,
+  children,
+  shortcut,
+  className,
+  hovered,
+  selected,
+  textStyle,
+  onSelect,
+  onClick,
+  ...rest
+}: {
+  icon?: JSX.Element;
+  value?: string | number | undefined;
+  order?: number;
+  onSelect?: (event: Event) => void;
+  children: React.ReactNode;
+  shortcut?: string;
+  hovered?: boolean;
+  selected?: boolean;
+  textStyle?: React.CSSProperties;
+  className?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
+  const handleClick = useHandleDropdownMenuItemClick(onClick, onSelect);
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (hovered) {
+      if (order === 0) {
+        // scroll into the first item differently, so it's visible what is above (i.e. group title)
+        ref.current?.scrollIntoView({ block: "end" });
+      } else {
+        ref.current?.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }, [hovered, order]);
+
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      value={value}
+      onClick={handleClick}
+      className={getDropdownMenuItemClassName(className, selected, hovered)}
+      title={rest.title ?? rest["aria-label"]}
+    >
+      <MenuItemContent textStyle={textStyle} icon={icon} shortcut={shortcut}>
+        {children}
+      </MenuItemContent>
+    </button>
+  );
+};
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+export const DropDownMenuItemBadgeType = {
+  GREEN: "green",
+  RED: "red",
+  BLUE: "blue",
+} as const;
+
+export const DropDownMenuItemBadge = ({
+  type = DropDownMenuItemBadgeType.BLUE,
+  children,
+}: {
+  type?: ValueOf<typeof DropDownMenuItemBadgeType>;
+  children: React.ReactNode;
+}) => {
+  const { theme } = useExcalidrawAppState();
+  const style = {
+    display: "inline-flex",
+    marginLeft: "auto",
+    padding: "2px 4px",
+    borderRadius: 6,
+    fontSize: 9,
+    fontFamily: "Cascadia, monospace",
+    border: theme === THEME.LIGHT ? "1.5px solid white" : "none",
+  };
+
+  switch (type) {
+    case DropDownMenuItemBadgeType.GREEN:
+      Object.assign(style, {
+        backgroundColor: "var(--background-color-badge)",
+        color: "var(--color-badge)",
+      });
+      break;
+    case DropDownMenuItemBadgeType.RED:
+      Object.assign(style, {
+        backgroundColor: "pink",
+        color: "darkred",
+      });
+      break;
+    case DropDownMenuItemBadgeType.BLUE:
+    default:
+      Object.assign(style, {
+        background: "var(--color-promo)",
+        color: "var(--color-surface-lowest)",
+      });
+  }
+
+  return (
+    <div className="DropDownMenuItemBadge" style={style}>
+      {children}
+    </div>
+  );
+};
+DropDownMenuItemBadge.displayName = "DropdownMenuItemBadge";
+
+DropdownMenuItem.Badge = DropDownMenuItemBadge;
+
+export default DropdownMenuItem;
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
new file mode 100644
index 0000000..000b8c3
--- /dev/null
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
@@ -0,0 +1,28 @@
+import type { JSX } from "react";
+import { useDevice } from "../App";
+
+const MenuItemContent = ({
+  textStyle,
+  icon,
+  shortcut,
+  children,
+}: {
+  icon?: JSX.Element;
+  shortcut?: string;
+  textStyle?: React.CSSProperties;
+  children: React.ReactNode;
+}) => {
+  const device = useDevice();
+  return (
+    <>
+      {icon && <div className="dropdown-menu-item__icon">{icon}</div>}
+      <div style={textStyle} className="dropdown-menu-item__text">
+        {children}
+      </div>
+      {shortcut && !device.editor.isMobile && (
+        <div className="dropdown-menu-item__shortcut">{shortcut}</div>
+      )}
+    </>
+  );
+};
+export default MenuItemContent;
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.tsx
new file mode 100644
index 0000000..14bfe1a
--- /dev/null
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.tsx
@@ -0,0 +1,51 @@
+import { useDevice } from "../App";
+import { RadioGroup } from "../RadioGroup";
+
+type Props<T> = {
+  value: T;
+  shortcut?: string;
+  choices: {
+    value: T;
+    label: React.ReactNode;
+    ariaLabel?: string;
+  }[];
+  onChange: (value: T) => void;
+  children: React.ReactNode;
+  name: string;
+};
+
+const DropdownMenuItemContentRadio = <T,>({
+  value,
+  shortcut,
+  onChange,
+  choices,
+  children,
+  name,
+}: Props<T>) => {
+  const device = useDevice();
+
+  return (
+    <>
+      <div className="dropdown-menu-item-base dropdown-menu-item-bare">
+        <label className="dropdown-menu-item__text" htmlFor={name}>
+          {children}
+        </label>
+        <RadioGroup
+          name={name}
+          value={value}
+          onChange={onChange}
+          choices={choices}
+        />
+      </div>
+      {shortcut && !device.editor.isMobile && (
+        <div className="dropdown-menu-item__shortcut dropdown-menu-item__shortcut--orphaned">
+          {shortcut}
+        </div>
+      )}
+    </>
+  );
+};
+
+DropdownMenuItemContentRadio.displayName = "DropdownMenuItemContentRadio";
+
+export default DropdownMenuItemContentRadio;
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemCustom.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemCustom.tsx
new file mode 100644
index 0000000..795c5c7
--- /dev/null
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemCustom.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+const DropdownMenuItemCustom = ({
+  children,
+  className = "",
+  selected,
+  ...rest
+}: {
+  children: React.ReactNode;
+  className?: string;
+  selected?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      {...rest}
+      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className} ${
+        selected ? `dropdown-menu-item--selected` : ``
+      }`.trim()}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DropdownMenuItemCustom;
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx
new file mode 100644
index 0000000..2dbee75
--- /dev/null
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx
@@ -0,0 +1,49 @@
+import MenuItemContent from "./DropdownMenuItemContent";
+import type { JSX } from "react";
+import React from "react";
+import {
+  getDropdownMenuItemClassName,
+  useHandleDropdownMenuItemClick,
+} from "./common";
+
+const DropdownMenuItemLink = ({
+  icon,
+  shortcut,
+  href,
+  children,
+  onSelect,
+  className = "",
+  selected,
+  rel = "noreferrer",
+  ...rest
+}: {
+  href: string;
+  icon?: JSX.Element;
+  children: React.ReactNode;
+  shortcut?: string;
+  className?: string;
+  selected?: boolean;
+  onSelect?: (event: Event) => void;
+  rel?: string;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
+
+  return (
+    <a
+      {...rest}
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className={getDropdownMenuItemClassName(className, selected)}
+      title={rest.title ?? rest["aria-label"]}
+      onClick={handleClick}
+    >
+      <MenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </MenuItemContent>
+    </a>
+  );
+};
+
+export default DropdownMenuItemLink;
+DropdownMenuItemLink.displayName = "DropdownMenuItemLink";
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuSeparator.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuSeparator.tsx
new file mode 100644
index 0000000..ee41960
--- /dev/null
+++ b/packages/excalidraw/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";
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx
new file mode 100644
index 0000000..e7369ba
--- /dev/null
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx
@@ -0,0 +1,40 @@
+import clsx from "clsx";
+import { useDevice } from "../App";
+
+const MenuTrigger = ({
+  className = "",
+  children,
+  onToggle,
+  title,
+  ...rest
+}: {
+  className?: string;
+  children: React.ReactNode;
+  onToggle: () => void;
+  title?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
+  const device = useDevice();
+  const classNames = clsx(
+    `dropdown-menu-button ${className}`,
+    "zen-mode-transition",
+    {
+      "dropdown-menu-button--mobile": device.editor.isMobile,
+    },
+  ).trim();
+  return (
+    <button
+      data-prevent-outside-click
+      className={classNames}
+      onClick={onToggle}
+      type="button"
+      data-testid="dropdown-menu-button"
+      title={title}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default MenuTrigger;
+MenuTrigger.displayName = "DropdownMenuTrigger";
diff --git a/packages/excalidraw/components/dropdownMenu/common.ts b/packages/excalidraw/components/dropdownMenu/common.ts
new file mode 100644
index 0000000..a2a46fc
--- /dev/null
+++ b/packages/excalidraw/components/dropdownMenu/common.ts
@@ -0,0 +1,38 @@
+import React, { useContext } from "react";
+import { EVENT } from "../../constants";
+import { composeEventHandlers } from "../../utils";
+
+export const DropdownMenuContentPropsContext = React.createContext<{
+  onSelect?: (event: Event) => void;
+}>({});
+
+export const getDropdownMenuItemClassName = (
+  className = "",
+  selected = false,
+  hovered = false,
+) => {
+  return `dropdown-menu-item dropdown-menu-item-base ${className}
+  ${selected ? "dropdown-menu-item--selected" : ""} ${
+    hovered ? "dropdown-menu-item--hovered" : ""
+  }`.trim();
+};
+
+export const useHandleDropdownMenuItemClick = (
+  origOnClick:
+    | React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>
+    | undefined,
+  onSelect: ((event: Event) => void) | undefined,
+) => {
+  const DropdownMenuContentProps = useContext(DropdownMenuContentPropsContext);
+
+  return composeEventHandlers(origOnClick, (event) => {
+    const itemSelectEvent = new CustomEvent(EVENT.MENU_ITEM_SELECT, {
+      bubbles: true,
+      cancelable: true,
+    });
+    onSelect?.(itemSelectEvent);
+    if (!itemSelectEvent.defaultPrevented) {
+      DropdownMenuContentProps.onSelect?.(itemSelectEvent);
+    }
+  });
+};
diff --git a/packages/excalidraw/components/dropdownMenu/dropdownMenuUtils.ts b/packages/excalidraw/components/dropdownMenu/dropdownMenuUtils.ts
new file mode 100644
index 0000000..10d91fb
--- /dev/null
+++ b/packages/excalidraw/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;
+};