@excalidraw/excalidraw 0.17.1-7441-e31f307 → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/components/UserList.scss

@@ -0,0 +1,136 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  .UserList {
+    pointer-events: none;
+    /*github corner*/
+    padding: var(--space-factor) var(--space-factor) var(--space-factor)
+      var(--space-factor);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.625rem;
+
+    &:empty {
+      display: none;
+    }
+
+    box-sizing: border-box;
+
+    // can fit max 4 avatars (3 avatars + show more) in a column
+    max-height: 120px;
+
+    // can fit max 4 avatars (3 avatars + show more) when there's enough space
+    max-width: 120px;
+
+    // Tweak in 30px increments to fit more/fewer avatars in a row/column ^^
+
+    overflow: hidden;
+  }
+
+  .UserList > * {
+    pointer-events: var(--ui-pointerEvents);
+  }
+
+  .UserList_mobile {
+    padding: 0;
+    justify-content: normal;
+    margin: 0.5rem 0;
+    max-width: none;
+    max-height: none;
+  }
+
+  .UserList__more {
+    @include avatarStyles;
+    background-color: var(--color-gray-20);
+    border: 0 !important;
+    font-size: 0.5rem;
+    font-weight: 400;
+    flex-shrink: 0;
+    color: var(--color-gray-100);
+  }
+
+  .UserList__collaborator-follow-status-icon {
+    margin-left: auto;
+    flex: 0 0 auto;
+    width: 1rem;
+    display: flex;
+  }
+
+  --userlist-hint-bg-color: var(--color-gray-10);
+  --userlist-hint-heading-color: var(--color-gray-80);
+  --userlist-hint-text-color: var(--color-gray-60);
+  --userlist-collaborators-border-color: var(--color-gray-20);
+
+  &.theme--dark {
+    --userlist-hint-bg-color: var(--color-gray-90);
+    --userlist-hint-heading-color: var(--color-gray-30);
+    --userlist-hint-text-color: var(--color-gray-40);
+    --userlist-collaborators-border-color: var(--color-gray-80);
+  }
+
+  .UserList__collaborators {
+    position: static;
+    top: auto;
+    margin-top: 0;
+    max-height: 12rem;
+    overflow-y: auto;
+    padding: 0.25rem 0.5rem;
+    border-top: 1px solid var(--userlist-collaborators-border-color);
+    border-bottom: 1px solid var(--userlist-collaborators-border-color);
+
+    &__empty {
+      color: var(--color-gray-60);
+      font-size: 0.75rem;
+      line-height: 150%;
+      padding: 0.5rem 0;
+    }
+  }
+
+  .UserList__hint {
+    padding: 0.5rem 0.75rem;
+    overflow: hidden;
+    text-align: center;
+    color: var(--userlist-hint-text-color);
+    font-size: 0.75rem;
+    line-height: 150%;
+  }
+
+  .UserList__search-wrapper {
+    position: relative;
+    height: 2.5rem;
+
+    svg {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 0.75rem;
+      width: 1.25rem;
+      height: 1.25rem;
+      color: var(--color-gray-40);
+      z-index: 1;
+    }
+  }
+
+  .UserList__search {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    border: 0 !important;
+    border-radius: 0 !important;
+    font-size: 0.875rem;
+    padding-left: 2.5rem !important;
+    padding-right: 0.75rem !important;
+
+    &::placeholder {
+      color: var(--color-gray-40);
+    }
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+}

