@zsviczian/excalidraw 0.13.0-obsidian-2 → 0.14.0-obsidian

package/types/components/main-menu/MainMenu.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import * as DefaultItems from "./DefaultItems";
+declare const MainMenu: {
+    ({ children }: {
+        children?: React.ReactNode;
+    }): JSX.Element;
+    Trigger: {
+        ({ className, children, onToggle, }: {
+            className?: string | undefined;
+            children: React.ReactNode;
+            onToggle: () => void;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ icon, onSelect, children, shortcut, className, ...rest }: {
+            icon?: JSX.Element | undefined;
+            onSelect: () => void;
+            children: React.ReactNode;
+            shortcut?: string | undefined;
+            className?: string | undefined;
+        } & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+        displayName: string;
+    };
+    ItemLink: {
+        ({ icon, shortcut, href, children, className, ...rest }: {
+            icon?: JSX.Element | undefined;
+            children: React.ReactNode;
+            shortcut?: string | undefined;
+            className?: string | undefined;
+            href: string;
+        } & React.AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;
+        displayName: string;
+    };
+    ItemCustom: ({ children, className, ...rest }: {
+        children: React.ReactNode;
+        className?: string | undefined;
+    } & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    Group: {
+        ({ children, className, style, title, }: {
+            children: React.ReactNode;
+            className?: string | undefined;
+            style?: React.CSSProperties | undefined;
+            title?: string | undefined;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        (): JSX.Element;
+        displayName: string;
+    };
+    DefaultItems: typeof DefaultItems;
+    displayName: string;
+};
+export default MainMenu;

package/types/components/mainMenu/DefaultItems.d.ts

@@ -0,0 +1,44 @@
+import "./DefaultItems.scss";
+export declare const LoadScene: {
+    (): JSX.Element | null;
+    displayName: string;
+};
+export declare const SaveToActiveFile: {
+    (): JSX.Element | null;
+    displayName: string;
+};
+export declare const SaveAsImage: {
+    (): JSX.Element;
+    displayName: string;
+};
+export declare const Help: {
+    (): JSX.Element;
+    displayName: string;
+};
+export declare const ClearCanvas: {
+    (): JSX.Element | null;
+    displayName: string;
+};
+export declare const ToggleTheme: {
+    (): JSX.Element | null;
+    displayName: string;
+};
+export declare const ChangeCanvasBackground: {
+    (): JSX.Element | null;
+    displayName: string;
+};
+export declare const Export: {
+    (): JSX.Element;
+    displayName: string;
+};
+export declare const Socials: {
+    (): JSX.Element;
+    displayName: string;
+};
+export declare const LiveCollaboration: {
+    ({ onSelect, isCollaborating, }: {
+        onSelect: () => void;
+        isCollaborating: boolean;
+    }): JSX.Element;
+    displayName: string;
+};

package/types/components/mainMenu/MainMenu.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import * as DefaultItems from "./DefaultItems";
+declare const MainMenu: {
+    ({ children }: {
+        children?: React.ReactNode;
+    }): JSX.Element;
+    Trigger: {
+        ({ className, children, onToggle, }: {
+            className?: string | undefined;
+            children: React.ReactNode;
+            onToggle: () => void;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ icon, onSelect, children, dataTestId, shortcut, className, style, ariaLabel, }: {
+            icon?: JSX.Element | undefined;
+            onSelect: () => void;
+            children: React.ReactNode;
+            dataTestId?: string | undefined;
+            shortcut?: string | undefined;
+            className?: string | undefined;
+            style?: React.CSSProperties | undefined;
+            ariaLabel?: string | undefined;
+        }): JSX.Element;
+        displayName: string;
+    };
+    ItemLink: {
+        ({ icon, dataTestId, shortcut, href, children, className, style, ariaLabel, }: {
+            icon?: JSX.Element | undefined;
+            children: React.ReactNode;
+            dataTestId?: string | undefined;
+            shortcut?: string | undefined;
+            className?: string | undefined;
+            href: string;
+            style?: React.CSSProperties | undefined;
+            ariaLabel?: string | undefined;
+        }): JSX.Element;
+        displayName: string;
+    };
+    ItemCustom: ({ children, className, style, dataTestId, }: {
+        children: React.ReactNode;
+        className?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        dataTestId?: string | undefined;
+    }) => JSX.Element;
+    Group: {
+        ({ children, className, style, title, }: {
+            children: React.ReactNode;
+            className?: string | undefined;
+            style?: React.CSSProperties | undefined;
+            title?: string | undefined;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        (): JSX.Element;
+        displayName: string;
+    };
+    DefaultItems: typeof DefaultItems;
+    displayName: string;
+};
+export default MainMenu;

package/types/components/welcome-screen/WelcomeScreen.Center.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+declare const Center: {
+    ({ children }: {
+        children?: React.ReactNode;
+    }): JSX.Element;
+    displayName: string;
+    Logo: {
+        ({ children }: {
+            children?: React.ReactNode;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Heading: {
+        ({ children }: {
+            children: React.ReactNode;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Menu: {
+        ({ children }: {
+            children?: React.ReactNode;
+        }): JSX.Element;
+        displayName: string;
+    };
+    MenuItem: {
+        ({ onSelect, children, icon, shortcut, className, ...props }: {
+            onSelect: () => void;
+            children: React.ReactNode;
+            icon?: JSX.Element | undefined;
+            shortcut?: string | null | undefined;
+        } & import("react").ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+        displayName: string;
+    };
+    MenuItemLink: {
+        ({ children, href, icon, shortcut, className, ...props }: {
+            children: React.ReactNode;
+            href: string;
+            icon?: JSX.Element | undefined;
+            shortcut?: string | null | undefined;
+        } & import("react").AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;
+        displayName: string;
+    };
+    MenuItemHelp: {
+        (): JSX.Element;
+        displayName: string;
+    };
+    MenuItemLoadScene: {
+        (): JSX.Element | null;
+        displayName: string;
+    };
+    MenuItemLiveCollaborationTrigger: {
+        ({ onSelect, }: {
+            onSelect: () => any;
+        }): JSX.Element;
+        displayName: string;
+    };
+};
+export { Center };

package/types/components/welcome-screen/WelcomeScreen.Hints.d.ts

@@ -0,0 +1,19 @@
+declare const MenuHint: {
+    ({ children }: {
+        children?: React.ReactNode;
+    }): JSX.Element;
+    displayName: string;
+};
+declare const ToolbarHint: {
+    ({ children }: {
+        children?: React.ReactNode;
+    }): JSX.Element;
+    displayName: string;
+};
+declare const HelpHint: {
+    ({ children }: {
+        children?: React.ReactNode;
+    }): JSX.Element;
+    displayName: string;
+};
+export { HelpHint, MenuHint, ToolbarHint };

package/types/components/welcome-screen/WelcomeScreen.d.ts

@@ -0,0 +1,85 @@
+/// <reference types="react" />
+import "./WelcomeScreen.scss";
+declare const WelcomeScreen: {
+    (props: {
+        children: React.ReactNode;
+    }): null;
+    displayName: string;
+    Center: {
+        ({ children }: {
+            children?: import("react").ReactNode;
+        }): JSX.Element;
+        displayName: string;
+        Logo: {
+            ({ children }: {
+                children?: import("react").ReactNode;
+            }): JSX.Element;
+            displayName: string;
+        };
+        Heading: {
+            ({ children }: {
+                children: import("react").ReactNode;
+            }): JSX.Element;
+            displayName: string;
+        };
+        Menu: {
+            ({ children }: {
+                children?: import("react").ReactNode;
+            }): JSX.Element;
+            displayName: string;
+        };
+        MenuItem: {
+            ({ onSelect, children, icon, shortcut, className, ...props }: {
+                onSelect: () => void;
+                children: import("react").ReactNode;
+                icon?: JSX.Element | undefined;
+                shortcut?: string | null | undefined;
+            } & import("react").ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+            displayName: string;
+        };
+        MenuItemLink: {
+            ({ children, href, icon, shortcut, className, ...props }: {
+                children: import("react").ReactNode;
+                href: string;
+                icon?: JSX.Element | undefined;
+                shortcut?: string | null | undefined;
+            } & import("react").AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;
+            displayName: string;
+        };
+        MenuItemHelp: {
+            (): JSX.Element;
+            displayName: string;
+        };
+        MenuItemLoadScene: {
+            (): JSX.Element | null;
+            displayName: string;
+        };
+        MenuItemLiveCollaborationTrigger: {
+            ({ onSelect, }: {
+                onSelect: () => any;
+            }): JSX.Element;
+            displayName: string;
+        };
+    };
+    Hints: {
+        MenuHint: {
+            ({ children }: {
+                children?: import("react").ReactNode;
+            }): JSX.Element;
+            displayName: string;
+        };
+        ToolbarHint: {
+            ({ children }: {
+                children?: import("react").ReactNode;
+            }): JSX.Element;
+            displayName: string;
+        };
+        HelpHint: {
+            ({ children }: {
+                children?: import("react").ReactNode;
+            }): JSX.Element;
+            displayName: string;
+        };
+    };
+};
+export default WelcomeScreen;

package/types/constants.d.ts

@@ -154,9 +154,6 @@ export declare const ROUNDNESS: {
     readonly PROPORTIONAL_RADIUS: 2;
     readonly ADAPTIVE_RADIUS: 3;
 };
-export declare const COOKIES: {
-    readonly AUTH_STATE_COOKIE: "excplus-auth";
-};
 /** key containt id of precedeing elemnt id we use in reconciliation during
  * collaboration */
 export declare const PRECEDING_ELEMENT_KEY = "__precedingElement__";

package/types/element/Hyperlink.d.ts

@@ -18,6 +18,11 @@ export declare const actionLink: {
         appState: {
             showHyperlinkPopup: "editor";
             openMenu: null;
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
             errorMessage: string | null;
@@ -73,7 +78,7 @@ export declare const actionLink: {
             }>;
             openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
             openSidebar: "library" | "customSidebar" | null;
-            openDialog: "imageExport" | "help" | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
             isSidebarDocked: boolean;
             lastPointerDownWith: import("./types").PointerType;
             selectedElementIds: {
@@ -129,10 +134,8 @@ export declare const actionLink: {
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     contextItemLabel: (elements: readonly import("./types").ExcalidrawElement[], appState: Readonly<AppState>) => "labels.link.edit" | "labels.link.create";
-    contextItemPredicate: (elements: readonly import("./types").ExcalidrawElement[], appState: AppState) => boolean;
-    PanelComponent: ({ elements, appState, updateData }: import("../actions/types").PanelComponentProps & {
-        isInHamburgerMenu: boolean;
-    }) => JSX.Element;
+    predicate: (elements: readonly import("./types").ExcalidrawElement[], appState: AppState) => boolean;
+    PanelComponent: ({ elements, appState, updateData }: import("../actions/types").PanelComponentProps) => JSX.Element;
 } & {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };

package/types/element/linearElementEditor.d.ts

@@ -123,6 +123,11 @@ export declare class LinearElementEditor {
                 hoverPointIndex: number;
                 segmentMidPointHoveredCoords: readonly [number, number] | null;
             };
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
             errorMessage: string | null;
@@ -178,7 +183,7 @@ export declare class LinearElementEditor {
             openMenu: "canvas" | "shape" | null;
             openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
             openSidebar: "library" | "customSidebar" | null;
-            openDialog: "imageExport" | "help" | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
             isSidebarDocked: boolean;
             lastPointerDownWith: import("./types").PointerType;
             selectedElementIds: {

package/types/element/textElement.d.ts

@@ -9,8 +9,15 @@ export declare const measureText: (text: string, font: FontString, maxWidth?: nu
     width: number;
     height: number;
     baseline: number;
+    container: HTMLDivElement;
+} | {
+    width: number;
+    height: number;
+    baseline: number;
+    container?: undefined;
 };
 export declare const getApproxLineHeight: (font: FontString) => number;
+export declare const getTextWidth: (text: string, font: FontString) => number;
 export declare const wrapText: (text: string, font: FontString, maxWidth: number) => string;
 export declare const charWidth: {
     calculate: (char: string, font: FontString) => number;

package/types/element/textWysiwyg.d.ts

@@ -1,5 +1,10 @@
-import { ExcalidrawElement, ExcalidrawTextElement } from "./types";
+import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawTextContainer } from "./types";
 import App from "../components/App";
+export declare const updateOriginalContainerCache: (id: ExcalidrawTextContainer["id"], height: ExcalidrawTextContainer["height"]) => {
+    height: ExcalidrawTextContainer["height"];
+};
+export declare const resetOriginalContainerCache: (id: ExcalidrawTextContainer["id"]) => void;
+export declare const getOriginalContainerHeightFromCache: (id: ExcalidrawTextContainer["id"]) => number | null;
 export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }: {
     id: ExcalidrawElement["id"];
     onChange?: ((text: string) => void) | undefined;

package/types/excalidraw-app/data/index.d.ts

@@ -91,6 +91,11 @@ export declare const loadScene: (id: string | null, privateKey: string | null, l
             lastActiveToolBeforeEraser: import("../../types").LastActiveToolBeforeEraser;
             locked: boolean;
         };
+        contextMenu: {
+            items: import("../../components/ContextMenu").ContextMenuItems;
+            top: number;
+            left: number;
+        } | null;
         showWelcomeScreen: boolean;
         isLoading: boolean;
         errorMessage: string | null;

package/types/excalidraw-app/data/localStorage.d.ts

@@ -65,6 +65,11 @@ export declare const importFromLocalStorage: () => {
         showStats: boolean;
         currentChartType: import("../../element/types").ChartType;
         selectedLinearElement: import("../../element/linearElementEditor").LinearElementEditor | null;
+        contextMenu: {
+            items: import("../../components/ContextMenu").ContextMenuItems;
+            top: number;
+            left: number;
+        } | null;
         isLoading: boolean;
         errorMessage: string | null;
         draggingElement: import("../../element/types").NonDeletedExcalidrawElement | null;

package/types/keys.d.ts

@@ -27,6 +27,8 @@ export declare const KEYS: {
     readonly ARROW_LEFT: "ArrowLeft";
     readonly ARROW_RIGHT: "ArrowRight";
     readonly ARROW_UP: "ArrowUp";
+    readonly PAGE_UP: "PageUp";
+    readonly PAGE_DOWN: "PageDown";
     readonly BACKSPACE: "Backspace";
     readonly ALT: "Alt";
     readonly CTRL_OR_CMD: "metaKey" | "ctrlKey";

package/types/packages/excalidraw/example/CustomFooter.d.ts

@@ -0,0 +1,5 @@
+import { ExcalidrawImperativeAPI } from "../../../types";
+declare const CustomFooter: ({ excalidrawAPI, }: {
+    excalidrawAPI: ExcalidrawImperativeAPI;
+}) => JSX.Element;
+export default CustomFooter;

package/types/packages/excalidraw/example/MobileFooter.d.ts

@@ -0,0 +1,5 @@
+import { ExcalidrawImperativeAPI } from "../../../types";
+declare const MobileFooter: ({ excalidrawAPI, }: {
+    excalidrawAPI: ExcalidrawImperativeAPI;
+}) => JSX.Element | null;
+export default MobileFooter;

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

@@ -2,6 +2,10 @@ import React from "react";
 import "../../css/app.scss";
 import "../../css/styles.scss";
 import { ExcalidrawAPIRefValue, ExcalidrawProps } from "../../types";
+import Footer from "../../components/footer/FooterCenter";
+import MainMenu from "../../components/main-menu/MainMenu";
+import WelcomeScreen from "../../components/welcome-screen/WelcomeScreen";
+import LiveCollaborationTrigger from "../../components/live-collaboration/LiveCollaborationTrigger";
 declare type PublicExcalidrawProps = Omit<ExcalidrawProps, "forwardedRef">;
 export declare const Excalidraw: React.MemoExoticComponent<React.ForwardRefExoticComponent<PublicExcalidrawProps & React.RefAttributes<ExcalidrawAPIRefValue>>>;
 export { getSceneVersion, isInvisiblySmallElement, getNonDeletedElements, } from "../../element";
@@ -22,3 +26,9 @@ export { mutateElement, newElementWith, bumpVersion, } from "../../element/mutat
 export { parseLibraryTokensFromUrl, useHandleLibrary, } from "../../data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "../../utils";
 export { Sidebar } from "../../components/Sidebar/Sidebar";
+export { Button } from "../../components/Button";
+export { Footer };
+export { MainMenu };
+export { useDevice } from "../../components/App";
+export { WelcomeScreen };
+export { LiveCollaborationTrigger };

package/types/renderer/easingFunctions.d.ts

@@ -0,0 +1,6 @@
+declare type EasingFunction = (progress: number) => number;
+interface EasingDictionary {
+    [easing: string]: EasingFunction;
+}
+declare const easingsFunctions: EasingDictionary;
+export default easingsFunctions;

package/types/types.d.ts

@@ -15,6 +15,7 @@ import { MaybeTransformHandleType } from "./element/transformHandles";
 import Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
 import type { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
+import { ContextMenuItems } from "./components/ContextMenu";
 export declare type Point = Readonly<RoughPoint>;
 export declare type Collaborator = {
     pointer?: {
@@ -62,6 +63,11 @@ export declare type LastActiveToolBeforeEraser = {
     customType: string;
 } | null;
 export declare type AppState = {
+    contextMenu: {
+        items: ContextMenuItems;
+        top: number;
+        left: number;
+    } | null;
     showWelcomeScreen: boolean;
     isLoading: boolean;
     errorMessage: string | null;
@@ -116,7 +122,7 @@ export declare type AppState = {
     openMenu: "canvas" | "shape" | null;
     openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
     openSidebar: "library" | "customSidebar" | null;
-    openDialog: "imageExport" | "help" | null;
+    openDialog: "imageExport" | "help" | "jsonExport" | null;
     isSidebarDocked: boolean;
     lastPointerDownWith: PointerType;
     selectedElementIds: {
@@ -220,7 +226,6 @@ export interface ExcalidrawProps {
     onChange?: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
     initialData?: ExcalidrawInitialDataState | null | Promise<ExcalidrawInitialDataState | null>;
     excalidrawRef?: ForwardRef<ExcalidrawAPIRefValue>;
-    onCollabButtonClick?: () => void;
     isCollaborating?: boolean;
     onPointerUpdate?: (payload: {
         pointer: {
@@ -233,7 +238,6 @@ export interface ExcalidrawProps {
     onPaste?: (data: ClipboardData, event: ClipboardEvent | null) => Promise<boolean> | boolean;
     onDrop?: (event: React.DragEvent<HTMLDivElement>) => Promise<boolean> | boolean;
     renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
-    renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
     langCode?: Language["code"];
     viewModeEnabled?: boolean;
     zenModeEnabled?: boolean;
@@ -243,10 +247,7 @@ export interface ExcalidrawProps {
     theme?: Theme;
     name?: string;
     renderCustomStats?: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => JSX.Element;
-    UIOptions?: {
-        dockedSidebarBreakpoint?: number;
-        canvasActions?: CanvasActions;
-    };
+    UIOptions?: Partial<UIOptions>;
     detectScroll?: boolean;
     handleKeyboardGlobally?: boolean;
     onLibraryChange?: (libraryItems: LibraryItems) => void | Promise<any>;
@@ -266,6 +267,7 @@ export interface ExcalidrawProps {
      * Render function that renders custom <Sidebar /> component.
      */
     renderSidebar?: () => JSX.Element | null;
+    children?: React.ReactNode;
 }
 export declare type SceneData = {
     elements?: ImportedDataState["elements"];
@@ -283,22 +285,26 @@ export declare type ExportOpts = {
     onExportToBackend?: (exportedElements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, canvas: HTMLCanvasElement | null) => void;
     renderCustomUI?: (exportedElements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, canvas: HTMLCanvasElement | null) => JSX.Element;
 };
-declare type CanvasActions = {
-    changeViewBackgroundColor?: boolean;
-    clearCanvas?: boolean;
-    export?: false | ExportOpts;
-    loadScene?: boolean;
-    saveToActiveFile?: boolean;
-    toggleTheme?: boolean | null;
-    saveAsImage?: boolean;
-};
+declare type CanvasActions = Partial<{
+    changeViewBackgroundColor: boolean;
+    clearCanvas: boolean;
+    export: false | ExportOpts;
+    loadScene: boolean;
+    saveToActiveFile: boolean;
+    toggleTheme: boolean | null;
+    saveAsImage: boolean;
+}>;
+declare type UIOptions = Partial<{
+    dockedSidebarBreakpoint: number;
+    welcomeScreen: boolean;
+    canvasActions: CanvasActions;
+}>;
 export declare type AppProps = Merge<ExcalidrawProps, {
-    UIOptions: {
+    UIOptions: Merge<MarkRequired<UIOptions, "welcomeScreen">, {
         canvasActions: Required<CanvasActions> & {
             export: ExportOpts;
         };
-        dockedSidebarBreakpoint?: number;
-    };
+    }>;
     detectScroll: boolean;
     handleKeyboardGlobally: boolean;
     isCollaborating: boolean;
@@ -318,6 +324,7 @@ export declare type AppClassProperties = {
     files: BinaryFiles;
     device: App["device"];
     scene: App["scene"];
+    pasteFromClipboard: App["pasteFromClipboard"];
 };
 export declare type PointerDownState = Readonly<{
     origin: Readonly<{
@@ -417,4 +424,19 @@ export declare type Device = Readonly<{
     isTouchScreen: boolean;
     canDeviceFitSidebar: boolean;
 }>;
+export declare type UIChildrenComponents = {
+    [k in "FooterCenter" | "Menu" | "WelcomeScreen"]?: React.ReactElement<{
+        children?: React.ReactNode;
+    }, React.JSXElementConstructor<any>>;
+};
+export declare type UIWelcomeScreenComponents = {
+    [k in "Center" | "MenuHint" | "ToolbarHint" | "HelpHint"]?: React.ReactElement<{
+        children?: React.ReactNode;
+    }, React.JSXElementConstructor<any>>;
+};
+export declare type UIWelcomeScreenCenterComponents = {
+    [k in "Logo" | "Heading" | "Menu" | "MenuItemLoadScene" | "MenuItemHelp"]?: React.ReactElement<{
+        children?: React.ReactNode;
+    }, React.JSXElementConstructor<any>>;
+};
 export {};

package/types/utils.d.ts

@@ -2,6 +2,7 @@ import { EVENT } from "./constants";
 import { FontFamilyValues, FontString } from "./element/types";
 import { AppState, LastActiveToolBeforeEraser, Zoom } from "./types";
 import { SHAPES } from "./shapes";
+import React from "react";
 export declare const setDateTimeForTests: (dateTime: string) => void;
 export declare const getDateTime: () => string;
 export declare const capitalizeString: (str: string) => string;
@@ -134,3 +135,19 @@ export declare const isPrimitive: (val: any) => boolean;
 export declare const getFrame: () => "top" | "iframe";
 export declare const isPromiseLike: (value: any) => value is Promise<any>;
 export declare const queryFocusableElements: (container: HTMLElement | null) => HTMLElement[];
+/**
+ * Partitions React children into named components and the rest of children.
+ *
+ * Returns known children as a dictionary of react children keyed by their
+ * displayName, and the rest children as an array.
+ *
+ * NOTE all named react components are included in the dictionary, irrespective
+ * of the supplied type parameter. This means you may be throwing away
+ * children that you aren't expecting, but should nonetheless be rendered.
+ * To guard against this (provided you care about the rest children at all),
+ * supply a second parameter with an object with keys of the expected children.
+ */
+export declare const getReactChildren: <KnownChildren extends {
+    [x: string]: React.ReactNode;
+}>(children: React.ReactNode, expectedComponents?: Record<keyof KnownChildren, any> | undefined) => readonly [Partial<KnownChildren>, React.ReactNode[]];
+export declare const isShallowEqual: <T extends Record<string, any>>(objA: T, objB: T) => boolean;