@excalidraw/excalidraw 0.11.0 → 0.12.0-08ce7c7

package/types/appState.d.ts

@@ -1,6 +1,17 @@
 import { AppState, NormalizedZoomValue } from "./types";
 export declare const getDefaultAppState: () => Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>) => {
+    activeTool?: {
+        type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser";
+        lastActiveToolBeforeEraser: import("./types").LastActiveToolBeforeEraser;
+        locked: boolean;
+        customType: null;
+    } | {
+        type: "custom";
+        customType: string;
+        lastActiveToolBeforeEraser: import("./types").LastActiveToolBeforeEraser;
+        locked: boolean;
+    } | undefined;
     scrollX?: number | undefined;
     scrollY?: number | undefined;
     viewBackgroundColor?: string | undefined;
@@ -9,9 +20,8 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     }> | undefined;
     shouldCacheIgnoreZoom?: boolean | undefined;
     theme?: string | undefined;
-    name?: string | undefined;
-    elementType?: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | undefined;
-    elementLocked?: boolean | undefined;
+    penMode?: boolean | undefined;
+    penDetected?: boolean | undefined;
     exportBackground?: boolean | undefined;
     exportEmbedScene?: boolean | undefined;
     exportWithDarkMode?: boolean | undefined;
@@ -32,6 +42,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     currentItemLinearStrokeSharpness?: import("./element/types").StrokeSharpness | undefined;
     cursorButton?: "up" | "down" | undefined;
     scrolledOutside?: boolean | undefined;
+    name?: string | undefined;
     openMenu?: "canvas" | "shape" | null | undefined;
     lastPointerDownWith?: import("./element/types").PointerType | undefined;
     selectedElementIds?: {
@@ -46,8 +57,11 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
         [groupId: string]: boolean;
     } | undefined;
     editingGroupId?: string | null | undefined;
+    isLibraryOpen?: boolean | undefined;
+    isLibraryMenuDocked?: boolean | undefined;
     showStats?: boolean | undefined;
     currentChartType?: import("./element/types").ChartType | undefined;
+    selectedLinearElement?: import("./element/linearElementEditor").LinearElementEditor | null | undefined;
 };
 export declare const cleanAppStateForExport: (appState: Partial<AppState>) => {
     viewBackgroundColor?: string | undefined;
@@ -57,3 +71,6 @@ export declare const clearAppStateForDatabase: (appState: Partial<AppState>) =>
     viewBackgroundColor?: string | undefined;
     gridSize?: number | null | undefined;
 };
+export declare const isEraserActive: ({ activeTool, }: {
+    activeTool: AppState["activeTool"];
+}) => boolean;

package/types/charts.d.ts

@@ -14,6 +14,14 @@ declare type ParseSpreadsheetResult = {
     type: typeof VALID_SPREADSHEET;
     spreadsheet: Spreadsheet;
 };
+/**
+ * @private exported for testing
+ */
+export declare const tryParseNumber: (s: string) => number | null;
+/**
+ * @private exported for testing
+ */
+export declare const tryParseCells: (cells: string[][]) => ParseSpreadsheetResult;
 export declare const tryParseSpreadsheet: (text: string) => ParseSpreadsheetResult;
 export declare const renderSpreadsheet: (chartType: string, spreadsheet: Spreadsheet, x: number, y: number) => ChartElements;
 export {};

package/types/clients.d.ts

@@ -3,4 +3,4 @@ export declare const getClientColors: (clientId: string, appState: AppState) =>
     background: string;
     stroke: string;
 };
-export declare const getClientInitials: (username?: string | null | undefined) => string;
+export declare const getClientInitials: (username?: string | null) => string;

package/types/clipboard.d.ts