package/dist/packages/excalidraw/components/canvases/InteractiveCanvas.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef } from "react";
+import { renderInteractiveScene } from "../../renderer/renderScene";
+import { isRenderThrottlingEnabled, isShallowEqual, sceneCoordsToViewportCoords, } from "../../utils";
+import { CURSOR_TYPE } from "../../constants";
+import { t } from "../../i18n";
+const InteractiveCanvas = (props) => {
+    const isComponentMounted = useRef(false);
+    useEffect(() => {
+        if (!isComponentMounted.current) {
+            isComponentMounted.current = true;
+            return;
+        }
+        const cursorButton = {};
+        const pointerViewportCoords = {};
+        const remoteSelectedElementIds = {};
+        const pointerUsernames = {};
+        const pointerUserStates = {};
+        props.appState.collaborators.forEach((user, socketId) => {
+            if (user.selectedElementIds) {
+                for (const id of Object.keys(user.selectedElementIds)) {
+                    if (!(id in remoteSelectedElementIds)) {
+                        remoteSelectedElementIds[id] = [];
+                    }
+                    remoteSelectedElementIds[id].push(socketId);
+                }
+            }
+            if (!user.pointer) {
+                return;
+            }
+            if (user.username) {
+                pointerUsernames[socketId] = user.username;
+            }
+            if (user.userState) {
+                pointerUserStates[socketId] = user.userState;
+            }
+            pointerViewportCoords[socketId] = sceneCoordsToViewportCoords({
+                sceneX: user.pointer.x,
+                sceneY: user.pointer.y,
+            }, props.appState);
+            cursorButton[socketId] = user.button;
+        });
+        const selectionColor = (props.containerRef?.current &&
+            getComputedStyle(props.containerRef.current).getPropertyValue("--color-selection")) ||
+            "#6965db";
+        renderInteractiveScene({
+            canvas: props.canvas,
+            elements: props.elements,
+            visibleElements: props.visibleElements,
+            selectedElements: props.selectedElements,
+            scale: window.devicePixelRatio,
+            appState: props.appState,
+            renderConfig: {
+                remotePointerViewportCoords: pointerViewportCoords,
+                remotePointerButton: cursorButton,
+                remoteSelectedElementIds,
+                remotePointerUsernames: pointerUsernames,
+                remotePointerUserStates: pointerUserStates,
+                selectionColor,
+                renderScrollbars: false,
+            },
+            callback: props.renderInteractiveSceneCallback,
+        }, isRenderThrottlingEnabled());
+    });
+    return (_jsx("canvas", { className: "excalidraw__canvas interactive", style: {
+            width: props.appState.width,
+            height: props.appState.height,
+            cursor: props.appState.viewModeEnabled
+                ? CURSOR_TYPE.GRAB
+                : CURSOR_TYPE.AUTO,
+        }, width: props.appState.width * props.scale, height: props.appState.height * props.scale, ref: props.handleCanvasRef, onContextMenu: props.onContextMenu, onPointerMove: props.onPointerMove, onPointerUp: props.onPointerUp, onPointerCancel: props.onPointerCancel, onTouchMove: props.onTouchMove, onPointerDown: props.onPointerDown, onDoubleClick: props.appState.viewModeEnabled ? undefined : props.onDoubleClick, children: t("labels.drawingCanvas") }));
+};
+const getRelevantAppStateProps = (appState) => ({
+    zoom: appState.zoom,
+    scrollX: appState.scrollX,
+    scrollY: appState.scrollY,
+    width: appState.width,
+    height: appState.height,
+    viewModeEnabled: appState.viewModeEnabled,
+    editingGroupId: appState.editingGroupId,
+    editingLinearElement: appState.editingLinearElement,
+    selectedElementIds: appState.selectedElementIds,
+    frameToHighlight: appState.frameToHighlight,
+    offsetLeft: appState.offsetLeft,
+    offsetTop: appState.offsetTop,
+    theme: appState.theme,
+    pendingImageElementId: appState.pendingImageElementId,
+    selectionElement: appState.selectionElement,
+    selectedGroupIds: appState.selectedGroupIds,
+    selectedLinearElement: appState.selectedLinearElement,
+    multiElement: appState.multiElement,
+    isBindingEnabled: appState.isBindingEnabled,
+    suggestedBindings: appState.suggestedBindings,
+    isRotating: appState.isRotating,
+    elementsToHighlight: appState.elementsToHighlight,
+    collaborators: appState.collaborators,
+    activeEmbeddable: appState.activeEmbeddable,
+    snapLines: appState.snapLines,
+    zenModeEnabled: appState.zenModeEnabled,
+});
+const areEqual = (prevProps, nextProps) => {
+    // This could be further optimised if needed, as we don't have to render interactive canvas on each scene mutation
+    if (prevProps.selectionNonce !== nextProps.selectionNonce ||
+        prevProps.versionNonce !== nextProps.versionNonce ||
+        prevProps.scale !== nextProps.scale ||
+        // we need to memoize on element arrays because they may have renewed
+        // even if versionNonce didn't change (e.g. we filter elements out based
+        // on appState)
+        prevProps.elements !== nextProps.elements ||
+        prevProps.visibleElements !== nextProps.visibleElements ||
+        prevProps.selectedElements !== nextProps.selectedElements) {
+        return false;
+    }
+    // Comparing the interactive appState for changes in case of some edge cases
+    return isShallowEqual(
+    // asserting AppState because we're being passed the whole AppState
+    // but resolve to only the InteractiveCanvas-relevant props
+    getRelevantAppStateProps(prevProps.appState), getRelevantAppStateProps(nextProps.appState));
+};
+export default React.memo(InteractiveCanvas, areEqual);

