@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

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

@@ -1,10 +1,9 @@
 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 { useAtom } from "../../editor-jotai";
 import { KEYS } from "../../keys";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import clsx from "clsx";
@@ -33,7 +32,7 @@ export const ColorInput = ({ color, onChange, label, colorPickerType, }) => {
             inputRef.current.focus();
         }
     }, [activeSection]);
-    const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom, jotaiScope);
+    const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
     useEffect(() => {
         return () => {
             setEyeDropperState(null);

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

@@ -4,7 +4,6 @@ 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 { useExcalidrawContainer } from "../App";
 import { COLOR_PALETTE } from "../../colors";
@@ -12,7 +11,7 @@ import PickerHeading from "./PickerHeading";
 import { t } from "../../i18n";
 import clsx from "clsx";
 import { useRef } from "react";
-import { jotaiScope } from "../../jotai";
+import { useAtom } from "../../editor-jotai";
 import { ColorInput } from "./ColorInput";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import { PropertiesPopover } from "../PropertiesPopover";
@@ -38,7 +37,7 @@ export const getColor = (color) => {
 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 [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
     const colorInputJSX = (_jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.hexCode") }), _jsx(ColorInput, { color: color, label: label, onChange: (color) => {
                     onChange(color);
                 }, colorPickerType: type })] }));

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useAtom } from "jotai";
+import { useAtom } from "../../editor-jotai";
 import { useEffect, useRef } from "react";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import HotkeyLabel from "./HotkeyLabel";

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

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { t } from "../../i18n";
 import { ShadeList } from "./ShadeList";
 import PickerColorList from "./PickerColorList";
-import { useAtom } from "jotai";
+import { useAtom } from "../../editor-jotai";
 import { CustomColorList } from "./CustomColorList";
 import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
 import PickerHeading from "./PickerHeading";

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useAtom } from "jotai";
+import { useAtom } from "../../editor-jotai";
 import { useEffect, useRef } from "react";
 import { activeColorPickerSectionAtom, colorPickerHotkeyBindings, getColorNameAndShadeFromColor, } from "./colorPickerUtils";
 import HotkeyLabel from "./HotkeyLabel";

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useAtom } from "jotai";
+import { useAtom } from "../../editor-jotai";
 import { useEffect, useRef } from "react";
 import { activeColorPickerSectionAtom, getColorNameAndShadeFromColor, } from "./colorPickerUtils";
 import HotkeyLabel from "./HotkeyLabel";

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

@@ -14,7 +14,7 @@ export declare const isCustomColor: ({ color, palette, }: {
 }) => boolean;
 export declare const getMostUsedCustomColors: (elements: readonly ExcalidrawElement[], type: "elementBackground" | "elementStroke", palette: ColorPaletteCustom) => string[];
 export type ActiveColorPickerSectionAtomType = "custom" | "baseColors" | "shades" | "hex" | null;
