@excalidraw/excalidraw 0.17.1-d2f67e6 → 0.17.1-e63dd02

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import "./ButtonIcon.scss";
+interface ButtonIconProps {
+    icon: JSX.Element;
+    title: string;
+    className?: string;
+    testId?: string;
+    /** if not supplied, defaults to value identity check */
+    active?: boolean;
+    /** include standalone style (could interfere with parent styles) */
+    standalone?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export declare const ButtonIcon: import("react").ForwardRefExoticComponent<ButtonIconProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/excalidraw/components/ButtonIcon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import "./ButtonIcon.scss";
+export const ButtonIcon = forwardRef((props, ref) => {
+    const { title, className, testId, active, standalone, icon, onClick } = props;
+    return (_jsx("button", { type: "button", ref: ref, title: title, "data-testid": testId, className: clsx(className, { standalone, active }), onClick: onClick, children: icon }, title));
+});

package/dist/excalidraw/components/ButtonIconSelect.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { ButtonIcon } from "./ButtonIcon";
 // TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
-export const ButtonIconSelect = (props) => (_jsx("div", { className: "buttonList buttonListIcon", children: props.options.map((option) => props.type === "button" ? (_jsx("button", { type: "button", onClick: (event) => props.onClick(option.value, event), className: clsx({
-            active: option.active ?? props.value === option.value,
-        }), "data-testid": option.testId, title: option.text, children: option.icon }, option.text)) : (_jsxs("label", { className: clsx({ active: props.value === option.value }), title: option.text, children: [_jsx("input", { type: "radio", name: props.group, onChange: () => props.onChange(option.value), checked: props.value === option.value, "data-testid": option.testId }), option.icon] }, option.text))) }));
+export const ButtonIconSelect = (props) => (_jsx("div", { className: "buttonList", children: props.options.map((option) => props.type === "button" ? (_jsx(ButtonIcon, { icon: option.icon, title: option.text, testId: option.testId, active: option.active ?? props.value === option.value, onClick: (event) => props.onClick(option.value, event) }, option.text)) : (_jsxs("label", { className: clsx({ active: props.value === option.value }), title: option.text, children: [_jsx("input", { type: "radio", name: props.group, onChange: () => props.onChange(option.value), checked: props.value === option.value, "data-testid": option.testId }), option.icon] }, option.text))) }));

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ButtonSeparator: () => JSX.Element;

package/dist/excalidraw/components/ButtonSeparator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ButtonSeparator = () => (_jsx("div", { style: {
+        width: 1,
+        height: "1rem",
+        backgroundColor: "var(--default-border-color)",
+        margin: "0 auto",
+    } }));

package/dist/excalidraw/components/ColorPicker/ColorPicker.js

@@ -1,19 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isInteractive, isTransparent, isWritableElement } from "../../utils";
+import { isTransparent } from "../../utils";
 import { TopPicks } from "./TopPicks";
+import { ButtonSeparator } from "../ButtonSeparator";
 import { Picker } from "./Picker";
 import * as Popover from "@radix-ui/react-popover";
 import { useAtom } from "jotai";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
-import { useDevice, useExcalidrawContainer } from "../App";
+import { useExcalidrawContainer } from "../App";
 import { COLOR_PALETTE } from "../../colors";
 import PickerHeading from "./PickerHeading";
 import { t } from "../../i18n";
 import clsx from "clsx";
+import { useRef } from "react";
 import { jotaiScope } from "../../jotai";
 import { ColorInput } from "./ColorInput";
-import { useRef } from "react";
 import { activeEyeDropperAtom } from "../EyeDropper";
+import { PropertiesPopover } from "../PropertiesPopover";
 import "./ColorPicker.scss";
 const isValidColor = (color) => {
     const style = new Option().style;
@@ -34,10 +36,9 @@ export const getColor = (color) => {
             : null;
 };
 const ColorPickerPopupContent = ({ type, color, onChange, label, elements, palette = COLOR_PALETTE, updateData, }) => {
+    const { container } = useExcalidrawContainer();
     const [, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
     const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom, jotaiScope);
-    const { container } = useExcalidrawContainer();
-    const device = useDevice();
     const colorInputJSX = (_jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.hexCode") }), _jsx(ColorInput, { color: color, label: label, onChange: (color) => {
                     onChange(color);
                 }, colorPickerType: type })] }));
