@excalidraw/excalidraw 0.12.0-5598-d731a64 → 0.12.0-5663-e77aa97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.12.0-5598-d731a64",
+  "version": "0.12.0-5663-e77aa97",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

package/types/actions/actionExport.d.ts

@@ -882,7 +882,7 @@ export declare const actionLoadScene: {
         commitToHistory: false;
     }>;
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
-    PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
+    PanelComponent: ({ updateData }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };

package/types/components/Actions.d.ts

@@ -2,11 +2,10 @@ 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, activeTool, }: {
+export declare const SelectedShapeActions: ({ appState, elements, renderAction, }: {
     appState: AppState;
     elements: readonly ExcalidrawElement[];
     renderAction: ActionManager["renderAction"];
-    activeTool: AppState["activeTool"]["type"];
 }) => JSX.Element;
 export declare const ShapesSwitcher: ({ canvas, activeTool, setAppState, onImageAction, appState, }: {
     canvas: HTMLCanvasElement | null;
@@ -21,3 +20,15 @@ export declare const ZoomActions: ({ renderAction, zoom, }: {
     renderAction: ActionManager["renderAction"];
     zoom: Zoom;
 }) => JSX.Element;
+export declare const UndoRedoActions: ({ renderAction, className, }: {
+    renderAction: ActionManager["renderAction"];
+    className?: string | undefined;
+}) => JSX.Element;
+export declare const ExitZenModeAction: ({ executeAction, showExitZenModeBtn, }: {
+    executeAction: ActionManager["executeAction"];
+    showExitZenModeBtn: boolean;
+}) => JSX.Element;
+export declare const FinalizeAction: ({ renderAction, className, }: {
+    renderAction: ActionManager["renderAction"];
+    className?: string | undefined;
+}) => JSX.Element;

package/types/components/App.d.ts

@@ -17,6 +17,8 @@ export declare const useExcalidrawContainer: () => {
     container: HTMLDivElement | null;
     id: string | null;
 };
+export declare const useExcalidrawElements: () => readonly NonDeletedExcalidrawElement[];
+export declare const useExcalidrawAppState: () => AppState;
 declare class App extends React.Component<AppProps, AppState> {
     canvas: AppClassProperties["canvas"];
     rc: RoughCanvas | null;
@@ -46,7 +48,6 @@ declare class App extends React.Component<AppProps, AppState> {
     } | null;
     constructor(props: AppProps);
     private renderCanvas;
-    private __renderUI;
     render(): JSX.Element;
     focusContainer: AppClassProperties["focusContainer"];
     getSceneElementsIncludingDeleted: () => readonly ExcalidrawElement[];

package/types/components/Footer.d.ts

@@ -0,0 +1,9 @@
+import { ActionManager } from "../actions/manager";
+import { AppState, ExcalidrawProps } from "../types";
+declare const Footer: ({ appState, actionManager, renderCustomFooter, showExitZenModeBtn, }: {
+    appState: AppState;
+    actionManager: ActionManager;
+    renderCustomFooter?: ExcalidrawProps["renderFooter"];
+    showExitZenModeBtn: boolean;
+}) => JSX.Element;
+export default Footer;

package/types/components/LayerUI.d.ts

@@ -17,6 +17,7 @@ interface LayerUIProps {
     onLockToggle: () => void;
     onPenModeToggle: () => void;
     onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
+    onMenuToggle: ExcalidrawProps["onMenuToggle"];
     showExitZenModeBtn: boolean;
     showThemeBtn: boolean;
     langCode: Language["code"];
@@ -33,5 +34,5 @@ interface LayerUIProps {
         insertOnCanvasDirectly: boolean;
     }) => void;
 }
-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>;
+declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onCollabButtonClick, onLockToggle, onPenModeToggle, onInsertElements, onMenuToggle, showExitZenModeBtn, showThemeBtn, isCollaborating, renderTopRightUI, renderCustomFooter, renderCustomStats, libraryReturnUrl, UIOptions, focusContainer, library, id, onImageAction, }: LayerUIProps) => JSX.Element>;
 export default _default;

package/types/components/LibraryButton.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
-import { AppState } from "../types";
+import { AppState, ExcalidrawProps } from "../types";
 export declare const LibraryButton: React.FC<{
     appState: AppState;
     setAppState: React.Component<any, AppState>["setState"];
     isMobile?: boolean;
+    onMenuToggle: ExcalidrawProps["onMenuToggle"];
 }>;

package/types/components/LibraryMenu.d.ts

@@ -1,12 +1,11 @@
 import Library from "../data/library";
 import { LibraryItems, LibraryItem, AppState, BinaryFiles, ExcalidrawProps } from "../types";
 import "./LibraryMenu.scss";
-export declare const LibraryMenu: ({ onClose, onInsertLibraryItems, pendingElements, onAddToLibrary, theme, setAppState, files, libraryReturnUrl, focusContainer, library, id, appState, }: {
+export declare const LibraryMenu: ({ onClose, onInsertLibraryItems, pendingElements, onAddToLibrary, setAppState, files, libraryReturnUrl, focusContainer, library, id, appState, }: {
     pendingElements: LibraryItem["elements"];
     onClose: () => void;
     onInsertLibraryItems: (libraryItems: LibraryItems) => void;
     onAddToLibrary: () => void;
-    theme: AppState["theme"];
     files: BinaryFiles;
     setAppState: React.Component<any, AppState>["setState"];
     libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];

package/types/components/MobileMenu.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AppState } from "../types";
+import { AppState, ExcalidrawProps } from "../types";
 import { ActionManager } from "../actions/manager";
 import { NonDeletedExcalidrawElement } from "../element/types";
 declare type MobileMenuProps = {
@@ -13,6 +13,7 @@ declare type MobileMenuProps = {
     onCollabButtonClick?: () => void;
     onLockToggle: () => void;
     onPenModeToggle: () => void;
+    onMenuToggle: ExcalidrawProps["onMenuToggle"];
     canvas: HTMLCanvasElement | null;
     isCollaborating: boolean;
     renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
@@ -21,7 +22,7 @@ declare type MobileMenuProps = {
         insertOnCanvasDirectly: boolean;
     }) => void;
     renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
-    renderStats: () => JSX.Element | null;
+    renderCustomStats?: ExcalidrawProps["renderCustomStats"];
 };
-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 declare const MobileMenu: ({ appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, onPenModeToggle, onMenuToggle, canvas, isCollaborating, renderCustomFooter, showThemeBtn, onImageAction, renderTopRightUI, renderCustomStats, }: MobileMenuProps) => JSX.Element;
 export {};

package/types/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import { SidebarProps } from "./common";
+import "./Sidebar.scss";
+/** using a counter instead of boolean to handle race conditions where
+ * the host app may render (mount/unmount) multiple different sidebar */
+export declare const hostSidebarCountersAtom: import("jotai").Atom<{
+    rendered: number;
+    docked: number;
+}> & {
+    write: (get: {
+        <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+        <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+        <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_2;
+    } & {
+        <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+            unstable_promise: true;
+        }): Value_3 | Promise<Value_3>;
+        <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+            unstable_promise: true;
+        }): Value_4 | Promise<Value_4>;
+        <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+            unstable_promise: true;
+        }): (Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5>;
+    }, set: {
+        <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+        <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+    }, update: {
+        rendered: number;
+        docked: number;
+    } | ((prev: {
+        rendered: number;
+        docked: number;
+    }) => {
+        rendered: number;
+        docked: number;
+    })) => void;
+    onMount?: (<S extends (update: {
+        rendered: number;
+        docked: number;
+    } | ((prev: {
+        rendered: number;
+        docked: number;
+    }) => {
+        rendered: number;
+        docked: number;
+    })) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: {
+        rendered: number;
+        docked: number;
+    };
+};
+export declare const Sidebar: {
+    ({ children, onClose, onDock, docked, __isInternal, }: SidebarProps<{
+        /** @private internal */
+        __isInternal?: boolean | undefined;
+    }>): JSX.Element | null;
+    Header: {
+        (props: {
+            children?: import("react").ReactNode;
+            className?: string | undefined;
+        } & {
+            __isFallback?: boolean | undefined;
+        }): JSX.Element | null;
+        displayName: string;
+    };
+};