-export declare const activeColorPickerSectionAtom: import("jotai").PrimitiveAtom<ActiveColorPickerSectionAtomType> & {
+export declare const activeColorPickerSectionAtom: import("jotai/vanilla/atom").PrimitiveAtom<ActiveColorPickerSectionAtomType> & {
     init: ActiveColorPickerSectionAtomType;
 };
 export declare const getContrastYIQ: (bgHex: string, isCustomColor: boolean) => "white" | "black";

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 { atom } from "../../editor-jotai";
 export const getColorNameAndShadeFromColor = ({ palette, color, }) => {
     for (const [colorName, colorVal] of Object.entries(palette)) {
         if (Array.isArray(colorVal)) {

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

@@ -13,14 +13,13 @@ import { LockedIcon, UnlockedIcon, clockIcon, searchIcon, boltIcon, bucketFillIc
 import fuzzy from "fuzzy";
 import { useUIAppState } from "../../context/ui-appState";
 import { capitalizeString, getShortcutKey, isWritableElement, } from "../../utils";
-import { atom, useAtom } from "jotai";
+import { atom, useAtom, editorJotaiStore } from "../../editor-jotai";
 import { deburr } from "../../deburr";
 import { InlineIcon } from "../InlineIcon";
 import { SHAPES } from "../../shapes";
 import { canChangeBackgroundColor, canChangeStrokeColor } from "../Actions";
 import { useStableCallback } from "../../hooks/useStableCallback";
 import { actionClearCanvas, actionLink, actionToggleSearchMenu, } from "../../actions";
-import { jotaiStore } from "../../jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import * as defaultItems from "./defaultCommandPaletteItems";
 import { trackEvent } from "../../analytics";
@@ -163,6 +162,7 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
                 actionManager.actions.cut,
                 actionManager.actions.copy,
                 actionManager.actions.deleteSelectedElements,
+                actionManager.actions.wrapSelectionInFrame,
                 actionManager.actions.copyStyles,
                 actionManager.actions.pasteStyles,
                 actionManager.actions.bringToFront,
@@ -234,7 +234,7 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
                     keywords: ["delete", "destroy"],
                     viewMode: false,
                     perform: () => {
-                        jotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
+                        editorJotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
                     },
                 },
                 {

package/dist/excalidraw/components/ConfirmDialog.js

@@ -1,26 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
 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";
+import { useSetAtom } from "../editor-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 setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
     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();
+                            // flush any pending updates synchronously,
+                            // otherwise it could lead to crash in some chromium versions (131.0.6778.86),
+                            // when `.focus` is invoked with container in some intermediate state
+                            // (container seems mounted in DOM, but focus still causes a crash)
+                            flushSync(() => {
+                                onCancel();
+                            });
                             container?.focus();
                         } }), _jsx(DialogActionButton, { label: confirmText, onClick: () => {
                             setAppState({ openMenu: null });
                             setIsLibraryMenuOpen(false);
-                            onConfirm();
+                            // flush any pending updates synchronously,
+                            // otherwise it leads to crash in some chromium versions (131.0.6778.86),
+                            // when `.focus` is invoked with container in some intermediate state
+                            // (container seems mounted in DOM, but focus still causes a crash)
+                            flushSync(() => {
+                                onConfirm();
+                            });
                             container?.focus();
                         }, actionType: "danger" })] })] }));
 };

package/dist/excalidraw/components/Dialog.js

@@ -8,9 +8,8 @@ import "./Dialog.scss";
 import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { queryFocusableElements } from "../utils";
-import { useSetAtom } from "jotai";
 import { isLibraryMenuOpenAtom } from "./LibraryMenu";
-import { jotaiScope } from "../jotai";
+import { useSetAtom } from "../editor-jotai";
 import { t } from "../i18n";
 import { CloseIcon } from "./icons";
 function getDialogSize(size) {
@@ -63,7 +62,7 @@ export const Dialog = (props) => {
         return () => islandNode.removeEventListener("keydown", handleKeyDown);
     }, [islandNode, props.autofocus]);
     const setAppState = useExcalidrawSetAppState();
