@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

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

@@ -0,0 +1,83 @@
+import { atom } from "jotai";
+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)) {
+            const shade = colorVal.indexOf(color);
+            if (shade > -1) {
+                return { colorName: colorName, shade };
+            }
+        }
+        else if (colorVal === color) {
+            return { colorName: colorName, shade: null };
+        }
+    }
+    return null;
+};
+export const colorPickerHotkeyBindings = [
+    ["q", "w", "e", "r", "t"],
+    ["a", "s", "d", "f", "g"],
+    ["z", "x", "c", "v", "b"],
+].flat();
+export const isCustomColor = ({ color, palette, }) => {
+    const paletteValues = Object.values(palette).flat();
+    return !paletteValues.includes(color);
+};
+export const getMostUsedCustomColors = (elements, type, palette) => {
+    const elementColorTypeMap = {
+        elementBackground: "backgroundColor",
+        elementStroke: "strokeColor",
+    };
+    const colors = elements.filter((element) => {
+        if (element.isDeleted) {
+            return false;
+        }
+        const color = element[elementColorTypeMap[type]];
+        return isCustomColor({ color, palette });
+    });
+    const colorCountMap = new Map();
+    colors.forEach((element) => {
+        const color = element[elementColorTypeMap[type]];
+        if (colorCountMap.has(color)) {
+            colorCountMap.set(color, colorCountMap.get(color) + 1);
+        }
+        else {
+            colorCountMap.set(color, 1);
+        }
+    });
+    return [...colorCountMap.entries()]
+        .sort((a, b) => b[1] - a[1])
+        .map((c) => c[0])
+        .slice(0, MAX_CUSTOM_COLORS_USED_IN_CANVAS);
+};
+export const activeColorPickerSectionAtom = atom(null);
+const calculateContrast = (r, g, b) => {
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 160 ? "black" : "white";
+};
+// inspiration from https://stackoverflow.com/a/11868398
+export const getContrastYIQ = (bgHex, isCustomColor) => {
+    if (isCustomColor) {
+        const style = new Option().style;
+        style.color = bgHex;
+        if (style.color) {
+            const rgb = style.color
+                .replace(/^(rgb|rgba)\(/, "")
+                .replace(/\)$/, "")
+                .replace(/\s/g, "")
+                .split(",");
+            const r = parseInt(rgb[0]);
+            const g = parseInt(rgb[1]);
+            const b = parseInt(rgb[2]);
+            return calculateContrast(r, g, b);
+        }
+    }
+    // TODO: ? is this wanted?
+    if (bgHex === "transparent") {
+        return "black";
+    }
+    const r = parseInt(bgHex.substring(1, 3), 16);
+    const g = parseInt(bgHex.substring(3, 5), 16);
+    const b = parseInt(bgHex.substring(5, 7), 16);
+    return calculateContrast(r, g, b);
+};

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

