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

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./Avatar.scss";
+import { useState } from "react";
+import { getNameInitial } from "../clients";
+import clsx from "clsx";
+export const Avatar = ({ color, onClick, name, src, isBeingFollowed, isCurrentUser, }) => {
+    const shortName = getNameInitial(name);
+    const [error, setError] = useState(false);
+    const loadImg = !error && src;
+    const style = loadImg ? undefined : { background: color };
+    return (_jsx("div", { className: clsx("Avatar", {
+            "Avatar--is-followed": isBeingFollowed,
+            "Avatar--is-current-user": isCurrentUser,
+        }), style: style, onClick: onClick, children: loadImg ? (_jsx("img", { className: "Avatar-img", src: src, alt: shortName, referrerPolicy: "no-referrer", onError: () => setError(true) })) : (shortName) }));
+};

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

@@ -0,0 +1,7 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .Avatar {
+    @include avatarStyles;
+  }
+}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Trans from "./Trans";
+const BraveMeasureTextError = () => {
+    return (_jsxs("div", { "data-testid": "brave-measure-text-error", children: [_jsx("p", { children: _jsx(Trans, { i18nKey: "errors.brave_measure_text_error.line1", bold: (el) => _jsx("span", { style: { fontWeight: 600 }, children: el }) }) }), _jsx("p", { children: _jsx(Trans, { i18nKey: "errors.brave_measure_text_error.line2", bold: (el) => _jsx("span", { style: { fontWeight: 600 }, children: el }) }) }), _jsx("p", { children: _jsx(Trans, { i18nKey: "errors.brave_measure_text_error.line3", link: (el) => (_jsx("a", { href: "http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser", children: el })) }) }), _jsx("p", { children: _jsx(Trans, { i18nKey: "errors.brave_measure_text_error.line4", issueLink: (el) => (_jsx("a", { href: "https://github.com/excalidraw/excalidraw/issues/new", children: el })), discordLink: (el) => _jsxs("a", { href: "https://discord.gg/UexuTaE", children: [el, "."] }) }) })] }));
+};
+export default BraveMeasureTextError;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { composeEventHandlers } from "../utils";
+import "./Button.scss";
+/**
+ * A generic button component that follows Excalidraw's design system.
+ * Style can be customised using `className` or `style` prop.
+ * Accepts all props that a regular `button` element accepts.
+ */
+export const Button = ({ type = "button", onSelect, selected, children, className = "", ...rest }) => {
+    return (_jsx("button", { onClick: composeEventHandlers(rest.onClick, (event) => {
+            onSelect();
+        }), type: type, className: clsx("excalidraw-button", className, { selected }), ...rest, children: children }));
+};

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

@@ -0,0 +1,7 @@
+@import "../css/theme";
+
+.excalidraw {
+  .excalidraw-button {
+    @include outlineButtonStyles;
+  }
+}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+export const ButtonIconCycle = ({ options, value, onChange, group, }) => {
+    const current = options.find((op) => op.value === value);
+    const cycle = () => {
+        const index = options.indexOf(current);
+        const next = (index + 1) % options.length;
+        onChange(options[next].value);
+    };
+    return (_jsxs("label", { className: clsx({ active: current.value !== null }), children: [_jsx("input", { type: "button", name: group, onClick: cycle }), current.icon] }, group));
+};

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+// 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))) }));

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+export const ButtonSelect = ({ options, value, onChange, group, }) => (_jsx("div", { className: "buttonList", children: options.map((option) => (_jsxs("label", { className: clsx({ active: value === option.value }), children: [_jsx("input", { type: "radio", name: group, onChange: () => onChange(option.value), checked: value === option.value }), option.text] }, option.text))) }));

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import OpenColor from "open-color";
+import "./Card.scss";
+export const Card = ({ children, color }) => {
+    return (_jsx("div", { className: "Card", style: {
+            ["--card-color"]: color === "primary" ? "var(--color-primary)" : OpenColor[color][7],
+            ["--card-color-darker"]: color === "primary"
+                ? "var(--color-primary-darker)"
+                : OpenColor[color][8],
+            ["--card-color-darkest"]: color === "primary"
+                ? "var(--color-primary-darkest)"
+                : OpenColor[color][9],
+        }, children: children }));
+};

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

