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

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

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, 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 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";
+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 _onAddToLibrary = useCallback((elements) => {
+        const addToLibrary = async (processedElements, libraryItems) => {
+            trackEvent("element", "addToLibrary", "ui");
+            for (const type of LIBRARY_DISABLED_TYPES) {
+                if (processedElements.some((element) => element.type === type)) {
+                    return setAppState({
+                        errorMessage: t(`errors.libraryElementTypeError.${type}`),
+                    });
+                }
+            }
+            const nextItems = [
+                {
+                    status: "unpublished",
+                    elements: processedElements,
+                    id: randomId(),
+                    created: Date.now(),
+                },
+                ...libraryItems,
+            ];
+            onAddToLibrary();
+            library.setLibrary(nextItems).catch(() => {
+                setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
+            });
+        };
+        addToLibrary(elements, libraryItemsData.libraryItems);
+    }, [onAddToLibrary, library, setAppState, libraryItemsData.libraryItems]);
+    const libraryItems = useMemo(() => libraryItemsData.libraryItems, [libraryItemsData]);
+    if (libraryItemsData.status === "loading" &&
+        !libraryItemsData.isInitialized) {
+        return (_jsx(LibraryMenuWrapper, { children: _jsx("div", { className: "layer-ui__library-message", children: _jsxs("div", { children: [_jsx(Spinner, { size: "2em" }), _jsx("span", { children: t("labels.libraryLoadingMessage") })] }) }) }));
+    }
+    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, {
+        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;
+};
+/**
+ * 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();
+    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 onInsertLibraryItems = useCallback((libraryItems) => {
+        onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
+    }, [onInsertElements]);
+    const deselectItems = useCallback(() => {
+        setAppState({
+            selectedElementIds: {},
+            selectedGroupIds: {},
+            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 }));
+};

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

@@ -0,0 +1,150 @@
+@import "open-color/open-color";
+
+.excalidraw {
+  .layer-ui__library {
+    display: flex;
+    flex-direction: column;
+
+    flex: 1 1 auto;
+  }
+
+  .library-actions-counter {
+    background-color: var(--color-primary);
+    color: var(--color-primary-light);
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    position: absolute;
+    bottom: -0.25rem;
+    right: -0.25rem;
+    font-size: 0.625rem;
+    pointer-events: none;
+  }
+
+  .layer-ui__library-message {
+    padding: 2rem;
+    min-width: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: center;
+
+    span {
+      font-size: 0.8em;
+    }
+  }
+
+  .publish-library-success {
+    .Dialog__content {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &-close.ToolIcon_type_button {
+      background-color: $oc-blue-6;
+      align-self: flex-end;
+      &:hover {
+        background-color: $oc-blue-8;
+      }
+      .ToolIcon__icon {
+        width: auto;
+        font-size: 1rem;
+        color: $oc-white;
+        padding: 0 0.5rem;
+      }
+    }
+  }
+
+  .library-menu-control-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.625rem;
+    position: relative;
+
+    &--at-bottom::before {
+      content: "";
+      width: calc(100% - 1.5rem);
+      height: 1px;
+      position: absolute;
+      top: -1px;
+      background: var(--sidebar-border-color);
+    }
+  }
+
+  .library-menu-browse-button {
+    flex: 1;
+
+    height: var(--lg-button-size);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+
+    border-radius: var(--border-radius-lg);
+    background-color: var(--color-primary);
+    color: $oc-white;
+    text-align: center;
+    white-space: nowrap;
+    text-decoration: none !important;
+
+    font-weight: 600;
+    font-size: 0.75rem;
+
+    &:hover {
+      background-color: var(--color-brand-hover);
+    }
+    &:active {
+      background-color: var(--color-brand-active);
+    }
+  }
+
+  &.theme--dark {
+    .library-menu-browse-button {
+      color: var(--color-gray-100);
+    }
+  }
+
+  &.excalidraw--mobile .library-menu-browse-button {
+    height: var(--default-button-size);
+  }
+
+  .layer-ui__library .dropdown-menu {
+    width: auto;
+    top: initial;
+    right: 0;
+    left: initial;
+    bottom: 100%;
+    margin-bottom: 0.625rem;
+
+    .dropdown-menu-container {
+      width: 196px;
+      box-shadow: var(--library-dropdown-shadow);
+      border-radius: var(--border-radius-lg);
+      padding: 0.25rem 0.5rem;
+    }
+  }
+
+  .layer-ui__library .library-menu-dropdown-container {
+    position: relative;
+
+    &--in-heading {
+      padding: 0;
+      position: absolute;
+      top: 1rem;
+      right: 0.75rem;
+      z-index: 1;
+
+      .dropdown-menu {
+        top: 100%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VERSIONS } from "../constants";
+import { t } from "../i18n";
+const LibraryMenuBrowseButton = ({ theme, id, libraryReturnUrl, }) => {
+    const referrer = libraryReturnUrl || window.location.origin + window.location.pathname;
+    return (_jsx("a", { className: "library-menu-browse-button", href: `${import.meta.env.VITE_APP_LIBRARY_URL}?target=${window.name || "_blank"}&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${VERSIONS.excalidrawLibrary}`, target: "_excalidraw_libraries", children: t("labels.libraries") }));
+};
+export default LibraryMenuBrowseButton;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
+import clsx from "clsx";
+export const LibraryMenuControlButtons = ({ libraryReturnUrl, theme, id, style, children, className, }) => {
+    return (_jsxs("div", { className: clsx("library-menu-control-buttons", className), style: style, children: [_jsx(LibraryMenuBrowseButton, { id: id, libraryReturnUrl: libraryReturnUrl, theme: theme }), children] }));
+};

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { t } from "../i18n";
+import Trans from "./Trans";
+import { jotaiScope } from "../jotai";
+import { useApp, useExcalidrawSetAppState } from "./App";
+import { saveLibraryAsJSON } from "../data/json";
+import { libraryItemsAtom } from "../data/library";
+import { DotsIcon, ExportIcon, LoadIcon, publishIcon, TrashIcon, } from "./icons";
+import { ToolButton } from "./ToolButton";
+import { fileOpen } from "../data/filesystem";
+import { muteFSAbortError } from "../utils";
+import { useAtom } from "jotai";
+import ConfirmDialog from "./ConfirmDialog";
+import PublishLibrary from "./PublishLibrary";
+import { Dialog } from "./Dialog";
+import DropdownMenu from "./dropdownMenu/DropdownMenu";
+import { isLibraryMenuOpenAtom } from "./LibraryMenu";
+import { useUIAppState } from "../context/ui-appState";
+import clsx from "clsx";
+import { useLibraryCache } from "../hooks/useLibraryItemSvg";
+const getSelectedItems = (libraryItems, selectedItems) => libraryItems.filter((item) => selectedItems.includes(item.id));
+export const LibraryDropdownMenuButton = ({ setAppState, selectedItems, library, onRemoveFromLibrary, resetLibrary, onSelectItems, appState, className, }) => {
+    const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+    const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(isLibraryMenuOpenAtom, jotaiScope);
+    const renderRemoveLibAlert = () => {
+        const content = selectedItems.length
+            ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
+            : t("alerts.resetLibrary");
+        const title = selectedItems.length
+            ? t("confirmDialog.removeItemsFromLib")
+            : t("confirmDialog.resetLibrary");
+        return (_jsx(ConfirmDialog, { onConfirm: () => {
+                if (selectedItems.length) {
+                    onRemoveFromLibrary();
+                }
+                else {
+                    resetLibrary();
+                }
+                setShowRemoveLibAlert(false);
+            }, onCancel: () => {
+                setShowRemoveLibAlert(false);
+            }, title: title, children: _jsx("p", { children: content }) }));
+    };
+    const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);
+    const itemsSelected = !!selectedItems.length;
+    const items = itemsSelected
+        ? libraryItemsData.libraryItems.filter((item) => selectedItems.includes(item.id))
+        : libraryItemsData.libraryItems;
+    const resetLabel = itemsSelected
+        ? t("buttons.remove")
+        : t("buttons.resetLibrary");
+    const [showPublishLibraryDialog, setShowPublishLibraryDialog] = useState(false);
+    const [publishLibSuccess, setPublishLibSuccess] = useState(null);
+    const renderPublishSuccess = useCallback(() => {
+        return (_jsxs(Dialog, { onCloseRequest: () => setPublishLibSuccess(null), title: t("publishSuccessDialog.title"), className: "publish-library-success", size: "small", children: [_jsx("p", { children: _jsx(Trans, { i18nKey: "publishSuccessDialog.content", authorName: publishLibSuccess.authorName, link: (el) => (_jsx("a", { href: publishLibSuccess?.url, target: "_blank", rel: "noopener noreferrer", children: el })) }) }), _jsx(ToolButton, { type: "button", title: t("buttons.close"), "aria-label": t("buttons.close"), label: t("buttons.close"), onClick: () => setPublishLibSuccess(null), "data-testid": "publish-library-success-close", className: "publish-library-success-close" })] }));
+    }, [setPublishLibSuccess, publishLibSuccess]);
+    const onPublishLibSuccess = (data, libraryItems) => {
+        setShowPublishLibraryDialog(false);
+        setPublishLibSuccess({ url: data.url, authorName: data.authorName });
+        const nextLibItems = libraryItems.slice();
+        nextLibItems.forEach((libItem) => {
+            if (selectedItems.includes(libItem.id)) {
+                libItem.status = "published";
+            }
+        });
+        library.setLibrary(nextLibItems);
+    };
+    const onLibraryImport = async () => {
+        try {
+            await library.updateLibrary({
+                libraryItems: fileOpen({
+                    description: "Excalidraw library files",
+                    // ToDo: Be over-permissive until https://bugs.webkit.org/show_bug.cgi?id=34442
+                    // gets resolved. Else, iOS users cannot open `.excalidraw` files.
+                    /*
+                      extensions: [".json", ".excalidrawlib"],
+                      */
+                }),
+                merge: true,
+                openLibraryMenu: true,
+            });
+        }
+        catch (error) {
+            if (error?.name === "AbortError") {
+                console.warn(error);
+                return;
+            }
+            setAppState({ errorMessage: t("errors.importLibraryError") });
+        }
+    };
+    const onLibraryExport = async () => {
+        const libraryItems = itemsSelected
+            ? items
+            : await library.getLatestLibrary();
+        saveLibraryAsJSON(libraryItems)
+            .catch(muteFSAbortError)
+            .catch((error) => {
+            setAppState({ errorMessage: error.message });
+        });
+    };
+    const renderLibraryMenu = () => {
+        return (_jsxs(DropdownMenu, { open: isLibraryMenuOpen, children: [_jsx(DropdownMenu.Trigger, { onToggle: () => setIsLibraryMenuOpen(!isLibraryMenuOpen), children: DotsIcon }), _jsxs(DropdownMenu.Content, { onClickOutside: () => setIsLibraryMenuOpen(false), onSelect: () => setIsLibraryMenuOpen(false), className: "library-menu", children: [!itemsSelected && (_jsx(DropdownMenu.Item, { onSelect: onLibraryImport, icon: LoadIcon, "data-testid": "lib-dropdown--load", children: t("buttons.load") })), !!items.length && (_jsx(DropdownMenu.Item, { onSelect: onLibraryExport, icon: ExportIcon, "data-testid": "lib-dropdown--export", children: t("buttons.export") })), !!items.length && (_jsx(DropdownMenu.Item, { onSelect: () => setShowRemoveLibAlert(true), icon: TrashIcon, children: resetLabel })), itemsSelected && (_jsx(DropdownMenu.Item, { icon: publishIcon, onSelect: () => setShowPublishLibraryDialog(true), "data-testid": "lib-dropdown--remove", children: t("buttons.publishLibrary") }))] })] }));
+    };
+    return (_jsxs("div", { className: clsx("library-menu-dropdown-container", className), children: [renderLibraryMenu(), selectedItems.length > 0 && (_jsx("div", { className: "library-actions-counter", children: selectedItems.length })), showRemoveLibAlert && renderRemoveLibAlert(), showPublishLibraryDialog && (_jsx(PublishLibrary, { onClose: () => setShowPublishLibraryDialog(false), libraryItems: getSelectedItems(libraryItemsData.libraryItems, selectedItems), appState: appState, onSuccess: (data) => onPublishLibSuccess(data, libraryItemsData.libraryItems), onError: (error) => window.alert(error), updateItemsInStorage: () => library.setLibrary(libraryItemsData.libraryItems), onRemove: (id) => onSelectItems(selectedItems.filter((_id) => _id !== id)) })), publishLibSuccess && renderPublishSuccess()] }));
+};
+export const LibraryDropdownMenu = ({ selectedItems, onSelectItems, className, }) => {
+    const { library } = useApp();
+    const { clearLibraryCache, deleteItemsFromLibraryCache } = useLibraryCache();
+    const appState = useUIAppState();
+    const setAppState = useExcalidrawSetAppState();
+    const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+    const removeFromLibrary = async (libraryItems) => {
+        const nextItems = libraryItems.filter((item) => !selectedItems.includes(item.id));
+        library.setLibrary(nextItems).catch(() => {
+            setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
+        });
+        deleteItemsFromLibraryCache(selectedItems);
+        onSelectItems([]);
+    };
+    const resetLibrary = () => {
+        library.resetLibrary();
+        clearLibraryCache();
+    };
+    return (_jsx(LibraryDropdownMenuButton, { appState: appState, setAppState: setAppState, selectedItems: selectedItems, onSelectItems: onSelectItems, library: library, onRemoveFromLibrary: () => removeFromLibrary(libraryItemsData.libraryItems), resetLibrary: resetLibrary, className: className }));
+};

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

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { serializeLibraryAsJSON } from "../data/json";
+import { t } from "../i18n";
+import { arrayToMap } from "../utils";
+import Stack from "./Stack";
+import { MIME_TYPES } from "../constants";
+import Spinner from "./Spinner";
+import { duplicateElements } from "../element/newElement";
+import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
+import { LibraryDropdownMenu } from "./LibraryMenuHeaderContent";
+import { LibraryMenuSection, LibraryMenuSectionGrid, } from "./LibraryMenuSection";
+import { useScrollPosition } from "../hooks/useScrollPosition";
+import { useLibraryCache } from "../hooks/useLibraryItemSvg";
+import "./LibraryMenuItems.scss";
+// using an odd number of items per batch so the rendering creates an irregular
+// pattern which looks more organic
+const ITEMS_RENDERED_PER_BATCH = 17;
+// when render outputs cached we can render many more items per batch to
+// speed it up
+const CACHED_ITEMS_RENDERED_PER_BATCH = 64;
+export default function LibraryMenuItems({ isLoading, libraryItems, onAddToLibrary, onInsertLibraryItems, pendingElements, theme, id, libraryReturnUrl, onSelectItems, selectedItems, }) {
+    const libraryContainerRef = useRef(null);
+    const scrollPosition = useScrollPosition(libraryContainerRef);
+    // This effect has to be called only on first render, therefore  `scrollPosition` isn't in the dependency array
+    useEffect(() => {
+        if (scrollPosition > 0) {
+            libraryContainerRef.current?.scrollTo(0, scrollPosition);
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    const { svgCache } = useLibraryCache();
+    const unpublishedItems = useMemo(() => libraryItems.filter((item) => item.status !== "published"), [libraryItems]);
+    const publishedItems = useMemo(() => libraryItems.filter((item) => item.status === "published"), [libraryItems]);
+    const showBtn = !libraryItems.length && !pendingElements.length;
+    const isLibraryEmpty = !pendingElements.length &&
+        !unpublishedItems.length &&
+        !publishedItems.length;
+    const [lastSelectedItem, setLastSelectedItem] = useState(null);
+    const onItemSelectToggle = useCallback((id, event) => {
+        const shouldSelect = !selectedItems.includes(id);
+        const orderedItems = [...unpublishedItems, ...publishedItems];
+        if (shouldSelect) {
+            if (event.shiftKey && lastSelectedItem) {
+                const rangeStart = orderedItems.findIndex((item) => item.id === lastSelectedItem);
+                const rangeEnd = orderedItems.findIndex((item) => item.id === id);
+                if (rangeStart === -1 || rangeEnd === -1) {
+                    onSelectItems([...selectedItems, id]);
+                    return;
+                }
+                const selectedItemsMap = arrayToMap(selectedItems);
+                const nextSelectedIds = orderedItems.reduce((acc, item, idx) => {
+                    if ((idx >= rangeStart && idx <= rangeEnd) ||
+                        selectedItemsMap.has(item.id)) {
+                        acc.push(item.id);
+                    }
+                    return acc;
+                }, []);
+                onSelectItems(nextSelectedIds);
+            }
+            else {
+                onSelectItems([...selectedItems, id]);
+            }
+            setLastSelectedItem(id);
+        }
+        else {
+            setLastSelectedItem(null);
+            onSelectItems(selectedItems.filter((_id) => _id !== id));
+        }
+    }, [
+        lastSelectedItem,
+        onSelectItems,
+        publishedItems,
+        selectedItems,
+        unpublishedItems,
+    ]);
+    const getInsertedElements = useCallback((id) => {
+        let targetElements;
+        if (selectedItems.includes(id)) {
+            targetElements = libraryItems.filter((item) => selectedItems.includes(item.id));
+        }
+        else {
+            targetElements = libraryItems.filter((item) => item.id === id);
+        }
+        return targetElements.map((item) => {
+            return {
+                ...item,
+                // duplicate each library item before inserting on canvas to confine
+                // ids and bindings to each library item. See #6465
+                elements: duplicateElements(item.elements, { randomizeSeed: true }),
+            };
+        });
+    }, [libraryItems, selectedItems]);
+    const onItemDrag = useCallback((id, event) => {
+        event.dataTransfer.setData(MIME_TYPES.excalidrawlib, serializeLibraryAsJSON(getInsertedElements(id)));
+    }, [getInsertedElements]);
+    const isItemSelected = useCallback((id) => {
+        if (!id) {
+            return false;
+        }
+        return selectedItems.includes(id);
+    }, [selectedItems]);
+    const onAddToLibraryClick = useCallback(() => {
+        onAddToLibrary(pendingElements);
+    }, [pendingElements, onAddToLibrary]);
+    const onItemClick = useCallback((id) => {
+        if (id) {
+            onInsertLibraryItems(getInsertedElements(id));
+        }
+    }, [getInsertedElements, onInsertLibraryItems]);
+    const itemsRenderedPerBatch = svgCache.size >= libraryItems.length
+        ? CACHED_ITEMS_RENDERED_PER_BATCH
+        : ITEMS_RENDERED_PER_BATCH;
+    return (_jsxs("div", { className: "library-menu-items-container", style: pendingElements.length ||
+            unpublishedItems.length ||
+            publishedItems.length
+            ? { justifyContent: "flex-start" }
+            : { borderBottom: 0 }, children: [!isLibraryEmpty && (_jsx(LibraryDropdownMenu, { selectedItems: selectedItems, onSelectItems: onSelectItems, className: "library-menu-dropdown-container--in-heading" })), _jsxs(Stack.Col, { className: "library-menu-items-container__items", align: "start", gap: 1, style: {
+                    flex: publishedItems.length > 0 ? 1 : "0 1 auto",
+                    marginBottom: 0,
+                }, ref: libraryContainerRef, children: [_jsxs(_Fragment, { children: [!isLibraryEmpty && (_jsx("div", { className: "library-menu-items-container__header", children: t("labels.personalLib") })), isLoading && (_jsx("div", { style: {
+                                    position: "absolute",
+                                    top: "var(--container-padding-y)",
+                                    right: "var(--container-padding-x)",
+                                    transform: "translateY(50%)",
+                                }, children: _jsx(Spinner, {}) })), !pendingElements.length && !unpublishedItems.length ? (_jsxs("div", { className: "library-menu-items__no-items", children: [_jsx("div", { className: "library-menu-items__no-items__label", children: t("library.noItems") }), _jsx("div", { className: "library-menu-items__no-items__hint", children: publishedItems.length > 0
+                                            ? t("library.hint_emptyPrivateLibrary")
+                                            : t("library.hint_emptyLibrary") })] })) : (_jsxs(LibraryMenuSectionGrid, { children: [pendingElements.length > 0 && (_jsx(LibraryMenuSection, { itemsRenderedPerBatch: itemsRenderedPerBatch, items: [{ id: null, elements: pendingElements }], onItemSelectToggle: onItemSelectToggle, onItemDrag: onItemDrag, onClick: onAddToLibraryClick, isItemSelected: isItemSelected, svgCache: svgCache })), _jsx(LibraryMenuSection, { itemsRenderedPerBatch: itemsRenderedPerBatch, items: unpublishedItems, onItemSelectToggle: onItemSelectToggle, onItemDrag: onItemDrag, onClick: onItemClick, isItemSelected: isItemSelected, svgCache: svgCache })] }))] }), _jsxs(_Fragment, { children: [(publishedItems.length > 0 ||
+                                pendingElements.length > 0 ||
+                                unpublishedItems.length > 0) && (_jsx("div", { className: "library-menu-items-container__header library-menu-items-container__header--excal", children: t("labels.excalidrawLib") })), publishedItems.length > 0 ? (_jsx(LibraryMenuSectionGrid, { children: _jsx(LibraryMenuSection, { itemsRenderedPerBatch: itemsRenderedPerBatch, items: publishedItems, onItemSelectToggle: onItemSelectToggle, onItemDrag: onItemDrag, onClick: onItemClick, isItemSelected: isItemSelected, svgCache: svgCache }) })) : unpublishedItems.length > 0 ? (_jsx("div", { style: {
+                                    margin: "1rem 0",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    width: "100%",
+                                    fontSize: ".9rem",
+                                }, children: t("library.noItems") })) : null] }), showBtn && (_jsx(LibraryMenuControlButtons, { style: { padding: "16px 0", width: "100%" }, id: id, libraryReturnUrl: libraryReturnUrl, theme: theme, children: _jsx(LibraryDropdownMenu, { selectedItems: selectedItems, onSelectItems: onSelectItems }) }))] })] }));
+}

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

@@ -0,0 +1,99 @@
+@import "open-color/open-color";
+
+.excalidraw {
+  --container-padding-y: 1.5rem;
+  --container-padding-x: 0.75rem;
+
+  .library-menu-items__no-items {
+    text-align: center;
+    color: var(--color-gray-70);
+    line-height: 1.5;
+    font-size: 0.875rem;
+    width: 100%;
+
+    &__label {
+      color: var(--color-primary);
+      font-weight: bold;
+      font-size: 1.125rem;
+      margin-bottom: 0.75rem;
+    }
+  }
+
+  &.theme--dark {
+    .library-menu-items__no-items {
+      color: var(--color-gray-40);
+    }
+  }
+
+  .library-menu-items-container {
+    width: 100%;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    overflow-y: auto;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    margin: 0;
+
+    position: relative;
+
+    & > div {
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+    }
+
+    &__row {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 1rem;
+    }
+
+    &__items {
+      row-gap: 0.5rem;
+      padding: var(--container-padding-y) 0;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 1rem;
+    }
+
+    &__header {
+      color: var(--color-primary);
+      font-size: 1.125rem;
+      font-weight: bold;
+      margin-bottom: 0.75rem;
+      width: 100%;
+      padding-right: 4rem; // due to dropdown button
+      box-sizing: border-box;
+
+      &--excal {
+        margin-top: 2rem;
+      }
+    }
+
+    &__grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-gap: 1rem;
+    }
+
+    .separator {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+      font-size: 0.9rem;
+      margin: 0.6em 0.2em;
+      color: var(--text-primary-color);
+    }
+  }
+
+  .library-menu-items-private-library-container {
+    // so that when you toggle between pending item and no items, there's
+    // no layout shift (this is hardcoded and works only with ENG locale)
+    min-height: 3.75rem;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useState } from "react";
+import { EmptyLibraryUnit, LibraryUnit } from "./LibraryUnit";
+import { useTransition } from "../hooks/useTransition";
+export const LibraryMenuSectionGrid = ({ children, }) => {
+    return _jsx("div", { className: "library-menu-items-container__grid", children: children });
+};
+export const LibraryMenuSection = memo(({ items, onItemSelectToggle, onItemDrag, isItemSelected, onClick, svgCache, itemsRenderedPerBatch, }) => {
+    const [, startTransition] = useTransition();
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        if (index < items.length) {
+            startTransition(() => {
+                setIndex(index + itemsRenderedPerBatch);
+            });
+        }
+    }, [index, items.length, startTransition, itemsRenderedPerBatch]);
+    return (_jsx(_Fragment, { children: items.map((item, i) => {
+            return i < index ? (_jsx(LibraryUnit, { elements: item?.elements, isPending: !item?.id && !!item?.elements, onClick: onClick, svgCache: svgCache, id: item?.id, selected: isItemSelected(item.id), onToggle: onItemSelectToggle, onDrag: onItemDrag }, item?.id ?? i)) : (_jsx(EmptyLibraryUnit, {}, i));
+        }) }));
+});