@@ -11,10 +11,10 @@ export interface ClipboardData {
 export declare const probablySupportsClipboardReadText: boolean;
 export declare const probablySupportsClipboardWriteText: boolean;
 export declare const probablySupportsClipboardBlob: boolean;
-export declare const copyToClipboard: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles) => Promise<void>;
+export declare const copyToClipboard: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles | null) => Promise<void>;
 /**
- * Attemps to parse clipboard. Prefers system clipboard.
+ * Attempts to parse clipboard. Prefers system clipboard.
  */
 export declare const parseClipboard: (event: ClipboardEvent | null) => Promise<ClipboardData>;
-export declare const copyBlobToClipboardAsPng: (blob: Blob) => Promise<void>;
+export declare const copyBlobToClipboardAsPng: (blob: Blob | Promise<Blob>) => Promise<void>;
 export declare const copyTextToSystemClipboard: (text: string | null) => Promise<void>;

package/types/components/Actions.d.ts

@@ -2,19 +2,20 @@ import React from "react";
 import { ActionManager } from "../actions/manager";
 import { ExcalidrawElement, PointerType } from "../element/types";
 import { AppState, Zoom } from "../types";
-export declare const SelectedShapeActions: ({ appState, elements, renderAction, elementType, }: {
+export declare const SelectedShapeActions: ({ appState, elements, renderAction, activeTool, }: {
     appState: AppState;
     elements: readonly ExcalidrawElement[];
     renderAction: ActionManager["renderAction"];
-    elementType: ExcalidrawElement["type"];
+    activeTool: AppState["activeTool"]["type"];
 }) => JSX.Element;
-export declare const ShapesSwitcher: ({ canvas, elementType, setAppState, onImageAction, }: {
+export declare const ShapesSwitcher: ({ canvas, activeTool, setAppState, onImageAction, appState, }: {
     canvas: HTMLCanvasElement | null;
-    elementType: ExcalidrawElement["type"];
+    activeTool: AppState["activeTool"];
     setAppState: React.Component<any, AppState>["setState"];
     onImageAction: (data: {
         pointerType: PointerType | null;
     }) => void;
+    appState: AppState;
 }) => JSX.Element;
 export declare const ZoomActions: ({ renderAction, zoom, }: {
     renderAction: ActionManager["renderAction"];

package/types/components/ActiveFile.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./ActiveFile.scss";
 declare type ActiveFileProps = {
     fileName?: string;

package/types/components/App.d.ts

@@ -1,10 +1,18 @@
 import React from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import { ActionManager } from "../actions/manager";
+import { LinearElementEditor } from "../element/linearElementEditor";
 import { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
 import History from "../history";
-import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData } from "../types";
-export declare const useIsMobile: () => boolean;
+import Scene from "../scene/Scene";
+import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device } from "../types";
+import { FileSystemHandle } from "../data/filesystem";
+export declare const useDevice: () => Readonly<{
+    isSmScreen: boolean;
+    isMobile: boolean;
+    isTouchScreen: boolean;
+    canDeviceFitSidebar: boolean;
+}>;
 export declare const useExcalidrawContainer: () => {
     container: HTMLDivElement | null;
     id: string | null;
@@ -14,11 +22,11 @@ declare class App extends React.Component<AppProps, AppState> {
     rc: RoughCanvas | null;
     unmounted: boolean;
     actionManager: ActionManager;
-    isMobile: boolean;
+    device: Device;
     detachIsMobileMqHandler?: () => void;
     private excalidrawContainerRef;
     static defaultProps: Partial<AppProps>;
-    private scene;
+    scene: Scene;
     private resizeObserver;
     private nearestScrollableContainer;
     library: AppClassProperties["library"];
@@ -32,6 +40,10 @@ declare class App extends React.Component<AppProps, AppState> {
     lastPointerDown: React.PointerEvent<HTMLCanvasElement> | null;
     lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null;
     contextMenuOpen: boolean;
+    lastScenePointer: {
+        x: number;
+        y: number;
+    } | null;
     constructor(props: AppProps);
     private renderCanvas;
     render(): JSX.Element;
@@ -43,7 +55,6 @@ declare class App extends React.Component<AppProps, AppState> {
     private onUnload;
     private disableEvent;
     private onFontLoaded;
-    private importLibraryFromUrl;
     private resetHistory;
     /**
      * Resets scene & history.
@@ -51,6 +62,7 @@ declare class App extends React.Component<AppProps, AppState> {
      */
     private resetScene;
     private initializeScene;
+    private refreshDeviceState;
     componentDidMount(): Promise<void>;
     componentWillUnmount(): void;
     private onResize;
@@ -70,13 +82,14 @@ declare class App extends React.Component<AppProps, AppState> {
     private addTextFromPaste;
     setAppState: (obj: any) => void;
     removePointer: (event: React.PointerEvent<HTMLElement> | PointerEvent) => void;
-    toggleLock: () => void;
+    toggleLock: (source?: "keyboard" | "ui") => void;
     togglePenMode: () => void;
-    toggleZenMode: () => void;
-    toggleStats: () => void;
     scrollToContent: (target?: ExcalidrawElement | readonly ExcalidrawElement[]) => void;
-    clearToast: () => void;
-    setToastMessage: (toastMessage: string) => void;
+    setToast: (toast: {
+        message: string;
+        closable?: boolean;
+        duration?: number;
+    } | null) => void;
     restoreFileFromShare: () => Promise<void>;
     /** adds supplied files to existing files in the appState */
     addFiles: ExcalidrawImperativeAPI["addFiles"];
@@ -85,13 +98,22 @@ declare class App extends React.Component<AppProps, AppState> {
         appState?: Pick<AppState, K> | null | undefined;
         collaborators?: SceneData["collaborators"];
         commitToHistory?: SceneData["commitToHistory"];
-        libraryItems?: SceneData["libraryItems"];
     }) => void;
     private onSceneUpdated;
     private updateCurrentCursorPosition;
     private onKeyDown;
+    private onWheel;
     private onKeyUp;
-    private selectShapeTool;
+    private setActiveTool;
+    private setCursor;
+    private resetCursor;
+    /**
+     * returns whether user is making a gesture with >= 2 fingers (points)
+     * on o touch screen (not on a trackpad). Currently only relates to Darwin
+     * (iOS/iPadOS,MacOS), but may work on other devices in the future if
+     * GestureEvent is standardized.
+     */
+    private isTouchScreenMultiTouchGesture;
     private onGestureStart;
     private onGestureChange;
     private onGestureEnd;
@@ -105,7 +127,9 @@ declare class App extends React.Component<AppProps, AppState> {
     private getElementLinkAtPosition;
     private redirectToLink;
     private handleCanvasPointerMove;
+    private handleEraser;
     private handleTouchMove;
+    handleHoverSelectedLinearElement(linearElementEditor: LinearElementEditor, scenePointerX: number, scenePointerY: number): void;
     private handleCanvasPointerDown;
     private handleCanvasPointerUp;
     private maybeOpenContextMenuAfterPointerDownOnTouchDevices;
@@ -132,6 +156,8 @@ declare class App extends React.Component<AppProps, AppState> {
     private onPointerMoveFromPointerDownHandler;
     private handlePointerMoveOverScrollbars;
     private onPointerUpFromPointerDownHandler;
+    private restoreReadyToEraseElements;
+    private eraseElements;
     private initializeImage;
     /**
      * inserts image into elements array and rerenders
@@ -155,7 +181,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private clearSelection;
     private handleCanvasRef;
     private handleAppOnDrop;
-    loadFileToCanvas: (file: Blob) => void;
+    loadFileToCanvas: (file: File, fileHandle: FileSystemHandle | null) => Promise<void>;
     private handleCanvasContextMenu;
     private maybeDragNewGenericElement;
     private maybeHandleResize;

package/types/components/Avatar.d.ts

@@ -1,10 +1,11 @@
 import "./Avatar.scss";
 import React from "react";
 declare type AvatarProps = {
-    children: string;
     onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     color: string;
     border: string;
+    name: string;
+    src?: string;
 };
-export declare const Avatar: ({ children, color, border, onClick }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ color, border, onClick, name, src }: AvatarProps) => JSX.Element;
 export {};

package/types/components/ButtonIconSelect.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ButtonIconSelect: <T extends Object>({ options, value, onChange, group, }: {
     options: {
         value: T;

package/types/components/Card.d.ts

@@ -3,4 +3,5 @@ import OpenColor from "open-color";
 import "./Card.scss";
 export declare const Card: React.FC<{
     color: keyof OpenColor | "primary";
+    children?: React.ReactNode;
 }>;

package/types/components/CheckboxItem.d.ts

@@ -4,4 +4,5 @@ export declare const CheckboxItem: React.FC<{
     checked: boolean;
     onChange: (checked: boolean, event: React.MouseEvent) => void;
     className?: string;
+    children?: React.ReactNode;
 }>;

package/types/components/ClearCanvas.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const ClearCanvas: ({ onConfirm }: {
     onConfirm: () => void;
 }) => JSX.Element;

package/types/components/CollabButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./CollabButton.scss";
 declare const CollabButton: ({ isCollaborating, collaboratorCount, onClick, }: {
     isCollaborating: boolean;

package/types/components/ColorPicker.d.ts

@@ -1,10 +1,14 @@
-/// <reference types="react" />
 import "./ColorPicker.scss";
-export declare const ColorPicker: ({ type, color, onChange, label, isActive, setActive, }: {
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+export declare const getCustomColors: (elements: readonly ExcalidrawElement[], type: "elementBackground" | "elementStroke") => string[];
+export declare const ColorPicker: ({ type, color, onChange, label, isActive, setActive, elements, appState, }: {
     type: "canvasBackground" | "elementBackground" | "elementStroke";
     color: string | null;
     onChange: (color: string) => void;
     label: string;
     isActive: boolean;
     setActive: (active: boolean) => void;
+    elements: readonly ExcalidrawElement[];
+    appState: AppState;
 }) => JSX.Element;

package/types/components/ConfirmDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DialogProps } from "./Dialog";
 import "./ConfirmDialog.scss";
 interface Props extends Omit<DialogProps, "onCloseRequest"> {

package/types/components/DarkModeToggle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./ToolIcon.scss";
 import { Theme } from "../element/types";
 export declare const DarkModeToggle: (props: {

package/types/components/ErrorDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ErrorDialog: ({ message, onClose, }: {
     message: string;
     onClose?: (() => void) | undefined;

package/types/components/HelpDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./HelpDialog.scss";
 export declare const HelpDialog: ({ onClose }: {
     onClose?: (() => void) | undefined;

package/types/components/HelpIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type HelpIconProps = {
     title?: string;
     name?: string;

package/types/components/HintViewer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NonDeletedExcalidrawElement } from "../element/types";
 import "./HintViewer.scss";
 import { AppState } from "../types";

package/types/components/IconPicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./IconPicker.scss";
 export declare function IconPicker<T>({ value, label, options, onChange, group, }: {
     label: string;

package/types/components/ImageExportDialog.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { ActionsManagerInterface } from "../actions/types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles } from "../types";
 import "./ExportDialog.scss";
+import { ActionManager } from "../actions/manager";
 export declare const ErrorCanvasPreview: () => JSX.Element;
 export declare type ExportCB = (elements: readonly NonDeletedExcalidrawElement[], scale?: number) => void;
 export declare const ImageExportDialog: ({ elements, appState, files, exportPadding, actionManager, onExportToPng, onExportToSvg, onExportToClipboard, }: {
@@ -10,7 +9,7 @@ export declare const ImageExportDialog: ({ elements, appState, files, exportPadd
     elements: readonly NonDeletedExcalidrawElement[];
     files: BinaryFiles;
     exportPadding?: number | undefined;
-    actionManager: ActionsManagerInterface;
+    actionManager: ActionManager;
     onExportToPng: ExportCB;
     onExportToSvg: ExportCB;
     onExportToClipboard: ExportCB;

package/types/components/JSONExportDialog.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
-import { ActionsManagerInterface } from "../actions/types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { AppState, ExportOpts, BinaryFiles } from "../types";
 import "./ExportDialog.scss";
+import { ActionManager } from "../actions/manager";
 export declare type ExportCB = (elements: readonly NonDeletedExcalidrawElement[], scale?: number) => void;
 export declare const JSONExportDialog: ({ elements, appState, files, actionManager, exportOpts, canvas, }: {
     elements: readonly NonDeletedExcalidrawElement[];
     appState: AppState;
     files: BinaryFiles;
-    actionManager: ActionsManagerInterface;
+    actionManager: ActionManager;
     exportOpts: ExportOpts;
     canvas: HTMLCanvasElement | null;
 }) => JSX.Element;

package/types/components/LayerUI.d.ts

@@ -17,15 +17,13 @@ interface LayerUIProps {
     onLockToggle: () => void;
     onPenModeToggle: () => void;
     onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
-    zenModeEnabled: boolean;
     showExitZenModeBtn: boolean;
     showThemeBtn: boolean;
-    toggleZenMode: () => void;
     langCode: Language["code"];
     isCollaborating: boolean;
-    renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
-    renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
-    viewModeEnabled: boolean;
+    renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
+    renderCustomFooter?: ExcalidrawProps["renderFooter"];
+    renderCustomStats?: ExcalidrawProps["renderCustomStats"];
     libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
     UIOptions: AppProps["UIOptions"];
     focusContainer: () => void;
@@ -35,5 +33,5 @@ interface LayerUIProps {
         insertOnCanvasDirectly: boolean;
     }) => void;
 }
-declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, canvas, elements, onCollabButtonClick, onLockToggle, onPenModeToggle, onInsertElements, zenModeEnabled, showExitZenModeBtn, showThemeBtn, toggleZenMode, isCollaborating, renderTopRightUI, renderCustomFooter, viewModeEnabled, libraryReturnUrl, UIOptions, focusContainer, library, id, onImageAction, }: LayerUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, canvas, elements, onCollabButtonClick, onLockToggle, onPenModeToggle, onInsertElements, showExitZenModeBtn, showThemeBtn, isCollaborating, renderTopRightUI, renderCustomFooter, renderCustomStats, libraryReturnUrl, UIOptions, focusContainer, library, id, onImageAction, }: LayerUIProps) => JSX.Element>;
 export default _default;

package/types/components/LibraryMenu.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import Library from "../data/library";
-import { LibraryItem, AppState, BinaryFiles, ExcalidrawProps } from "../types";
+import { LibraryItems, LibraryItem, AppState, BinaryFiles, ExcalidrawProps } from "../types";
 import "./LibraryMenu.scss";
-export declare const LibraryMenu: ({ onClose, onInsertShape, pendingElements, onAddToLibrary, theme, setAppState, files, libraryReturnUrl, focusContainer, library, id, appState, }: {
+export declare const LibraryMenu: ({ onClose, onInsertLibraryItems, pendingElements, onAddToLibrary, theme, setAppState, files, libraryReturnUrl, focusContainer, library, id, appState, }: {
     pendingElements: LibraryItem["elements"];
     onClose: () => void;
-    onInsertShape: (elements: LibraryItem["elements"]) => void;
+    onInsertLibraryItems: (libraryItems: LibraryItems) => void;
     onAddToLibrary: () => void;
     theme: AppState["theme"];
     files: BinaryFiles;
@@ -15,4 +14,4 @@ export declare const LibraryMenu: ({ onClose, onInsertShape, pendingElements, on
     library: Library;
     id: string;
     appState: AppState;
-}) => JSX.Element | null;
+}) => JSX.Element;

package/types/components/LibraryMenuItems.d.ts

@@ -1,21 +1,23 @@
-/// <reference types="react" />
+import React from "react";
 import Library from "../data/library";
 import { AppState, BinaryFiles, ExcalidrawProps, LibraryItem, LibraryItems } from "../types";
 import "./LibraryMenuItems.scss";
-declare const LibraryMenuItems: ({ libraryItems, onRemoveFromLibrary, onAddToLibrary, onInsertShape, pendingElements, theme, setAppState, libraryReturnUrl, library, files, id, selectedItems, onToggle, onPublish, resetLibrary, }: {
+declare const LibraryMenuItems: ({ isLoading, libraryItems, onRemoveFromLibrary, onAddToLibrary, onInsertLibraryItems, pendingElements, theme, setAppState, appState, libraryReturnUrl, library, files, id, selectedItems, onSelectItems, onPublish, resetLibrary, }: {
+    isLoading: boolean;
     libraryItems: LibraryItems;
     pendingElements: LibraryItem["elements"];
     onRemoveFromLibrary: () => void;
-    onInsertShape: (elements: LibraryItem["elements"]) => void;
+    onInsertLibraryItems: (libraryItems: LibraryItems) => void;
     onAddToLibrary: (elements: LibraryItem["elements"]) => void;
     theme: AppState["theme"];
     files: BinaryFiles;
     setAppState: React.Component<any, AppState>["setState"];
+    appState: AppState;
     libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
     library: Library;
     id: string;
     selectedItems: LibraryItem["id"][];
-    onToggle: (id: LibraryItem["id"], event: React.MouseEvent) => void;
+    onSelectItems: (id: LibraryItem["id"][]) => void;
     onPublish: () => void;
     resetLibrary: () => void;
 }) => JSX.Element;

package/types/components/LibraryUnit.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { BinaryFiles, LibraryItem } from "../types";
 import "./LibraryUnit.scss";
-export declare const LibraryUnit: ({ id, elements, files, isPending, onClick, selected, onToggle, }: {
+export declare const LibraryUnit: ({ id, elements, files, isPending, onClick, selected, onToggle, onDrag, }: {
     id: LibraryItem["id"] | /** for pending item */ null;
     elements?: readonly import("../element/types").NonDeleted<import("../element/types").ExcalidrawElement>[] | undefined;
     files: BinaryFiles;
@@ -9,4 +8,5 @@ export declare const LibraryUnit: ({ id, elements, files, isPending, onClick, se
     onClick: () => void;
     selected: boolean;
     onToggle: (id: string, event: React.MouseEvent) => void;
+    onDrag: (id: string, event: React.DragEvent) => void;
 }) => JSX.Element;

package/types/components/LoadingMessage.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
-export declare const LoadingMessage: () => JSX.Element;
+export declare const LoadingMessage: React.FC<{
+    delay?: number;
+}>;

package/types/components/LockButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./ToolIcon.scss";
 declare type LockIconProps = {
     title?: string;

package/types/components/MobileMenu.d.ts

@@ -15,13 +15,13 @@ declare type MobileMenuProps = {
     onPenModeToggle: () => void;
     canvas: HTMLCanvasElement | null;
     isCollaborating: boolean;
-    renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
-    viewModeEnabled: boolean;
+    renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
     showThemeBtn: boolean;
     onImageAction: (data: {
         insertOnCanvasDirectly: boolean;
     }) => void;
     renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
+    renderStats: () => JSX.Element | null;
 };
-export declare const MobileMenu: ({ appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, onPenModeToggle, canvas, isCollaborating, renderCustomFooter, viewModeEnabled, showThemeBtn, onImageAction, renderTopRightUI, }: MobileMenuProps) => JSX.Element;
+export declare const MobileMenu: ({ appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, onPenModeToggle, canvas, isCollaborating, renderCustomFooter, showThemeBtn, onImageAction, renderTopRightUI, renderStats, }: MobileMenuProps) => JSX.Element;
 export {};

package/types/components/Modal.d.ts

@@ -1,7 +1,7 @@
 import "./Modal.scss";
 import React from "react";
 import { AppState } from "../types";
-export declare const Modal: (props: {
+export declare const Modal: React.FC<{
     className?: string;
     children: React.ReactNode;
     maxWidth?: number;
@@ -9,4 +9,4 @@ export declare const Modal: (props: {
     labelledBy: string;
     theme?: AppState["theme"];
     closeOnClickOutside?: boolean;
-}) => React.ReactPortal | null;
+}>;

package/types/components/PenModeButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./ToolIcon.scss";
 declare type PenModeIconProps = {
     title?: string;

package/types/components/ProjectName.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./TextInput.scss";
 import "./ProjectName.scss";
 declare type Props = {

package/types/components/PublishLibrary.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AppState, LibraryItems } from "../types";
 import "./PublishLibrary.scss";
 declare const PublishLibrary: ({ onClose, libraryItems, appState, onSuccess, onError, updateItemsInStorage, onRemove, }: {

package/types/components/Section.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
-interface SectionProps extends React.HTMLProps<HTMLElement> {
+export declare const Section: React.FC<{
     heading: string;
-    children: React.ReactNode | ((header: React.ReactNode) => React.ReactNode);
-}
-export declare const Section: ({ heading, children, ...props }: SectionProps) => JSX.Element;
-export {};
+    children?: React.ReactNode | ((heading: React.ReactNode) => React.ReactNode);
+    className?: string;
+}>;

package/types/components/SidebarLockButton.d.ts

@@ -0,0 +1,8 @@
+import "./ToolIcon.scss";
+import "./SidebarLockButton.scss";
+declare type SidebarLockIconProps = {
+    checked: boolean;
+    onChange?(): void;
+};
+export declare const SidebarLockButton: (props: SidebarLockIconProps) => JSX.Element;
+export {};

package/types/components/SingleLibraryItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AppState, LibraryItem } from "../types";
 import "./SingleLibraryItem.scss";
 declare const SingleLibraryItem: ({ libItem, appState, index, onChange, onRemove, }: {

package/types/components/Spinner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./Spinner.scss";
 declare const Spinner: ({ size, circleWidth, }: {
     size?: string | number | undefined;

package/types/components/Stack.d.ts

@@ -10,6 +10,6 @@ declare type StackProps = {
 };
 declare const _default: {
     Row: ({ children, gap, align, justifyContent, className, style, }: StackProps) => JSX.Element;
-    Col: ({ children, gap, align, justifyContent, className, }: StackProps) => JSX.Element;
+    Col: ({ children, gap, align, justifyContent, className, style, }: StackProps) => JSX.Element;
 };
 export default _default;

package/types/components/Toast.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
 import "./Toast.scss";
-export declare const Toast: ({ message, clearToast, }: {
+export declare const Toast: ({ message, onClose, closable, duration, }: {
     message: string;
-    clearToast: () => void;
+    onClose: () => void;
+    closable?: boolean | undefined;
+    duration?: number | undefined;
 }) => JSX.Element;

package/types/components/ToolButton.d.ts

@@ -38,6 +38,9 @@ declare type ToolButtonProps = (ToolButtonBaseProps & {
     onChange?(data: {
         pointerType: PointerType | null;
     }): void;
+    onPointerDown?(data: {
+        pointerType: PointerType;
+    }): void;
 });
 export declare const ToolButton: React.ForwardRefExoticComponent<ToolButtonProps & React.RefAttributes<unknown>>;
 export {};