Merge branch 'master' into dwelle/bump-socket.io

# Conflicts:
#	src/locales/en.json

package.json

@@ -28,7 +28,6 @@
     "@types/pica": "5.1.3",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
-    "@types/socket.io-client": "1.4.36",
     "browser-fs-access": "0.29.1",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
@@ -54,7 +53,7 @@
     "react-scripts": "5.0.1",
     "roughjs": "4.5.2",
     "sass": "1.51.0",
-    "socket.io-client": "2.3.1",
+    "socket.io-client": "4.5.4",
     "typescript": "4.9.4",
     "workbox-background-sync": "^6.5.4",
     "workbox-broadcast-update": "^6.5.4",

src/actions/actionCanvas.tsx

@@ -23,7 +23,7 @@ import { newElementWith } from "../element/mutateElement";
 import { getDefaultAppState, isEraserActive } from "../appState";
 import ClearCanvas from "../components/ClearCanvas";
 import clsx from "clsx";
-import MenuItem from "../components/MenuItem";
+import DropdownMenuItem from "../components/dropdownMenu/DropdownMenuItem";
 import { getShortcutFromShortcutName } from "./shortcuts";
 
 export const actionChangeViewBackgroundColor = register({
@@ -299,19 +299,23 @@ export const actionToggleTheme = register({
     };
   },
   PanelComponent: ({ appState, updateData }) => (
-    <MenuItem
-      label={
-        appState.theme === "dark"
-          ? t("buttons.lightMode")
-          : t("buttons.darkMode")
-      }
-      onClick={() => {
+    <DropdownMenuItem
+      onSelect={() => {
         updateData(appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT);
       }}
       icon={appState.theme === "dark" ? SunIcon : MoonIcon}
       dataTestId="toggle-dark-mode"
       shortcut={getShortcutFromShortcutName("toggleTheme")}
-    />
+      ariaLabel={
+        appState.theme === "dark"
+          ? t("buttons.lightMode")
+          : t("buttons.darkMode")
+      }
+    >
+      {appState.theme === "dark"
+        ? t("buttons.lightMode")
+        : t("buttons.darkMode")}
+    </DropdownMenuItem>
   ),
   keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
 });

src/actions/actionExport.tsx

@@ -19,7 +19,7 @@ import { ActiveFile } from "../components/ActiveFile";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { Theme } from "../element/types";
-import MenuItem from "../components/MenuItem";
+import DropdownMenuItem from "../components/dropdownMenu/DropdownMenuItem";
 import { getShortcutFromShortcutName } from "./shortcuts";
 
 export const actionChangeProjectName = register({
@@ -247,15 +247,19 @@ export const actionLoadScene = register({
     }
   },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
-  PanelComponent: ({ updateData }) => (
-    <MenuItem
-      label={t("buttons.load")}
-      icon={LoadIcon}
-      onClick={updateData}
-      dataTestId="load-button"
-      shortcut={getShortcutFromShortcutName("loadScene")}
-    />
-  ),
+  PanelComponent: ({ updateData }) => {
+    return (
+      <DropdownMenuItem
+        icon={LoadIcon}
+        onSelect={updateData}
+        dataTestId="load-button"
+        shortcut={getShortcutFromShortcutName("loadScene")}
+        ariaLabel={t("buttons.load")}
+      >
+        {t("buttons.load")}
+      </DropdownMenuItem>
+    );
+  },
 });
 
 export const actionExportWithDarkMode = register({

src/actions/actionMenu.tsx

@@ -6,7 +6,7 @@ import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { KEYS } from "../keys";
 import { HelpButton } from "../components/HelpButton";
-import MenuItem from "../components/MenuItem";
+import DropdownMenuItem from "../components/dropdownMenu/DropdownMenuItem";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -90,13 +90,15 @@ export const actionShortcuts = register({
   },
   PanelComponent: ({ updateData, isInHamburgerMenu }) =>
     isInHamburgerMenu ? (
-      <MenuItem
-        label={t("helpDialog.title")}
+      <DropdownMenuItem
         dataTestId="help-menu-item"
         icon={HelpIcon}
-        onClick={updateData}
+        onSelect={updateData}
         shortcut="?"
-      />
+        ariaLabel={t("helpDialog.title")}
+      >
+        {t("helpDialog.title")}
+      </DropdownMenuItem>
     ) : (
       <HelpButton title={t("helpDialog.title")} onClick={updateData} />
     ),

src/components/ActiveFile.tsx

@@ -5,7 +5,7 @@ import { save } from "../components/icons";
 import { t } from "../i18n";
 
 import "./ActiveFile.scss";
-import MenuItem from "./MenuItem";
+import DropdownMenuItem from "./dropdownMenu/DropdownMenuItem";
 
 type ActiveFileProps = {
   fileName?: string;
@@ -13,11 +13,11 @@ type ActiveFileProps = {
 };
 
 export const ActiveFile = ({ fileName, onSave }: ActiveFileProps) => (
-  <MenuItem
-    label={`${t("buttons.save")}`}
+  <DropdownMenuItem
     shortcut={getShortcutFromShortcutName("saveScene")}
     dataTestId="save-button"
-    onClick={onSave}
+    onSelect={onSave}
     icon={save}
-  />
+    ariaLabel={`${t("buttons.save")}`}
+  >{`${t("buttons.save")}`}</DropdownMenuItem>
 );

src/components/App.tsx

@@ -272,13 +272,9 @@ import {
   isLocalLink,
 } from "../element/Hyperlink";
 import { shouldShowBoundingBox } from "../element/transformHandles";
-import { atom } from "jotai";
 import { Fonts } from "../scene/Fonts";
 import { actionPaste } from "../actions/actionClipboard";
 
-export const isMenuOpenAtom = atom(false);
-export const isDropdownOpenAtom = atom(false);
-
 const deviceContextInitialValue = {
   isSmScreen: false,
   isMobile: false,
@@ -289,7 +285,7 @@ const DeviceContext = React.createContext<Device>(deviceContextInitialValue);
 DeviceContext.displayName = "DeviceContext";
 export const useDevice = () => useContext<Device>(DeviceContext);
 
-const ExcalidrawContainerContext = React.createContext<{
+export const ExcalidrawContainerContext = React.createContext<{
   container: HTMLDivElement | null;
   id: string | null;
 }>({ container: null, id: null });
@@ -316,12 +312,19 @@ const ExcalidrawSetAppStateContext = React.createContext<
 >(() => {});
 ExcalidrawSetAppStateContext.displayName = "ExcalidrawSetAppStateContext";
 
+const ExcalidrawActionManagerContext = React.createContext<
+  ActionManager | { renderAction: ActionManager["renderAction"] }
+>({ renderAction: () => null });
+ExcalidrawActionManagerContext.displayName = "ExcalidrawActionManagerContext";
+
 export const useExcalidrawElements = () =>
   useContext(ExcalidrawElementsContext);
 export const useExcalidrawAppState = () =>
   useContext(ExcalidrawAppStateContext);
 export const useExcalidrawSetAppState = () =>
   useContext(ExcalidrawSetAppStateContext);
+export const useExcalidrawActionManager = () =>
+  useContext(ExcalidrawActionManagerContext);
 
 let didTapTwice: boolean = false;
 let tappedTwiceTimer = 0;
@@ -559,75 +562,79 @@ class App extends React.Component<AppProps, AppState> {
                 <ExcalidrawElementsContext.Provider
                   value={this.scene.getNonDeletedElements()}
                 >
-                  <LayerUI
-                    canvas={this.canvas}
-                    appState={this.state}
-                    files={this.files}
-                    setAppState={this.setAppState}
-                    actionManager={this.actionManager}
-                    elements={this.scene.getNonDeletedElements()}
-                    onCollabButtonClick={onCollabButtonClick}
-                    onLockToggle={this.toggleLock}
-                    onPenModeToggle={this.togglePenMode}
-                    onInsertElements={(elements) =>
-                      this.addElementsFromPasteOrLibrary({
-                        elements,
-                        position: "center",
-                        files: null,
-                      })
-                    }
-                    langCode={getLanguage().code}
-                    isCollaborating={this.props.isCollaborating}
-                    renderTopRightUI={renderTopRightUI}
-                    renderCustomStats={renderCustomStats}
-                    renderCustomSidebar={this.props.renderSidebar}
-                    showExitZenModeBtn={
-                      typeof this.props?.zenModeEnabled === "undefined" &&
-                      this.state.zenModeEnabled
-                    }
-                    libraryReturnUrl={this.props.libraryReturnUrl}
-                    UIOptions={this.props.UIOptions}
-                    focusContainer={this.focusContainer}
-                    library={this.library}
-                    id={this.id}
-                    onImageAction={this.onImageAction}
-                    renderWelcomeScreen={
-                      this.state.showWelcomeScreen &&
-                      this.state.activeTool.type === "selection" &&
-                      !this.scene.getElementsIncludingDeleted().length
-                    }
+                  <ExcalidrawActionManagerContext.Provider
+                    value={this.actionManager}
                   >
-                    {this.props.children}
-                  </LayerUI>
-                  <div className="excalidraw-textEditorContainer" />
-                  <div className="excalidraw-contextMenuContainer" />
-                  {selectedElement.length === 1 &&
-                    !this.state.contextMenu &&
-                    this.state.showHyperlinkPopup && (
-                      <Hyperlink
-                        key={selectedElement[0].id}
-                        element={selectedElement[0]}
-                        setAppState={this.setAppState}
-                        onLinkOpen={this.props.onLinkOpen}
+                    <LayerUI
+                      canvas={this.canvas}
+                      appState={this.state}
+                      files={this.files}
+                      setAppState={this.setAppState}
+                      actionManager={this.actionManager}
+                      elements={this.scene.getNonDeletedElements()}
+                      onCollabButtonClick={onCollabButtonClick}
+                      onLockToggle={this.toggleLock}
+                      onPenModeToggle={this.togglePenMode}
+                      onInsertElements={(elements) =>
+                        this.addElementsFromPasteOrLibrary({
+                          elements,
+                          position: "center",
+                          files: null,
+                        })
+                      }
+                      langCode={getLanguage().code}
+                      isCollaborating={this.props.isCollaborating}
+                      renderTopRightUI={renderTopRightUI}
+                      renderCustomStats={renderCustomStats}
+                      renderCustomSidebar={this.props.renderSidebar}
+                      showExitZenModeBtn={
+                        typeof this.props?.zenModeEnabled === "undefined" &&
+                        this.state.zenModeEnabled
+                      }
+                      libraryReturnUrl={this.props.libraryReturnUrl}
+                      UIOptions={this.props.UIOptions}
+                      focusContainer={this.focusContainer}
+                      library={this.library}
+                      id={this.id}
+                      onImageAction={this.onImageAction}
+                      renderWelcomeScreen={
+                        this.state.showWelcomeScreen &&
+                        this.state.activeTool.type === "selection" &&
+                        !this.scene.getElementsIncludingDeleted().length
+                      }
+                    >
+                      {this.props.children}
+                    </LayerUI>
+                    <div className="excalidraw-textEditorContainer" />
+                    <div className="excalidraw-contextMenuContainer" />
+                    {selectedElement.length === 1 &&
+                      !this.state.contextMenu &&
+                      this.state.showHyperlinkPopup && (
+                        <Hyperlink
+                          key={selectedElement[0].id}
+                          element={selectedElement[0]}
+                          setAppState={this.setAppState}
+                          onLinkOpen={this.props.onLinkOpen}
+                        />
+                      )}
+                    {this.state.toast !== null && (
+                      <Toast
+                        message={this.state.toast.message}
+                        onClose={() => this.setToast(null)}
+                        duration={this.state.toast.duration}
+                        closable={this.state.toast.closable}
                       />
                     )}
-                  {this.state.toast !== null && (
-                    <Toast
-                      message={this.state.toast.message}
-                      onClose={() => this.setToast(null)}
-                      duration={this.state.toast.duration}
-                      closable={this.state.toast.closable}
-                    />
-                  )}
-                  {this.state.contextMenu && (
-                    <ContextMenu
-                      items={this.state.contextMenu.items}
-                      top={this.state.contextMenu.top}
-                      left={this.state.contextMenu.left}
-                      actionManager={this.actionManager}
-                    />
-                  )}
-                  <main>{this.renderCanvas()}</main>
+                    {this.state.contextMenu && (
+                      <ContextMenu
+                        items={this.state.contextMenu.items}
+                        top={this.state.contextMenu.top}
+                        left={this.state.contextMenu.left}
+                        actionManager={this.actionManager}
+                      />
+                    )}
+                    <main>{this.renderCanvas()}</main>
+                  </ExcalidrawActionManagerContext.Provider>
                 </ExcalidrawElementsContext.Provider>{" "}
               </ExcalidrawAppStateContext.Provider>
             </ExcalidrawSetAppStateContext.Provider>

src/components/ClearCanvas.tsx

@@ -3,7 +3,7 @@ import { t } from "../i18n";
 import { TrashIcon } from "./icons";
 
 import ConfirmDialog from "./ConfirmDialog";
-import MenuItem from "./MenuItem";
+import DropdownMenuItem from "./dropdownMenu/DropdownMenuItem";
 
 const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
   const [showDialog, setShowDialog] = useState(false);
@@ -13,12 +13,14 @@ const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
 
   return (
     <>
-      <MenuItem
-        label={t("buttons.clearReset")}
+      <DropdownMenuItem
         icon={TrashIcon}
-        onClick={toggleDialog}
+        onSelect={toggleDialog}
         dataTestId="clear-canvas-button"
-      />
+        ariaLabel={t("buttons.clearReset")}
+      >
+        {t("buttons.clearReset")}
+      </DropdownMenuItem>
 
       {showDialog && (
         <ConfirmDialog

src/components/CollabButton.tsx

@@ -2,7 +2,7 @@ import { t } from "../i18n";
 import { UsersIcon } from "./icons";
 
 import "./CollabButton.scss";
-import MenuItem from "./MenuItem";
+import DropdownMenuItem from "./dropdownMenu/DropdownMenuItem";
 import clsx from "clsx";
 
 const CollabButton = ({
@@ -19,13 +19,14 @@ const CollabButton = ({
   return (
     <>
       {isInHamburgerMenu ? (
-        <MenuItem
-          label={t("labels.liveCollaboration")}
+        <DropdownMenuItem
           dataTestId="collab-button"
           icon={UsersIcon}
-          onClick={onClick}
-          isCollaborating={isCollaborating}
-        />
+          onSelect={onClick}
+          ariaLabel={t("labels.liveCollaboration")}
+        >
+          {t("labels.liveCollaboration")}
+        </DropdownMenuItem>
       ) : (
         <button
           className={clsx("collab-button", { active: isCollaborating })}

src/components/ConfirmDialog.tsx

@@ -3,9 +3,9 @@ import { Dialog, DialogProps } from "./Dialog";
 
 import "./ConfirmDialog.scss";
 import DialogActionButton from "./DialogActionButton";
-import { isMenuOpenAtom } from "./App";
-import { isDropdownOpenAtom } from "./App";
 import { useSetAtom } from "jotai";
+import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
+import { useExcalidrawSetAppState } from "./App";
 
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
   onConfirm: () => void;
@@ -23,9 +23,8 @@ const ConfirmDialog = (props: Props) => {
     className = "",
     ...rest
   } = props;
-
-  const setIsMenuOpen = useSetAtom(isMenuOpenAtom);
-  const setIsDropdownOpen = useSetAtom(isDropdownOpenAtom);
+  const setAppState = useExcalidrawSetAppState();
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
 
   return (
     <Dialog
@@ -39,16 +38,16 @@ const ConfirmDialog = (props: Props) => {
         <DialogActionButton
           label={cancelText}
           onClick={() => {
-            setIsMenuOpen(false);
-            setIsDropdownOpen(false);
+            setAppState({ openMenu: null });
+            setIsLibraryMenuOpen(false);
             onCancel();
           }}
         />
         <DialogActionButton
           label={confirmText}
           onClick={() => {
-            setIsMenuOpen(false);
-            setIsDropdownOpen(false);
+            setAppState({ openMenu: null });
+            setIsLibraryMenuOpen(false);
             onConfirm();
           }}
           actionType="danger"

src/components/Dialog.tsx

@@ -2,7 +2,11 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { useExcalidrawContainer, useDevice } from "../components/App";
+import {
+  useExcalidrawContainer,
+  useDevice,
+  useExcalidrawSetAppState,
+} from "../components/App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, CloseIcon } from "./icons";
@@ -10,8 +14,8 @@ import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { AppState } from "../types";
 import { queryFocusableElements } from "../utils";
-import { isMenuOpenAtom, isDropdownOpenAtom } from "./App";
 import { useSetAtom } from "jotai";
+import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
 
 export interface DialogProps {
   children: React.ReactNode;
@@ -67,12 +71,12 @@ export const Dialog = (props: DialogProps) => {
     return () => islandNode.removeEventListener("keydown", handleKeyDown);
   }, [islandNode, props.autofocus]);
 
-  const setIsMenuOpen = useSetAtom(isMenuOpenAtom);
-  const setIsDropdownOpen = useSetAtom(isDropdownOpenAtom);
+  const setAppState = useExcalidrawSetAppState();
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
 
   const onClose = () => {
-    setIsMenuOpen(false);
-    setIsDropdownOpen(false);
+    setAppState({ openMenu: null });
+    setIsLibraryMenuOpen(false);
     (lastActiveElement as HTMLElement).focus();
     props.onCloseRequest();
   };

src/components/HelpDialog.tsx

@@ -140,11 +140,11 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             />
             <Shortcut
               label={t("toolBar.line")}
-              shortcuts={[KEYS.P, KEYS["6"]]}
+              shortcuts={[KEYS.L, KEYS["6"]]}
             />
             <Shortcut
               label={t("toolBar.freedraw")}
-              shortcuts={["Shift + P", KEYS["7"]]}
+              shortcuts={[KEYS.P, KEYS["7"]]}
             />
             <Shortcut
               label={t("toolBar.text")}

src/components/JSONExportDialog.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React from "react";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 
 import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
-import { ExportIcon, exportToFileIcon, LinkIcon } from "./icons";
+import { exportToFileIcon, LinkIcon } from "./icons";
 import { ToolButton } from "./ToolButton";
 import { actionSaveFileToDisk } from "../actions/actionExport";
 import { Card } from "./Card";
@@ -14,7 +14,6 @@ import { nativeFileSystemSupported } from "../data/filesystem";
 import { trackEvent } from "../analytics";
 import { ActionManager } from "../actions/manager";
 import { getFrame } from "../utils";
-import MenuItem from "./MenuItem";
 
 export type ExportCB = (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -94,6 +93,7 @@ export const JSONExportDialog = ({
   actionManager,
   exportOpts,
   canvas,
+  setAppState,
 }: {
   elements: readonly NonDeletedExcalidrawElement[];
   appState: AppState;
@@ -101,24 +101,15 @@ export const JSONExportDialog = ({
   actionManager: ActionManager;
   exportOpts: ExportOpts;
   canvas: HTMLCanvasElement | null;
+  setAppState: React.Component<any, AppState>["setState"];
 }) => {
-  const [modalIsShown, setModalIsShown] = useState(false);
-
   const handleClose = React.useCallback(() => {
-    setModalIsShown(false);
-  }, []);
+    setAppState({ openDialog: null });
+  }, [setAppState]);
 
   return (
     <>
-      <MenuItem
-        icon={ExportIcon}
-        label={t("buttons.export")}
-        onClick={() => {
-          setModalIsShown(true);
-        }}
-        dataTestId="json-export-button"
-      />
-      {modalIsShown && (
+      {appState.openDialog === "jsonExport" && (
         <Dialog onCloseRequest={handleClose} title={t("buttons.export")}>
           <JSONExportModal
             elements={elements}

src/components/LayerUI.scss

@@ -80,16 +80,6 @@
       }
     }
 
-    .layer-ui__wrapper__footer-center {
-      pointer-events: none;
-      & > * {
-        pointer-events: all;
-      }
-
-      display: flex;
-      width: 100%;
-      justify-content: flex-start;
-    }
     .layer-ui__wrapper__footer-left,
     .layer-ui__wrapper__footer-right,
     .disable-zen-mode--visible {

src/components/LayerUI.tsx

@@ -41,26 +41,17 @@ import "./LayerUI.scss";
 import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
 import { trackEvent } from "../analytics";
-import { isMenuOpenAtom, useDevice } from "../components/App";
+import { useDevice } from "../components/App";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
 import Footer from "./footer/Footer";
-import {
-  ExportImageIcon,
-  HamburgerMenuIcon,
-  WelcomeScreenMenuArrow,
-  WelcomeScreenTopToolbarArrow,
-} from "./icons";
-import { MenuLinks, Separator } from "./MenuUtils";
-import { useOutsideClickHook } from "../hooks/useOutsideClick";
+import { WelcomeScreenMenuArrow, WelcomeScreenTopToolbarArrow } from "./icons";
 import WelcomeScreen from "./WelcomeScreen";
 import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
 import { useAtom } from "jotai";
-import { LanguageList } from "../excalidraw-app/components/LanguageList";
 import WelcomeScreenDecor from "./WelcomeScreenDecor";
-import { getShortcutFromShortcutName } from "../actions/shortcuts";
-import MenuItem from "./MenuItem";
+import MainMenu from "./mainMenu/MainMenu";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -103,7 +94,6 @@ const LayerUI = ({
   showExitZenModeBtn,
   isCollaborating,
   renderTopRightUI,
-
   renderCustomStats,
   renderCustomSidebar,
   libraryReturnUrl,
@@ -133,6 +123,7 @@ const LayerUI = ({
         actionManager={actionManager}
         exportOpts={UIOptions.canvasActions.export}
         canvas={canvas}
+        setAppState={setAppState}
       />
     );
   };
@@ -186,9 +177,35 @@ const LayerUI = ({
     );
   };
 
-  const [isMenuOpen, setIsMenuOpen] = useAtom(isMenuOpenAtom);
-  const menuRef = useOutsideClickHook(() => setIsMenuOpen(false));
-
+  const renderMenu = () => {
+    return (
+      childrenComponents.Menu || (
+        <MainMenu>
+          <MainMenu.DefaultItems.LoadScene />
+          <MainMenu.DefaultItems.SaveToActiveFile />
+          {UIOptions.canvasActions.export && <MainMenu.DefaultItems.Export />}
+          {UIOptions.canvasActions.saveAsImage && (
+            <MainMenu.DefaultItems.SaveAsImage />
+          )}
+          {onCollabButtonClick && (
+            <MainMenu.DefaultItems.LiveCollaboration
+              onSelect={onCollabButtonClick}
+              isCollaborating={isCollaborating}
+            />
+          )}
+          <MainMenu.DefaultItems.Help />
+          <MainMenu.DefaultItems.ClearCanvas />
+          <MainMenu.Separator />
+          <MainMenu.Group title="Excalidraw links">
+            <MainMenu.DefaultItems.Socials />
+          </MainMenu.Group>
+          <MainMenu.Separator />
+          <MainMenu.DefaultItems.ToggleTheme />
+          <MainMenu.DefaultItems.ChangeCanvasBackground />
+        </MainMenu>
+      )
+    );
+  };
   const renderCanvasActions = () => (
     <div style={{ position: "relative" }}>
       <WelcomeScreenDecor
@@ -199,87 +216,7 @@ const LayerUI = ({
           <div>{t("welcomeScreen.menuHints")}</div>
         </div>
       </WelcomeScreenDecor>
-
-      <button
-        data-prevent-outside-click
-        className={clsx("menu-button", "zen-mode-transition", {
-          "transition-left": appState.zenModeEnabled,
-        })}
-        onClick={() => setIsMenuOpen(!isMenuOpen)}
-        type="button"
-        data-testid="menu-button"
-      >
-        {HamburgerMenuIcon}
-      </button>
-
-      {isMenuOpen && (
-        <div
-          ref={menuRef}
-          style={{ position: "absolute", top: "100%", marginTop: ".25rem" }}
-        >
-          <Section heading="canvasActions">
-            {/* the zIndex ensures this menu has higher stacking order,
-         see https://github.com/excalidraw/excalidraw/pull/1445 */}
-            <Island
-              className="menu-container"
-              padding={2}
-              style={{ zIndex: 1 }}
-            >
-              {!appState.viewModeEnabled &&
-                actionManager.renderAction("loadScene")}
-              {/* // TODO barnabasmolnar/editor-redesign  */}
-              {/* is this fine here? */}
-              {appState.fileHandle &&
-                actionManager.renderAction("saveToActiveFile")}
-              {renderJSONExportDialog()}
-              {UIOptions.canvasActions.saveAsImage && (
-                <MenuItem
-                  label={t("buttons.exportImage")}
-                  icon={ExportImageIcon}
-                  dataTestId="image-export-button"
-                  onClick={() => setAppState({ openDialog: "imageExport" })}
-                  shortcut={getShortcutFromShortcutName("imageExport")}
-                />
-              )}
-              {onCollabButtonClick && (
-                <CollabButton
-                  isCollaborating={isCollaborating}
-                  collaboratorCount={appState.collaborators.size}
-                  onClick={onCollabButtonClick}
-                />
-              )}
-              {actionManager.renderAction("toggleShortcuts", undefined, true)}
-              {!appState.viewModeEnabled &&
-                actionManager.renderAction("clearCanvas")}
-              <Separator />
-              <MenuLinks />
-              <Separator />
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  rowGap: ".5rem",
-                }}
-              >
-                <div>{actionManager.renderAction("toggleTheme")}</div>
-                <div style={{ padding: "0 0.625rem" }}>
-                  <LanguageList style={{ width: "100%" }} />
-                </div>
-                {!appState.viewModeEnabled && (
-                  <div>
-                    <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
-                      {t("labels.canvasBackground")}
-                    </div>
-                    <div style={{ padding: "0 0.625rem" }}>
-                      {actionManager.renderAction("changeViewBackgroundColor")}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </Island>
-          </Section>
-        </div>
-      )}
+      {renderMenu()}
     </div>
   );
 
@@ -410,10 +347,7 @@ const LayerUI = ({
               },
             )}
           >
-            <UserList
-              collaborators={appState.collaborators}
-              actionManager={actionManager}
-            />
+            <UserList collaborators={appState.collaborators} />
             {onCollabButtonClick && (
               <CollabButton
                 isInHamburgerMenu={false}
@@ -466,6 +400,7 @@ const LayerUI = ({
         />
       )}
       {renderImageExportDialog()}
+      {renderJSONExportDialog()}
       {appState.pasteDialog.shown && (
         <PasteChartDialog
           setAppState={setAppState}
@@ -497,6 +432,7 @@ const LayerUI = ({
           renderCustomStats={renderCustomStats}
           renderSidebars={renderSidebars}
           device={device}
+          renderMenu={renderMenu}
         />
       )}
 
@@ -525,9 +461,8 @@ const LayerUI = ({
               appState={appState}
               actionManager={actionManager}
               showExitZenModeBtn={showExitZenModeBtn}
-            >
-              {childrenComponents.FooterCenter}
-            </Footer>
+              footerCenter={childrenComponents.FooterCenter}
+            />
 
             {appState.showStats && (
               <Stats

src/components/LibraryMenu.scss

@@ -129,4 +129,27 @@
       padding-right: 0;
     }
   }
+
+  .layer-ui__sidebar__header .dropdown-menu {
+    &.dropdown-menu--mobile {
+      top: 100%;
+    }
+    .dropdown-menu-container {
+      --gap: 0;
+      z-index: 1;
+      position: absolute;
+      top: 100%;
+      left: 0;
+
+      :root[dir="rtl"] & {
+        right: 0;
+        left: auto;
+      }
+
+      width: 196px;
+      box-shadow: var(--library-dropdown-shadow);
+      border-radius: var(--border-radius-lg);
+      padding: 0.25rem 0.5rem;
+    }
+  }
 }

src/components/LibraryMenuHeaderContent.tsx

@@ -13,14 +13,15 @@ import {
 import { ToolButton } from "./ToolButton";
 import { fileOpen } from "../data/filesystem";
 import { muteFSAbortError } from "../utils";
-import { useAtom } from "jotai";
+import { atom, useAtom } from "jotai";
 import { jotaiScope } from "../jotai";
 import ConfirmDialog from "./ConfirmDialog";
 import PublishLibrary from "./PublishLibrary";
 import { Dialog } from "./Dialog";
-import { useOutsideClickHook } from "../hooks/useOutsideClick";
-import MenuItem from "./MenuItem";
-import { isDropdownOpenAtom } from "./App";
+
+import DropdownMenu from "./dropdownMenu/DropdownMenu";
+
+export const isLibraryMenuOpenAtom = atom(false);
 
 const getSelectedItems = (
   libraryItems: LibraryItems,
@@ -45,7 +46,9 @@ export const LibraryMenuHeader: React.FC<{
   appState,
 }) => {
   const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
-
+  const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(
+    isLibraryMenuOpenAtom,
+  );
   const renderRemoveLibAlert = useCallback(() => {
     const content = selectedItems.length
       ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
@@ -173,85 +176,86 @@ export const LibraryMenuHeader: React.FC<{
       });
   };
 
-  const [isDropdownOpen, setIsDropdownOpen] = useAtom(isDropdownOpenAtom);
-  const dropdownRef = useOutsideClickHook(() => setIsDropdownOpen(false));
-
+  const renderLibraryMenu = () => {
+    return (
+      <DropdownMenu open={isLibraryMenuOpen}>
+        <DropdownMenu.Trigger
+          className="Sidebar__dropdown-btn"
+          onToggle={() => setIsLibraryMenuOpen(!isLibraryMenuOpen)}
+        >
+          {DotsIcon}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          onClickOutside={() => setIsLibraryMenuOpen(false)}
+          className="library-menu"
+        >
+          {!itemsSelected && (
+            <DropdownMenu.Item
+              onSelect={onLibraryImport}
+              icon={LoadIcon}
+              dataTestId="lib-dropdown--load"
+            >
+              {t("buttons.load")}
+            </DropdownMenu.Item>
+          )}
+          {!!items.length && (
+            <DropdownMenu.Item
+              onSelect={onLibraryExport}
+              icon={ExportIcon}
+              dataTestId="lib-dropdown--export"
+            >
+              {t("buttons.export")}
+            </DropdownMenu.Item>
+          )}
+          {!!items.length && (
+            <DropdownMenu.Item
+              onSelect={() => setShowRemoveLibAlert(true)}
+              icon={TrashIcon}
+            >
+              {resetLabel}
+            </DropdownMenu.Item>
+          )}
+          {itemsSelected && (
+            <DropdownMenu.Item
+              icon={publishIcon}
+              onSelect={() => setShowPublishLibraryDialog(true)}
+              dataTestId="lib-dropdown--remove"
+            >
+              {t("buttons.publishLibrary")}
+            </DropdownMenu.Item>
+          )}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    );
+  };
   return (
     <div style={{ position: "relative" }}>
-      <button
-        type="button"
-        className="Sidebar__dropdown-btn"
-        data-prevent-outside-click
-        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-      >
-        {DotsIcon}
-      </button>
-
+      {renderLibraryMenu()}
       {selectedItems.length > 0 && (
         <div className="library-actions-counter">{selectedItems.length}</div>
       )}
-
-      {isDropdownOpen && (
-        <div
-          className="Sidebar__dropdown-content menu-container"
-          ref={dropdownRef}
-        >
-          {!itemsSelected && (
-            <MenuItem
-              label={t("buttons.load")}
-              icon={LoadIcon}
-              dataTestId="lib-dropdown--load"
-              onClick={onLibraryImport}
-            />
+      {showRemoveLibAlert && renderRemoveLibAlert()}
+      {showPublishLibraryDialog && (
+        <PublishLibrary
+          onClose={() => setShowPublishLibraryDialog(false)}
+          libraryItems={getSelectedItems(
+            libraryItemsData.libraryItems,
+            selectedItems,
           )}
-          {showRemoveLibAlert && renderRemoveLibAlert()}
-          {showPublishLibraryDialog && (
-            <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: string) =>
-                onSelectItems(selectedItems.filter((_id) => _id !== id))
-              }
-            />
-          )}
-          {publishLibSuccess && renderPublishSuccess()}
-          {!!items.length && (
-            <>
-              <MenuItem
-                label={t("buttons.export")}
-                icon={ExportIcon}
-                onClick={onLibraryExport}
-                dataTestId="lib-dropdown--export"
-              />
-              <MenuItem
-                label={resetLabel}
-                icon={TrashIcon}
-                onClick={() => setShowRemoveLibAlert(true)}
-                dataTestId="lib-dropdown--remove"
-              />
-            </>
-          )}
-          {itemsSelected && (
-            <MenuItem
-              label={t("buttons.publishLibrary")}
-              icon={publishIcon}
-              dataTestId="lib-dropdown--publish"
-              onClick={() => setShowPublishLibraryDialog(true)}
-            />
-          )}
-        </div>
+          appState={appState}
+          onSuccess={(data) =>
+            onPublishLibSuccess(data, libraryItemsData.libraryItems)
+          }
+          onError={(error) => window.alert(error)}
+          updateItemsInStorage={() =>
+            library.setLibrary(libraryItemsData.libraryItems)
+          }
+          onRemove={(id: string) =>
+            onSelectItems(selectedItems.filter((_id) => _id !== id))
+          }
+        />
       )}
+      {publishLibSuccess && renderPublishSuccess()}
     </div>
   );
 };

src/components/Menu.scss

@@ -1,85 +0,0 @@
-@import "../css/variables.module";
-
-.excalidraw {
-  .menu-container {
-    background-color: #fff !important;
-    max-height: calc(100vh - 150px);
-    overflow-y: auto;
-  }
-
-  .menu-button {
-    @include outlineButtonStyles;
-    background-color: var(--island-bg-color);
-    width: var(--lg-button-size);
-    height: var(--lg-button-size);
-
-    svg {
-      width: var(--lg-icon-size);
-      height: var(--lg-icon-size);
-    }
-  }
-
-  .menu-item {
-    display: flex;
-    background-color: transparent;
-    border: 0;
-    align-items: center;
-    padding: 0 0.625rem;
-    height: 2rem;
-    column-gap: 0.625rem;
-    font-size: 0.875rem;
-    color: var(--color-gray-100);
-    cursor: pointer;
-    border-radius: var(--border-radius-md);
-    width: 100%;
-    box-sizing: border-box;
-    font-weight: normal;
-    font-family: inherit;
-
-    @media screen and (min-width: 1921px) {
-      height: 2.25rem;
-    }
-
-    &__text {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    &__shortcut {
-      margin-inline-start: auto;
-      opacity: 0.5;
-    }
-
-    &:hover {
-      background-color: var(--button-hover);
-      text-decoration: none;
-    }
-
-    svg {
-      width: 1rem;
-      height: 1rem;
-      display: block;
-    }
-
-    &.active-collab {
-      background-color: #ecfdf5;
-      color: #064e3c;
-    }
-  }
-
-  &.theme--dark {
-    .menu-item {
-      color: var(--color-gray-40);
-
-      &.active-collab {
-        background-color: #064e3c;
-        color: #ecfdf5;
-      }
-    }
-
-    .menu-container {
-      background-color: var(--color-gray-90) !important;
-    }
-  }
-}

src/components/MenuItem.tsx

@@ -1,37 +0,0 @@
-import clsx from "clsx";
-import "./Menu.scss";
-
-interface MenuProps {
-  icon: JSX.Element;
-  onClick: () => void;
-  label: string;
-  dataTestId: string;
-  shortcut?: string;
-  isCollaborating?: boolean;
-}
-
-const MenuItem = ({
-  icon,
-  onClick,
-  label,
-  dataTestId,
-  shortcut,
-  isCollaborating,
-}: MenuProps) => {
-  return (
-    <button
-      className={clsx("menu-item", { "active-collab": isCollaborating })}
-      aria-label={label}
-      onClick={onClick}
-      data-testid={dataTestId}
-      title={label}
-      type="button"
-    >
-      <div className="menu-item__icon">{icon}</div>
-      <div className="menu-item__text">{label}</div>
-      {shortcut && <div className="menu-item__shortcut">{shortcut}</div>}
-    </button>
-  );
-};
-
-export default MenuItem;

src/components/MenuUtils.tsx

@@ -1,53 +0,0 @@
-import { GithubIcon, DiscordIcon, PlusPromoIcon, TwitterIcon } from "./icons";
-
-export const MenuLinks = () => (
-  <>
-    <a
-      href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
-      target="_blank"
-      rel="noreferrer"
-      className="menu-item"
-      style={{ color: "var(--color-promo)" }}
-    >
-      <div className="menu-item__icon">{PlusPromoIcon}</div>
-      <div className="menu-item__text">Excalidraw+</div>
-    </a>
-    <a
-      className="menu-item"
-      href="https://github.com/excalidraw/excalidraw"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <div className="menu-item__icon">{GithubIcon}</div>
-      <div className="menu-item__text">GitHub</div>
-    </a>
-    <a
-      className="menu-item"
-      target="_blank"
-      href="https://discord.gg/UexuTaE"
-      rel="noopener noreferrer"
-    >
-      <div className="menu-item__icon">{DiscordIcon}</div>
-      <div className="menu-item__text">Discord</div>
-    </a>
-    <a
-      className="menu-item"
-      target="_blank"
-      href="https://twitter.com/excalidraw"
-      rel="noopener noreferrer"
-    >
-      <div className="menu-item__icon">{TwitterIcon}</div>
-      <div className="menu-item__text">Twitter</div>
-    </a>
-  </>
-);
-
-export const Separator = () => (
-  <div
-    style={{
-      height: "1px",
-      backgroundColor: "var(--default-border-color)",
-      margin: ".5rem 0",
-    }}
-  />
-);

src/components/MobileMenu.tsx

@@ -11,18 +11,13 @@ import { HintViewer } from "./HintViewer";
 import { calculateScrollCenter } from "../scene";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
-import CollabButton from "./CollabButton";
 import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 import { LockButton } from "./LockButton";
-import { UserList } from "./UserList";
 import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
-import { MenuLinks, Separator } from "./MenuUtils";
 import WelcomeScreen from "./WelcomeScreen";
-import MenuItem from "./MenuItem";
-import { ExportImageIcon } from "./icons";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -46,16 +41,14 @@ type MobileMenuProps = {
   renderSidebars: () => JSX.Element | null;
   device: Device;
   renderWelcomeScreen?: boolean;
+  renderMenu: () => React.ReactNode;
 };
 
 export const MobileMenu = ({
   appState,
   elements,
   actionManager,
-  renderJSONExportDialog,
-  renderImageExportDialog,
   setAppState,
-  onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   canvas,
@@ -66,6 +59,7 @@ export const MobileMenu = ({
   renderSidebars,
   device,
   renderWelcomeScreen,
+  renderMenu,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
@@ -147,16 +141,12 @@ export const MobileMenu = ({
 
   const renderAppToolbar = () => {
     if (appState.viewModeEnabled) {
-      return (
-        <div className="App-toolbar-content">
-          {actionManager.renderAction("toggleCanvasMenu")}
-        </div>
-      );
+      return <div className="App-toolbar-content">{renderMenu()}</div>;
     }
 
     return (
       <div className="App-toolbar-content">
-        {actionManager.renderAction("toggleCanvasMenu")}
+        {renderMenu()}
         {actionManager.renderAction("toggleEditMenu")}
         {actionManager.renderAction("undo")}
         {actionManager.renderAction("redo")}
@@ -168,58 +158,6 @@ export const MobileMenu = ({
     );
   };
 
-  const renderCanvasActions = () => {
-    if (appState.viewModeEnabled) {
-      return (
-        <>
-          {renderJSONExportDialog()}
-          <MenuItem
-            label={t("buttons.exportImage")}
-            icon={ExportImageIcon}
-            dataTestId="image-export-button"
-            onClick={() => setAppState({ openDialog: "imageExport" })}
-          />
-          {renderImageExportDialog()}
-        </>
-      );
-    }
-    return (
-      <>
-        {!appState.viewModeEnabled && actionManager.renderAction("loadScene")}
-        {renderJSONExportDialog()}
-        {renderImageExportDialog()}
-        <MenuItem
-          label={t("buttons.exportImage")}
-          icon={ExportImageIcon}
-          dataTestId="image-export-button"
-          onClick={() => setAppState({ openDialog: "imageExport" })}
-        />
-        {onCollabButtonClick && (
-          <CollabButton
-            isCollaborating={isCollaborating}
-            collaboratorCount={appState.collaborators.size}
-            onClick={onCollabButtonClick}
-          />
-        )}
-        {actionManager.renderAction("toggleShortcuts", undefined, true)}
-        {!appState.viewModeEnabled && actionManager.renderAction("clearCanvas")}
-        <Separator />
-        <MenuLinks />
-        <Separator />
-        {!appState.viewModeEnabled && (
-          <div style={{ marginBottom: ".5rem" }}>
-            <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
-              {t("labels.canvasBackground")}
-            </div>
-            <div style={{ padding: "0 0.625rem" }}>
-              {actionManager.renderAction("changeViewBackgroundColor")}
-            </div>
-          </div>
-        )}
-        {actionManager.renderAction("toggleTheme")}
-      </>
-    );
-  };
   return (
     <>
       {renderSidebars()}
@@ -244,27 +182,9 @@ export const MobileMenu = ({
         }}
       >
         <Island padding={0}>
-          {appState.openMenu === "canvas" ? (
-            <Section className="App-mobile-menu" heading="canvasActions">
-              <div className="panelColumn">
-                <Stack.Col gap={2}>
-                  {renderCanvasActions()}
-                  {appState.collaborators.size > 0 && (
-                    <fieldset>
-                      <legend>{t("labels.collaborators")}</legend>
-                      <UserList
-                        mobile
-                        collaborators={appState.collaborators}
-                        actionManager={actionManager}
-                      />
-                    </fieldset>
-                  )}
-                </Stack.Col>
-              </div>
-            </Section>
-          ) : appState.openMenu === "shape" &&
-            !appState.viewModeEnabled &&
-            showSelectedShapeActions(appState, elements) ? (
+          {appState.openMenu === "shape" &&
+          !appState.viewModeEnabled &&
+          showSelectedShapeActions(appState, elements) ? (
             <Section className="App-mobile-menu" heading="selectedShapeActions">
               <SelectedShapeActions
                 appState={appState}

src/components/Modal.scss

@@ -3,7 +3,7 @@
 .excalidraw {
   &.excalidraw-modal-container {
     position: absolute;
-    z-index: 10;
+    z-index: 9999;
   }
 
   .Modal {

src/components/Sidebar/Sidebar.scss

@@ -3,24 +3,6 @@
 
 .excalidraw {
   .Sidebar {
-    &__dropdown-content {
-      z-index: 1;
-      position: absolute;
-      top: 100%;
-      left: 0;
-
-      :root[dir="rtl"] & {
-        right: 0;
-        left: auto;
-      }
-
-      margin-top: 0.25rem;
-      width: 180px;
-      box-shadow: var(--library-dropdown-shadow);
-      border-radius: var(--border-radius-lg);
-      padding: 0.25rem 0.5rem;
-    }
-
     &__close-btn,
     &__pin-btn,
     &__dropdown-btn {

src/components/UserList.tsx

@@ -4,16 +4,16 @@ import React from "react";
 import clsx from "clsx";
 import { AppState, Collaborator } from "../types";
 import { Tooltip } from "./Tooltip";
-import { ActionManager } from "../actions/manager";
+import { useExcalidrawActionManager } from "./App";
 
 export const UserList: React.FC<{
   className?: string;
   mobile?: boolean;
   collaborators: AppState["collaborators"];
-  actionManager: ActionManager;
-}> = ({ className, mobile, collaborators, actionManager }) => {
-  const uniqueCollaborators = new Map<string, Collaborator>();
+}> = ({ className, mobile, collaborators }) => {
+  const actionManager = useExcalidrawActionManager();
 
+  const uniqueCollaborators = new Map<string, Collaborator>();
   collaborators.forEach((collaborator, socketId) => {
     uniqueCollaborators.set(
       // filter on user id, else fall back on unique socketId
@@ -44,26 +44,6 @@ export const UserList: React.FC<{
         );
       });
 
-  // TODO barnabasmolnar/editor-redesign
-  // probably remove before shipping :)
-  // 20 fake collaborators; for easy, convenient debug purposes ˇˇ
-  // const avatars = Array.from({ length: 20 }).map((_, index) => {
-  //   const avatarJSX = actionManager.renderAction("goToCollaborator", [
-  //     index.toString(),
-  //     {
-  //       username: `User ${index}`,
-  //     },
-  //   ]);
-
-  //   return mobile ? (
-  //     <Tooltip label={`User ${index}`} key={index}>
-  //       {avatarJSX}
-  //     </Tooltip>
-  //   ) : (
-  //     <React.Fragment key={index}>{avatarJSX}</React.Fragment>
-  //   );
-  // });
-
   return (
     <div className={clsx("UserList", className, { UserList_mobile: mobile })}>
       {avatars}

src/components/WelcomeScreen.tsx

@@ -1,18 +1,10 @@
-import { useAtom } from "jotai";
 import { actionLoadScene, actionShortcuts } from "../actions";
 import { ActionManager } from "../actions/manager";
 import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { isExcalidrawPlusSignedUser } from "../constants";
-import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab";
 import { t } from "../i18n";
 import { AppState } from "../types";
-import {
-  ExcalLogo,
-  HelpIcon,
-  LoadIcon,
-  PlusPromoIcon,
-  UsersIcon,
-} from "./icons";
+import { ExcalLogo, HelpIcon, LoadIcon, PlusPromoIcon } from "./icons";
 import "./WelcomeScreen.scss";
 
 const WelcomeScreenItem = ({
@@ -64,8 +56,6 @@ const WelcomeScreen = ({
   appState: AppState;
   actionManager: ActionManager;
 }) => {
-  const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
-
   let subheadingJSX;
 
   if (isExcalidrawPlusSignedUser) {
@@ -109,12 +99,6 @@ const WelcomeScreen = ({
             icon={LoadIcon}
           />
         )}
-        <WelcomeScreenItem
-          label={t("labels.liveCollaboration")}
-          shortcut={null}
-          onClick={() => setCollabDialogShown(true)}
-          icon={UsersIcon}
-        />
         <WelcomeScreenItem
           onClick={() => actionManager.executeAction(actionShortcuts)}
           label={t("helpDialog.title")}

src/components/dropdownMenu/DropdownMenu.scss

@@ -0,0 +1,127 @@
+@import "../../css/variables.module";
+
+.excalidraw {
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    margin-top: 0.25rem;
+
+    &--mobile {
+      bottom: 55px;
+      top: auto;
+      left: 0;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      row-gap: 0.75rem;
+
+      .dropdown-menu-container {
+        padding: 8px 8px;
+        box-sizing: border-box;
+        background-color: var(--island-bg-color);
+        box-shadow: var(--shadow-island);
+        border-radius: var(--border-radius-lg);
+        position: relative;
+        transition: box-shadow 0.5s ease-in-out;
+
+        &.zen-mode {
+          box-shadow: none;
+        }
+      }
+    }
+
+    .dropdown-menu-container {
+      background-color: #fff !important;
+      max-height: calc(100vh - 150px);
+      overflow-y: auto;
+      --gap: 2;
+    }
+
+    .dropdown-menu-item-base {
+      display: flex;
+      padding: 0 0.625rem;
+      column-gap: 0.625rem;
+      font-size: 0.875rem;
+      color: var(--color-gray-100);
+      width: 100%;
+      box-sizing: border-box;
+      font-weight: normal;
+      font-family: inherit;
+    }
+
+    .dropdown-menu-item {
+      background-color: transparent;
+      border: 0;
+      align-items: center;
+      height: 2rem;
+      cursor: pointer;
+      border-radius: var(--border-radius-md);
+
+      @media screen and (min-width: 1921px) {
+        height: 2.25rem;
+      }
+
+      &__text {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      &__shortcut {
+        margin-inline-start: auto;
+        opacity: 0.5;
+      }
+
+      &:hover {
+        background-color: var(--button-hover);
+        text-decoration: none;
+      }
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+        display: block;
+      }
+    }
+
+    .dropdown-menu-item-custom {
+      margin-top: 0.5rem;
+    }
+
+    .dropdown-menu-group-title {
+      font-size: 14px;
+      text-align: left;
+      margin: 10px 0;
+      font-weight: 500;
+    }
+  }
+  &.theme--dark {
+    .dropdown-menu-item {
+      color: var(--color-gray-40);
+    }
+
+    .dropdown-menu-container {
+      background-color: var(--color-gray-90) !important;
+    }
+  }
+
+  .dropdown-menu-button {
+    @include outlineButtonStyles;
+    background-color: var(--island-bg-color);
+    width: var(--lg-button-size);
+    height: var(--lg-button-size);
+
+    svg {
+      width: var(--lg-icon-size);
+      height: var(--lg-icon-size);
+    }
+
+    &--mobile {
+      border: none;
+      margin: 0;
+      padding: 0;
+      width: var(--default-button-size);
+      height: var(--default-button-size);
+    }
+  }
+}

src/components/dropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import DropdownMenuTrigger from "./DropdownMenuTrigger";
+import DropdownMenuItem from "./DropdownMenuItem";
+import MenuSeparator from "./DropdownMenuSeparator";
+import DropdownMenuGroup from "./DropdownMenuGroup";
+import DropdownMenuContent from "./DropdownMenuContent";
+import DropdownMenuItemLink from "./DropdownMenuItemLink";
+import DropdownMenuItemCustom from "./DropdownMenuItemCustom";
+import {
+  getMenuContentComponent,
+  getMenuTriggerComponent,
+} from "./dropdownMenuUtils";
+
+import "./DropdownMenu.scss";
+
+const DropdownMenu = ({
+  children,
+  open,
+}: {
+  children?: React.ReactNode;
+  open: boolean;
+}) => {
+  const MenuTriggerComp = getMenuTriggerComponent(children);
+  const MenuContentComp = getMenuContentComponent(children);
+  return (
+    <>
+      {MenuTriggerComp}
+      {open && MenuContentComp}
+    </>
+  );
+};
+
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.ItemLink = DropdownMenuItemLink;
+DropdownMenu.ItemCustom = DropdownMenuItemCustom;
+DropdownMenu.Group = DropdownMenuGroup;
+DropdownMenu.Separator = MenuSeparator;
+
+export default DropdownMenu;
+
+DropdownMenu.displayName = "DropdownMenu";

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -0,0 +1,51 @@
+import { useOutsideClickHook } from "../../hooks/useOutsideClick";
+import { Island } from "../Island";
+
+import { useDevice } from "../App";
+import clsx from "clsx";
+import Stack from "../Stack";
+
+const MenuContent = ({
+  children,
+  onClickOutside,
+  className = "",
+  style,
+}: {
+  children?: React.ReactNode;
+  onClickOutside?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+}) => {
+  const device = useDevice();
+  const menuRef = useOutsideClickHook(() => {
+    onClickOutside?.();
+  });
+
+  const classNames = clsx(`dropdown-menu ${className}`, {
+    "dropdown-menu--mobile": device.isMobile,
+  }).trim();
+  return (
+    <div
+      ref={menuRef}
+      className={classNames}
+      style={style}
+      data-testid="dropdown-menu"
+    >
+      {/* the zIndex ensures this menu has higher stacking order,
+    see https://github.com/excalidraw/excalidraw/pull/1445 */}
+      {device.isMobile ? (
+        <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
+      ) : (
+        <Island
+          className="dropdown-menu-container"
+          padding={2}
+          style={{ zIndex: 1 }}
+        >
+          {children}
+        </Island>
+      )}
+    </div>
+  );
+};
+export default MenuContent;
+MenuContent.displayName = "DropdownMenuContent";

src/components/dropdownMenu/DropdownMenuGroup.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const MenuGroup = ({
+  children,
+  className = "",
+  style,
+  title,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  title?: string;
+}) => {
+  return (
+    <div className={`dropdown-menu-group ${className}`} style={style}>
+      {title && <p className="dropdown-menu-group-title">{title}</p>}
+      {children}
+    </div>
+  );
+};
+
+export default MenuGroup;
+MenuGroup.displayName = "DropdownMenuGroup";

src/components/dropdownMenu/DropdownMenuItem.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import MenuItemContent from "./DropdownMenuItemContent";
+
+export const getDrodownMenuItemClassName = (className = "") => {
+  return `dropdown-menu-item dropdown-menu-item-base ${className}`.trim();
+};
+
+const DropdownMenuItem = ({
+  icon,
+  onSelect,
+  children,
+  dataTestId,
+  shortcut,
+  className,
+  style,
+  ariaLabel,
+}: {
+  icon?: JSX.Element;
+  onSelect: () => void;
+  children: React.ReactNode;
+  dataTestId?: string;
+  shortcut?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  ariaLabel?: string;
+}) => {
+  return (
+    <button
+      aria-label={ariaLabel}
+      onClick={onSelect}
+      data-testid={dataTestId}
+      title={ariaLabel}
+      type="button"
+      className={getDrodownMenuItemClassName(className)}
+      style={style}
+    >
+      <MenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </MenuItemContent>
+    </button>
+  );
+};
+
+export default DropdownMenuItem;
+DropdownMenuItem.displayName = "DropdownMenuItem";

src/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -0,0 +1,23 @@
+import { useDevice } from "../App";
+
+const MenuItemContent = ({
+  icon,
+  shortcut,
+  children,
+}: {
+  icon?: JSX.Element;
+  shortcut?: string;
+  children: React.ReactNode;
+}) => {
+  const device = useDevice();
+  return (
+    <>
+      <div className="dropdown-menu-item__icon">{icon}</div>
+      <div className="dropdown-menu-item__text">{children}</div>
+      {shortcut && !device.isMobile && (
+        <div className="dropdown-menu-item__shortcut">{shortcut}</div>
+      )}
+    </>
+  );
+};
+export default MenuItemContent;

src/components/dropdownMenu/DropdownMenuItemCustom.tsx

@@ -0,0 +1,23 @@
+const DropdownMenuItemCustom = ({
+  children,
+  className = "",
+  style,
+  dataTestId,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  dataTestId?: string;
+}) => {
+  return (
+    <div
+      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
+      style={style}
+      data-testid={dataTestId}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DropdownMenuItemCustom;

src/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -0,0 +1,42 @@
+import MenuItemContent from "./DropdownMenuItemContent";
+import React from "react";
+import { getDrodownMenuItemClassName } from "./DropdownMenuItem";
+const DropdownMenuItemLink = ({
+  icon,
+  dataTestId,
+  shortcut,
+  href,
+  children,
+  className = "",
+  style,
+  ariaLabel,
+}: {
+  icon?: JSX.Element;
+  children: React.ReactNode;
+  dataTestId?: string;
+  shortcut?: string;
+  className?: string;
+  href: string;
+  style?: React.CSSProperties;
+  ariaLabel?: string;
+}) => {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className={getDrodownMenuItemClassName(className)}
+      style={style}
+      data-testid={dataTestId}
+      title={ariaLabel}
+      aria-label={ariaLabel}
+    >
+      <MenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </MenuItemContent>
+    </a>
+  );
+};
+
+export default DropdownMenuItemLink;
+DropdownMenuItemLink.displayName = "DropdownMenuItemLink";

src/components/dropdownMenu/DropdownMenuSeparator.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const MenuSeparator = () => (
+  <div
+    style={{
+      height: "1px",
+      backgroundColor: "var(--default-border-color)",
+      margin: ".5rem 0",
+    }}
+  />
+);
+
+export default MenuSeparator;
+MenuSeparator.displayName = "DropdownMenuSeparator";

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import { useDevice, useExcalidrawAppState } from "../App";
+
+const MenuTrigger = ({
+  className = "",
+  children,
+  onToggle,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  onToggle: () => void;
+}) => {
+  const appState = useExcalidrawAppState();
+  const device = useDevice();
+  const classNames = clsx(
+    `dropdown-menu-button ${className}`,
+    "zen-mode-transition",
+    {
+      "transition-left": appState.zenModeEnabled,
+      "dropdown-menu-button--mobile": device.isMobile,
+    },
+  ).trim();
+  return (
+    <button
+      data-prevent-outside-click
+      className={classNames}
+      onClick={onToggle}
+      type="button"
+      data-testid="dropdown-menu-button"
+    >
+      {children}
+    </button>
+  );
+};
+
+export default MenuTrigger;
+MenuTrigger.displayName = "DropdownMenuTrigger";

src/components/dropdownMenu/dropdownMenuUtils.ts

@@ -0,0 +1,35 @@
+import React from "react";
+
+export const getMenuTriggerComponent = (children: React.ReactNode) => {
+  const comp = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      typeof child.type !== "string" &&
+      //@ts-ignore
+      child?.type.displayName &&
+      //@ts-ignore
+      child.type.displayName === "DropdownMenuTrigger",
+  );
+  if (!comp) {
+    return null;
+  }
+  //@ts-ignore
+  return comp;
+};
+
+export const getMenuContentComponent = (children: React.ReactNode) => {
+  const comp = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      typeof child.type !== "string" &&
+      //@ts-ignore
+      child?.type.displayName &&
+      //@ts-ignore
+      child.type.displayName === "DropdownMenuContent",
+  );
+  if (!comp) {
+    return null;
+  }
+  //@ts-ignore
+  return comp;
+};

src/components/footer/Footer.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ActionManager } from "../../actions/manager";
 import { t } from "../../i18n";
-import { AppState } from "../../types";
+import { AppState, UIChildrenComponents } from "../../types";
 import {
   ExitZenModeAction,
   FinalizeAction,
@@ -13,20 +13,19 @@ import { WelcomeScreenHelpArrow } from "../icons";
 import { Section } from "../Section";
 import Stack from "../Stack";
 import WelcomeScreenDecor from "../WelcomeScreenDecor";
-import FooterCenter from "./FooterCenter";
 
 const Footer = ({
   appState,
   actionManager,
   showExitZenModeBtn,
   renderWelcomeScreen,
-  children,
+  footerCenter,
 }: {
   appState: AppState;
   actionManager: ActionManager;
   showExitZenModeBtn: boolean;
   renderWelcomeScreen: boolean;
-  children?: React.ReactNode;
+  footerCenter: UIChildrenComponents["FooterCenter"];
 }) => {
   const device = useDevice();
   const showFinalize =
@@ -71,7 +70,7 @@ const Footer = ({
           </Section>
         </Stack.Col>
       </div>
-      <FooterCenter>{children}</FooterCenter>
+      {footerCenter}
       <div
         className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
           "transition-right disable-pointerEvents": appState.zenModeEnabled,

src/components/footer/FooterCenter.scss

@@ -0,0 +1,10 @@
+.footer-center {
+  pointer-events: none;
+  & > * {
+    pointer-events: all;
+  }
+
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+}

src/components/footer/FooterCenter.tsx

@@ -1,11 +1,12 @@
 import clsx from "clsx";
 import { useExcalidrawAppState } from "../App";
+import "./FooterCenter.scss";
 
 const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
   const appState = useExcalidrawAppState();
   return (
     <div
-      className={clsx("layer-ui__wrapper__footer-center zen-mode-transition", {
+      className={clsx("footer-center zen-mode-transition", {
         "layer-ui__wrapper__footer-left--transition-bottom":
           appState.zenModeEnabled,
       })}

src/components/mainMenu/DefaultItems.tsx

@@ -0,0 +1,174 @@
+import clsx from "clsx";
+import { getShortcutFromShortcutName } from "../../actions/shortcuts";
+import { t } from "../../i18n";
+import {
+  useExcalidrawAppState,
+  useExcalidrawSetAppState,
+  useExcalidrawActionManager,
+} from "../App";
+import { ExportIcon, ExportImageIcon, UsersIcon } from "../icons";
+import { GithubIcon, DiscordIcon, TwitterIcon } from "../icons";
+import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
+import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
+
+export const LoadScene = () => {
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+  if (appState.viewModeEnabled) {
+    return null;
+  }
+  return actionManager.renderAction("loadScene");
+};
+LoadScene.displayName = "LoadScene";
+
+export const SaveToActiveFile = () => {
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+  if (!appState.fileHandle) {
+    return null;
+  }
+  return actionManager.renderAction("saveToActiveFile");
+};
+SaveToActiveFile.displayName = "SaveToActiveFile";
+
+export const SaveAsImage = () => {
+  const setAppState = useExcalidrawSetAppState();
+  // Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  return (
+    <DropdownMenuItem
+      icon={ExportImageIcon}
+      dataTestId="image-export-button"
+      onSelect={() => setAppState({ openDialog: "imageExport" })}
+      shortcut={getShortcutFromShortcutName("imageExport")}
+      ariaLabel={t("buttons.exportImage")}
+    >
+      {t("buttons.exportImage")}
+    </DropdownMenuItem>
+  );
+};
+SaveAsImage.displayName = "SaveAsImage";
+
+export const Help = () => {
+  // Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+
+  const actionManager = useExcalidrawActionManager();
+  return actionManager.renderAction("toggleShortcuts", undefined, true);
+};
+Help.displayName = "Help";
+
+export const ClearCanvas = () => {
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (appState.viewModeEnabled) {
+    return null;
+  }
+  return actionManager.renderAction("clearCanvas");
+};
+ClearCanvas.displayName = "ClearCanvas";
+
+export const ToggleTheme = () => {
+  // Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+  return actionManager.renderAction("toggleTheme");
+};
+ToggleTheme.displayName = "ToggleTheme";
+
+export const ChangeCanvasBackground = () => {
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (appState.viewModeEnabled) {
+    return null;
+  }
+  return (
+    <div style={{ marginTop: "0.5rem" }}>
+      <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
+        {t("labels.canvasBackground")}
+      </div>
+      <div style={{ padding: "0 0.625rem" }}>
+        {actionManager.renderAction("changeViewBackgroundColor")}
+      </div>
+    </div>
+  );
+};
+ChangeCanvasBackground.displayName = "ChangeCanvasBackground";
+
+export const Export = () => {
+  // Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  const setAppState = useExcalidrawSetAppState();
+  return (
+    <DropdownMenuItem
+      icon={ExportIcon}
+      onSelect={() => {
+        setAppState({ openDialog: "jsonExport" });
+      }}
+      dataTestId="json-export-button"
+      ariaLabel={t("buttons.export")}
+    >
+      {t("buttons.export")}
+    </DropdownMenuItem>
+  );
+};
+Export.displayName = "Export";
+
+export const Socials = () => (
+  <>
+    <DropdownMenuItemLink
+      icon={GithubIcon}
+      href="https://github.com/excalidraw/excalidraw"
+      ariaLabel="GitHub"
+    >
+      GitHub
+    </DropdownMenuItemLink>
+    <DropdownMenuItemLink
+      icon={DiscordIcon}
+      href="https://discord.gg/UexuTaE"
+      ariaLabel="Discord"
+    >
+      Discord
+    </DropdownMenuItemLink>
+    <DropdownMenuItemLink
+      icon={TwitterIcon}
+      href="https://twitter.com/excalidraw"
+      ariaLabel="Twitter"
+    >
+      Twitter
+    </DropdownMenuItemLink>
+  </>
+);
+Socials.displayName = "Socials";
+
+export const LiveCollaboration = ({
+  onSelect,
+  isCollaborating,
+}: {
+  onSelect: () => void;
+  isCollaborating: boolean;
+}) => {
+  // Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  return (
+    <DropdownMenuItem
+      dataTestId="collab-button"
+      icon={UsersIcon}
+      className={clsx({
+        "active-collab": isCollaborating,
+      })}
+      onSelect={onSelect}
+    >
+      {t("labels.liveCollaboration")}
+    </DropdownMenuItem>
+  );
+};
+
+LiveCollaboration.displayName = "LiveCollaboration";

src/components/mainMenu/MainMenu.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+  useDevice,
+  useExcalidrawAppState,
+  useExcalidrawSetAppState,
+} from "../App";
+import DropdownMenu from "../dropdownMenu/DropdownMenu";
+
+import * as DefaultItems from "./DefaultItems";
+
+import { UserList } from "../UserList";
+import { t } from "../../i18n";
+import { HamburgerMenuIcon } from "../icons";
+
+const MainMenu = ({ children }: { children?: React.ReactNode }) => {
+  const device = useDevice();
+  const appState = useExcalidrawAppState();
+  const setAppState = useExcalidrawSetAppState();
+  const onClickOutside = device.isMobile
+    ? undefined
+    : () => setAppState({ openMenu: null });
+  return (
+    <DropdownMenu open={appState.openMenu === "canvas"}>
+      <DropdownMenu.Trigger
+        onToggle={() => {
+          setAppState({
+            openMenu: appState.openMenu === "canvas" ? null : "canvas",
+          });
+        }}
+      >
+        {HamburgerMenuIcon}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content onClickOutside={onClickOutside}>
+        {children}
+        {device.isMobile && appState.collaborators.size > 0 && (
+          <fieldset className="UserList-Wrapper">
+            <legend>{t("labels.collaborators")}</legend>
+            <UserList mobile={true} collaborators={appState.collaborators} />
+          </fieldset>
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};
+
+MainMenu.Trigger = DropdownMenu.Trigger;
+MainMenu.Item = DropdownMenu.Item;
+MainMenu.ItemLink = DropdownMenu.ItemLink;
+MainMenu.ItemCustom = DropdownMenu.ItemCustom;
+MainMenu.Group = DropdownMenu.Group;
+MainMenu.Separator = DropdownMenu.Separator;
+MainMenu.DefaultItems = DefaultItems;
+
+export default MainMenu;
+
+MainMenu.displayName = "Menu";

src/css/styles.scss

@@ -569,6 +569,20 @@
       display: none;
     }
   }
+  .UserList-Wrapper {
+    margin: 0;
+    padding: 0;
+    border: none;
+    text-align: left;
+
+    legend {
+      display: block;
+      font-size: 0.75rem;
+      font-weight: 400;
+      margin: 0 0 0.25rem;
+      padding: 0;
+    }
+  }
 }
 
 .ErrorSplash.excalidraw {

src/excalidraw-app/collab/Collab.tsx

@@ -263,13 +263,6 @@ class Collab extends PureComponent<Props, CollabState> {
       ),
     );
 
-    if (this.portal.socket && this.fallbackInitializationHandler) {
-      this.portal.socket.off(
-        "connect_error",
-        this.fallbackInitializationHandler,
-      );
-    }
-
     if (!keepRemoteState) {
       LocalData.fileStorage.reset();
       this.destroySocketClient();
@@ -365,8 +358,6 @@ class Collab extends PureComponent<Props, CollabState> {
     }
   };
 
-  private fallbackInitializationHandler: null | (() => any) = null;
-
   startCollaboration = async (
     existingRoomLinkData: null | { roomId: string; roomKey: string },
   ): Promise<ImportedDataState | null> => {
@@ -405,7 +396,6 @@ class Collab extends PureComponent<Props, CollabState> {
         scenePromise.resolve(scene);
       });
     };
-    this.fallbackInitializationHandler = fallbackInitializationHandler;
 
     try {
       const socketServerData = await getCollabServer();
@@ -420,7 +410,27 @@ class Collab extends PureComponent<Props, CollabState> {
         roomKey,
       );
 
-      this.portal.socket.once("connect_error", fallbackInitializationHandler);
+      this.portal.socket.on("disconnect", (reason) => {
+        // reason `io server disconnect` probably means CORS issue
+        console.warn(
+          `${
+            this.portal.socketInitialized ? "initialized" : "uninitialized"
+          } socket disconnected from server: ${reason}`,
+        );
+        this.setState({
+          errorMessage: this.portal.socketInitialized
+            ? t("errors.socketDisconnected")
+            : t("errors.socketConnectionError"),
+        });
+        fallbackInitializationHandler();
+      });
+
+      this.portal.socket.on("connect_error", () => {
+        fallbackInitializationHandler();
+        this.setState({
+          errorMessage: t("errors.socketConnectionError"),
+        });
+      });
     } catch (error: any) {
       console.error(error);
       this.setState({ errorMessage: error.message });
@@ -447,6 +457,7 @@ class Collab extends PureComponent<Props, CollabState> {
       this.saveCollabRoomToFirebase(getSyncableElements(elements));
     }
 
+    clearTimeout(this.socketInitializationTimer!);
     // fallback in case you're not alone in the room but still don't receive
     // initial SCENE_INIT message
     this.socketInitializationTimer = window.setTimeout(
@@ -557,12 +568,12 @@ class Collab extends PureComponent<Props, CollabState> {
       }
     | { fetchScene: false; roomLinkData?: null }) => {
     clearTimeout(this.socketInitializationTimer!);
-    if (this.portal.socket && this.fallbackInitializationHandler) {
-      this.portal.socket.off(
-        "connect_error",
-        this.fallbackInitializationHandler,
-      );
+
+    if (!this.portal.socket || this.portal.socketInitialized) {
+      return null;
     }
+    this.portal.socketInitialized = true;
+
     if (fetchScene && roomLinkData && this.portal.socket) {
       this.excalidrawAPI.resetScene();
 
@@ -585,11 +596,7 @@ class Collab extends PureComponent<Props, CollabState> {
       } catch (error: any) {
         // log the error and move on. other peers will sync us the scene.
         console.error(error);
-      } finally {
-        this.portal.socketInitialized = true;
       }
-    } else {
-      this.portal.socketInitialized = true;
     }
     return null;
   };

src/excalidraw-app/collab/Portal.tsx

@@ -19,10 +19,11 @@ import { newElementWith } from "../../element/mutateElement";
 import { BroadcastedExcalidrawElement } from "./reconciliation";
 import { encryptData } from "../../data/encryption";
 import { PRECEDING_ELEMENT_KEY } from "../../constants";
+import { Socket } from "socket.io-client";
 
 class Portal {
   collab: TCollabClass;
-  socket: SocketIOClient.Socket | null = null;
+  socket: Socket | null = null;
   socketInitialized: boolean = false; // we don't want the socket to emit any updates until it is fully initialized
   roomId: string | null = null;
   roomKey: string | null = null;
@@ -32,7 +33,7 @@ class Portal {
     this.collab = collab;
   }
 
-  open(socket: SocketIOClient.Socket, id: string, key: string) {
+  open(socket: Socket, id: string, key: string) {
     this.socket = socket;
     this.roomId = id;
     this.roomKey = key;
@@ -63,6 +64,7 @@ class Portal {
       return;
     }
     this.queueFileUpload.flush();
+    this.socket.off();
     this.socket.close();
     this.socket = null;
     this.roomId = null;
@@ -142,7 +144,12 @@ class Portal {
     // periodically we'll resync the whole thing to make sure no one diverges
     // due to a dropped message (server goes down etc).
     const syncableElements = allElements.reduce(
-      (acc, element: BroadcastedExcalidrawElement, idx, elements) => {
+      (
+        acc: BroadcastedExcalidrawElement[],
+        element: BroadcastedExcalidrawElement,
+        idx,
+        elements,
+      ) => {
         if (
           (syncAll ||
             !this.broadcastedElementVersions.has(element.id) ||
@@ -158,7 +165,7 @@ class Portal {
         }
         return acc;
       },
-      [] as BroadcastedExcalidrawElement[],
+      [],
     );
 
     const data: SocketUpdateDataSource[typeof updateType] = {

src/excalidraw-app/components/LanguageList.tsx

@@ -8,23 +8,21 @@ export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
   const [langCode, setLangCode] = useAtom(langCodeAtom);
 
   return (
-    <React.Fragment>
-      <select
-        className="dropdown-select dropdown-select__language"
-        onChange={({ target }) => setLangCode(target.value)}
-        value={langCode}
-        aria-label={i18n.t("buttons.selectLanguage")}
-        style={style}
-      >
-        <option key={i18n.defaultLang.code} value={i18n.defaultLang.code}>
-          {i18n.defaultLang.label}
+    <select
+      className="dropdown-select dropdown-select__language"
+      onChange={({ target }) => setLangCode(target.value)}
+      value={langCode}
+      aria-label={i18n.t("buttons.selectLanguage")}
+      style={style}
+    >
+      <option key={i18n.defaultLang.code} value={i18n.defaultLang.code}>
+        {i18n.defaultLang.label}
+      </option>
+      {languages.map((lang) => (
+        <option key={lang.code} value={lang.code}>
+          {lang.label}
         </option>
-        {languages.map((lang) => (
-          <option key={lang.code} value={lang.code}>
-            {lang.label}
-          </option>
-        ))}
-      </select>
-    </React.Fragment>
+      ))}
+    </select>
   );
 };

src/excalidraw-app/data/firebase.ts

@@ -14,6 +14,7 @@ import { encryptData, decryptData } from "../../data/encryption";
 import { MIME_TYPES } from "../../constants";
 import { reconcileElements } from "../collab/reconciliation";
 import { getSyncableElements, SyncableExcalidrawElement } from ".";
+import { Socket } from "socket.io-client";
 
 // private
 // -----------------------------------------------------------------------------
@@ -129,12 +130,12 @@ const decryptElements = async (
 };
 
 class FirebaseSceneVersionCache {
-  private static cache = new WeakMap<SocketIOClient.Socket, number>();
-  static get = (socket: SocketIOClient.Socket) => {
+  private static cache = new WeakMap<Socket, number>();
+  static get = (socket: Socket) => {
     return FirebaseSceneVersionCache.cache.get(socket);
   };
   static set = (
-    socket: SocketIOClient.Socket,
+    socket: Socket,
     elements: readonly SyncableExcalidrawElement[],
   ) => {
     FirebaseSceneVersionCache.cache.set(socket, getSceneVersion(elements));
@@ -276,7 +277,7 @@ export const saveToFirebase = async (
 export const loadFromFirebase = async (
   roomId: string,
   roomKey: string,
-  socket: SocketIOClient.Socket | null,
+  socket: Socket | null,
 ): Promise<readonly ExcalidrawElement[] | null> => {
   const firebase = await loadFirestore();
   const db = firebase.firestore();

src/excalidraw-app/index.scss

@@ -4,7 +4,7 @@
   &.theme--dark {
     --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
   }
-  .layer-ui__wrapper .layer-ui__wrapper__footer-center {
+  .footer-center {
     justify-content: flex-end;
     margin-top: auto;
     margin-bottom: auto;
@@ -24,7 +24,29 @@
       height: 1.2rem;
     }
   }
+
+  .dropdown-menu-container {
+    .dropdown-menu-item {
+      &.active-collab {
+        background-color: #ecfdf5;
+        color: #064e3c;
+      }
+      &.ExcalidrawPlus {
+        color: var(--color-promo);
+      }
+    }
+  }
+
+  &.theme--dark {
+    .dropdown-menu-item {
+      &.active-collab {
+        background-color: #064e3c;
+        color: #ecfdf5;
+      }
+    }
+  }
 }
+
 .excalidraw-app.is-collaborating {
   [data-testid="clear-canvas-button"] {
     display: none;

src/excalidraw-app/index.tsx

@@ -21,7 +21,12 @@ import {
 } from "../element/types";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { Excalidraw, defaultLang, Footer } from "../packages/excalidraw/index";
+import {
+  Excalidraw,
+  defaultLang,
+  Footer,
+  MainMenu,
+} from "../packages/excalidraw/index";
 import {
   AppState,
   LibraryItems,
@@ -79,8 +84,11 @@ import { reconcileElements } from "./collab/reconciliation";
 import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
 import { EncryptedIcon } from "./components/EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./components/ExcalidrawPlusAppLink";
+import { LanguageList } from "./components/LanguageList";
+import { PlusPromoIcon } from "../components/icons";
 
 polyfill();
+
 window.EXCALIDRAW_THROTTLE_RENDER = true;
 
 const languageDetector = new LanguageDetector();
@@ -229,7 +237,6 @@ export const langCodeAtom = atom(
 const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const [langCode, setLangCode] = useAtom(langCodeAtom);
-
   // initial state
   // ---------------------------------------------------------------------------
 
@@ -594,6 +601,39 @@ const ExcalidrawWrapper = () => {
     localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY, serializedItems);
   };
 
+  const renderMenu = () => {
+    return (
+      <MainMenu>
+        <MainMenu.DefaultItems.LoadScene />
+        <MainMenu.DefaultItems.SaveToActiveFile />
+        <MainMenu.DefaultItems.Export />
+        <MainMenu.DefaultItems.SaveAsImage />
+        <MainMenu.DefaultItems.LiveCollaboration
+          isCollaborating={isCollaborating}
+          onSelect={() => setCollabDialogShown(true)}
+        />
+
+        <MainMenu.DefaultItems.Help />
+        <MainMenu.DefaultItems.ClearCanvas />
+        <MainMenu.Separator />
+        <MainMenu.ItemLink
+          icon={PlusPromoIcon}
+          href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
+          className="ExcalidrawPlus"
+        >
+          Excalidraw+
+        </MainMenu.ItemLink>
+        <MainMenu.DefaultItems.Socials />
+        <MainMenu.Separator />
+        <MainMenu.DefaultItems.ToggleTheme />
+        <MainMenu.ItemCustom>
+          <LanguageList style={{ width: "100%" }} />
+        </MainMenu.ItemCustom>
+        <MainMenu.DefaultItems.ChangeCanvasBackground />
+      </MainMenu>
+    );
+  };
+
   return (
     <div
       style={{ height: "100%" }}
@@ -640,6 +680,7 @@ const ExcalidrawWrapper = () => {
         autoFocus={true}
         theme={theme}
       >
+        {renderMenu()}
         <Footer>
           <div style={{ display: "flex", gap: ".5rem", alignItems: "center" }}>
             <ExcalidrawPlusAppLink />

src/locales/en.json

@@ -203,6 +203,8 @@
     "invalidSVGString": "Invalid SVG.",
     "cannotResolveCollabServer": "Couldn't connect to the collab server. Please reload the page and try again.",
     "importLibraryError": "Couldn't load library",
+    "socketDisconnected": "You've been disconnected from the server",
+    "socketConnectionError": "Couldn't connect to the server",
     "collabSaveFailed": "Couldn't save to the backend database. If problems persist, you should save your file locally to ensure you don't lose your work.",
     "collabSaveFailed_sizeExceeded": "Couldn't save to the backend database, the canvas seems to be too big. You should save the file locally to ensure you don't lose your work."
   },

src/packages/excalidraw/CHANGELOG.md

@@ -15,6 +15,8 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
+- Expose component API for the Excalidraw main menu [#6034](https://github.com/excalidraw/excalidraw/pull/6034), You can read more about its usage [here](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#MainMenu)
+
 - Render Footer as a component instead of render prop [#5970](https://github.com/excalidraw/excalidraw/pull/5970). You can read more about its usage [here](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#Footer)
 
 #### BREAKING CHANGE

src/packages/excalidraw/README.md

@@ -405,6 +405,195 @@ const App = () => {
 };
 ```
 
+This will only for `Desktop` devices.
+
+For `mobile` you will need to render it inside the [MainMenu](#mainmenu). You can use the [`useDevice`](#useDevice) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
+
+```js
+import { useDevice, Footer } from "@excalidraw/excalidraw";
+
+const MobileFooter = ({
+}) => {
+  const device = useDevice();
+  if (device.isMobile) {
+    return (
+      <Footer>
+       <button
+        className="custom-footer"
+        onClick={() => alert("This is custom footer in mobile menu")}
+      >
+        {" "}
+        custom footer{" "}
+      </button>
+      </Footer>
+    );
+  }
+  return null;
+
+};
+const App = () => {
+  <Excalidraw>
+    <MainMenu>
+      <MainMenu.Item onSelect={() => window.alert("Item1")}> Item1 </MainMenu.Item>
+      <MainMenu.Item onSelect={() => window.alert("Item2")}> Item 2 </>
+      <MobileFooter/>
+    </MainMenu>
+  </Excalidraw>
+}
+
+```
+
+You can visit the[ example](https://ehlz3.csb.app/) for working demo.
+
+#### MainMenu
+
+By default Excalidraw will render the `MainMenu` with default options. If you want to customise the `MainMenu`, you can pass the `MainMenu` component with the list options. You can visit [codesandbox example](https://ehlz3.csb.app/) for a working demo.
+
+**Usage**
+
+```js
+import { MainMenu } from "@excalidraw/excalidraw";
+const App = () => {
+  <Excalidraw>
+    <MainMenu>
+      <MainMenu.Item onSelect={() => window.alert("Item1")}> Item1 </MainMenu.Item>
+      <MainMenu.Item onSelect={() => window.alert("Item2")}> Item 2 </>
+    </MainMenu>
+  </Excalidraw>
+}
+```
+
+**MainMenu**
+
+This is the `MainMenu` component which you need to import to render the menu with custom options.
+
+**MainMenu.Item**
+
+To render an item, its recommended to use `MainMenu.Item`.
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `onSelect` | `Function` | Yes | `undefined` | The handler is triggered when the item is selected. |
+| `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
+| `icon` | `JSX.Element` | No | `undefined` | The icon used in the menu item |
+| `shortcut` | `string` | No | `undefined` | The shortcut to be shown for the menu item |
+| `className` | `string` | No | "" | The class names to be added to the menu item |
+| `style` | `React.CSSProperties` | No | `undefined` | The inline styles to be added to the menu item |
+| `ariaLabel` | `string` | `undefined` | No | The `aria-label` to be added to the item for accessibility |
+| `dataTestId` | `string` | `undefined` | No | The `data-testid` to be added to the item. |
+
+**MainMenu.ItemLink**
+
+To render an item as a link, its recommended to use `MainMenu.ItemLink`.
+
+**Usage**
+
+```js
+import { MainMenu } from "@excalidraw/excalidraw";
+const App = () => {
+  <Excalidraw>
+    <MainMenu>
+      <MainMenu.ItemLink href="https://google.com">Google</MainMenu.ItemLink>
+      <MainMenu.ItemLink href="https://excalidraw.com">
+        Excalidraw
+      </MainMenu.ItemLink>
+    </MainMenu>
+  </Excalidraw>;
+};
+```
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `href` | `string` | Yes | `undefined` | The `href` attribute to be added to the `anchor` element. |
+| `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
+| `icon` | `JSX.Element` | No | `undefined` | The icon used in the menu item |
+| `shortcut` | `string` | No | `undefined` | The shortcut to be shown for the menu item |
+| `className` | `string` | No | "" | The class names to be added to the menu item |
+| `style` | `React.CSSProperties` | No | `undefined` | The inline styles to be added to the menu item |
+| `ariaLabel` | `string` | No | `undefined` | The `aria-label` to be added to the item for accessibility |
+| `dataTestId` | `string` | No | `undefined` | The `data-testid` to be added to the item. |
+
+**MainMenu.ItemCustom**
+
+To render a custom item, you can use `MainMenu.ItemCustom`.
+
+**Usage**
+
+```js
+import { MainMenu } from "@excalidraw/excalidraw";
+const App = () => {
+  <Excalidraw>
+    <MainMenu>
+      <MainMenu.ItemCustom>
+        <button
+          style={{ height: "2rem" }}
+          onClick={() => window.alert("custom menu item")}
+        >
+          {" "}
+          custom item
+        </button>
+      </MainMenu.ItemCustom>
+    </MainMenu>
+  </Excalidraw>;
+};
+```
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
+| `className` | `string` | No | "" | The class names to be added to the menu item |
+| `style` | `React.CSSProperties` | No | `undefined` | The inline styles to be added to the menu item |
+| `dataTestId` | `string` | No | `undefined` | The `data-testid` to be added to the item. |
+
+**MainMenu.DefaultItems**
+
+For the items which are shown in the menu in [excalidraw.com](https://excalidraw.com), you can use `MainMenu.DefaultItems`
+
+```js
+import { MainMenu } from "@excalidraw/excalidraw";
+const App = () => {
+  <Excalidraw>
+    <MainMenu>
+      <MainMenu.DefaultItems.Socials/>
+      <MainMenu.DefaultItems.Export/>
+      <MainMenu.Item onSelect={() => window.alert("Item1")}> Item1 </MainMenu.Item>
+      <MainMenu.Item onSelect={() => window.alert("Item2")}> Item 2 </>
+    </MainMenu>
+  </Excalidraw>
+}
+```
+
+Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/src/components/mainMenu/DefaultItems.tsx) of the default items.
+
+**MainMenu.Group**
+
+To Group item in the main menu, you can use `MainMenu.Group`
+
+```js
+import { MainMenu } from "@excalidraw/excalidraw";
+const App = () => {
+  <Excalidraw>
+    <MainMenu>
+      <MainMenu.Group title="Excalidraw items">
+        <MainMenu.DefaultItems.Socials/>
+        <MainMenu.DefaultItems.Export/>
+      </MainMenu.Group>
+      <MainMenu.Group title="custom items">
+        <MainMenu.Item onSelect={() => window.alert("Item1")}> Item1 </MainMenu.Item>
+        <MainMenu.Item onSelect={() => window.alert("Item2")}> Item 2 </>
+      </MainMenu.Group>
+    </MainMenu>
+  </Excalidraw>
+}
+```
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `children ` | `React.ReactNode` | Yes | `undefined` | The content of the `Menu Group` |
+| `title` | `string` | No | `undefined` | The `title` for the grouped items |
+| `className` | `string` | No | "" | The `classname` to be added to the group |
+| `style` | `React.CSsSProperties` | No | `undefined` | The inline `styles` to be added to the group |
+
 ### Props
 
 | Name | Type | Default | Description |
@@ -1369,6 +1558,53 @@ viewportCoordsToSceneCoords({clientX: number, clientY: number}, appState: <a hre
 
 This function returns equivalent scene coords for the provided viewport coords in params.
 
+#### useDevice
+
+This hook can be used to check the type of device which is being used. It can only be used inside the `children` of `Excalidraw` component
+
+```js
+import { useDevice, Footer } from "@excalidraw/excalidraw";
+
+const MobileFooter = ({
+}) => {
+  const device = useDevice();
+  if (device.isMobile) {
+    return (
+      <Footer>
+       <button
+        className="custom-footer"
+        onClick={() => alert("This is custom footer in mobile menu")}
+      >
+        {" "}
+        custom footer{" "}
+      </button>
+      </Footer>
+    );
+  }
+  return null;
+
+};
+const App = () => {
+  <Excalidraw>
+    <MainMenu>
+      <MainMenu.Item> Item1 </MainMenu.Item>
+      <MainMenu.Item> Item 2 </>
+      <MobileFooter/>
+    </MainMenu>
+  </Excalidraw>
+}
+
+```
+
+The `device` has the following `attributes`
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `isSmScreen` | `boolean` | Set to `true` when the device small screen is small (Width < `640px` ) |
+| `isMobile` | `boolean` | Set to `true` when the device is `mobile` |
+| `isTouchScreen` | `boolean` | Set to `true` for `touch` devices |
+| `canDeviceFitSidebar` | `boolean` | Implies whether there is enough space to fit the `sidebar` |
+
 ### Exported constants
 
 #### `FONT_FAMILY`

src/packages/excalidraw/example/App.scss

@@ -73,9 +73,4 @@
   .custom-element {
     padding: 0.1rem;
   }
-
-  &.excalidraw-container .layer-ui__wrapper .layer-ui__wrapper__footer-center {
-    // Remove once we stop importing langauge list from excalidraw app
-    justify-content: flex-start;
-  }
 }

src/packages/excalidraw/example/App.tsx

@@ -28,6 +28,8 @@ import {
 } from "../../../types";
 import { NonDeletedExcalidrawElement } from "../../../element/types";
 import { ImportedLibraryData } from "../../../data/types";
+import CustomFooter from "./CustomFooter";
+import MobileFooter from "./MobileFooter";
 
 declare global {
   interface Window {
@@ -69,24 +71,9 @@ const {
   restoreElements,
   Sidebar,
   Footer,
+  MainMenu,
 } = window.ExcalidrawLib;
 
-const COMMENT_SVG = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="feather feather-message-circle"
-  >
-    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
-  </svg>
-);
 const COMMENT_ICON_DIMENSION = 32;
 const COMMENT_INPUT_HEIGHT = 50;
 const COMMENT_INPUT_WIDTH = 150;
@@ -343,6 +330,7 @@ export default function App() {
       }
     });
   };
+
   const renderCommentIcons = () => {
     return Object.values(commentIcons).map((commentIcon) => {
       if (!excalidrawAPI) {
@@ -495,6 +483,35 @@ export default function App() {
     );
   };
 
+  const renderMenu = () => {
+    return (
+      <MainMenu>
+        <MainMenu.DefaultItems.SaveAsImage />
+        <MainMenu.DefaultItems.Export />
+        <MainMenu.Separator />
+        {isCollaborating && (
+          <MainMenu.DefaultItems.LiveCollaboration
+            onSelect={() => window.alert("You clicked on collab button")}
+            isCollaborating={isCollaborating}
+          />
+        )}
+        <MainMenu.Group title="Excalidraw links">
+          <MainMenu.DefaultItems.Socials />
+        </MainMenu.Group>
+        <MainMenu.Separator />
+        <MainMenu.ItemCustom>
+          <button
+            style={{ height: "2rem" }}
+            onClick={() => window.alert("custom menu item")}
+          >
+            custom item
+          </button>
+        </MainMenu.ItemCustom>
+        <MainMenu.DefaultItems.Help />
+        {excalidrawAPI && <MobileFooter excalidrawAPI={excalidrawAPI} />}
+      </MainMenu>
+    );
+  };
   return (
     <div className="App" ref={appRef}>
       <h1> Excalidraw Example</h1>
@@ -675,43 +692,12 @@ export default function App() {
             onScrollChange={rerenderCommentIcons}
             renderSidebar={renderSidebar}
           >
-            <Footer>
-              <button
-                className="custom-element"
-                onClick={() => {
-                  excalidrawAPI?.setActiveTool({
-                    type: "custom",
-                    customType: "comment",
-                  });
-                  const url = `data:${MIME_TYPES.svg},${encodeURIComponent(
-                    `<svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="feather feather-message-circle"
-            >
-              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
-            </svg>`,
-                  )}`;
-                  excalidrawAPI?.setCursor(`url(${url}), auto`);
-                }}
-              >
-                {COMMENT_SVG}
-              </button>
-              <button
-                className="custom-footer"
-                onClick={() => alert("This is dummy footer")}
-              >
-                {" "}
-                custom footer{" "}
-              </button>
-            </Footer>
+            {excalidrawAPI && (
+              <Footer>
+                <CustomFooter excalidrawAPI={excalidrawAPI} />
+              </Footer>
+            )}
+            {renderMenu()}
           </Excalidraw>
           {Object.keys(commentIcons || []).length > 0 && renderCommentIcons()}
           {comment && renderComment()}

src/packages/excalidraw/example/CustomFooter.tsx

@@ -0,0 +1,65 @@
+import { ExcalidrawImperativeAPI } from "../../../types";
+import { MIME_TYPES } from "../entry";
+const COMMENT_SVG = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-message-circle"
+  >
+    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
+  </svg>
+);
+const CustomFooter = ({
+  excalidrawAPI,
+}: {
+  excalidrawAPI: ExcalidrawImperativeAPI;
+}) => {
+  return (
+    <>
+      <button
+        className="custom-element"
+        onClick={() => {
+          excalidrawAPI?.setActiveTool({
+            type: "custom",
+            customType: "comment",
+          });
+          const url = `data:${MIME_TYPES.svg},${encodeURIComponent(
+            `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-message-circle"
+  >
+    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
+  </svg>`,
+          )}`;
+          excalidrawAPI?.setCursor(`url(${url}), auto`);
+        }}
+      >
+        {COMMENT_SVG}
+      </button>
+      <button
+        className="custom-footer"
+        onClick={() => alert("This is dummy footer")}
+      >
+        {" "}
+        custom footer{" "}
+      </button>
+    </>
+  );
+};
+
+export default CustomFooter;

src/packages/excalidraw/example/MobileFooter.tsx

@@ -0,0 +1,20 @@
+import { ExcalidrawImperativeAPI } from "../../../types";
+import CustomFooter from "./CustomFooter";
+const { useDevice, Footer } = window.ExcalidrawLib;
+
+const MobileFooter = ({
+  excalidrawAPI,
+}: {
+  excalidrawAPI: ExcalidrawImperativeAPI;
+}) => {
+  const device = useDevice();
+  if (device.isMobile) {
+    return (
+      <Footer>
+        <CustomFooter excalidrawAPI={excalidrawAPI} />
+      </Footer>
+    );
+  }
+  return null;
+};
+export default MobileFooter;

src/packages/excalidraw/index.tsx

@@ -11,6 +11,7 @@ import { DEFAULT_UI_OPTIONS } from "../../constants";
 import { Provider } from "jotai";
 import { jotaiScope, jotaiStore } from "../../jotai";
 import Footer from "../../components/footer/FooterCenter";
+import MainMenu from "../../components/mainMenu/MainMenu";
 
 const ExcalidrawBase = (props: ExcalidrawProps) => {
   const {
@@ -239,3 +240,5 @@ export {
 
 export { Sidebar } from "../../components/Sidebar/Sidebar";
 export { Footer };
+export { MainMenu };
+export { useDevice } from "../../components/App";

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -14613,7 +14613,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openDialog": null,
-  "openMenu": null,
+  "openMenu": "canvas",
   "openPopup": null,
   "openSidebar": null,
   "pasteDialog": Object {
@@ -14672,7 +14672,7 @@ Object {
 
 exports[`regression tests rerenders UI on language change: [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests rerenders UI on language change: [end of test] number of renders 1`] = `10`;
+exports[`regression tests rerenders UI on language change: [end of test] number of renders 1`] = `11`;
 
 exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] appState 1`] = `
 Object {

src/tests/packages/excalidraw.test.tsx

@@ -1,5 +1,5 @@
-import { fireEvent, GlobalTestState, render } from "../test-utils";
-import { Excalidraw, Footer } from "../../packages/excalidraw/index";
+import { fireEvent, GlobalTestState, toggleMenu, render } from "../test-utils";
+import { Excalidraw, Footer, MainMenu } from "../../packages/excalidraw/index";
 import { queryByText, queryByTestId } from "@testing-library/react";
 import { GRID_SIZE, THEME } from "../../constants";
 import { t } from "../../i18n";
@@ -7,6 +7,12 @@ import { t } from "../../i18n";
 const { h } = window;
 
 describe("<Excalidraw/>", () => {
+  afterEach(() => {
+    const menu = document.querySelector(".dropdown-menu");
+    if (menu) {
+      toggleMenu(document.querySelector(".excalidraw")!);
+    }
+  });
   describe("Test zenModeEnabled prop", () => {
     it('should show exit zen mode button when zen mode is set and zen mode option in context menu when zenModeEnabled is "undefined"', async () => {
       const { container } = await render(<Excalidraw />);
@@ -56,9 +62,7 @@ describe("<Excalidraw/>", () => {
         <div>This is a custom footer</div>
       </Excalidraw>,
     );
-    expect(
-      container.querySelector(".layer-ui__wrapper__footer-center"),
-    ).toBeEmptyDOMElement();
+    expect(container.querySelector(".footer-center")).toBe(null);
 
     // Footer passed hence it will render the footer
     ({ container } = await render(
@@ -68,12 +72,17 @@ describe("<Excalidraw/>", () => {
         </Footer>
       </Excalidraw>,
     ));
-    expect(
-      container.querySelector(".layer-ui__wrapper__footer-center")?.innerHTML,
-    ).toMatchInlineSnapshot(
-      `"<div class=\\"layer-ui__wrapper__footer-center zen-mode-transition\\"><div>This is a custom footer</div></div>"`,
-    );
+    expect(container.querySelector(".footer-center")).toMatchInlineSnapshot(`
+      <div
+        class="footer-center zen-mode-transition"
+      >
+        <div>
+          This is a custom footer
+        </div>
+      </div>
+    `);
   });
+
   describe("Test gridModeEnabled prop", () => {
     it('should show grid mode in context menu when gridModeEnabled is "undefined"', async () => {
       const { container } = await render(<Excalidraw />);
@@ -112,98 +121,51 @@ describe("<Excalidraw/>", () => {
     });
   });
 
-  describe("Test theme prop", () => {
-    it("should show the theme toggle by default", async () => {
-      const { container } = await render(<Excalidraw />);
-
-      expect(h.state.theme).toBe(THEME.LIGHT);
-
-      queryByTestId(container, "menu-button")!.click();
-      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
-      expect(darkModeToggle).toBeTruthy();
-    });
-
-    it("should not show theme toggle when the theme prop is defined", async () => {
-      const { container } = await render(<Excalidraw theme="dark" />);
-      expect(h.state.theme).toBe(THEME.DARK);
-      expect(queryByTestId(container, "toggle-dark-mode")).toBe(null);
-    });
-
-    it("should show theme mode toggle when `UIOptions.canvasActions.toggleTheme` is true", async () => {
-      const { container } = await render(
-        <Excalidraw
-          theme={THEME.DARK}
-          UIOptions={{ canvasActions: { toggleTheme: true } }}
-        />,
-      );
-      expect(h.state.theme).toBe(THEME.DARK);
-      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
-      expect(darkModeToggle).toBeTruthy();
-    });
-
-    it("should not show theme toggle when `UIOptions.canvasActions.toggleTheme` is false", async () => {
-      const { container } = await render(
-        <Excalidraw
-          UIOptions={{ canvasActions: { toggleTheme: false } }}
-          theme={THEME.DARK}
-        />,
-      );
-      expect(h.state.theme).toBe(THEME.DARK);
-      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
-      expect(darkModeToggle).toBeFalsy();
-    });
-  });
-
-  describe("Test name prop", () => {
-    it('should allow editing name when the name prop is "undefined"', async () => {
-      const { container } = await render(<Excalidraw />);
-
-      fireEvent.click(queryByTestId(container, "image-export-button")!);
-      const textInput: HTMLInputElement | null = document.querySelector(
-        ".ExportDialog .ProjectName .TextInput",
-      );
-      expect(textInput?.value).toContain(`${t("labels.untitled")}`);
-      expect(textInput?.nodeName).toBe("INPUT");
-    });
-
-    it('should set the name and not allow editing when the name prop is present"', async () => {
-      const name = "test";
-      const { container } = await render(<Excalidraw name={name} />);
-
-      await fireEvent.click(queryByTestId(container, "image-export-button")!);
-      const textInput = document.querySelector(
-        ".ExportDialog .ProjectName .TextInput--readonly",
-      );
-      expect(textInput?.textContent).toEqual(name);
-      expect(textInput?.nodeName).toBe("SPAN");
-    });
+  it("should render main menu with host menu items if passed from host", async () => {
+    const { container } = await render(
+      <Excalidraw UIOptions={undefined}>
+        <MainMenu>
+          <MainMenu.Item onSelect={() => window.alert("Clicked")}>
+            Click me
+          </MainMenu.Item>
+          <MainMenu.ItemLink href="blog.excalidaw.com">
+            Excalidraw blog
+          </MainMenu.ItemLink>
+          <MainMenu.ItemCustom>
+            <button
+              style={{ height: "2rem" }}
+              onClick={() => window.alert("custom menu item")}
+            >
+              {" "}
+              custom menu item
+            </button>
+          </MainMenu.ItemCustom>
+          <MainMenu.DefaultItems.Help />
+        </MainMenu>
+      </Excalidraw>,
+    );
+    //open menu
+    toggleMenu(container);
+    expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
   });
 
   describe("Test UIOptions prop", () => {
-    it('should not hide any UI element when the UIOptions prop is "undefined"', async () => {
-      await render(<Excalidraw />);
-
-      const canvasActions = document.querySelector(
-        'section[aria-labelledby="test-id-canvasActions-title"]',
-      );
-
-      expect(canvasActions).toMatchSnapshot();
-    });
-
     describe("Test canvasActions", () => {
-      it('should not hide any UI element when canvasActions is "undefined"', async () => {
-        await render(<Excalidraw UIOptions={{}} />);
-        const canvasActions = document.querySelector(
-          'section[aria-labelledby="test-id-canvasActions-title"]',
+      it('should render menu with default items when "UIOPtions" is "undefined"', async () => {
+        const { container } = await render(
+          <Excalidraw UIOptions={undefined} />,
         );
-        expect(canvasActions).toMatchSnapshot();
+        //open menu
+        toggleMenu(container);
+        expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
       });
 
       it("should hide clear canvas button when clearCanvas is false", async () => {
         const { container } = await render(
           <Excalidraw UIOptions={{ canvasActions: { clearCanvas: false } }} />,
         );
-
+        //open menu
+        toggleMenu(container);
         expect(queryByTestId(container, "clear-canvas-button")).toBeNull();
       });
 
@@ -211,7 +173,8 @@ describe("<Excalidraw/>", () => {
         const { container } = await render(
           <Excalidraw UIOptions={{ canvasActions: { export: false } }} />,
         );
-
+        //open menu
+        toggleMenu(container);
         expect(queryByTestId(container, "json-export-button")).toBeNull();
       });
 
@@ -219,7 +182,8 @@ describe("<Excalidraw/>", () => {
         const { container } = await render(
           <Excalidraw UIOptions={{ canvasActions: { saveAsImage: false } }} />,
         );
-
+        //open menu
+        toggleMenu(container);
         expect(queryByTestId(container, "image-export-button")).toBeNull();
       });
 
@@ -237,7 +201,8 @@ describe("<Excalidraw/>", () => {
             UIOptions={{ canvasActions: { export: { saveFileToDisk: false } } }}
           />,
         );
-
+        //open menu
+        toggleMenu(container);
         expect(queryByTestId(container, "save-as-button")).toBeNull();
       });
 
@@ -247,7 +212,8 @@ describe("<Excalidraw/>", () => {
             UIOptions={{ canvasActions: { saveToActiveFile: false } }}
           />,
         );
-
+        //open menu
+        toggleMenu(container);
         expect(queryByTestId(container, "save-button")).toBeNull();
       });
 
@@ -257,7 +223,8 @@ describe("<Excalidraw/>", () => {
             UIOptions={{ canvasActions: { changeViewBackgroundColor: false } }}
           />,
         );
-
+        //open menu
+        toggleMenu(container);
         expect(queryByTestId(container, "canvas-background-picker")).toBeNull();
       });
 
@@ -265,12 +232,110 @@ describe("<Excalidraw/>", () => {
         const { container } = await render(
           <Excalidraw UIOptions={{ canvasActions: { toggleTheme: false } }} />,
         );
-
+        //open menu
+        toggleMenu(container);
         expect(queryByTestId(container, "toggle-dark-mode")).toBeNull();
       });
+
+      it("should not render default items in custom menu even if passed if the prop in `canvasActions` is set to false", async () => {
+        const { container } = await render(
+          <Excalidraw UIOptions={{ canvasActions: { loadScene: false } }}>
+            <MainMenu>
+              <MainMenu.ItemCustom>
+                <button
+                  style={{ height: "2rem" }}
+                  onClick={() => window.alert("custom menu item")}
+                >
+                  {" "}
+                  custom item
+                </button>
+              </MainMenu.ItemCustom>
+              <MainMenu.DefaultItems.LoadScene />
+            </MainMenu>
+          </Excalidraw>,
+        );
+        //open menu
+        toggleMenu(container);
+        // load button shouldn't be rendered since `UIActions.canvasActions.loadScene` is `false`
+        expect(queryByTestId(container, "load-button")).toBeNull();
+      });
     });
   });
 
+  describe("Test theme prop", () => {
+    it("should show the theme toggle by default", async () => {
+      const { container } = await render(<Excalidraw />);
+      expect(h.state.theme).toBe(THEME.LIGHT);
+      //open menu
+      toggleMenu(container);
+      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
+      expect(darkModeToggle).toBeTruthy();
+    });
+
+    it("should not show theme toggle when the theme prop is defined", async () => {
+      const { container } = await render(<Excalidraw theme={THEME.DARK} />);
+
+      expect(h.state.theme).toBe(THEME.DARK);
+      //open menu
+      toggleMenu(container);
+      expect(queryByTestId(container, "toggle-dark-mode")).toBe(null);
+    });
+
+    it("should show theme mode toggle when `UIOptions.canvasActions.toggleTheme` is true", async () => {
+      const { container } = await render(
+        <Excalidraw
+          theme={THEME.DARK}
+          UIOptions={{ canvasActions: { toggleTheme: true } }}
+        />,
+      );
+      expect(h.state.theme).toBe(THEME.DARK);
+      //open menu
+      toggleMenu(container);
+      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
+      expect(darkModeToggle).toBeTruthy();
+    });
+
+    it("should not show theme toggle when `UIOptions.canvasActions.toggleTheme` is false", async () => {
+      const { container } = await render(
+        <Excalidraw
+          UIOptions={{ canvasActions: { toggleTheme: false } }}
+          theme={THEME.DARK}
+        />,
+      );
+      expect(h.state.theme).toBe(THEME.DARK);
+      //open menu
+      toggleMenu(container);
+      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
+      expect(darkModeToggle).toBeFalsy();
+    });
+  });
+
+  describe("Test name prop", () => {
+    it('should allow editing name when the name prop is "undefined"', async () => {
+      const { container } = await render(<Excalidraw />);
+      //open menu
+      toggleMenu(container);
+      fireEvent.click(queryByTestId(container, "image-export-button")!);
+      const textInput: HTMLInputElement | null = document.querySelector(
+        ".ExportDialog .ProjectName .TextInput",
+      );
+      expect(textInput?.value).toContain(`${t("labels.untitled")}`);
+      expect(textInput?.nodeName).toBe("INPUT");
+    });
+
+    it('should set the name and not allow editing when the name prop is present"', async () => {
+      const name = "test";
+      const { container } = await render(<Excalidraw name={name} />);
+      //open menu
+      toggleMenu(container);
+      await fireEvent.click(queryByTestId(container, "image-export-button")!);
+      const textInput = document.querySelector(
+        ".ExportDialog .ProjectName .TextInput--readonly",
+      );
+      expect(textInput?.textContent).toEqual(name);
+      expect(textInput?.nodeName).toBe("SPAN");
+    });
+  });
   describe("Test autoFocus prop", () => {
     it("should not focus when autoFocus is false", async () => {
       const { container } = await render(<Excalidraw />);

src/tests/regressionTests.test.tsx

@@ -446,7 +446,7 @@ describe("regression tests", () => {
     UI.clickTool("rectangle");
     // english lang should display `thin` label
     expect(screen.queryByTitle(/thin/i)).not.toBeNull();
-    fireEvent.click(document.querySelector(".menu-button")!);
+    fireEvent.click(document.querySelector(".dropdown-menu-button")!);
 
     fireEvent.change(document.querySelector(".dropdown-select__language")!, {
       target: { value: "de-DE" },

src/tests/test-utils.ts

@@ -6,6 +6,7 @@ import {
   RenderResult,
   RenderOptions,
   waitFor,
+  fireEvent,
 } from "@testing-library/react";
 
 import * as toolQueries from "./queries/toolQueries";
@@ -184,3 +185,8 @@ export const assertSelectedElements = (
   expect(selectedElementIds.length).toBe(ids.length);
   expect(selectedElementIds).toEqual(expect.arrayContaining(ids));
 };
+
+export const toggleMenu = (container: HTMLElement) => {
+  // open menu
+  fireEvent.click(container.querySelector(".dropdown-menu-button")!);
+};

src/types.ts

@@ -161,7 +161,7 @@ export type AppState = {
     | "strokeColorPicker"
     | null;
   openSidebar: "library" | "customSidebar" | null;
-  openDialog: "imageExport" | "help" | null;
+  openDialog: "imageExport" | "help" | "jsonExport" | null;
   isSidebarDocked: boolean;
 
   lastPointerDownWith: PointerType;
@@ -517,7 +517,7 @@ export type Device = Readonly<{
 }>;
 
 export type UIChildrenComponents = {
-  [k in "FooterCenter"]?:
+  [k in "FooterCenter" | "Menu"]?:
     | React.ReactPortal
     | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 };

yarn.lock

@@ -2280,6 +2280,11 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -2794,11 +2799,6 @@
     "@types/mime" "*"
     "@types/node" "*"
 
-"@types/socket.io-client@1.4.36":
-  version "1.4.36"
-  resolved "https://registry.yarnpkg.com/@types/socket.io-client/-/socket.io-client-1.4.36.tgz#e4f1ca065f84c20939e9850e70222202bd76ff3f"
-  integrity sha512-ZJWjtFBeBy1kRSYpVbeGYTElf6BqPQUkXDlHHD4k/42byCN5Rh027f4yARHCink9sKAkbtGZXEAmR0ZCnc2/Ag==
-
 "@types/sockjs@^0.3.33":
   version "0.3.33"
   resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.33.tgz#570d3a0b99ac995360e3136fd6045113b1bd236f"
@@ -3138,11 +3138,6 @@ adjust-sourcemap-loader@^4.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
-after@0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
-  integrity sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==
-
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -3377,11 +3372,6 @@ array.prototype.tosorted@^1.1.1:
     es-shim-unscopables "^1.0.0"
     get-intrinsic "^1.1.3"
 
-arraybuffer.slice@~0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
-  integrity sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==
-
 asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -3402,11 +3392,6 @@ astral-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
-async-limiter@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
-  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
-
 async@^2.6.4:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
@@ -3597,11 +3582,6 @@ babel-preset-react-app@^10.0.1:
     babel-plugin-macros "^3.1.0"
     babel-plugin-transform-react-remove-prop-types "^0.4.24"
 
-backo2@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
-  integrity sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA==
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -3612,11 +3592,6 @@ base64-arraybuffer-es6@^0.7.0:
   resolved "https://registry.yarnpkg.com/base64-arraybuffer-es6/-/base64-arraybuffer-es6-0.7.0.tgz#dbe1e6c87b1bf1ca2875904461a7de40f21abc86"
   integrity sha512-ESyU/U1CFZDJUdr+neHRhNozeCv72Y7Vm0m1DCbjX3KBjT6eYocvAJlSk6+8+HkVwXlT1FNxhGW6q3UKAlCvvw==
 
-base64-arraybuffer@0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz#9818c79e059b1355f97e0428a017c838e90ba812"
-  integrity sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==
-
 basic-auth@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-2.0.1.tgz#b998279bf47ce38344b4f3cf916d4679bbf51e3a"
@@ -3649,11 +3624,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-blob@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.5.tgz#d680eeef25f8cd91ad533f5b01eed48e64caf683"
-  integrity sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==
-
 bluebird@^3.5.5:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
@@ -4049,21 +4019,6 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
-component-bind@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
-  integrity sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==
-
-component-emitter@~1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
-  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
-
-component-inherit@0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
-  integrity sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==
-
 compressible@~2.0.16:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
@@ -4446,7 +4401,7 @@ debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
+debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -4460,13 +4415,6 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@~3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
-  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
-  dependencies:
-    ms "2.0.0"
-
 decimal.js@^10.2.1:
   version "10.4.2"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.2.tgz#0341651d1d997d86065a2ce3a441fbd0d8e8b98e"
@@ -4807,33 +4755,21 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
-engine.io-client@~3.4.0:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.4.4.tgz#77d8003f502b0782dd792b073a4d2cf7ca5ab967"
-  integrity sha512-iU4CRr38Fecj8HoZEnFtm2EiKGbYZcPn3cHxqNGl/tmdWRf60KhK+9vE0JeSjgnlS/0oynEfLgKbT9ALpim0sQ==
+engine.io-client@~6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.2.3.tgz#a8cbdab003162529db85e9de31575097f6d29458"
+  integrity sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==
   dependencies:
-    component-emitter "~1.3.0"
-    component-inherit "0.0.3"
-    debug "~3.1.0"
-    engine.io-parser "~2.2.0"
-    has-cors "1.1.0"
-    indexof "0.0.1"
-    parseqs "0.0.6"
-    parseuri "0.0.6"
-    ws "~6.1.0"
-    xmlhttprequest-ssl "~1.5.4"
-    yeast "0.1.2"
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.0.3"
+    ws "~8.2.3"
+    xmlhttprequest-ssl "~2.0.0"
 
-engine.io-parser@~2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.2.1.tgz#57ce5611d9370ee94f99641b589f94c97e4f5da7"
-  integrity sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==
-  dependencies:
-    after "0.8.2"
-    arraybuffer.slice "~0.0.7"
-    base64-arraybuffer "0.1.4"
-    blob "0.0.5"
-    has-binary2 "~1.0.2"
+engine.io-parser@~5.0.3:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
+  integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
 
 enhanced-resolve@^5.10.0:
   version "5.10.0"
@@ -5860,18 +5796,6 @@ has-bigints@^1.0.1, has-bigints@^1.0.2:
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
   integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
 
-has-binary2@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.3.tgz#7776ac627f3ea77250cfc332dab7ddf5e4f5d11d"
-  integrity sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==
-  dependencies:
-    isarray "2.0.1"
-
-has-cors@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
-  integrity sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==
-
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -6191,11 +6115,6 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
-indexof@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
-  integrity sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -6463,11 +6382,6 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
-isarray@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.1.tgz#a37d94ed9cda2d59865c9f76fe596ee1f338741e"
-  integrity sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==
-
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -7997,16 +7911,6 @@ parse5@6.0.1:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
-parseqs@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.6.tgz#8e4bb5a19d1cdc844a08ac974d34e273afa670d5"
-  integrity sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==
-
-parseuri@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.6.tgz#e1496e829e3ac2ff47f39a4dd044b32823c4a25a"
-  integrity sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==
-
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -9655,31 +9559,23 @@ sliced@^1.0.1:
   resolved "https://registry.yarnpkg.com/sliced/-/sliced-1.0.1.tgz#0b3a662b5d04c3177b1926bea82b03f837a2ef41"
   integrity sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA==
 
-socket.io-client@2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.3.1.tgz#91a4038ef4d03c19967bb3c646fec6e0eaa78cff"
-  integrity sha512-YXmXn3pA8abPOY//JtYxou95Ihvzmg8U6kQyolArkIyLd0pgVhrfor/iMsox8cn07WCOOvvuJ6XKegzIucPutQ==
+socket.io-client@4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.4.tgz#d3cde8a06a6250041ba7390f08d2468ccebc5ac9"
+  integrity sha512-ZpKteoA06RzkD32IbqILZ+Cnst4xewU7ZYK12aS1mzHftFFjpoMz69IuhP/nL25pJfao/amoPI527KnuhFm01g==
   dependencies:
-    backo2 "1.0.2"
-    component-bind "1.0.0"
-    component-emitter "~1.3.0"
-    debug "~3.1.0"
-    engine.io-client "~3.4.0"
-    has-binary2 "~1.0.2"
-    indexof "0.0.1"
-    parseqs "0.0.6"
-    parseuri "0.0.6"
-    socket.io-parser "~3.3.0"
-    to-array "0.1.4"
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.2.3"
+    socket.io-parser "~4.2.1"
 
-socket.io-parser@~3.3.0:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.3.3.tgz#3a8b84823eba87f3f7624e64a8aaab6d6318a72f"
-  integrity sha512-qOg87q1PMWWTeO01768Yh9ogn7chB9zkKtQnya41Y355S0UmpXgpcrFwAgjYJxu9BdKug5r5e9YtVSeWhKBUZg==
+socket.io-parser@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
+  integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
   dependencies:
-    component-emitter "~1.3.0"
-    debug "~3.1.0"
-    isarray "2.0.1"
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
 
 sockjs@^0.3.24:
   version "0.3.24"
@@ -10169,11 +10065,6 @@ tmpl@1.0.5:
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
   integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
 
-to-array@0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
-  integrity sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -10950,12 +10841,10 @@ ws@^8.4.2:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
   integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
 
-ws@~6.1.0:
-  version "6.1.4"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.1.4.tgz#5b5c8800afab925e94ccb29d153c8d02c1776ef9"
-  integrity sha512-eqZfL+NE/YQc1/ZynhojeV8q+H050oR8AZ2uIev7RU10svA9ZnJUddHcOUZTJLinZ9yEfdA2kSATS2qZK5fhJA==
-  dependencies:
-    async-limiter "~1.0.0"
+ws@~8.2.3:
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
+  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
 
 xml-name-validator@^3.0.0:
   version "3.0.0"
@@ -10967,10 +10856,10 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xmlhttprequest-ssl@~1.5.4:
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
-  integrity sha512-/bFPLUgJrfGUL10AIv4Y7/CUt6so9CLtB/oFxQSHseSDNNCdC6vwwKEqwLN6wNPBg9YWXAiMu8jkf6RPRS/75Q==
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
 
 xmlhttprequest@1.8.0:
   version "1.8.0"
@@ -11015,11 +10904,6 @@ yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
-yeast@0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
-  integrity sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==
-
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"