@@ -0,0 +1,174 @@
+import { KEYS } from "../../keys";
+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);
+    currentIndex = currentIndex ?? -1;
+    switch (eventKey) {
+        case "ArrowLeft": {
+            const prevIndex = currentIndex - 1;
+            return prevIndex < 0 ? length - 1 : prevIndex;
+        }
+        case "ArrowRight": {
+            return (currentIndex + 1) % length;
+        }
+        case "ArrowDown": {
+            const nextIndex = currentIndex + COLORS_PER_ROW;
+            return nextIndex >= length ? currentIndex % COLORS_PER_ROW : nextIndex;
+        }
+        case "ArrowUp": {
+            const prevIndex = currentIndex - COLORS_PER_ROW;
+            const newIndex = prevIndex < 0 ? COLORS_PER_ROW * rows + prevIndex : prevIndex;
+            return newIndex >= length ? undefined : newIndex;
+        }
+    }
+};
+/**
+ * @returns true if the event was handled
+ */
+const hotkeyHandler = ({ e, colorObj, onChange, palette, customColors, setActiveColorPickerSection, activeShade, }) => {
+    if (colorObj?.shade != null) {
+        // shift + numpad is extremely messed up on windows apparently
+        if (["Digit1", "Digit2", "Digit3", "Digit4", "Digit5"].includes(e.code) &&
+            e.shiftKey) {
+            const newShade = Number(e.code.slice(-1)) - 1;
+            onChange(palette[colorObj.colorName][newShade]);
+            setActiveColorPickerSection("shades");
+            return true;
+        }
+    }
+    if (["1", "2", "3", "4", "5"].includes(e.key)) {
+        const c = customColors[Number(e.key) - 1];
+        if (c) {
+            onChange(customColors[Number(e.key) - 1]);
+            setActiveColorPickerSection("custom");
+            return true;
+        }
+    }
+    if (colorPickerHotkeyBindings.includes(e.key)) {
+        const index = colorPickerHotkeyBindings.indexOf(e.key);
+        const paletteKey = Object.keys(palette)[index];
+        const paletteValue = palette[paletteKey];
+        const r = Array.isArray(paletteValue)
+            ? paletteValue[activeShade]
+            : paletteValue;
+        onChange(r);
+        setActiveColorPickerSection("baseColors");
+        return true;
+    }
+    return false;
+};
+/**
+ * @returns true if the event was handled
+ */
+export const colorPickerKeyNavHandler = ({ event, activeColorPickerSection, palette, color, onChange, customColors, setActiveColorPickerSection, updateData, activeShade, onEyeDropperToggle, onEscape, }) => {
+    if (event[KEYS.CTRL_OR_CMD]) {
+        return false;
+    }
+    if (event.key === KEYS.ESCAPE) {
+        onEscape(event);
+        return true;
+    }
+    // checkt using `key` to ignore combos with Alt modifier
+    if (event.key === KEYS.ALT) {
+        onEyeDropperToggle(true);
+        return true;
+    }
+    if (event.key === KEYS.I) {
+        onEyeDropperToggle();
+        return true;
+    }
+    const colorObj = getColorNameAndShadeFromColor({ color, palette });
+    if (event.key === KEYS.TAB) {
+        const sectionsMap = {
+            custom: !!customColors.length,
+            baseColors: true,
+            shades: colorObj?.shade != null,
+            hex: true,
+        };
+        const sections = Object.entries(sectionsMap).reduce((acc, [key, value]) => {
+            if (value) {
+                acc.push(key);
+            }
+            return acc;
+        }, []);
+        const activeSectionIndex = sections.indexOf(activeColorPickerSection);
+        const indexOffset = event.shiftKey ? -1 : 1;
+        const nextSectionIndex = activeSectionIndex + indexOffset > sections.length - 1
+            ? 0
+            : activeSectionIndex + indexOffset < 0
+                ? sections.length - 1
+                : activeSectionIndex + indexOffset;
+        const nextSection = sections[nextSectionIndex];
+        if (nextSection) {
+            setActiveColorPickerSection(nextSection);
+        }
+        if (nextSection === "custom") {
+            onChange(customColors[0]);
+        }
+        else if (nextSection === "baseColors") {
+            const baseColorName = Object.entries(palette).find(([name, shades]) => {
+                if (Array.isArray(shades)) {
+                    return shades.includes(color);
+                }
+                else if (shades === color) {
+                    return name;
+                }
+                return null;
+            });
+            if (!baseColorName) {
+                onChange(COLOR_PALETTE.black);
+            }
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+    }
+    if (hotkeyHandler({
+        e: event,
+        colorObj,
+        onChange,
+        palette,
+        customColors,
+        setActiveColorPickerSection,
+        activeShade,
+    })) {
+        return true;
+    }
+    if (activeColorPickerSection === "shades") {
+        if (colorObj) {
+            const { shade } = colorObj;
+            const newShade = arrowHandler(event.key, shade, COLORS_PER_ROW);
+            if (newShade !== undefined) {
+                onChange(palette[colorObj.colorName][newShade]);
+                return true;
+            }
+        }
+    }
+    if (activeColorPickerSection === "baseColors") {
+        if (colorObj) {
+            const { colorName } = colorObj;
+            const colorNames = Object.keys(palette);
+            const indexOfColorName = colorNames.indexOf(colorName);
+            const newColorIndex = arrowHandler(event.key, indexOfColorName, colorNames.length);
+            if (newColorIndex !== undefined) {
+                const newColorName = colorNames[newColorIndex];
+                const newColorNameValue = palette[newColorName];
+                onChange(Array.isArray(newColorNameValue)
+                    ? newColorNameValue[activeShade]
+                    : newColorNameValue);
+                return true;
+            }
+        }
+    }
+    if (activeColorPickerSection === "custom") {
+        const indexOfColor = customColors.indexOf(color);
+        const newColorIndex = arrowHandler(event.key, indexOfColor, customColors.length);
+        if (newColorIndex !== undefined) {
+            const newColor = customColors[newColorIndex];
+            onChange(newColor);
+            return true;
+        }
+    }
+    return false;
+};

package/dist/packages/excalidraw/components/ConfirmDialog.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from "../i18n";
+import { Dialog } from "./Dialog";
+import "./ConfirmDialog.scss";
+import DialogActionButton from "./DialogActionButton";
+import { useSetAtom } from "jotai";
+import { isLibraryMenuOpenAtom } from "./LibraryMenu";
+import { useExcalidrawContainer, useExcalidrawSetAppState } from "./App";
+import { jotaiScope } from "../jotai";
+const ConfirmDialog = (props) => {
+    const { onConfirm, onCancel, children, confirmText = t("buttons.confirm"), cancelText = t("buttons.cancel"), className = "", ...rest } = props;
+    const setAppState = useExcalidrawSetAppState();
+    const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
+    const { container } = useExcalidrawContainer();
+    return (_jsxs(Dialog, { onCloseRequest: onCancel, size: "small", ...rest, className: `confirm-dialog ${className}`, children: [children, _jsxs("div", { className: "confirm-dialog-buttons", children: [_jsx(DialogActionButton, { label: cancelText, onClick: () => {
+                            setAppState({ openMenu: null });
+                            setIsLibraryMenuOpen(false);
+                            onCancel();
+                            container?.focus();
+                        } }), _jsx(DialogActionButton, { label: confirmText, onClick: () => {
+                            setAppState({ openMenu: null });
+                            setIsLibraryMenuOpen(false);
+                            onConfirm();
+                            container?.focus();
+                        }, actionType: "danger" })] })] }));
+};
+export default ConfirmDialog;

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

@@ -0,0 +1,11 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .confirm-dialog {
+    &-buttons {
+      display: flex;
+      column-gap: 0.5rem;
+      justify-content: flex-end;
+    }
+  }
+}