package/dist/packages/excalidraw/components/canvases/StaticCanvas.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef } from "react";
+import { renderStaticScene } from "../../renderer/renderScene";
+import { isRenderThrottlingEnabled, isShallowEqual } from "../../utils";
+const StaticCanvas = (props) => {
+    const wrapperRef = useRef(null);
+    const isComponentMounted = useRef(false);
+    useEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper) {
+            return;
+        }
+        const canvas = props.canvas;
+        if (!isComponentMounted.current) {
+            isComponentMounted.current = true;
+            wrapper.replaceChildren(canvas);
+            canvas.classList.add("excalidraw__canvas", "static");
+        }
+        const widthString = `${props.appState.width}px`;
+        const heightString = `${props.appState.height}px`;
+        if (canvas.style.width !== widthString) {
+            canvas.style.width = widthString;
+        }
+        if (canvas.style.height !== heightString) {
+            canvas.style.height = heightString;
+        }
+        const scaledWidth = props.appState.width * props.scale;
+        const scaledHeight = props.appState.height * props.scale;
+        // setting width/height resets the canvas even if dimensions not changed,
+        // which would cause flicker when we skip frame (due to throttling)
+        if (canvas.width !== scaledWidth) {
+            canvas.width = scaledWidth;
+        }
+        if (canvas.height !== scaledHeight) {
+            canvas.height = scaledHeight;
+        }
+        renderStaticScene({
+            canvas,
+            rc: props.rc,
+            scale: props.scale,
+            elements: props.elements,
+            visibleElements: props.visibleElements,
+            appState: props.appState,
+            renderConfig: props.renderConfig,
+        }, isRenderThrottlingEnabled());
+    });
+    return _jsx("div", { className: "excalidraw__canvas-wrapper", ref: wrapperRef });
+};
+const getRelevantAppStateProps = (appState) => ({
+    zoom: appState.zoom,
+    scrollX: appState.scrollX,
+    scrollY: appState.scrollY,
+    width: appState.width,
+    height: appState.height,
+    viewModeEnabled: appState.viewModeEnabled,
+    offsetLeft: appState.offsetLeft,
+    offsetTop: appState.offsetTop,
+    theme: appState.theme,
+    pendingImageElementId: appState.pendingImageElementId,
+    shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
+    viewBackgroundColor: appState.viewBackgroundColor,
+    exportScale: appState.exportScale,
+    selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
+    gridSize: appState.gridSize,
+    frameRendering: appState.frameRendering,
+    selectedElementIds: appState.selectedElementIds,
+    frameToHighlight: appState.frameToHighlight,
+    editingGroupId: appState.editingGroupId,
+});
+const areEqual = (prevProps, nextProps) => {
+    if (prevProps.versionNonce !== nextProps.versionNonce ||
+        prevProps.scale !== nextProps.scale ||
+        // we need to memoize on element arrays because they may have renewed
+        // even if versionNonce didn't change (e.g. we filter elements out based
+        // on appState)
+        prevProps.elements !== nextProps.elements ||
+        prevProps.visibleElements !== nextProps.visibleElements) {
+        return false;
+    }
+    return (isShallowEqual(
+    // asserting AppState because we're being passed the whole AppState
+    // but resolve to only the StaticCanvas-relevant props
+    getRelevantAppStateProps(prevProps.appState), getRelevantAppStateProps(nextProps.appState)) && isShallowEqual(prevProps.renderConfig, nextProps.renderConfig));
+};
+export default React.memo(StaticCanvas, areEqual);