package/types/components/Sidebar/SidebarHeader.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const SidebarDockButton: (props: {
+    checked: boolean;
+    onChange?(): void;
+}) => JSX.Element;
+/** @private */
+export declare const SidebarHeaderComponents: {
+    Context: import("react").FC<{
+        children: import("react").ReactNode;
+    }>;
+    Component: {
+        (props: {
+            children?: React.ReactNode;
+            className?: string | undefined;
+        } & {
+            __isFallback?: boolean | undefined;
+        }): JSX.Element | null;
+        displayName: string;
+    };
+};

package/types/components/Sidebar/common.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare type SidebarProps<P = {}> = {
+    children: React.ReactNode;
+    /** if not supplied, sidebar won't be closable */
+    onClose?: () => void;
+    /** if not supplied, sidebar won't be dockable */
+    onDock?: (docked: boolean) => void;
+    docked?: boolean;
+} & P;
+export declare type SidebarPropsContextValue = Pick<SidebarProps, "onClose" | "onDock" | "docked">;
+export declare const SidebarPropsContext: React.Context<SidebarPropsContextValue>;

package/types/components/Stats.d.ts

@@ -8,4 +8,4 @@ export declare const Stats: (props: {
     elements: readonly NonDeletedExcalidrawElement[];
     onClose: () => void;
     renderCustomStats: ExcalidrawProps["renderCustomStats"];
-}) => JSX.Element | null;
+}) => JSX.Element;