package/dist/packages/excalidraw/components/ContextMenu.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Popover } from "./Popover";
+import { t } from "../i18n";
+import "./ContextMenu.scss";
+import { getShortcutFromShortcutName, } from "../actions/shortcuts";
+import { useExcalidrawAppState, useExcalidrawElements } from "./App";
+import React from "react";
+export const CONTEXT_MENU_SEPARATOR = "separator";
+export const ContextMenu = React.memo(({ actionManager, items, top, left, onClose }) => {
+    const appState = useExcalidrawAppState();
+    const elements = useExcalidrawElements();
+    const filteredItems = items.reduce((acc, item) => {
+        if (item &&
+            (item === CONTEXT_MENU_SEPARATOR ||
+                !item.predicate ||
+                item.predicate(elements, appState, actionManager.app.props, actionManager.app))) {
+            acc.push(item);
+        }
+        return acc;
+    }, []);
+    return (_jsx(Popover, { onCloseRequest: () => {
+            onClose();
+        }, top: top, left: left, fitInViewport: true, offsetLeft: appState.offsetLeft, offsetTop: appState.offsetTop, viewportWidth: appState.width, viewportHeight: appState.height, children: _jsx("ul", { className: "context-menu", onContextMenu: (event) => event.preventDefault(), children: filteredItems.map((item, idx) => {
+                if (item === CONTEXT_MENU_SEPARATOR) {
+                    if (!filteredItems[idx - 1] ||
+                        filteredItems[idx - 1] === CONTEXT_MENU_SEPARATOR) {
+                        return null;
+                    }
+                    return _jsx("hr", { className: "context-menu-item-separator" }, idx);
+                }
+                const actionName = item.name;
+                let label = "";
+                if (item.contextItemLabel) {
+                    if (typeof item.contextItemLabel === "function") {
+                        label = t(item.contextItemLabel(elements, appState, actionManager.app));
+                    }
+                    else {
+                        label = t(item.contextItemLabel);
+                    }
+                }
+                return (_jsx("li", { "data-testid": actionName, onClick: () => {
+                        // we need update state before executing the action in case
+                        // the action uses the appState it's being passed (that still
+                        // contains a defined contextMenu) to return the next state.
+                        onClose(() => {
+                            actionManager.executeAction(item, "contextMenu");
+                        });
+                    }, children: _jsxs("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
+                                    ? getShortcutFromShortcutName(actionName)
+                                    : "" })] }) }, idx));
+            }) }) }));
+});

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