@@ -0,0 +1,57 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .Card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    max-width: 290px;
+
+    margin: 1em;
+
+    text-align: center;
+
+    .Card-icon {
+      font-size: 2.6em;
+      display: flex;
+      flex: 0 0 auto;
+      padding: 1.4rem;
+      border-radius: 50%;
+      background: var(--card-color);
+      color: $oc-white;
+
+      svg {
+        width: 2.8rem;
+        height: 2.8rem;
+      }
+    }
+
+    .Card-details {
+      font-size: 0.96em;
+      min-height: 90px;
+      padding: 0 1em;
+      margin-bottom: auto;
+    }
+
+    & .Card-button.ToolIcon_type_button {
+      height: 2.5rem;
+      margin-top: 1em;
+      margin-bottom: 0.3em;
+      background-color: var(--card-color);
+      &:hover {
+        background-color: var(--card-color-darker);
+      }
+      &:active {
+        background-color: var(--card-color-darkest);
+      }
+      .ToolIcon__label {
+        color: $oc-white;
+      }
+
+      .Spinner {
+        --spinner-color: #fff;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { checkIcon } from "./icons";
+import "./CheckboxItem.scss";
+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 })] }));
+};

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

@@ -0,0 +1,91 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .Checkbox {
+    margin: 4px 0.3em;
+    display: flex;
+    align-items: center;
+
+    cursor: pointer;
+    user-select: none;
+
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover:not(.is-checked) .Checkbox-box:not(:focus) {
+      box-shadow: 0 0 0 2px #{$oc-blue-4};
+    }
+
+    &:hover:not(.is-checked) .Checkbox-box:not(:focus) {
+      svg {
+        display: block;
+        opacity: 0.3;
+      }
+    }
+
+    &:active {
+      .Checkbox-box {
+        box-shadow: 0 0 2px 1px inset #{$oc-blue-7} !important;
+      }
+    }
+
+    &:hover {
+      .Checkbox-box {
+        background-color: fade-out($oc-blue-1, 0.8);
+      }
+    }
+
+    &.is-checked {
+      .Checkbox-box {
+        background-color: #{$oc-blue-1};
+        svg {
+          display: block;
+        }
+      }
+      &:hover .Checkbox-box {
+        background-color: #{$oc-blue-2};
+      }
+    }
+
+    .Checkbox-box {
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      flex: 0 0 auto;
+
+      margin: 0 1em;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      box-shadow: 0 0 0 2px #{$oc-blue-7};
+      background-color: transparent;
+      border-radius: 4px;
+
+      color: #{$oc-blue-7};
+
+      border: 0;
+
+      &:focus {
+        box-shadow: 0 0 0 3px #{$oc-blue-7};
+      }
+
+      svg {
+        display: none;
+        width: 16px;
+        height: 16px;
+        stroke-width: 3px;
+      }
+    }
+
+    .Checkbox-label {
+      display: flex;
+      align-items: center;
+    }
+
+    .excalidraw-tooltip-icon {
+      width: 1em;
+      height: 1em;
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getColor } from "./ColorPicker";
+import { useAtom } from "jotai";
+import { activeColorPickerSectionAtom, } from "./colorPickerUtils";
+import { eyeDropperIcon } from "../icons";
+import { jotaiScope } from "../../jotai";
+import { KEYS } from "../../keys";
+import { activeEyeDropperAtom } from "../EyeDropper";
+import clsx from "clsx";
+import { t } from "../../i18n";
+import { useDevice } from "../App";
+import { getShortcutKey } from "../../utils";
+export const ColorInput = ({ color, onChange, label, colorPickerType, }) => {
+    const device = useDevice();
+    const [innerValue, setInnerValue] = useState(color);
+    const [activeSection, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
+    useEffect(() => {
+        setInnerValue(color);
+    }, [color]);
+    const changeColor = useCallback((inputValue) => {
+        const value = inputValue.toLowerCase();
+        const color = getColor(value);
+        if (color) {
+            onChange(color);
+        }
+        setInnerValue(value);
+    }, [onChange]);
+    const inputRef = useRef(null);
+    const eyeDropperTriggerRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [activeSection]);
+    const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom, jotaiScope);
+    useEffect(() => {
+        return () => {
+            setEyeDropperState(null);
+        };
+    }, [setEyeDropperState]);
+    return (_jsxs("div", { className: "color-picker__input-label", children: [_jsx("div", { className: "color-picker__input-hash", children: "#" }), _jsx("input", { ref: activeSection === "hex" ? inputRef : undefined, style: { border: 0, padding: 0 }, spellCheck: false, className: "color-picker-input", "aria-label": label, onChange: (event) => {
+                    changeColor(event.target.value);
+                }, value: (innerValue || "").replace(/^#/, ""), onBlur: () => {
+                    setInnerValue(color);
+                }, tabIndex: -1, onFocus: () => setActiveColorPickerSection("hex"), onKeyDown: (event) => {
+                    if (event.key === KEYS.TAB) {
+                        return;
+                    }
+                    else if (event.key === KEYS.ESCAPE) {
+                        eyeDropperTriggerRef.current?.focus();
+                    }
+                    event.stopPropagation();
+                } }), !device.editor.isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                            width: "1px",
+                            height: "1.25rem",
+                            backgroundColor: "var(--default-border-color)",
+                        } }), _jsx("div", { ref: eyeDropperTriggerRef, className: clsx("excalidraw-eye-dropper-trigger", {
+                            selected: eyeDropperState,
+                        }), onClick: () => setEyeDropperState((s) => s
+                            ? null
+                            : {
+                                keepOpenOnAlt: false,
+                                onSelect: (color) => onChange(color),
+                                colorPickerType,
+                            }), title: `${t("labels.eyeDropper")} — ${KEYS.I.toLocaleUpperCase()} or ${getShortcutKey("Alt")} `, children: eyeDropperIcon })] }))] }));
+};

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

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isInteractive, isTransparent, isWritableElement } from "../../utils";
+import { TopPicks } from "./TopPicks";
+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 { COLOR_PALETTE } from "../../colors";
+import PickerHeading from "./PickerHeading";
+import { t } from "../../i18n";
+import clsx from "clsx";
+import { jotaiScope } from "../../jotai";
+import { ColorInput } from "./ColorInput";
+import { useRef } from "react";
+import { activeEyeDropperAtom } from "../EyeDropper";
+import "./ColorPicker.scss";
+const isValidColor = (color) => {
+    const style = new Option().style;
+    style.color = color;
+    return !!style.color;
+};
+export const getColor = (color) => {
+    if (isTransparent(color)) {
+        return color;
+    }
+    // testing for `#` first fixes a bug on Electron (more specfically, an
+    // Obsidian popout window), where a hex color without `#` is (incorrectly)
+    // considered valid
+    return isValidColor(`#${color}`)
+        ? `#${color}`
+        : isValidColor(color)
+            ? color
+            : null;
+};
+const ColorPickerPopupContent = ({ type, color, onChange, label, elements, palette = COLOR_PALETTE, updateData, }) => {
+    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 })] }));
+    const popoverRef = useRef(null);
+    const focusPickerContent = () => {
+        popoverRef.current
+            ?.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();
+                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();
+                }
+            }, 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();
+                }
+                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)",
+                    } })] }) }));
+};
+const ColorPickerTrigger = ({ label, color, type, }) => {
+    return (_jsx(Popover.Trigger, { type: "button", className: clsx("color-picker__button active-color", {
+            "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) => {
+                        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 }))] })] }) }));
+};