package/dist/packages/excalidraw/components/canvases/index.js

@@ -0,0 +1,3 @@
+import InteractiveCanvas from "./InteractiveCanvas";
+import StaticCanvas from "./StaticCanvas";
+export { InteractiveCanvas, StaticCanvas };

package/dist/packages/excalidraw/components/dropdownMenu/DropdownMenu.js

@@ -0,0 +1,24 @@
+import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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, }) => {
+    const MenuTriggerComp = getMenuTriggerComponent(children);
+    const MenuContentComp = getMenuContentComponent(children);
+    return (_jsxs(_Fragment, { children: [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";

package/dist/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss

@@ -0,0 +1,148 @@
+@import "../../css/variables.module.scss";
+
+.excalidraw {
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    margin-top: 0.25rem;
+
+    &--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;
+      padding: 0 0.625rem;
+      column-gap: 0.625rem;
+      font-size: 0.875rem;
+      color: var(--color-on-surface);
+      width: 100%;
+      box-sizing: border-box;
+      font-weight: normal;
+      font-family: inherit;
+    }
+
+    .dropdown-menu-item {
+      background-color: transparent;
+      border: 1px solid transparent;
+      align-items: center;
+      height: 2rem;
+      cursor: pointer;
+      border-radius: var(--border-radius-md);
+
+      @media screen and (min-width: 1921px) {
+        height: 2.25rem;
+      }
+
+      &--selected {
+        background: var(--color-primary-light);
+        --icon-fill-color: var(--color-primary-darker);
+      }
+
+      &__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;
+      }
+
+      &: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-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);
+    }
+  }
+}

package/dist/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Island } from "../Island";
+import { useDevice } from "../App";
+import clsx from "clsx";
+import Stack from "../Stack";
+import { useRef } from "react";
+import { DropdownMenuContentPropsContext } from "./common";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
+const MenuContent = ({ children, onClickOutside, className = "", onSelect, style, }) => {
+    const device = useDevice();
+    const menuRef = useRef(null);
+    useOutsideClick(menuRef, () => {
+        onClickOutside?.();
+    });
+    const classNames = clsx(`dropdown-menu ${className}`, {
+        "dropdown-menu--mobile": device.editor.isMobile,
+    }).trim();
+    return (_jsx(DropdownMenuContentPropsContext.Provider, { value: { onSelect }, children: _jsx("div", { ref: menuRef, className: classNames, style: style, "data-testid": "dropdown-menu", children: device.editor.isMobile ? (_jsx(Stack.Col, { className: "dropdown-menu-container", children: children })) : (_jsx(Island, { className: "dropdown-menu-container", padding: 2, style: { zIndex: 2 }, children: children })) }) }));
+};
+MenuContent.displayName = "DropdownMenuContent";
+export default MenuContent;

package/dist/packages/excalidraw/components/dropdownMenu/DropdownMenuGroup.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MenuGroup = ({ children, className = "", style, title, }) => {
+    return (_jsxs("div", { className: `dropdown-menu-group ${className}`, style: style, children: [title && _jsx("p", { className: "dropdown-menu-group-title", children: title }), children] }));
+};
+export default MenuGroup;
+MenuGroup.displayName = "DropdownMenuGroup";