package/types/components/hoc/withUpstreamOverride.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare const withUpstreamOverride: <P>(Component: React.ComponentType<P>) => readonly [React.FC<{
+    children: React.ReactNode;
+}>, {
+    (props: P & {
+        /** @private internal */
+        __isFallback?: boolean | undefined;
+    }): JSX.Element | null;
+    displayName: string;
+}];

package/types/element/Hyperlink.d.ts

@@ -4,9 +4,8 @@ import { NonDeletedExcalidrawElement } from "./types";
 import { Bounds } from "./bounds";
 import "./Hyperlink.scss";
 export declare const EXTERNAL_LINK_IMG: HTMLImageElement;
-export declare const Hyperlink: ({ element, appState, setAppState, onLinkOpen, }: {
+export declare const Hyperlink: ({ element, setAppState, onLinkOpen, }: {
     element: NonDeletedExcalidrawElement;
-    appState: AppState;
     setAppState: React.Component<any, AppState>["setState"];
     onLinkOpen: ExcalidrawProps["onLinkOpen"];
 }) => JSX.Element | null;

package/types/packages/common.webpack.dev.config.d.ts

@@ -0,0 +1,71 @@
+import webpack = require("webpack");
+export const mode: string;
+export const devtool: boolean;
+export namespace output {
+    const libraryTarget: string;
+    const filename: string;
+    const publicPath: string;
+}
+export namespace resolve {
+    const extensions: string[];
+}
+export namespace module {
+    const rules: ({
+        test: RegExp;
+        exclude: RegExp;
+        use: (string | {
+            loader: string;
+            options?: undefined;
+        } | {
+            loader: string;
+            options: {
+                postcssOptions: {
+                    plugins: any[];
+                };
+            };
+        })[];
+        type?: undefined;
+    } | {
+        test: RegExp;
+        exclude: RegExp;
+        use: {
+            loader: string;
+            options: {
+                transpileOnly: boolean;
+                configFile: string;
+            };
+        }[];
+        type?: undefined;
+    } | {
+        test: RegExp;
+        type: string;
+        exclude?: undefined;
+        use?: undefined;
+    })[];
+}
+export namespace optimization {
+    namespace splitChunks {
+        const chunks: string;
+        namespace cacheGroups {
+            namespace vendors {
+                const test: RegExp;
+                const name: string;
+            }
+        }
+    }
+}
+export const plugins: (webpack.EvalSourceMapDevToolPlugin | webpack.DefinePlugin)[];
+export const externals: {
+    react: {
+        root: string;
+        commonjs2: string;
+        commonjs: string;
+        amd: string;
+    };
+    "react-dom": {
+        root: string;
+        commonjs2: string;
+        commonjs: string;
+        amd: string;
+    };
+};

package/types/packages/common.webpack.prod.config.d.ts

@@ -0,0 +1,83 @@
+export const mode: string;
+export namespace output {
+    const libraryTarget: string;
+    const filename: string;
+    const publicPath: string;
+}
+export namespace resolve {
+    const extensions: string[];
+}
+export namespace module {
+    const rules: ({
+        test: RegExp;
+        exclude: RegExp;
+        use: (string | {
+            loader: string;
+            options?: undefined;
+        } | {
+            loader: string;
+            options: {
+                postcssOptions: {
+                    plugins: any[];
+                };
+            };
+        })[];
+        type?: undefined;
+    } | {
+        test: RegExp;
+        exclude: RegExp;
+        use: ({
+            loader: string;
+            options: {
+                transpileOnly: boolean;
+                configFile: string;
+                presets?: undefined;
+                plugins?: undefined;
+            };
+        } | {
+            loader: string;
+            options: {
+                presets: (string | (string | {
+                    runtime: string;
+                })[])[];
+                plugins: string[];
+                transpileOnly?: undefined;
+                configFile?: undefined;
+            };
+        })[];
+        type?: undefined;
+    } | {
+        test: RegExp;
+        type: string;
+        exclude?: undefined;
+        use?: undefined;
+    })[];
+}
+export namespace optimization {
+    const minimize: boolean;
+    const minimizer: any[];
+    namespace splitChunks {
+        const chunks: string;
+        namespace cacheGroups {
+            namespace vendors {
+                const test: RegExp;
+                const name: string;
+            }
+        }
+    }
+}
+export const plugins: any[];
+export const externals: {
+    react: {
+        root: string;
+        commonjs2: string;
+        commonjs: string;
+        amd: string;
+    };
+    "react-dom": {
+        root: string;
+        commonjs2: string;
+        commonjs: string;
+        amd: string;
+    };
+};

package/types/packages/excalidraw/dist/excalidraw.development.d.ts

@@ -1,2 +1,4 @@
-export = __WEBPACK_EXTERNAL_MODULE_react_dom__;
-export = __WEBPACK_EXTERNAL_MODULE_react_dom__;
+declare const _exports: any;
+export = _exports;
+export const __esModule: boolean;
+export const ExcalidrawLib: {};

package/types/packages/excalidraw/example/sidebar/{Sidebar.d.ts → ExampleSidebar.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import "./Sidebar.scss";
+import "./ExampleSidebar.scss";
 export default function Sidebar({ children }: {
     children: React.ReactNode;
 }): JSX.Element;

package/types/packages/excalidraw/index.d.ts

@@ -13,3 +13,4 @@ export { FONT_FAMILY, THEME, MIME_TYPES } from "../../constants";
 export { mutateElement, newElementWith, bumpVersion, } from "../../element/mutateElement";
 export { parseLibraryTokensFromUrl, useHandleLibrary, } from "../../data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "../../utils";
+export { Sidebar } from "../../components/Sidebar/Sidebar";