@excalidraw/excalidraw 0.17.1-d9bbf1e → 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", { 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/CheckboxItem.js

@@ -6,5 +6,5 @@ export const CheckboxItem = ({ children, checked, onChange, className }) => {
     return (_jsxs("div", { className: clsx("Checkbox", className, { "is-checked": checked }), onClick: (event) => {
             onChange(!checked, event);
             event.currentTarget.querySelector(".Checkbox-box").focus();
-        }, children: [_jsx("button", { className: "Checkbox-box", role: "checkbox", "aria-checked": checked, children: checkIcon }), _jsx("div", { className: "Checkbox-label", children: children })] }));
+        }, children: [_jsx("button", { type: "button", className: "Checkbox-box", role: "checkbox", "aria-checked": checked, children: checkIcon }), _jsx("div", { className: "Checkbox-label", children: children })] }));
 };

package/dist/excalidraw/components/ColorPicker/ColorInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPickerType } from "./colorPickerUtils";
+import type { ColorPickerType } from "./colorPickerUtils";
 interface ColorInputProps {
     color: string;
     onChange: (color: string) => void;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from "react";
 import { getColor } from "./ColorPicker";
 import { useAtom } from "jotai";
-import { activeColorPickerSectionAtom, } from "./colorPickerUtils";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import { eyeDropperIcon } from "../icons";
 import { jotaiScope } from "../../jotai";
 import { KEYS } from "../../keys";

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ExcalidrawElement } from "../../element/types";
-import { AppState } from "../../types";
-import { ColorPickerType } from "./colorPickerUtils";
-import { ColorTuple, ColorPaletteCustom } from "../../colors";
+import type { ExcalidrawElement } from "../../element/types";
+import type { AppState } from "../../types";
+import type { ColorPickerType } from "./colorPickerUtils";
+import type { ColorTuple, ColorPaletteCustom } from "../../colors";
 import "./ColorPicker.scss";
 export declare const getColor: (color: string) => string | null;
 interface ColorPickerProps {

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 { activeColorPickerSectionAtom } from "./colorPickerUtils";
+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.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { ExcalidrawElement } from "../../element/types";
-import { ColorPickerType } from "./colorPickerUtils";
-import { ColorPaletteCustom } from "../../colors";
+import type { ExcalidrawElement } from "../../element/types";
+import type { ColorPickerType } from "./colorPickerUtils";
+import type { ColorPaletteCustom } from "../../colors";
 interface PickerProps {
     color: string;
     onChange: (color: string) => void;

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/ColorPicker/PickerColorList.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPaletteCustom } from "../../colors";
+import type { ColorPaletteCustom } from "../../colors";
 interface PickerColorListProps {
     palette: ColorPaletteCustom;
     color: string;

package/dist/excalidraw/components/ColorPicker/PickerHeading.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 declare const PickerHeading: ({ children }: {
     children: ReactNode;
 }) => JSX.Element;

package/dist/excalidraw/components/ColorPicker/ShadeList.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPaletteCustom } from "../../colors";
+import type { ColorPaletteCustom } from "../../colors";
 interface ShadeListProps {
     hex: string;
     onChange: (color: string) => void;

package/dist/excalidraw/components/ColorPicker/TopPicks.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPickerType } from "./colorPickerUtils";
+import type { ColorPickerType } from "./colorPickerUtils";
 interface TopPicksProps {
     onChange: (color: string) => void;
     type: ColorPickerType;

package/dist/excalidraw/components/ColorPicker/colorPickerUtils.d.ts

@@ -1,5 +1,5 @@
-import { ExcalidrawElement } from "../../element/types";
-import { ColorPickerColor, ColorPaletteCustom } from "../../colors";
+import type { ExcalidrawElement } from "../../element/types";
+import type { ColorPickerColor, ColorPaletteCustom } from "../../colors";
 export declare const getColorNameAndShadeFromColor: ({ palette, color, }: {
     palette: ColorPaletteCustom;
     color: string;

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

@@ -1,5 +1,5 @@
 import { atom } from "jotai";
-import { MAX_CUSTOM_COLORS_USED_IN_CANVAS, } from "../../colors";
+import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "../../colors";
 export const getColorNameAndShadeFromColor = ({ palette, color, }) => {
     for (const [colorName, colorVal] of Object.entries(palette)) {
         if (Array.isArray(colorVal)) {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ColorPaletteCustom } from "../../colors";
-import { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
+import type { ColorPaletteCustom } from "../../colors";
+import type { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
 interface ColorPickerKeyNavHandlerProps {
     event: React.KeyboardEvent;
     activeColorPickerSection: ActiveColorPickerSectionAtomType;

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

@@ -1,5 +1,5 @@
 import { KEYS } from "../../keys";
-import { COLORS_PER_ROW, COLOR_PALETTE, } from "../../colors";
+import { COLORS_PER_ROW, COLOR_PALETTE } from "../../colors";
 import { colorPickerHotkeyBindings, getColorNameAndShadeFromColor, } from "./colorPickerUtils";
 const arrowHandler = (eventKey, currentIndex, length) => {
     const rows = Math.ceil(length / COLORS_PER_ROW);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommandPaletteItem } from "./types";
+import type { CommandPaletteItem } from "./types";
 import * as defaultItems from "./defaultCommandPaletteItems";
 import "./CommandPalette.scss";
 export declare const DEFAULT_CATEGORIES: {

package/dist/excalidraw/components/CommandPalette/CommandPalette.js

@@ -7,7 +7,7 @@ import { TextField } from "../TextField";
 import clsx from "clsx";
 import { getSelectedElements } from "../../scene";
 import { t } from "../../i18n";
-import { getShortcutFromShortcutName, } from "../../actions/shortcuts";
+import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { DEFAULT_SIDEBAR, EVENT } from "../../constants";
 import { LockedIcon, UnlockedIcon, clockIcon, searchIcon, boltIcon, bucketFillIcon, ExportImageIcon, mermaidLogoIcon, brainIconThin, LibraryIcon, } from "../icons";
 import fuzzy from "fuzzy";
@@ -164,10 +164,10 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
                 actionManager.actions.deleteSelectedElements,
                 actionManager.actions.copyStyles,
                 actionManager.actions.pasteStyles,
+                actionManager.actions.bringToFront,
+                actionManager.actions.bringForward,
                 actionManager.actions.sendBackward,
                 actionManager.actions.sendToBack,
-                actionManager.actions.bringForward,
-                actionManager.actions.bringToFront,
                 actionManager.actions.alignTop,
                 actionManager.actions.alignBottom,
                 actionManager.actions.alignLeft,
@@ -416,7 +416,7 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
                     ...command,
                     icon: command.icon || boltIcon,
                     order: command.order ?? getCategoryOrder(command.category),
-                    haystack: `${deburr(command.label)} ${command.keywords?.join(" ") || ""}`,
+                    haystack: `${deburr(command.label.toLocaleLowerCase())} ${command.keywords?.join(" ") || ""}`,
                 };
             });
             setAllCommands(allCommands);
@@ -584,7 +584,7 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
             setCurrentCommand(showLastUsed ? lastUsed : matchingCommands[0] || null);
             return;
         }
-        const _query = deburr(commandSearch.replace(/[<>-_| ]/g, ""));
+        const _query = deburr(commandSearch.toLocaleLowerCase().replace(/[<>_| -]/g, ""));
         matchingCommands = fuzzy
             .filter(_query, matchingCommands, {
             extract: (command) => command.haystack,

package/dist/excalidraw/components/CommandPalette/defaultCommandPaletteItems.d.ts

@@ -1,2 +1,2 @@
-import { CommandPaletteItem } from "./types";
+import type { CommandPaletteItem } from "./types";
 export declare const toggleTheme: CommandPaletteItem;

package/dist/excalidraw/components/CommandPalette/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ActionManager } from "../../actions/manager";
-import { Action } from "../../actions/types";
-import { UIAppState } from "../../types";
+import type { ActionManager } from "../../actions/manager";
+import type { Action } from "../../actions/types";
+import type { UIAppState } from "../../types";
 export type CommandPaletteItem = {
     label: string;
     /** additional keywords to match against

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DialogProps } from "./Dialog";
+import type { DialogProps } from "./Dialog";
 import "./ConfirmDialog.scss";
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
     onConfirm: () => void;

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

@@ -1,6 +1,6 @@
 import "./ContextMenu.scss";
-import { Action } from "../actions/types";
-import { ActionManager } from "../actions/manager";
+import type { Action } from "../actions/types";
+import type { ActionManager } from "../actions/manager";
 import React from "react";
 export type ContextMenuItem = typeof CONTEXT_MENU_SEPARATOR | Action;
 export type ContextMenuItems = (ContextMenuItem | false | null | undefined)[];

package/dist/excalidraw/components/ContextMenu.js

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { Popover } from "./Popover";
 import { t } from "../i18n";
 import "./ContextMenu.scss";
-import { getShortcutFromShortcutName, } from "../actions/shortcuts";
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { useExcalidrawAppState, useExcalidrawElements } from "./App";
 import React from "react";
 export const CONTEXT_MENU_SEPARATOR = "separator";
@@ -46,7 +46,7 @@ export const ContextMenu = React.memo(({ actionManager, items, top, left, onClos
                         onClose(() => {
                             actionManager.executeAction(item, "contextMenu");
                         });
-                    }, children: _jsxs("button", { className: clsx("context-menu-item", {
+                    }, children: _jsxs("button", { type: "button", className: clsx("context-menu-item", {
                             dangerous: actionName === "deleteSelectedElements",
                             checkmark: item.checked?.(appState),
                         }), children: [_jsx("div", { className: "context-menu-item__label", children: label }), _jsx("kbd", { className: "context-menu-item__shortcut", children: actionName

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./ToolIcon.scss";
-import { Theme } from "../element/types";
+import type { Theme } from "../element/types";
 export declare const DarkModeToggle: (props: {
     value: Theme;
     onChange: (value: Theme) => void;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { MarkOptional } from "../utility-types";
-import { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
+import type { MarkOptional } from "../utility-types";
+import type { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
 export declare const DefaultSidebar: import("react").FC<Omit<MarkOptional<Omit<{
     name: string;
     children: import("react").ReactNode;

package/dist/excalidraw/components/Dialog.js

@@ -72,5 +72,5 @@ export const Dialog = (props) => {
     };
     return (_jsx(Modal, { className: clsx("Dialog", props.className, {
             "Dialog--fullscreen": isFullscreen,
-        }), labelledBy: "dialog-title", maxWidth: getDialogSize(props.size), onCloseRequest: onClose, closeOnClickOutside: props.closeOnClickOutside, children: _jsxs(Island, { ref: setIslandNode, children: [props.title && (_jsx("h2", { id: `${id}-dialog-title`, className: "Dialog__title", children: _jsx("span", { className: "Dialog__titleContent", children: props.title }) })), isFullscreen && (_jsx("button", { className: "Dialog__close", onClick: onClose, title: t("buttons.close"), "aria-label": t("buttons.close"), children: CloseIcon })), _jsx("div", { className: "Dialog__content", children: props.children })] }) }));
+        }), labelledBy: "dialog-title", maxWidth: getDialogSize(props.size), onCloseRequest: onClose, closeOnClickOutside: props.closeOnClickOutside, children: _jsxs(Island, { ref: setIslandNode, children: [props.title && (_jsx("h2", { id: `${id}-dialog-title`, className: "Dialog__title", children: _jsx("span", { className: "Dialog__titleContent", children: props.title }) })), isFullscreen && (_jsx("button", { className: "Dialog__close", onClick: onClose, title: t("buttons.close"), "aria-label": t("buttons.close"), type: "button", children: CloseIcon })), _jsx("div", { className: "Dialog__content", children: props.children })] }) }));
 };

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import "./DialogActionButton.scss";
 interface DialogActionButtonProps {
     label: string;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "./EyeDropper.scss";
-import { ColorPickerType } from "./ColorPicker/colorPickerUtils";
-import { ExcalidrawElement } from "../element/types";
+import type { ColorPickerType } from "./ColorPicker/colorPickerUtils";
+import type { ExcalidrawElement } from "../element/types";
 export type EyeDropperProperties = {
     keepOpenOnAlt: boolean;
     swapPreviewOnAlt?: boolean;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UserToFollow } from "../../types";
+import type { UserToFollow } from "../../types";
 import "./FollowMode.scss";
 interface FollowModeProps {
     width: number;

package/dist/excalidraw/components/FollowMode/FollowMode.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CloseIcon } from "../icons";
 import "./FollowMode.scss";
 const FollowMode = ({ height, width, userToFollow, onDisconnect, }) => {
-    return (_jsx("div", { className: "follow-mode", style: { width, height }, children: _jsxs("div", { className: "follow-mode__badge", children: [_jsxs("div", { className: "follow-mode__badge__label", children: ["Following", " ", _jsx("span", { className: "follow-mode__badge__username", title: userToFollow.username, children: userToFollow.username })] }), _jsx("button", { onClick: onDisconnect, className: "follow-mode__disconnect-btn", children: CloseIcon })] }) }));
+    return (_jsx("div", { className: "follow-mode", style: { width, height }, children: _jsxs("div", { className: "follow-mode__badge", children: [_jsxs("div", { className: "follow-mode__badge__label", children: ["Following", " ", _jsx("span", { className: "follow-mode__badge__username", title: userToFollow.username, children: userToFollow.username })] }), _jsx("button", { type: "button", onClick: onDisconnect, className: "follow-mode__disconnect-btn", children: CloseIcon })] }) }));
 };
 export default FollowMode;

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);