package/dist/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getDropdownMenuItemClassName, useHandleDropdownMenuItemClick, } from "./common";
+import MenuItemContent from "./DropdownMenuItemContent";
+const DropdownMenuItem = ({ icon, onSelect, children, shortcut, className, selected, ...rest }) => {
+    const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
+    return (_jsx("button", { ...rest, onClick: handleClick, type: "button", className: getDropdownMenuItemClassName(className, selected), title: rest.title ?? rest["aria-label"], children: _jsx(MenuItemContent, { icon: icon, shortcut: shortcut, children: children }) }));
+};
+DropdownMenuItem.displayName = "DropdownMenuItem";
+export const DropDownMenuItemBadge = ({ children, }) => {
+    return (_jsx("div", { style: {
+            display: "inline-flex",
+            marginLeft: "auto",
+            padding: "2px 4px",
+            background: "pink",
+            borderRadius: 6,
+            fontSize: 9,
+            color: "black",
+            fontFamily: "Cascadia, monospace",
+        }, children: children }));
+};
+DropDownMenuItemBadge.displayName = "DropdownMenuItemBadge";
+DropdownMenuItem.Badge = DropDownMenuItemBadge;
+export default DropdownMenuItem;

package/dist/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDevice } from "../App";
+const MenuItemContent = ({ icon, shortcut, children, }) => {
+    const device = useDevice();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "dropdown-menu-item__icon", children: icon }), _jsx("div", { className: "dropdown-menu-item__text", children: children }), shortcut && !device.editor.isMobile && (_jsx("div", { className: "dropdown-menu-item__shortcut", children: shortcut }))] }));
+};
+export default MenuItemContent;

package/dist/packages/excalidraw/components/dropdownMenu/DropdownMenuItemCustom.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const DropdownMenuItemCustom = ({ children, className = "", selected, ...rest }) => {
+    return (_jsx("div", { ...rest, className: `dropdown-menu-item-base dropdown-menu-item-custom ${className} ${selected ? `dropdown-menu-item--selected` : ``}`.trim(), children: children }));
+};
+export default DropdownMenuItemCustom;

package/dist/packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MenuItemContent from "./DropdownMenuItemContent";
+import { getDropdownMenuItemClassName, useHandleDropdownMenuItemClick, } from "./common";
+const DropdownMenuItemLink = ({ icon, shortcut, href, children, onSelect, className = "", selected, ...rest }) => {
+    const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
+    return (_jsx("a", { ...rest, href: href, target: "_blank", rel: "noreferrer", className: getDropdownMenuItemClassName(className, selected), title: rest.title ?? rest["aria-label"], onClick: handleClick, children: _jsx(MenuItemContent, { icon: icon, shortcut: shortcut, children: children }) }));
+};
+export default DropdownMenuItemLink;
+DropdownMenuItemLink.displayName = "DropdownMenuItemLink";

package/dist/packages/excalidraw/components/dropdownMenu/DropdownMenuSeparator.js

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

package/dist/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useDevice } from "../App";
+const MenuTrigger = ({ className = "", children, onToggle, title, ...rest }) => {
+    const device = useDevice();
+    const classNames = clsx(`dropdown-menu-button ${className}`, "zen-mode-transition", {
+        "dropdown-menu-button--mobile": device.editor.isMobile,
+    }).trim();
+    return (_jsx("button", { "data-prevent-outside-click": true, className: classNames, onClick: onToggle, type: "button", "data-testid": "dropdown-menu-button", title: title, ...rest, children: children }));
+};
+export default MenuTrigger;
+MenuTrigger.displayName = "DropdownMenuTrigger";

package/dist/packages/excalidraw/components/dropdownMenu/common.js

@@ -0,0 +1,20 @@
+import React, { useContext } from "react";
+import { EVENT } from "../../constants";
+import { composeEventHandlers } from "../../utils";
+export const DropdownMenuContentPropsContext = React.createContext({});
+export const getDropdownMenuItemClassName = (className = "", selected = false) => {
+    return `dropdown-menu-item dropdown-menu-item-base ${className} ${selected ? "dropdown-menu-item--selected" : ""}`.trim();
+};
+export const useHandleDropdownMenuItemClick = (origOnClick, onSelect) => {
+    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);
+        }
+    });
+};

package/dist/packages/excalidraw/components/dropdownMenu/dropdownMenuUtils.js

@@ -0,0 +1,27 @@
+import React from "react";
+export const getMenuTriggerComponent = (children) => {
+    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) => {
+    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;
+};