@@ -0,0 +1,98 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .context-menu {
+    position: relative;
+    border-radius: 4px;
+    box-shadow: 0 3px 10px transparentize($oc-black, 0.8);
+    padding: 0;
+    list-style: none;
+    user-select: none;
+    margin: -0.25rem 0 0 0.125rem;
+    padding: 0.5rem 0;
+    background-color: var(--popup-secondary-bg-color);
+    border: 1px solid var(--button-gray-3);
+    cursor: default;
+  }
+
+  .context-menu button {
+    color: var(--popup-text-color);
+  }
+
+  .context-menu-item {
+    position: relative;
+    width: 100%;
+    min-width: 9.5rem;
+    margin: 0;
+    padding: 0.25rem 1rem 0.25rem 1.25rem;
+    text-align: start;
+    border-radius: 0;
+    background-color: transparent;
+    border: none;
+    white-space: nowrap;
+    font-family: inherit;
+
+    display: grid;
+    grid-template-columns: 1fr 0.2fr;
+    align-items: center;
+
+    &.checkmark::before {
+      position: absolute;
+      left: 6px;
+      margin-bottom: 1px;
+      content: "\2713";
+    }
+
+    &.dangerous {
+      .context-menu-item__label {
+        color: $oc-red-7;
+      }
+    }
+
+    .context-menu-item__label {
+      justify-self: start;
+      margin-inline-end: 20px;
+    }
+    .context-menu-item__shortcut {
+      justify-self: end;
+      opacity: 0.6;
+      font-family: inherit;
+      font-size: 0.7rem;
+    }
+  }
+
+  .context-menu-item:hover {
+    color: var(--popup-bg-color);
+    background-color: var(--select-highlight-color);
+
+    &.dangerous {
+      .context-menu-item__label {
+        color: var(--popup-bg-color);
+      }
+      background-color: $oc-red-6;
+    }
+  }
+
+  .context-menu-item:focus {
+    z-index: 1;
+  }
+
+  @include isMobile {
+    .context-menu-item {
+      display: block;
+
+      .context-menu-item__label {
+        margin-inline-end: 0;
+      }
+
+      .context-menu-item__shortcut {
+        display: none;
+      }
+    }
+  }
+
+  .context-menu-item-separator {
+    border: none;
+    border-top: 1px solid $oc-gray-5;
+  }
+}

package/dist/packages/excalidraw/components/DarkModeToggle.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./ToolIcon.scss";
+import { t } from "../i18n";
+import { ToolButton } from "./ToolButton";
+import { THEME } from "../constants";
+// We chose to use only explicit toggle and not a third option for system value,
+// but this could be added in the future.
+export const DarkModeToggle = (props) => {
+    const title = props.title ||
+        (props.value === "dark" ? t("buttons.lightMode") : t("buttons.darkMode"));
+    return (_jsx(ToolButton, { type: "icon", icon: props.value === THEME.LIGHT ? ICONS.MOON : ICONS.SUN, title: title, "aria-label": title, onClick: () => props.onChange(props.value === THEME.DARK ? THEME.LIGHT : THEME.DARK), "data-testid": "toggle-dark-mode" }));
+};
+const ICONS = {
+    SUN: (_jsx("svg", { width: "512", height: "512", className: "rtl-mirror", viewBox: "0 0 512 512", children: _jsx("path", { fill: "currentColor", d: "M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z" }) })),
+    MOON: (_jsx("svg", { width: "512", height: "512", className: "rtl-mirror", viewBox: "0 0 512 512", children: _jsx("path", { fill: "currentColor", d: "M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z" }) })),
+};