-    const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
+    const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
     const onClose = () => {
         setAppState({ openMenu: null });
         setIsLibraryMenuOpen(false);

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

@@ -14,7 +14,7 @@ export type EyeDropperProperties = {
      **/
     colorPickerType: ColorPickerType;
 };
-export declare const activeEyeDropperAtom: import("jotai").PrimitiveAtom<EyeDropperProperties | null> & {
+export declare const activeEyeDropperAtom: import("jotai/vanilla/atom").PrimitiveAtom<EyeDropperProperties | null> & {
     init: EyeDropperProperties | null;
 };
 export declare const EyeDropper: React.FC<{

package/dist/excalidraw/components/EyeDropper.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { atom } from "jotai";
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { rgbToHex } from "../colors";
@@ -12,6 +11,7 @@ import { getSelectedElements } from "../scene";
 import { useApp, useExcalidrawContainer, useExcalidrawElements } from "./App";
 import { useStable } from "../hooks/useStable";
 import "./EyeDropper.scss";
+import { atom } from "../editor-jotai";
 export const activeEyeDropperAtom = atom(null);
 export const EyeDropper = ({ onCancel, onChange, onSelect, colorPickerType }) => {
     const eyeDropperContainer = useCreatePortalContainer({

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./IconPicker.scss";
-export declare function IconPicker<T>({ value, label, options, onChange, group, }: {
+export declare function IconPicker<T>({ value, label, options, onChange, group, numberOfOptionsToAlwaysShow, }: {
     label: string;
     value: T;
     options: readonly {
@@ -8,8 +8,8 @@ export declare function IconPicker<T>({ value, label, options, onChange, group,
         text: string;
         icon: JSX.Element;
         keyBinding: string | null;
-        showInPicker?: boolean;
     }[];
     onChange: (value: T) => void;
+    numberOfOptionsToAlwaysShow?: number;
     group?: string;
 }): JSX.Element;

package/dist/excalidraw/components/IconPicker.js

@@ -1,66 +1,59 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from "react";
-import { Popover } from "./Popover";
-import "./IconPicker.scss";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import * as Popover from "@radix-ui/react-popover";
 import { isArrowKey, KEYS } from "../keys";
-import { getLanguage } from "../i18n";
+import { getLanguage, t } from "../i18n";
 import clsx from "clsx";
-function Picker({ options, value, label, onChange, onClose, }) {
-    const rFirstItem = React.useRef();
-    const rActiveItem = React.useRef();
-    const rGallery = React.useRef(null);
-    React.useEffect(() => {
-        // After the component is first mounted focus on first input
-        if (rActiveItem.current) {
-            rActiveItem.current.focus();
-        }
-        else if (rGallery.current) {
-            rGallery.current.focus();
-        }
-    }, []);
+import Collapsible from "./Stats/Collapsible";
+import { atom, useAtom } from "../editor-jotai";
+import { useDevice } from "./App";
+import "./IconPicker.scss";
+const moreOptionsAtom = atom(false);
+function Picker({ options, value, label, onChange, onClose, numberOfOptionsToAlwaysShow = options.length, }) {
+    const device = useDevice();
     const handleKeyDown = (event) => {
         const pressedOption = options.find((option) => option.keyBinding === event.key.toLowerCase());
         if (!(event.metaKey || event.altKey || event.ctrlKey) && pressedOption) {
             // Keybinding navigation
-            const index = options.indexOf(pressedOption);
-            rGallery.current.children[index].focus();
+            onChange(pressedOption.value);
             event.preventDefault();
         }
         else if (event.key === KEYS.TAB) {
-            // Tab navigation cycle through options. If the user tabs
-            // away from the picker, close the picker. We need to use
-            // a timeout here to let the stack clear before checking.
-            setTimeout(() => {
-                const active = rActiveItem.current;
-                const docActive = document.activeElement;
-                if (active !== docActive) {
-                    onClose();
-                }
-            }, 0);
+            const index = options.findIndex((option) => option.value === value);
+            const nextIndex = event.shiftKey
+                ? (options.length + index - 1) % options.length
+                : (index + 1) % options.length;
+            onChange(options[nextIndex].value);
         }
         else if (isArrowKey(event.key)) {
             // Arrow navigation
-            const { activeElement } = document;
             const isRTL = getLanguage().rtl;
-            const index = Array.prototype.indexOf.call(rGallery.current.children, activeElement);
+            const index = options.findIndex((option) => option.value === value);
             if (index !== -1) {
                 const length = options.length;
                 let nextIndex = index;
                 switch (event.key) {
                     // Select the next option
                     case isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT:
-                    case KEYS.ARROW_DOWN: {
                         nextIndex = (index + 1) % length;
                         break;
-                    }
                     // Select the previous option
                     case isRTL ? KEYS.ARROW_RIGHT : KEYS.ARROW_LEFT:
-                    case KEYS.ARROW_UP: {
                         nextIndex = (length + index - 1) % length;
                         break;
+                    // Go the next row
+                    case KEYS.ARROW_DOWN: {
+                        nextIndex = (index + (numberOfOptionsToAlwaysShow ?? 1)) % length;
+                        break;
+                    }
+                    // Go the previous row
+                    case KEYS.ARROW_UP: {
+                        nextIndex =
+                            (length + index - (numberOfOptionsToAlwaysShow ?? 1)) % length;
+                        break;
                     }
                 }
-                rGallery.current.children[nextIndex].focus();
+                onChange(options[nextIndex].value);
             }
             event.preventDefault();
         }
@@ -72,28 +65,38 @@ function Picker({ options, value, label, onChange, onClose, }) {
         event.nativeEvent.stopImmediatePropagation();
         event.stopPropagation();
     };
-    return (_jsx("div", { className: `picker`, role: "dialog", "aria-modal": "true", "aria-label": label, onKeyDown: handleKeyDown, children: _jsx("div", { className: "picker-content", ref: rGallery, children: options.map((option, i) => (_jsxs("button", { type: "button", className: clsx("picker-option", {
+    const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom);
+    const alwaysVisibleOptions = React.useMemo(() => options.slice(0, numberOfOptionsToAlwaysShow), [options, numberOfOptionsToAlwaysShow]);
+    const moreOptions = React.useMemo(() => options.slice(numberOfOptionsToAlwaysShow), [options, numberOfOptionsToAlwaysShow]);
+    useEffect(() => {
+        if (!alwaysVisibleOptions.some((option) => option.value === value)) {
+            setShowMoreOptions(true);
+        }
+    }, [value, alwaysVisibleOptions, setShowMoreOptions]);
+    const renderOptions = (options) => {
+        return (_jsx("div", { className: "picker-content", children: options.map((option, i) => (_jsxs("button", { type: "button", className: clsx("picker-option", {
                     active: value === option.value,
                 }), onClick: (event) => {
-                    event.currentTarget.focus();
                     onChange(option.value);
-                }, title: `${option.text} ${option.keyBinding && `— ${option.keyBinding.toUpperCase()}`}`, "aria-label": option.text || "none", "aria-keyshortcuts": option.keyBinding || undefined, ref: (el) => {
-                    if (el && i === 0) {
-                        rFirstItem.current = el;
-                    }
-                    if (el && option.value === value) {
-                        rActiveItem.current = el;
+                }, title: `${option.text} ${option.keyBinding && `— ${option.keyBinding.toUpperCase()}`}`, "aria-label": option.text || "none", "aria-keyshortcuts": option.keyBinding || undefined, ref: (ref) => {
+                    if (value === option.value) {
+                        // Use a timeout here to render focus properly
+                        setTimeout(() => {
+                            ref?.focus();
+                        }, 0);
                     }
-                }, onFocus: () => {
-                    onChange(option.value);
-                }, children: [option.icon, option.keyBinding && (_jsx("span", { className: "picker-keybinding", children: option.keyBinding }))] }, option.text))) }) }));
+                }, children: [option.icon, option.keyBinding && (_jsx("span", { className: "picker-keybinding", children: option.keyBinding }))] }, option.text))) }));
+    };
+    return (_jsx(Popover.Content, { side: device.editor.isMobile && !device.viewport.isLandscape
+            ? "top"
+            : "bottom", align: "start", sideOffset: 12, style: { zIndex: "var(--zIndex-popup)" }, onKeyDown: handleKeyDown, children: _jsxs("div", { className: `picker`, role: "dialog", "aria-modal": "true", "aria-label": label, children: [renderOptions(alwaysVisibleOptions), moreOptions.length > 0 && (_jsx(Collapsible, { label: t("labels.more_options"), open: showMoreOptions, openTrigger: () => {
+                        setShowMoreOptions((value) => !value);
+                    }, className: "picker-collapsible", children: renderOptions(moreOptions) }))] }) }));
 }
-export function IconPicker({ value, label, options, onChange, group = "", }) {
+export function IconPicker({ value, label, options, onChange, group = "", numberOfOptionsToAlwaysShow, }) {
     const [isActive, setActive] = React.useState(false);
     const rPickerButton = React.useRef(null);
-    const isRTL = getLanguage().rtl;
-    return (_jsxs("div", { children: [_jsx("button", { name: group, type: "button", className: isActive ? "active" : "", "aria-label": label, onClick: () => setActive(!isActive), ref: rPickerButton, children: options.find((option) => option.value === value)?.icon }), _jsx(React.Suspense, { fallback: "", children: isActive ? (_jsxs(_Fragment, { children: [_jsx(Popover, { onCloseRequest: (event) => event.target !== rPickerButton.current && setActive(false), ...(isRTL ? { right: 5.5 } : { left: -5.5 }), children: _jsx(Picker, { options: options.filter((opt) => opt.showInPicker !== false), value: value, label: label, onChange: onChange, onClose: () => {
-                                    setActive(false);
-                                    rPickerButton.current?.focus();
-                                } }) }), _jsx("div", { className: "picker-triangle" })] })) : null })] }));
+    return (_jsx("div", { children: _jsxs(Popover.Root, { open: isActive, onOpenChange: (open) => setActive(open), children: [_jsx(Popover.Trigger, { name: group, type: "button", "aria-label": label, onClick: () => setActive(!isActive), ref: rPickerButton, className: isActive ? "active" : "", children: options.find((option) => option.value === value)?.icon }), isActive && (_jsx(Picker, { options: options, value: value, label: label, onChange: onChange, onClose: () => {
+                        setActive(false);
+                    }, numberOfOptionsToAlwaysShow: numberOfOptionsToAlwaysShow }))] }) }));
 }

package/dist/excalidraw/components/LayerUI.js

@@ -26,8 +26,7 @@ import { trackEvent } from "../analytics";
 import { useDevice } from "./App";
 import Footer from "./footer/Footer";
 import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
-import { jotaiScope } from "../jotai";
-import { Provider, useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "../editor-jotai";
 import MainMenu from "./main-menu/MainMenu";
 import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
 import { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
@@ -57,7 +56,8 @@ const DefaultOverwriteConfirmDialog = () => {
 const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopRightUI, renderCustomStats, UIOptions, onExportImage, renderWelcomeScreen, children, app, isCollaborating, generateLinkForSelection, }) => {
     const device = useDevice();
     const tunnels = useInitializeTunnels();
-    const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom, jotaiScope);
+    const TunnelsJotaiProvider = tunnels.tunnelsJotai.Provider;
+    const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
     const renderJSONExportDialog = () => {
         if (!UIOptions.canvasActions.export) {
             return null;
@@ -78,7 +78,7 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
                 // we want to make sure this doesn't overflow so subtracting the
                 // approximate height of hamburgerMenu + footer
                 maxHeight: `${appState.height - 166}px`,
-            }, children: _jsx(SelectedShapeActions, { appState: appState, elementsMap: app.scene.getNonDeletedElementsMap(), renderAction: actionManager.renderAction }) }) }));
+            }, children: _jsx(SelectedShapeActions, { appState: appState, elementsMap: app.scene.getNonDeletedElementsMap(), renderAction: actionManager.renderAction, app: app }) }) }));
     const renderFixedSideContainer = () => {
         const shouldRenderSelectedShapeActions = showSelectedShapeActions(appState, elements);
         const shouldShowStats = appState.stats.open &&
@@ -109,7 +109,7 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
                 trackEvent("sidebar", `toggleDock (${docked ? "dock" : "undock"})`, `(${device.editor.isMobile ? "mobile" : "desktop"})`);
             } }));
     };
-    const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);
+    const isSidebarDocked = useAtomValue(isSidebarDockedAtom);
     const layerUIJSX = (_jsxs(_Fragment, { children: [children, _jsx(DefaultMainMenu, { UIOptions: UIOptions }), _jsx(DefaultSidebar.Trigger, { __fallback: true, icon: LibraryIcon, title: capitalizeString(t("toolBar.library")), onToggle: (open) => {
                     if (open) {
                         trackEvent("sidebar", `${DEFAULT_SIDEBAR.name} (open)`, `button (${device.editor.isMobile ? "mobile" : "desktop"})`);
@@ -166,7 +166,7 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
                                         ...calculateScrollCenter(elements, appState),
                                     }));
                                 }, children: t("buttons.scrollBackToContent") }))] }), renderSidebars()] }))] }));
