@excalidraw/excalidraw 0.17.1-550a388 → 0.17.1-62228e0

package/dist/excalidraw/components/UserList.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "./UserList.scss";
 import React, { useLayoutEffect } from "react";
 import clsx from "clsx";
@@ -6,13 +6,14 @@ import { Tooltip } from "./Tooltip";
 import { useExcalidrawActionManager } from "./App";
 import * as Popover from "@radix-ui/react-popover";
 import { Island } from "./Island";
-import { searchIcon } from "./icons";
+import { QuickSearch } from "./QuickSearch";
 import { t } from "../i18n";
 import { isShallowEqual } from "../utils";
 import { supportsResizeObserver } from "../constants";
+import { ScrollableList } from "./ScrollableList";
 const DEFAULT_MAX_AVATARS = 4;
 const SHOW_COLLABORATORS_FILTER_AT = 8;
-const ConditionalTooltipWrapper = ({ shouldWrap, children, username, }) => shouldWrap ? (_jsx(Tooltip, { label: username || "Unknown user", children: children })) : (_jsx(React.Fragment, { children: children }));
+const ConditionalTooltipWrapper = ({ shouldWrap, children, username, }) => shouldWrap ? (_jsx(Tooltip, { label: username || "Unknown user", children: children })) : (_jsx(_Fragment, { children: children }));
 const renderCollaborator = ({ actionManager, collaborator, socketId, withName = false, shouldWrapWithTooltip = false, isBeingFollowed, }) => {
     const data = {
         socketId,
@@ -43,6 +44,7 @@ export const UserList = React.memo(({ className, mobile, collaborators, userToFo
     });
     const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap.values()).filter((collaborator) => collaborator.username?.trim());
     const [searchTerm, setSearchTerm] = React.useState("");
+    const filteredCollaborators = uniqueCollaboratorsArray.filter((collaborator) => collaborator.username?.toLowerCase().includes(searchTerm));
     const userListWrapper = React.useRef(null);
     useLayoutEffect(() => {
         if (userListWrapper.current) {
@@ -67,10 +69,6 @@ export const UserList = React.memo(({ className, mobile, collaborators, userToFo
         }
     }, []);
     const [maxAvatars, setMaxAvatars] = React.useState(DEFAULT_MAX_AVATARS);
-    const searchTermNormalized = searchTerm.trim().toLowerCase();
-    const filteredCollaborators = searchTermNormalized
-        ? uniqueCollaboratorsArray.filter((collaborator) => collaborator.username?.toLowerCase().includes(searchTerm))
-        : uniqueCollaboratorsArray;
     const firstNCollaborators = uniqueCollaboratorsArray.slice(0, maxAvatars - 1);
     const firstNAvatarsJSX = firstNCollaborators.map((collaborator) => renderCollaborator({
         actionManager,
@@ -85,24 +83,26 @@ export const UserList = React.memo(({ className, mobile, collaborators, userToFo
             socketId: collaborator.socketId,
             shouldWrapWithTooltip: true,
             isBeingFollowed: collaborator.socketId === userToFollow,
-        })) })) : (_jsx("div", { className: "UserList-wrapper", ref: userListWrapper, children: _jsxs("div", { className: clsx("UserList", className), style: { [`--max-avatars`]: maxAvatars }, children: [firstNAvatarsJSX, uniqueCollaboratorsArray.length > maxAvatars - 1 && (_jsxs(Popover.Root, { onOpenChange: (isOpen) => {
-                        if (!isOpen) {
-                            setSearchTerm("");
-                        }
-                    }, children: [_jsxs(Popover.Trigger, { className: "UserList__more", children: ["+", uniqueCollaboratorsArray.length - maxAvatars + 1] }), _jsx(Popover.Content, { style: {
+        })) })) : (_jsx("div", { className: "UserList__wrapper", ref: userListWrapper, children: _jsxs("div", { className: clsx("UserList", className), style: { [`--max-avatars`]: maxAvatars }, children: [firstNAvatarsJSX, uniqueCollaboratorsArray.length > maxAvatars - 1 && (_jsxs(Popover.Root, { children: [_jsxs(Popover.Trigger, { className: "UserList__more", children: ["+", uniqueCollaboratorsArray.length - maxAvatars + 1] }), _jsx(Popover.Content, { style: {
                                 zIndex: 2,
                                 width: "15rem",
                                 textAlign: "left",
-                            }, align: "end", sideOffset: 10, children: _jsxs(Island, { style: { overflow: "hidden" }, children: [uniqueCollaboratorsArray.length >=
-                                        SHOW_COLLABORATORS_FILTER_AT && (_jsxs("div", { className: "UserList__search-wrapper", children: [searchIcon, _jsx("input", { className: "UserList__search", type: "text", placeholder: t("userList.search.placeholder"), value: searchTerm, onChange: (e) => {
-                                                    setSearchTerm(e.target.value);
-                                                } })] })), _jsxs("div", { className: "dropdown-menu UserList__collaborators", children: [filteredCollaborators.length === 0 && (_jsx("div", { className: "UserList__collaborators__empty", children: t("userList.search.empty") })), _jsx("div", { className: "UserList__hint", children: t("userList.hint.text") }), filteredCollaborators.map((collaborator) => renderCollaborator({
-                                                actionManager,
-                                                collaborator,
-                                                socketId: collaborator.socketId,
-                                                withName: true,
-                                                isBeingFollowed: collaborator.socketId === userToFollow,
-                                            }))] })] }) })] }))] }) }));
+                            }, align: "end", sideOffset: 10, children: _jsxs(Island, { padding: 2, children: [uniqueCollaboratorsArray.length >=
+                                        SHOW_COLLABORATORS_FILTER_AT && (_jsx(QuickSearch, { placeholder: t("quickSearch.placeholder"), onChange: setSearchTerm })), _jsx(ScrollableList, { className: "dropdown-menu UserList__collaborators", placeholder: t("userList.empty"), children: filteredCollaborators.length > 0
+                                            ? [
+                                                _jsx("div", { className: "hint", children: t("userList.hint.text") }),
+                                                filteredCollaborators.map((collaborator) => renderCollaborator({
+                                                    actionManager,
+                                                    collaborator,
+                                                    socketId: collaborator.socketId,
+                                                    withName: true,
+                                                    isBeingFollowed: collaborator.socketId === userToFollow,
+                                                })),
+                                            ]
+                                            : [] }), _jsx(Popover.Arrow, { width: 20, height: 10, style: {
+                                            fill: "var(--popup-bg-color)",
+                                            filter: "drop-shadow(rgba(0, 0, 0, 0.05) 0px 3px 2px)",
+                                        } })] }) })] }))] }) }));
 }, (prev, next) => {
     if (prev.collaborators.size !== next.collaborators.size ||
         prev.mobile !== next.mobile ||

package/dist/excalidraw/components/canvases/InteractiveCanvas.d.ts

@@ -1,18 +1,20 @@
 import React from "react";
 import type { DOMAttributes } from "react";
-import type { InteractiveCanvasAppState } from "../../types";
+import type { Device, InteractiveCanvasAppState } from "../../types";
 import type { RenderableElementsMap, RenderInteractiveSceneCallback } from "../../scene/types";
-import type { NonDeletedExcalidrawElement } from "../../element/types";
+import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
 type InteractiveCanvasProps = {
     containerRef: React.RefObject<HTMLDivElement>;
     canvas: HTMLCanvasElement | null;
     elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    allElementsMap: NonDeletedSceneElementsMap;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: InteractiveCanvasAppState;
+    device: Device;
     renderInteractiveSceneCallback: (data: RenderInteractiveSceneCallback) => void;
     handleCanvasRef: (canvas: HTMLCanvasElement | null) => void;
     onContextMenu: Exclude<DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"], undefined>;

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

@@ -49,6 +49,7 @@ const InteractiveCanvas = (props) => {
             elementsMap: props.elementsMap,
             visibleElements: props.visibleElements,
             selectedElements: props.selectedElements,
+            allElementsMap: props.allElementsMap,
             scale: window.devicePixelRatio,
             appState: props.appState,
             renderConfig: {
@@ -60,6 +61,7 @@ const InteractiveCanvas = (props) => {
                 selectionColor,
                 renderScrollbars: false,
             },
+            device: props.device,
             callback: props.renderInteractiveSceneCallback,
         }, isRenderThrottlingEnabled());
     });
@@ -98,14 +100,15 @@ const getRelevantAppStateProps = (appState) => ({
     activeEmbeddable: appState.activeEmbeddable,
     snapLines: appState.snapLines,
     zenModeEnabled: appState.zenModeEnabled,
+    editingElement: appState.editingElement,
 });
 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.sceneNonce !== nextProps.sceneNonce ||
         prevProps.scale !== nextProps.scale ||
         // we need to memoize on elementsMap because they may have renewed
-        // even if versionNonce didn't change (e.g. we filter elements out based
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements ||

package/dist/excalidraw/components/canvases/StaticCanvas.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { RoughCanvas } from "roughjs/bin/canvas";
+import type { RoughCanvas } from "roughjs/bin/canvas";
 import type { StaticCanvasAppState } from "../../types";
 import type { RenderableElementsMap, StaticCanvasRenderConfig } from "../../scene/types";
 import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
@@ -9,7 +9,7 @@ type StaticCanvasProps = {
     elementsMap: RenderableElementsMap;
     allElementsMap: NonDeletedSceneElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: StaticCanvasAppState;

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

@@ -68,12 +68,13 @@ const getRelevantAppStateProps = (appState) => ({
     selectedElementIds: appState.selectedElementIds,
     frameToHighlight: appState.frameToHighlight,
     editingGroupId: appState.editingGroupId,
+    currentHoveredFontFamily: appState.currentHoveredFontFamily,
 });
 const areEqual = (prevProps, nextProps) => {
-    if (prevProps.versionNonce !== nextProps.versionNonce ||
+    if (prevProps.sceneNonce !== nextProps.sceneNonce ||
         prevProps.scale !== nextProps.scale ||
         // we need to memoize on elementsMap because they may have renewed
-        // even if versionNonce didn't change (e.g. we filter elements out based
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements) {

package/dist/excalidraw/components/dropdownMenu/DropdownMenu.d.ts

@@ -25,17 +25,26 @@ declare const DropdownMenu: {
         displayName: string;
     };
     Item: {
-        ({ icon, onSelect, children, shortcut, className, selected, ...rest }: {
+        ({ icon, value, order, children, shortcut, className, hovered, selected, textStyle, onSelect, onClick, ...rest }: {
             icon?: JSX.Element | undefined;
-            onSelect: (event: Event) => void;
+            value?: string | number | undefined;
+            order?: number | undefined;
+            onSelect?: ((event: Event) => void) | undefined;
             children: React.ReactNode;
             shortcut?: string | undefined;
+            hovered?: boolean | undefined;
             selected?: boolean | undefined;
+            textStyle?: React.CSSProperties | undefined;
             className?: string | undefined;
         } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
         displayName: string;
         Badge: {
-            ({ children, }: {
+            ({ type, children, }: {
+                type?: import("../../utility-types").ValueOf<{
+                    readonly GREEN: "green";
+                    readonly RED: "red";
+                    readonly BLUE: "blue";
+                }> | undefined;
                 children: React.ReactNode;
             }): JSX.Element;
             displayName: string;

package/dist/excalidraw/components/dropdownMenu/DropdownMenuItem.d.ts

@@ -1,23 +1,43 @@
 import React from "react";
+import type { ValueOf } from "../../utility-types";
 declare const DropdownMenuItem: {
-    ({ icon, onSelect, children, shortcut, className, selected, ...rest }: {
+    ({ icon, value, order, children, shortcut, className, hovered, selected, textStyle, onSelect, onClick, ...rest }: {
         icon?: JSX.Element | undefined;
-        onSelect: (event: Event) => void;
+        value?: string | number | undefined;
+        order?: number | undefined;
+        onSelect?: ((event: Event) => void) | undefined;
         children: React.ReactNode;
         shortcut?: string | undefined;
+        hovered?: boolean | undefined;
         selected?: boolean | undefined;
+        textStyle?: React.CSSProperties | undefined;
         className?: string | undefined;
     } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
     displayName: string;
     Badge: {
-        ({ children, }: {
+        ({ type, children, }: {
+            type?: ValueOf<{
+                readonly GREEN: "green";
+                readonly RED: "red";
+                readonly BLUE: "blue";
+            }> | undefined;
             children: React.ReactNode;
         }): JSX.Element;
         displayName: string;
     };
 };
+export declare const DropDownMenuItemBadgeType: {
+    readonly GREEN: "green";
+    readonly RED: "red";
+    readonly BLUE: "blue";
+};
 export declare const DropDownMenuItemBadge: {
-    ({ children, }: {
+    ({ type, children, }: {
+        type?: ValueOf<{
+            readonly GREEN: "green";
+            readonly RED: "red";
+            readonly BLUE: "blue";
+        }> | undefined;
         children: React.ReactNode;
     }): JSX.Element;
     displayName: string;

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

@@ -1,22 +1,63 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 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 }) }));
+import { useExcalidrawAppState } from "../App";
+import { THEME } from "../../constants";
+const DropdownMenuItem = ({ icon, value, order, children, shortcut, className, hovered, selected, textStyle, onSelect, onClick, ...rest }) => {
+    const handleClick = useHandleDropdownMenuItemClick(onClick, onSelect);
+    const ref = useRef(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 (_jsx("button", { ...rest, ref: ref, value: value, onClick: handleClick, className: getDropdownMenuItemClassName(className, selected, hovered), title: rest.title ?? rest["aria-label"], children: _jsx(MenuItemContent, { textStyle: textStyle, 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 }));
+export const DropDownMenuItemBadgeType = {
+    GREEN: "green",
+    RED: "red",
+    BLUE: "blue",
+};
+export const DropDownMenuItemBadge = ({ type = DropDownMenuItemBadgeType.BLUE, children, }) => {
+    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 (_jsx("div", { className: "DropDownMenuItemBadge", style: style, children: children }));
 };
 DropDownMenuItemBadge.displayName = "DropdownMenuItemBadge";
 DropdownMenuItem.Badge = DropDownMenuItemBadge;

package/dist/excalidraw/components/dropdownMenu/DropdownMenuItemContent.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-declare const MenuItemContent: ({ icon, shortcut, children, }: {
+declare const MenuItemContent: ({ textStyle, icon, shortcut, children, }: {
     icon?: JSX.Element | undefined;
     shortcut?: string | undefined;
+    textStyle?: import("react").CSSProperties | undefined;
     children: React.ReactNode;
 }) => JSX.Element;
 export default MenuItemContent;

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

@@ -1,7 +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 MenuItemContent = ({ textStyle, 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 }))] }));
+    return (_jsxs(_Fragment, { children: [icon && _jsx("div", { className: "dropdown-menu-item__icon", children: icon }), _jsx("div", { style: textStyle, 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/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+type Props<T> = {
+    value: T;
+    shortcut?: string;
+    choices: {
+        value: T;
+        label: React.ReactNode;
+        ariaLabel?: string;
+    }[];
+    onChange: (value: T) => void;
+    children: React.ReactNode;
+    name: string;
+};
+declare const DropdownMenuItemContentRadio: {
+    <T>({ value, shortcut, onChange, choices, children, name, }: Props<T>): JSX.Element;
+    displayName: string;
+};
+export default DropdownMenuItemContentRadio;

package/dist/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDevice } from "../App";
+import { RadioGroup } from "../RadioGroup";
+const DropdownMenuItemContentRadio = ({ value, shortcut, onChange, choices, children, name, }) => {
+    const device = useDevice();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "dropdown-menu-item-base dropdown-menu-item-bare", children: [_jsx("label", { className: "dropdown-menu-item__text", htmlFor: name, children: children }), _jsx(RadioGroup, { name: name, value: value, onChange: onChange, choices: choices })] }), shortcut && !device.editor.isMobile && (_jsx("div", { className: "dropdown-menu-item__shortcut dropdown-menu-item__shortcut--orphaned", children: shortcut }))] }));
+};
+DropdownMenuItemContentRadio.displayName = "DropdownMenuItemContentRadio";
+export default DropdownMenuItemContentRadio;

package/dist/excalidraw/components/dropdownMenu/common.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 export declare const DropdownMenuContentPropsContext: React.Context<{
     onSelect?: ((event: Event) => void) | undefined;
 }>;
-export declare const getDropdownMenuItemClassName: (className?: string, selected?: boolean) => string;
+export declare const getDropdownMenuItemClassName: (className?: string, selected?: boolean, hovered?: boolean) => string;
 export declare const useHandleDropdownMenuItemClick: (origOnClick: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined, onSelect: ((event: Event) => void) | undefined) => (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void;

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

@@ -2,8 +2,9 @@ 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 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, onSelect) => {
     const DropdownMenuContentProps = useContext(DropdownMenuContentPropsContext);

package/dist/excalidraw/components/footer/Footer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ActionManager } from "../../actions/manager";
-import { UIAppState } from "../../types";
+import type { ActionManager } from "../../actions/manager";
+import type { UIAppState } from "../../types";
 declare const Footer: {
     ({ appState, actionManager, showExitZenModeBtn, renderWelcomeScreen, }: {
         appState: UIAppState;

package/dist/excalidraw/components/hyperlink/Hyperlink.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { AppState, ExcalidrawProps, UIAppState } from "../../types";
-import { ElementsMap, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppState, ExcalidrawProps, UIAppState } from "../../types";
+import type { ElementsMap, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement } from "../../element/types";
 import "./Hyperlink.scss";
 export declare const Hyperlink: ({ element, elementsMap, setAppState, onLinkOpen, setToast, updateEmbedValidationStatus, }: {
     element: NonDeletedExcalidrawElement;

package/dist/excalidraw/components/hyperlink/Hyperlink.js

@@ -10,9 +10,9 @@ import clsx from "clsx";
 import { KEYS } from "../../keys";
 import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "../../constants";
 import { getElementAbsoluteCoords } from "../../element/bounds";
-import { getTooltipDiv, updateTooltipPosition } from "../Tooltip";
+import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
 import { getSelectedElements } from "../../scene";
-import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { hitElementBoundingBox } from "../../element/collision";
 import { isLocalLink, normalizeLink } from "../../data/url";
 import "./Hyperlink.scss";
 import { trackEvent } from "../../analytics";
@@ -252,7 +252,7 @@ const shouldHideLinkPopup = (element, elementsMap, appState, [clientX, clientY])
     const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords({ clientX, clientY }, appState);
     const threshold = 15 / appState.zoom.value;
     // hitbox to prevent hiding when hovered in element bounding box
-    if (isPointHittingElementBoundingBox(element, elementsMap, [sceneX, sceneY], threshold, null)) {
+    if (hitElementBoundingBox(sceneX, sceneY, element, elementsMap)) {
         return false;
     }
     const [x1, y1, x2] = getElementAbsoluteCoords(element, elementsMap);

package/dist/excalidraw/components/hyperlink/helpers.d.ts

@@ -1,6 +1,6 @@
-import { Bounds } from "../../element/bounds";
-import { ElementsMap, NonDeletedExcalidrawElement } from "../../element/types";
-import { AppState, UIAppState } from "../../types";
+import type { Bounds } from "../../element/bounds";
+import type { ElementsMap, NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppState, UIAppState } from "../../types";
 export declare const EXTERNAL_LINK_IMG: HTMLImageElement;
 export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: Pick<UIAppState, "zoom">) => Bounds;
 export declare const isPointHittingLinkIcon: (element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, appState: AppState, [x, y]: readonly [number, number]) => boolean;

package/dist/excalidraw/components/hyperlink/helpers.js

@@ -1,6 +1,6 @@
 import { MIME_TYPES } from "../../constants";
 import { getElementAbsoluteCoords } from "../../element/bounds";
-import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { hitElementBoundingBox } from "../../element/collision";
 import { rotate } from "../../math";
 import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
 export const EXTERNAL_LINK_IMG = document.createElement("img");
@@ -39,10 +39,9 @@ export const isPointHittingLink = (element, elementsMap, appState, [x, y], isMob
     if (!element.link || appState.selectedElementIds[element.id]) {
         return false;
     }
-    const threshold = 4 / appState.zoom.value;
     if (!isMobile &&
         appState.viewModeEnabled &&
-        isPointHittingElementBoundingBox(element, elementsMap, [x, y], threshold, null)) {
+        hitElementBoundingBox(x, y, element, elementsMap)) {
         return true;
     }
     return isPointHittingLinkIcon(element, elementsMap, appState, [x, y]);

package/dist/excalidraw/components/icons.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Theme } from "../element/types";
+import type { Theme } from "../element/types";
 export declare const iconFillColor: (theme: Theme) => string;
 type Opts = {
     width?: number;
@@ -140,6 +140,7 @@ export declare const FontSizeMediumIcon: JSX.Element;
 export declare const FontSizeLargeIcon: JSX.Element;
 export declare const FontSizeExtraLargeIcon: JSX.Element;
 export declare const fontSizeIcon: JSX.Element;
+export declare const FontFamilyHeadingIcon: JSX.Element;
 export declare const FontFamilyNormalIcon: JSX.Element;
 export declare const FontFamilyCodeIcon: JSX.Element;
 export declare const TextAlignLeftIcon: JSX.Element;
@@ -154,6 +155,7 @@ export declare const TextAlignBottomIcon: React.MemoExoticComponent<({ theme }:
 export declare const TextAlignMiddleIcon: React.MemoExoticComponent<({ theme }: {
     theme: Theme;
 }) => JSX.Element>;
+export declare const angleIcon: JSX.Element;
 export declare const publishIcon: JSX.Element;
 export declare const eraser: JSX.Element;
 export declare const handIcon: JSX.Element;
@@ -194,4 +196,11 @@ export declare const svgIcon: JSX.Element;
 export declare const pngIcon: JSX.Element;
 export declare const magnetIcon: JSX.Element;
 export declare const coffeeIcon: JSX.Element;
+export declare const DeviceDesktopIcon: JSX.Element;
+export declare const loginIcon: JSX.Element;
+export declare const youtubeIcon: JSX.Element;
+export declare const gridIcon: JSX.Element;
+export declare const lineEditorIcon: JSX.Element;
+export declare const collapseDownIcon: JSX.Element;
+export declare const collapseUpIcon: JSX.Element;
 export {};