feat: new Menu Component API (#6034)

* feat: new Menu Component API

* allow valid children types

* introduce menu group to group items

* Add lang footer

* use display name

* displayName

* define types inside

* fix default menu

* add json export to menu

* fix

* simplify expression

* put open menu into own compo to optimize perf

So that we don't rerun `useOutsideClickHook` (and rebind event listeners
all the time)

* naming tweaks

* rename MenuComponents->MenuDefaultItems and export default items from Menu.Items

* import Menu.scss in Menu.tsx

* move menu scss to excal app

* Don't filter children inside menu group

* move E+ out of socials

* support style prop for MenuItem and MenuGroup

* Support header in menu group and add Excalidraw links header for default items in social section

* rename header to title

* fix padding for lang

* render menu in mobile

* review fixes

* tweaks

* Export collaborators and show in mobile menu

* revert .env

* lint :p

* again lint

* show correct actions in view mode for mobile

* Whitelist Collaborators Comp

* mobile styling

* padding

* don't show nerds when menu open in mobile

* lint :(

* hide shortcuts

* refactor userlist to support mobile and keep a wrapper comp for excal app

* use only UserList

* render only on mobile for default items

* remove unused hooks

* Show collab button in menu when onCollabButtonClick present and hide export when UIOptions.canvasActions.export is false

* fix tests

* lint

* inject userlist inside menu on mobile

* revert userlist

* move menu socials to default menu

* fix collab

* use meny in library

* Make Menu generic and create hamburgemenu for public excal menu and use menu in library as well

* use appState.openMenu for mobile

* fix tests

* styling fixes and support style and class name in menu content

* fix test

* rename MenuDefaultItems->DefaultItems

* move footer css to its own comp

* rename HamburgerMenu -> MainMenu

* rename menu -> dropdownMenu and update classes, onClick->onToggle

* close main menu when dialog closes

* by bye filtering

* update docs

* fix lint

* update example, docs for useDevice and footer in mobile, rename menu ->DropDownMenu everywhere

* spec

* remove isMenuOpenAtom and set openMenu as canvas for main menu, render decreases in specs :)

* [temp] remove cyclic depenedency to fix build

* hack- update appstate to sync lang change

* Add more specs

* wip: rewrite MainMenu footer

* fix margin

* fix snaps

* not needed as lang list no more imported

* simplify custom footer rendering

* Add DropdownMenuItemLink and DropdownMenuItemCustom and update API, docs

* fix `MainMenu.ItemCustom`

* naming

* use onSelect and base class for custom items

* fix lint

* fix snap

* use custom item for lang

* update docs

* fix

* properly use `MainMenu.ItemCustom` for `LanguageList`

* add margin top to custom items

* flex

Co-authored-by: dwelle <luzar.david@gmail.com>

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,
       })}