-    return (_jsx(UIAppStateContext.Provider, { value: appState, children: _jsx(Provider, { scope: tunnels.jotaiScope, children: _jsx(TunnelsContext.Provider, { value: tunnels, children: layerUIJSX }) }) }));
+    return (_jsx(UIAppStateContext.Provider, { value: appState, children: _jsx(TunnelsJotaiProvider, { children: _jsx(TunnelsContext.Provider, { value: tunnels, children: layerUIJSX }) }) }));
 };
 const stripIrrelevantAppStateProps = (appState) => {
     const { suggestedBindings, startBoundElement, cursorButton, scrollX, scrollY, ...ret } = appState;

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

@@ -1,24 +1,10 @@
 import React from "react";
-import type Library from "../data/library";
-import type { LibraryItems, LibraryItem, ExcalidrawProps, UIAppState } from "../types";
 import "./LibraryMenu.scss";
-export declare const isLibraryMenuOpenAtom: import("jotai").PrimitiveAtom<boolean> & {
+export declare const isLibraryMenuOpenAtom: import("jotai/vanilla/atom").PrimitiveAtom<boolean> & {
     init: boolean;
 };
-export declare const LibraryMenuContent: ({ onInsertLibraryItems, pendingElements, onAddToLibrary, setAppState, libraryReturnUrl, library, id, theme, selectedItems, onSelectItems, }: {
-    pendingElements: LibraryItem["elements"];
-    onInsertLibraryItems: (libraryItems: LibraryItems) => void;
-    onAddToLibrary: () => void;
-    setAppState: React.Component<any, UIAppState>["setState"];
-    libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-    library: Library;
-    id: string;
-    theme: UIAppState["theme"];
-    selectedItems: LibraryItem["id"][];
-    onSelectItems: (id: LibraryItem["id"][]) => void;
-}) => JSX.Element;
 /**
  * This component is meant to be rendered inside <Sidebar.Tab/> inside our
  * <DefaultSidebar/> or host apps Sidebar components.
  */
-export declare const LibraryMenu: () => JSX.Element;
+export declare const LibraryMenu: React.MemoExoticComponent<() => JSX.Element>;

package/dist/excalidraw/components/LibraryMenu.js

@@ -1,26 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useMemo, useRef } from "react";
+import { useState, useCallback, useMemo, useEffect, memo, useRef, } from "react";
 import { distributeLibraryItemsOnSquareGrid, libraryItemsAtom, } from "../data/library";
 import { t } from "../i18n";
 import { randomId } from "../random";
 import LibraryMenuItems from "./LibraryMenuItems";
 import { trackEvent } from "../analytics";
-import { atom, useAtom } from "jotai";
-import { jotaiScope } from "../jotai";
+import { atom, useAtom } from "../editor-jotai";
 import Spinner from "./Spinner";
 import { useApp, useAppProps, useExcalidrawElements, useExcalidrawSetAppState, } from "./App";
 import { getSelectedElements } from "../scene";
 import { useUIAppState } from "../context/ui-appState";
 import "./LibraryMenu.scss";
 import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
-import { isShallowEqual } from "../utils";
 import { LIBRARY_DISABLED_TYPES } from "../constants";
+import { isShallowEqual } from "../utils";
 export const isLibraryMenuOpenAtom = atom(false);
 const LibraryMenuWrapper = ({ children }) => {
     return _jsx("div", { className: "layer-ui__library", children: children });
 };
-export const LibraryMenuContent = ({ onInsertLibraryItems, pendingElements, onAddToLibrary, setAppState, libraryReturnUrl, library, id, theme, selectedItems, onSelectItems, }) => {
-    const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+const LibraryMenuContent = memo(({ onInsertLibraryItems, pendingElements, onAddToLibrary, setAppState, libraryReturnUrl, library, id, theme, selectedItems, onSelectItems, }) => {
+    const [libraryItemsData] = useAtom(libraryItemsAtom);
     const _onAddToLibrary = useCallback((elements) => {
         const addToLibrary = async (processedElements, libraryItems) => {
             trackEvent("element", "addToLibrary", "ui");
@@ -54,37 +53,80 @@ export const LibraryMenuContent = ({ onInsertLibraryItems, pendingElements, onAd
     }
     const showBtn = libraryItemsData.libraryItems.length > 0 || pendingElements.length > 0;
     return (_jsxs(LibraryMenuWrapper, { children: [_jsx(LibraryMenuItems, { isLoading: libraryItemsData.status === "loading", libraryItems: libraryItems, onAddToLibrary: _onAddToLibrary, onInsertLibraryItems: onInsertLibraryItems, pendingElements: pendingElements, id: id, libraryReturnUrl: libraryReturnUrl, theme: theme, onSelectItems: onSelectItems, selectedItems: selectedItems }), showBtn && (_jsx(LibraryMenuControlButtons, { className: "library-menu-control-buttons--at-bottom", style: { padding: "16px 12px 0 12px" }, id: id, libraryReturnUrl: libraryReturnUrl, theme: theme }))] }));
-};
-const usePendingElementsMemo = (appState, elements) => {
-    const create = () => getSelectedElements(elements, appState, {
+});
+const getPendingElements = (elements, selectedElementIds) => ({
+    elements,
+    pending: getSelectedElements(elements, { selectedElementIds }, {
         includeBoundTextElement: true,
         includeElementsInFrames: true,
-    });
-    const val = useRef(create());
-    const prevAppState = useRef(appState);
-    const prevElements = useRef(elements);
-    if (!isShallowEqual(appState.selectedElementIds, prevAppState.current.selectedElementIds) ||
-        !isShallowEqual(elements, prevElements.current)) {
-        val.current = create();
-        prevAppState.current = appState;
-        prevElements.current = elements;
-    }
-    return val.current;
+    }),
+    selectedElementIds,
+});
+const usePendingElementsMemo = (appState, app) => {
+    const elements = useExcalidrawElements();
+    const [state, setState] = useState(() => getPendingElements(elements, appState.selectedElementIds));
+    const selectedElementVersions = useRef(new Map());
+    useEffect(() => {
+        for (const element of state.pending) {
+            selectedElementVersions.current.set(element.id, element.version);
+        }
+    }, [state.pending]);
+    useEffect(() => {
+        if (
+        // Only update once pointer is released.
+        // Reading directly from app.state to make it clear it's not reactive
+        // (hence, there's potential for stale state)
+        app.state.cursorButton === "up" &&
+            app.state.activeTool.type === "selection") {
+            setState((prev) => {
+                // if selectedElementIds changed, we don't have to compare versions
+                // ---------------------------------------------------------------------
+                if (!isShallowEqual(prev.selectedElementIds, appState.selectedElementIds)) {
+                    selectedElementVersions.current.clear();
+                    return getPendingElements(elements, appState.selectedElementIds);
+                }
+                // otherwise we need to check whether selected elements changed
+                // ---------------------------------------------------------------------
+                const elementsMap = app.scene.getNonDeletedElementsMap();
+                for (const id of Object.keys(appState.selectedElementIds)) {
+                    const currVersion = elementsMap.get(id)?.version;
+                    if (currVersion &&
+                        currVersion !== selectedElementVersions.current.get(id)) {
+                        // we can't update the selectedElementVersions in here
+                        // because of double render in StrictMode which would overwrite
+                        // the state in the second pass with the old `prev` state.
+                        // Thus, we update versions in a separate effect. May create
+                        // a race condition since current effect is not fully reactive.
+                        return getPendingElements(elements, appState.selectedElementIds);
+                    }
+                }
+                // nothing changed
+                // ---------------------------------------------------------------------
+                return prev;
+            });
+        }
+    }, [
+        app,
+        app.state.cursorButton,
+        app.state.activeTool.type,
+        appState.selectedElementIds,
+        elements,
+    ]);
+    return state.pending;
 };
 /**
  * This component is meant to be rendered inside <Sidebar.Tab/> inside our
  * <DefaultSidebar/> or host apps Sidebar components.
  */
-export const LibraryMenu = () => {
-    const { library, id, onInsertElements } = useApp();
+export const LibraryMenu = memo(() => {
+    const app = useApp();
+    const { onInsertElements } = app;
     const appProps = useAppProps();
     const appState = useUIAppState();
     const setAppState = useExcalidrawSetAppState();
-    const elements = useExcalidrawElements();
     const [selectedItems, setSelectedItems] = useState([]);
-    const memoizedLibrary = useMemo(() => library, [library]);
-    // BUG: pendingElements are still causing some unnecessary rerenders because clicking into canvas returns some ids even when no element is selected.
-    const pendingElements = usePendingElementsMemo(appState, elements);
+    const memoizedLibrary = useMemo(() => app.library, [app.library]);
+    const pendingElements = usePendingElementsMemo(appState, app);
     const onInsertLibraryItems = useCallback((libraryItems) => {
         onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
     }, [onInsertElements]);
@@ -95,5 +137,5 @@ export const LibraryMenu = () => {
             activeEmbeddable: null,
         });
     }, [setAppState]);
-    return (_jsx(LibraryMenuContent, { pendingElements: pendingElements, onInsertLibraryItems: onInsertLibraryItems, onAddToLibrary: deselectItems, setAppState: setAppState, libraryReturnUrl: appProps.libraryReturnUrl, library: memoizedLibrary, id: id, theme: appState.theme, selectedItems: selectedItems, onSelectItems: setSelectedItems }));
-};
+    return (_jsx(LibraryMenuContent, { pendingElements: pendingElements, onInsertLibraryItems: onInsertLibraryItems, onAddToLibrary: deselectItems, setAppState: setAppState, libraryReturnUrl: appProps.libraryReturnUrl, library: memoizedLibrary, id: app.id, theme: appState.theme, selectedItems: selectedItems, onSelectItems: setSelectedItems }));
+});