package/dist/packages/excalidraw/components/DefaultSidebar.js

@@ -0,0 +1,48 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_TAB } from "../constants";
+import { useTunnels } from "../context/tunnels";
+import { useUIAppState } from "../context/ui-appState";
+import { t } from "../i18n";
+import { composeEventHandlers } from "../utils";
+import { useExcalidrawSetAppState } from "./App";
+import { withInternalFallback } from "./hoc/withInternalFallback";
+import { LibraryMenu } from "./LibraryMenu";
+import { Sidebar } from "./Sidebar/Sidebar";
+const DefaultSidebarTrigger = withInternalFallback("DefaultSidebarTrigger", (props) => {
+    const { DefaultSidebarTriggerTunnel } = useTunnels();
+    return (_jsx(DefaultSidebarTriggerTunnel.In, { children: _jsx(Sidebar.Trigger, { ...props, className: "default-sidebar-trigger", name: DEFAULT_SIDEBAR.name }) }));
+});
+DefaultSidebarTrigger.displayName = "DefaultSidebarTrigger";
+const DefaultTabTriggers = ({ children, ...rest }) => {
+    const { DefaultSidebarTabTriggersTunnel } = useTunnels();
+    return (_jsx(DefaultSidebarTabTriggersTunnel.In, { children: _jsx(Sidebar.TabTriggers, { ...rest, children: children }) }));
+};
+DefaultTabTriggers.displayName = "DefaultTabTriggers";
+export const DefaultSidebar = Object.assign(withInternalFallback("DefaultSidebar", ({ children, className, onDock, docked, ...rest }) => {
+    const appState = useUIAppState();
+    const setAppState = useExcalidrawSetAppState();
+    const { DefaultSidebarTabTriggersTunnel } = useTunnels();
+    return (_createElement(Sidebar, { ...rest, name: "default", key: "default", className: clsx("default-sidebar", className), docked: docked ?? appState.defaultSidebarDockedPreference, onDock: 
+        // `onDock=false` disables docking.
+        // if `docked` passed, but no onDock passed, disable manual docking.
+        onDock === false || (!onDock && docked != null)
+            ? undefined
+            : // compose to allow the host app to listen on default behavior
+                composeEventHandlers(onDock, (docked) => {
+                    setAppState({ defaultSidebarDockedPreference: docked });
+                }) },
+        _jsxs(Sidebar.Tabs, { children: [_jsxs(Sidebar.Header, { children: [rest.__fallback && (_jsx("div", { style: {
+                                color: "var(--color-primary)",
+                                fontSize: "1.2em",
+                                fontWeight: "bold",
+                                textOverflow: "ellipsis",
+                                overflow: "hidden",
+                                whiteSpace: "nowrap",
+                                paddingRight: "1em",
+                            }, children: t("toolBar.library") })), _jsx(DefaultSidebarTabTriggersTunnel.Out, {})] }), _jsx(Sidebar.Tab, { tab: LIBRARY_SIDEBAR_TAB, children: _jsx(LibraryMenu, {}) }), children] })));
+}), {
+    Trigger: DefaultSidebarTrigger,
+    TabTriggers: DefaultTabTriggers,
+});