@@ -47,92 +48,59 @@ const ColorPickerPopupContent = ({ type, color, onChange, label, elements, palet
             ?.querySelector(".color-picker-content")
             ?.focus();
     };
-    return (_jsx(Popover.Portal, { container: container, children: _jsxs(Popover.Content, { ref: popoverRef, className: "focus-visible-none", "data-prevent-outside-click": true, onFocusOutside: (event) => {
-                focusPickerContent();
+    return (_jsx(PropertiesPopover, { container: container, style: { maxWidth: "208px" }, onFocusOutside: (event) => {
+            // refocus due to eye dropper
+            focusPickerContent();
+            event.preventDefault();
+        }, onPointerDownOutside: (event) => {
+            if (eyeDropperState) {
+                // prevent from closing if we click outside the popover
+                // while eyedropping (e.g. click when clicking the sidebar;
+                // the eye-dropper-backdrop is prevented downstream)
                 event.preventDefault();
-            }, onPointerDownOutside: (event) => {
+            }
+        }, onClose: () => {
+            updateData({ openPopup: null });
+            setActiveColorPickerSection(null);
+        }, children: palette ? (_jsx(Picker, { palette: palette, color: color, onChange: (changedColor) => {
+                onChange(changedColor);
+            }, onEyeDropperToggle: (force) => {
+                setEyeDropperState((state) => {
+                    if (force) {
+                        state = state || {
+                            keepOpenOnAlt: true,
+                            onSelect: onChange,
+                            colorPickerType: type,
+                        };
+                        state.keepOpenOnAlt = true;
+                        return state;
+                    }
+                    return force === false || state
+                        ? null
+                        : {
+                            keepOpenOnAlt: false,
+                            onSelect: onChange,
+                            colorPickerType: type,
+                        };
+                });
+            }, onEscape: (event) => {
                 if (eyeDropperState) {
-                    // prevent from closing if we click outside the popover
-                    // while eyedropping (e.g. click when clicking the sidebar;
-                    // the eye-dropper-backdrop is prevented downstream)
-                    event.preventDefault();
+                    setEyeDropperState(null);
                 }
-            }, onCloseAutoFocus: (e) => {
-                e.stopPropagation();
-                // prevents focusing the trigger
-                e.preventDefault();
-                // return focus to excalidraw container unless
-                // user focuses an interactive element, such as a button, or
-                // enters the text editor by clicking on canvas with the text tool
-                if (container && !isInteractive(document.activeElement)) {
-                    container.focus();
+                else {
+                    updateData({ openPopup: null });
                 }
-                updateData({ openPopup: null });
-                setActiveColorPickerSection(null);
-            }, side: device.editor.isMobile && !device.viewport.isLandscape
-                ? "bottom"
-                : "right", align: device.editor.isMobile && !device.viewport.isLandscape
-                ? "center"
-                : "start", alignOffset: -16, sideOffset: 20, style: {
-                zIndex: "var(--zIndex-layerUI)",
-                backgroundColor: "var(--popup-bg-color)",
-                maxWidth: "208px",
-                maxHeight: window.innerHeight,
-                padding: "12px",
-                borderRadius: "8px",
-                boxSizing: "border-box",
-                overflowY: "auto",
-                boxShadow: "0px 7px 14px rgba(0, 0, 0, 0.05), 0px 0px 3.12708px rgba(0, 0, 0, 0.0798), 0px 0px 0.931014px rgba(0, 0, 0, 0.1702)",
-            }, children: [palette ? (_jsx(Picker, { palette: palette, color: color, onChange: (changedColor) => {
-                        onChange(changedColor);
-                    }, onEyeDropperToggle: (force) => {
-                        setEyeDropperState((state) => {
-                            if (force) {
-                                state = state || {
-                                    keepOpenOnAlt: true,
-                                    onSelect: onChange,
-                                    colorPickerType: type,
-                                };
-                                state.keepOpenOnAlt = true;
-                                return state;
-                            }
-                            return force === false || state
-                                ? null
-                                : {
-                                    keepOpenOnAlt: false,
-                                    onSelect: onChange,
-                                    colorPickerType: type,
-                                };
-                        });
-                    }, onEscape: (event) => {
-                        if (eyeDropperState) {
-                            setEyeDropperState(null);
-                        }
-                        else if (isWritableElement(event.target)) {
-                            focusPickerContent();
-                        }
-                        else {
-                            updateData({ openPopup: null });
-                        }
-                    }, label: label, type: type, elements: elements, updateData: updateData, children: colorInputJSX })) : (colorInputJSX), _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)",
-                    } })] }) }));
+            }, label: label, type: type, elements: elements, updateData: updateData, children: colorInputJSX })) : (colorInputJSX) }));
 };
 const ColorPickerTrigger = ({ label, color, type, }) => {
-    return (_jsx(Popover.Trigger, { type: "button", className: clsx("color-picker__button active-color", {
+    return (_jsx(Popover.Trigger, { type: "button", className: clsx("color-picker__button active-color properties-trigger", {
             "is-transparent": color === "transparent" || !color,
         }), "aria-label": label, style: color ? { "--swatch-color": color } : undefined, title: type === "elementStroke"
             ? t("labels.showStroke")
             : t("labels.showBackground"), children: _jsx("div", { className: "color-picker__button-outline" }) }));
 };
 export const ColorPicker = ({ type, color, onChange, label, elements, palette = COLOR_PALETTE, topPicks, updateData, appState, }) => {
-    return (_jsx("div", { children: _jsxs("div", { role: "dialog", "aria-modal": "true", className: "color-picker-container", children: [_jsx(TopPicks, { activeColor: color, onChange: onChange, type: type, topPicks: topPicks }), _jsx("div", { style: {
-                        width: 1,
-                        height: "100%",
-                        backgroundColor: "var(--default-border-color)",
-                        margin: "0 auto",
-                    } }), _jsxs(Popover.Root, { open: appState.openPopup === type, onOpenChange: (open) => {
+    return (_jsx("div", { children: _jsxs("div", { role: "dialog", "aria-modal": "true", className: "color-picker-container", children: [_jsx(TopPicks, { activeColor: color, onChange: onChange, type: type, topPicks: topPicks }), _jsx(ButtonSeparator, {}), _jsxs(Popover.Root, { open: appState.openPopup === type, onOpenChange: (open) => {
                         updateData({ openPopup: open ? type : null });
                     }, children: [_jsx(ColorPickerTrigger, { color: color, label: label, type: type }), appState.openPopup === type && (_jsx(ColorPickerPopupContent, { type: type, color: color, onChange: onChange, label: label, elements: elements, palette: palette, updateData: updateData }))] })] }) }));
 };

package/dist/excalidraw/components/ColorPicker/Picker.js

@@ -80,7 +80,7 @@ export const Picker = ({ color, onChange, label, type, elements, palette, update
                     event.preventDefault();
                     event.stopPropagation();
                 }
-            }, className: "color-picker-content", 
+            }, className: "color-picker-content properties-content", 
             // to allow focusing by clicking but not by tabbing
             tabIndex: -1, children: [!!customColors.length && (_jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.mostUsedCustomColors") }), _jsx(CustomColorList, { colors: customColors, color: color, label: t("colorPicker.mostUsedCustomColors"), onChange: onChange })] })), _jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.colors") }), _jsx(PickerColorList, { color: color, label: label, palette: palette, onChange: onChange, activeShade: activeShade })] }), _jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.shades") }), _jsx(ShadeList, { hex: color, onChange: onChange, palette: palette })] }), children] }) }));
 };

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

@@ -0,0 +1,21 @@
+import React from "react";
+import type { FontFamilyValues } from "../../element/types";
+import "./FontPicker.scss";
+export declare const DEFAULT_FONTS: {
+    value: number;
+    icon: JSX.Element;
+    text: string;
+    testId: string;
+}[];
+export declare const isDefaultFont: (fontFamily: number | null) => boolean;
+interface FontPickerProps {
+    isOpened: boolean;
+    selectedFontFamily: FontFamilyValues | null;
+    hoveredFontFamily: FontFamilyValues | null;
+    onSelect: (fontFamily: FontFamilyValues) => void;
+    onHover: (fontFamily: FontFamilyValues) => void;
+    onLeave: () => void;
+    onPopupChange: (open: boolean) => void;
+}
+export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, }: FontPickerProps) => JSX.Element>;
+export {};

package/dist/excalidraw/components/FontPicker/FontPicker.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { FontPickerList } from "./FontPickerList";
+import { FontPickerTrigger } from "./FontPickerTrigger";
+import { ButtonIconSelect } from "../ButtonIconSelect";
+import { FontFamilyCodeIcon, FontFamilyNormalIcon, FreedrawIcon, } from "../icons";
+import { ButtonSeparator } from "../ButtonSeparator";
+import { FONT_FAMILY } from "../../constants";
+import { t } from "../../i18n";
+import "./FontPicker.scss";
+export const DEFAULT_FONTS = [
+    {
+        value: FONT_FAMILY.Excalifont,
+        icon: FreedrawIcon,
+        text: t("labels.handDrawn"),
+        testId: "font-family-handrawn",
+    },
+    {
+        value: FONT_FAMILY.Nunito,
+        icon: FontFamilyNormalIcon,
+        text: t("labels.normal"),
+        testId: "font-family-normal",
+    },
+    {
+        value: FONT_FAMILY["Comic Shanns"],
+        icon: FontFamilyCodeIcon,
+        text: t("labels.code"),
+        testId: "font-family-code",
+    },
+];
+const defaultFontFamilies = new Set(DEFAULT_FONTS.map((x) => x.value));
+export const isDefaultFont = (fontFamily) => {
+    if (!fontFamily) {
+        return false;
+    }
+    return defaultFontFamilies.has(fontFamily);
+};
+export const FontPicker = React.memo(({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, }) => {
+    const defaultFonts = useMemo(() => DEFAULT_FONTS, []);
+    const onSelectCallback = useCallback((value) => {
+        if (value) {
+            onSelect(value);
+        }
+    }, [onSelect]);
+    return (_jsxs("div", { role: "dialog", "aria-modal": "true", className: "FontPicker__container", children: [_jsx(ButtonIconSelect, { type: "button", options: defaultFonts, value: selectedFontFamily, onClick: onSelectCallback }), _jsx(ButtonSeparator, {}), _jsxs(Popover.Root, { open: isOpened, onOpenChange: onPopupChange, children: [_jsx(FontPickerTrigger, { selectedFontFamily: selectedFontFamily }), isOpened && (_jsx(FontPickerList, { selectedFontFamily: selectedFontFamily, hoveredFontFamily: hoveredFontFamily, onSelect: onSelectCallback, onHover: onHover, onLeave: onLeave, onOpen: () => onPopupChange(true), onClose: () => onPopupChange(false) }))] })] }));
+}, (prev, next) => prev.isOpened === next.isOpened &&
+    prev.selectedFontFamily === next.selectedFontFamily &&
+    prev.hoveredFontFamily === next.hoveredFontFamily);

package/dist/excalidraw/components/FontPicker/FontPickerList.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { DropDownMenuItemBadgeType } from "../dropdownMenu/DropdownMenuItem";
+import { type FontFamilyValues } from "../../element/types";
+import type { ValueOf } from "../../utility-types";
+export interface FontDescriptor {
+    value: number;
+    icon: JSX.Element;
+    text: string;
+    deprecated?: true;
+    badge?: {
+        type: ValueOf<typeof DropDownMenuItemBadgeType>;
+        placeholder: string;
+    };
+}
+interface FontPickerListProps {
+    selectedFontFamily: FontFamilyValues | null;
+    hoveredFontFamily: FontFamilyValues | null;
+    onSelect: (value: number) => void;
+    onHover: (value: number) => void;
+    onLeave: () => void;
+    onOpen: () => void;
+    onClose: () => void;
+}
+export declare const FontPickerList: React.MemoExoticComponent<({ selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onOpen, onClose, }: FontPickerListProps) => JSX.Element>;
+export {};

package/dist/excalidraw/components/FontPicker/FontPickerList.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useState, useRef, useEffect, useCallback, } from "react";
+import { useApp, useAppProps, useExcalidrawContainer } from "../App";
+import { PropertiesPopover } from "../PropertiesPopover";
+import { QuickSearch } from "../QuickSearch";
+import { ScrollableList } from "../ScrollableList";
+import DropdownMenuGroup from "../dropdownMenu/DropdownMenuGroup";
+import DropdownMenuItem, { DropDownMenuItemBadgeType, DropDownMenuItemBadge, } from "../dropdownMenu/DropdownMenuItem";
+import { arrayToList, debounce, getFontFamilyString } from "../../utils";
+import { t } from "../../i18n";
+import { fontPickerKeyHandler } from "./keyboardNavHandlers";
+import { Fonts } from "../../fonts";
+export const FontPickerList = React.memo(({ selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onOpen, onClose, }) => {
+    const { container } = useExcalidrawContainer();
+    const { fonts } = useApp();
+    const { showDeprecatedFonts } = useAppProps();
+    const [searchTerm, setSearchTerm] = useState("");
+    const inputRef = useRef(null);
+    const allFonts = useMemo(() => Array.from(Fonts.registered.entries())
+        .filter(([_, { metadata }]) => !metadata.serverSide)
+        .map(([familyId, { metadata, fonts }]) => {
+        const fontDescriptor = {
+            value: familyId,
+            icon: metadata.icon,
+            text: fonts[0].fontFace.family,
+        };
+        if (metadata.deprecated) {
+            Object.assign(fontDescriptor, {
+                deprecated: metadata.deprecated,
+                badge: {
+                    type: DropDownMenuItemBadgeType.RED,
+                    placeholder: t("fontList.badge.old"),
+                },
+            });
+        }
+        return fontDescriptor;
+    })
+        .sort((a, b) => a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1), []);
+    const sceneFamilies = useMemo(() => new Set(fonts.getSceneFontFamilies()), 
+    // cache per selected font family, so hover re-render won't mess it up
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedFontFamily]);
+    const sceneFonts = useMemo(() => allFonts.filter((font) => sceneFamilies.has(font.value)), // always show all the fonts in the scene, even those that were deprecated
+    [allFonts, sceneFamilies]);
+    const availableFonts = useMemo(() => allFonts.filter((font) => !sceneFamilies.has(font.value) &&
+        (showDeprecatedFonts || !font.deprecated)), [allFonts, sceneFamilies, showDeprecatedFonts]);
+    const filteredFonts = useMemo(() => arrayToList([...sceneFonts, ...availableFonts].filter((font) => font.text?.toLowerCase().includes(searchTerm))), [sceneFonts, availableFonts, searchTerm]);
+    const hoveredFont = useMemo(() => {
+        let font;
+        if (hoveredFontFamily) {
+            font = filteredFonts.find((font) => font.value === hoveredFontFamily);
+        }
+        else if (selectedFontFamily) {
+            font = filteredFonts.find((font) => font.value === selectedFontFamily);
+        }
+        if (!font && searchTerm) {
+            if (filteredFonts[0]?.value) {
+                // hover first element on search
+                onHover(filteredFonts[0].value);
+            }
+            else {
+                // re-render cache on no results
+                onLeave();
+            }
+        }
+        return font;
+    }, [
+        hoveredFontFamily,
+        selectedFontFamily,
+        searchTerm,
+        filteredFonts,
+        onHover,
+        onLeave,
+    ]);
+    const onKeyDown = useCallback((event) => {
+        const handled = fontPickerKeyHandler({
+            event,
+            inputRef,
+            hoveredFont,
+            filteredFonts,
+            onSelect,
+            onHover,
+            onClose,
+        });
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, [hoveredFont, filteredFonts, onSelect, onHover, onClose]);
+    useEffect(() => {
+        onOpen();
+        return () => {
+            onClose();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const sceneFilteredFonts = useMemo(() => filteredFonts.filter((font) => sceneFamilies.has(font.value)), [filteredFonts, sceneFamilies]);
+    const availableFilteredFonts = useMemo(() => filteredFonts.filter((font) => !sceneFamilies.has(font.value)), [filteredFonts, sceneFamilies]);
+    const renderFont = (font, index) => (_jsxs(DropdownMenuItem, { icon: font.icon, value: font.value, order: index, textStyle: {
+            fontFamily: getFontFamilyString({ fontFamily: font.value }),
+        }, hovered: font.value === hoveredFont?.value, selected: font.value === selectedFontFamily, 
+        // allow to tab between search and selected font
+        tabIndex: font.value === selectedFontFamily ? 0 : -1, onClick: (e) => {
+            onSelect(Number(e.currentTarget.value));
+        }, onMouseMove: () => {
+            if (hoveredFont?.value !== font.value) {
+                onHover(font.value);
+            }
+        }, children: [font.text, font.badge && (_jsx(DropDownMenuItemBadge, { type: font.badge.type, children: font.badge.placeholder }))] }, font.value));
+    const groups = [];
+    if (sceneFilteredFonts.length) {
+        groups.push(_jsx(DropdownMenuGroup, { title: t("fontList.sceneFonts"), children: sceneFilteredFonts.map(renderFont) }, "group_1"));
+    }
+    if (availableFilteredFonts.length) {
+        groups.push(_jsx(DropdownMenuGroup, { title: t("fontList.availableFonts"), children: availableFilteredFonts.map((font, index) => renderFont(font, index + sceneFilteredFonts.length)) }, "group_2"));
+    }
+    return (_jsxs(PropertiesPopover, { className: "properties-content", container: container, style: { width: "15rem" }, onClose: onClose, onPointerLeave: onLeave, onKeyDown: onKeyDown, children: [_jsx(QuickSearch, { ref: inputRef, placeholder: t("quickSearch.placeholder"), onChange: debounce(setSearchTerm, 20) }), _jsx(ScrollableList, { className: "dropdown-menu fonts manual-hover", placeholder: t("fontList.empty"), children: groups.length ? groups : null })] }));
+}, (prev, next) => prev.selectedFontFamily === next.selectedFontFamily &&
+    prev.hoveredFontFamily === next.hoveredFontFamily);

package/dist/excalidraw/components/FontPicker/FontPickerTrigger.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { FontFamilyValues } from "../../element/types";
+interface FontPickerTriggerProps {
+    selectedFontFamily: FontFamilyValues | null;
+}
+export declare const FontPickerTrigger: ({ selectedFontFamily, }: FontPickerTriggerProps) => JSX.Element;
+export {};

package/dist/excalidraw/components/FontPicker/FontPickerTrigger.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Popover from "@radix-ui/react-popover";
+import { useMemo } from "react";
+import { ButtonIcon } from "../ButtonIcon";
+import { TextIcon } from "../icons";
+import { t } from "../../i18n";
+import { isDefaultFont } from "./FontPicker";
+export const FontPickerTrigger = ({ selectedFontFamily, }) => {
+    const isTriggerActive = useMemo(() => Boolean(selectedFontFamily && !isDefaultFont(selectedFontFamily)), [selectedFontFamily]);
+    return (_jsx(Popover.Trigger, { asChild: true, children: _jsx("div", { children: _jsx(ButtonIcon, { standalone: true, icon: TextIcon, title: t("labels.showFonts"), className: "properties-trigger", testId: "font-family-show-fonts", active: isTriggerActive, 
+                // no-op
+                onClick: () => { } }) }) }));
+};

package/dist/excalidraw/components/FontPicker/keyboardNavHandlers.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { Node } from "../../utils";
+import { type FontDescriptor } from "./FontPickerList";
+interface FontPickerKeyNavHandlerProps {
+    event: React.KeyboardEvent<HTMLDivElement>;
+    inputRef: React.RefObject<HTMLInputElement>;
+    hoveredFont: Node<FontDescriptor> | undefined;
+    filteredFonts: Node<FontDescriptor>[];
+    onClose: () => void;
+    onSelect: (value: number) => void;
+    onHover: (value: number) => void;
+}
+export declare const fontPickerKeyHandler: ({ event, inputRef, hoveredFont, filteredFonts, onClose, onSelect, onHover, }: FontPickerKeyNavHandlerProps) => true | undefined;
+export {};

package/dist/excalidraw/components/FontPicker/keyboardNavHandlers.js

@@ -0,0 +1,38 @@
+import { KEYS } from "../../keys";
+export const fontPickerKeyHandler = ({ event, inputRef, hoveredFont, filteredFonts, onClose, onSelect, onHover, }) => {
+    if (!event[KEYS.CTRL_OR_CMD] &&
+        event.shiftKey &&
+        event.key.toLowerCase() === KEYS.F) {
+        // refocus input on the popup trigger shortcut
+        inputRef.current?.focus();
+        return true;
+    }
+    if (event.key === KEYS.ESCAPE) {
+        onClose();
+        return true;
+    }
+    if (event.key === KEYS.ENTER) {
+        if (hoveredFont?.value) {
+            onSelect(hoveredFont.value);
+        }
+        return true;
+    }
+    if (event.key === KEYS.ARROW_DOWN) {
+        if (hoveredFont?.next) {
+            onHover(hoveredFont.next.value);
+        }
+        else if (filteredFonts[0]?.value) {
+            onHover(filteredFonts[0].value);
+        }
+        return true;
+    }
+    if (event.key === KEYS.ARROW_UP) {
+        if (hoveredFont?.prev) {
+            onHover(hoveredFont.prev.value);
+        }
+        else if (filteredFonts[filteredFonts.length - 1]?.value) {
+            onHover(filteredFonts[filteredFonts.length - 1].value);
+        }
+        return true;
+    }
+};

package/dist/excalidraw/components/HelpDialog.js

@@ -81,5 +81,5 @@ export const HelpDialog = ({ onClose }) => {
                                             getShortcutKey("CtrlOrCmd+Y"),
                                             getShortcutKey("CtrlOrCmd+Shift+Z"),
                                         ]
-                                        : [getShortcutKey("CtrlOrCmd+Shift+Z")] }), _jsx(Shortcut, { label: t("labels.group"), shortcuts: [getShortcutKey("CtrlOrCmd+G")] }), _jsx(Shortcut, { label: t("labels.ungroup"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+G")] }), _jsx(Shortcut, { label: t("labels.flipHorizontal"), shortcuts: [getShortcutKey("Shift+H")] }), _jsx(Shortcut, { label: t("labels.flipVertical"), shortcuts: [getShortcutKey("Shift+V")] }), _jsx(Shortcut, { label: t("labels.showStroke"), shortcuts: [getShortcutKey("S")] }), _jsx(Shortcut, { label: t("labels.showBackground"), shortcuts: [getShortcutKey("G")] }), _jsx(Shortcut, { label: t("labels.decreaseFontSize"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+<")] }), _jsx(Shortcut, { label: t("labels.increaseFontSize"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+>")] })] })] })] }) }));
+                                        : [getShortcutKey("CtrlOrCmd+Shift+Z")] }), _jsx(Shortcut, { label: t("labels.group"), shortcuts: [getShortcutKey("CtrlOrCmd+G")] }), _jsx(Shortcut, { label: t("labels.ungroup"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+G")] }), _jsx(Shortcut, { label: t("labels.flipHorizontal"), shortcuts: [getShortcutKey("Shift+H")] }), _jsx(Shortcut, { label: t("labels.flipVertical"), shortcuts: [getShortcutKey("Shift+V")] }), _jsx(Shortcut, { label: t("labels.showStroke"), shortcuts: [getShortcutKey("S")] }), _jsx(Shortcut, { label: t("labels.showBackground"), shortcuts: [getShortcutKey("G")] }), _jsx(Shortcut, { label: t("labels.showFonts"), shortcuts: [getShortcutKey("Shift+F")] }), _jsx(Shortcut, { label: t("labels.decreaseFontSize"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+<")] }), _jsx(Shortcut, { label: t("labels.increaseFontSize"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+>")] })] })] })] }) }));
 };

package/dist/excalidraw/components/HintViewer.js

@@ -14,10 +14,13 @@ const getHints = ({ appState, isMobile, device, app }) => {
         return t("hints.eraserRevert");
     }
     if (activeTool.type === "arrow" || activeTool.type === "line") {
-        if (!multiMode) {
-            return t("hints.linearElement");
+        if (multiMode) {
+            return t("hints.linearElementMulti");
         }
-        return t("hints.linearElementMulti");
+        if (activeTool.type === "arrow") {
+            return t("hints.arrowTool", { arrowShortcut: getShortcutKey("A") });
+        }
+        return t("hints.linearElement");
     }
     if (activeTool.type === "freedraw") {
         return t("hints.freeDraw");

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

@@ -0,0 +1,15 @@
+import React, { type ReactNode } from "react";
+import * as Popover from "@radix-ui/react-popover";
+interface PropertiesPopoverProps {
+    className?: string;
+    container: HTMLDivElement | null;
+    children: ReactNode;
+    style?: object;
+    onClose: () => void;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
+    onFocusOutside?: Popover.DismissableLayerProps["onFocusOutside"];
+    onPointerDownOutside?: Popover.DismissableLayerProps["onPointerDownOutside"];
+}
+export declare const PropertiesPopover: React.ForwardRefExoticComponent<PropertiesPopoverProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/excalidraw/components/PropertiesPopover.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import clsx from "clsx";
+import * as Popover from "@radix-ui/react-popover";
+import { useDevice } from "./App";
+import { Island } from "./Island";
+import { isInteractive } from "../utils";
+export const PropertiesPopover = React.forwardRef(({ className, container, children, style, onClose, onKeyDown, onFocusOutside, onPointerLeave, onPointerDownOutside, }, ref) => {
+    const device = useDevice();
+    return (_jsx(Popover.Portal, { container: container, children: _jsxs(Popover.Content, { ref: ref, className: clsx("focus-visible-none", className), "data-prevent-outside-click": true, side: device.editor.isMobile && !device.viewport.isLandscape
+                ? "bottom"
+                : "right", align: device.editor.isMobile && !device.viewport.isLandscape
+                ? "center"
+                : "start", alignOffset: -16, sideOffset: 20, style: {
+                zIndex: "var(--zIndex-popup)",
+            }, onPointerLeave: onPointerLeave, onKeyDown: onKeyDown, onFocusOutside: onFocusOutside, onPointerDownOutside: onPointerDownOutside, onCloseAutoFocus: (e) => {
+                e.stopPropagation();
+                // prevents focusing the trigger
+                e.preventDefault();
+                // return focus to excalidraw container unless
+                // user focuses an interactive element, such as a button, or
+                // enters the text editor by clicking on canvas with the text tool
+                if (container && !isInteractive(document.activeElement)) {
+                    container.focus();
+                }
+                onClose();
+            }, children: [_jsx(Island, { padding: 3, style: style, children: children }), _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)",
+                    } })] }) }));
+});

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

@@ -0,0 +1,9 @@
+import React from "react";
+import "./QuickSearch.scss";
+interface QuickSearchProps {
+    className?: string;
+    placeholder: string;
+    onChange: (term: string) => void;
+}
+export declare const QuickSearch: React.ForwardRefExoticComponent<QuickSearchProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/excalidraw/components/QuickSearch.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import React from "react";
+import { searchIcon } from "./icons";
+import "./QuickSearch.scss";
+export const QuickSearch = React.forwardRef(({ className, placeholder, onChange }, ref) => {
+    return (_jsxs("div", { className: clsx("QuickSearch__wrapper", className), children: [searchIcon, _jsx("input", { ref: ref, className: "QuickSearch__input", type: "text", placeholder: placeholder, onChange: (e) => onChange(e.target.value.trim().toLowerCase()) })] }));
+});

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import "./ScrollableList.scss";
+interface ScrollableListProps {
+    className?: string;
+    placeholder: string;
+    children: React.ReactNode;
+}
+export declare const ScrollableList: ({ className, placeholder, children, }: ScrollableListProps) => JSX.Element;
+export {};