package/dist/packages/excalidraw/components/Dialog.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import { useCallbackRefState } from "../hooks/useCallbackRefState";
+import { t } from "../i18n";
+import { useExcalidrawContainer, useDevice, useExcalidrawSetAppState, } from "./App";
+import { KEYS } from "../keys";
+import "./Dialog.scss";
+import { back, CloseIcon } from "./icons";
+import { Island } from "./Island";
+import { Modal } from "./Modal";
+import { queryFocusableElements } from "../utils";
+import { useSetAtom } from "jotai";
+import { isLibraryMenuOpenAtom } from "./LibraryMenu";
+import { jotaiScope } from "../jotai";
+function getDialogSize(size) {
+    if (size && typeof size === "number") {
+        return size;
+    }
+    switch (size) {
+        case "small":
+            return 550;
+        case "wide":
+            return 1024;
+        case "regular":
+        default:
+            return 800;
+    }
+}
+export const Dialog = (props) => {
+    const [islandNode, setIslandNode] = useCallbackRefState();
+    const [lastActiveElement] = useState(document.activeElement);
+    const { id } = useExcalidrawContainer();
+    const isFullscreen = useDevice().viewport.isMobile;
+    useEffect(() => {
+        if (!islandNode) {
+            return;
+        }
+        const focusableElements = queryFocusableElements(islandNode);
+        if (focusableElements.length > 0 && props.autofocus !== false) {
+            // If there's an element other than close, focus it.
+            (focusableElements[1] || focusableElements[0]).focus();
+        }
+        const handleKeyDown = (event) => {
+            if (event.key === KEYS.TAB) {
+                const focusableElements = queryFocusableElements(islandNode);
+                const { activeElement } = document;
+                const currentIndex = focusableElements.findIndex((element) => element === activeElement);
+                if (currentIndex === 0 && event.shiftKey) {
+                    focusableElements[focusableElements.length - 1].focus();
+                    event.preventDefault();
+                }
+                else if (currentIndex === focusableElements.length - 1 &&
+                    !event.shiftKey) {
+                    focusableElements[0].focus();
+                    event.preventDefault();
+                }
+            }
+        };
+        islandNode.addEventListener("keydown", handleKeyDown);
+        return () => islandNode.removeEventListener("keydown", handleKeyDown);
+    }, [islandNode, props.autofocus]);
+    const setAppState = useExcalidrawSetAppState();
+    const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
+    const onClose = () => {
+        setAppState({ openMenu: null });
+        setIsLibraryMenuOpen(false);
+        lastActiveElement.focus();
+        props.onCloseRequest();
+    };
+    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 }) })), _jsx("button", { className: "Dialog__close", onClick: onClose, title: t("buttons.close"), "aria-label": t("buttons.close"), children: isFullscreen ? back : CloseIcon }), _jsx("div", { className: "Dialog__content", children: props.children })] }) }));
+};

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

@@ -0,0 +1,48 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .Dialog {
+    user-select: text;
+    cursor: auto;
+  }
+
+  .Dialog__title {
+    margin: 0;
+    text-align: left;
+    font-size: 1.25rem;
+    border-bottom: 1px solid var(--dialog-border-color);
+    padding: 0 0 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .Dialog__close {
+    color: var(--color-gray-40);
+    margin: 0;
+    position: absolute;
+    top: 0.75rem;
+    right: 0.5rem;
+    border: 0;
+    background-color: transparent;
+    line-height: 0;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-gray-60);
+    }
+    &:active {
+      color: var(--color-gray-40);
+    }
+
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
+  .Dialog--fullscreen {
+    .Dialog__close {
+      top: 1.25rem;
+      right: 1.25rem;
+    }
+  }
+}

package/dist/packages/excalidraw/components/DialogActionButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import "./DialogActionButton.scss";
+import Spinner from "./Spinner";
+const DialogActionButton = ({ label, onClick, className, children, actionType, type = "button", isLoading, ...rest }) => {
+    const cs = actionType ? `Dialog__action-button--${actionType}` : "";
+    return (_jsxs("button", { className: clsx("Dialog__action-button", cs, className), type: type, "aria-label": label, onClick: onClick, ...rest, children: [children && (_jsx("div", { style: isLoading ? { visibility: "hidden" } : {}, children: children })), _jsx("div", { style: isLoading ? { visibility: "hidden" } : {}, children: label }), isLoading && (_jsx("div", { style: { position: "absolute", inset: 0 }, children: _jsx(Spinner, {}) }))] }));
+};
+export default DialogActionButton;