fix: Keyboard accessible context menus (#1768)

- Makes menus fully accessible and keyboard driven
- Currently adds 2.8% to initial bundle size due to the inclusion of Reakit and its dependency, popperjs.
- Converts all menus to functional components
- Remove old custom menu system
- Various layout and flow improvements around the menus

closes #1766

app/menus/NewDocumentMenu.js

@@ -1,92 +1,72 @@
 // @flow
-import { observable } from "mobx";
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
-import { Redirect } from "react-router-dom";
-
-import CollectionsStore from "stores/CollectionsStore";
-import DocumentsStore from "stores/DocumentsStore";
-import PoliciesStore from "stores/PoliciesStore";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { MenuButton, useMenuState } from "reakit/Menu";
+import styled from "styled-components";
 import Button from "components/Button";
 import CollectionIcon from "components/CollectionIcon";
-import { DropdownMenu, Header } from "components/DropdownMenu";
-import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
+import ContextMenu from "components/ContextMenu";
+import Header from "components/ContextMenu/Header";
+import Template from "components/ContextMenu/Template";
+import Flex from "components/Flex";
+import useStores from "hooks/useStores";
 import { newDocumentUrl } from "utils/routeHelpers";
 
-type Props = {
-  label?: React.Node,
-  documents: DocumentsStore,
-  collections: CollectionsStore,
-  policies: PoliciesStore,
-  t: TFunction,
-};
+function NewDocumentMenu() {
+  const menu = useMenuState();
+  const { t } = useTranslation();
+  const { collections, policies } = useStores();
+  const singleCollection = collections.orderedData.length === 1;
 
-@observer
-class NewDocumentMenu extends React.Component<Props> {
-  @observable redirectTo: ?string;
-
-  componentDidUpdate() {
-    this.redirectTo = undefined;
+  if (singleCollection) {
+    return (
+      <Button
+        as={Link}
+        to={newDocumentUrl(collections.orderedData[0].id)}
+        icon={<PlusIcon />}
+        small
+      >
+        {t("New doc")}
+      </Button>
+    );
   }
 
-  handleNewDocument = (
-    collectionId: string,
-    options?: {
-      parentDocumentId?: string,
-      template?: boolean,
-      templateId?: string,
-    }
-  ) => {
-    this.redirectTo = newDocumentUrl(collectionId, options);
-  };
-
-  onOpen = () => {
-    const { collections } = this.props;
-
-    if (collections.orderedData.length === 1) {
-      this.handleNewDocument(collections.orderedData[0].id);
-    }
-  };
-
-  render() {
-    if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
-
-    const { collections, documents, policies, label, t, ...rest } = this.props;
-    const singleCollection = collections.orderedData.length === 1;
-
-    return (
-      <DropdownMenu
-        label={
-          label || (
-            <Button icon={<PlusIcon />} small>
-              {t("New doc")}
-              {singleCollection ? "" : "…"}
-            </Button>
-          )
-        }
-        onOpen={this.onOpen}
-        {...rest}
-      >
+  return (
+    <>
+      <MenuButton {...menu}>
+        {(props) => (
+          <Button icon={<PlusIcon />} {...props} small>
+            {`${t("New doc")}…`}
+          </Button>
+        )}
+      </MenuButton>
+      <ContextMenu {...menu} aria-label={t("New document")}>
         <Header>{t("Choose a collection")}</Header>
-        <DropdownMenuItems
+        <Template
+          {...menu}
           items={collections.orderedData.map((collection) => ({
-            onClick: () => this.handleNewDocument(collection.id),
+            to: newDocumentUrl(collection.id),
             disabled: !policies.abilities(collection.id).update,
             title: (
-              <>
+              <Flex align="center">
                 <CollectionIcon collection={collection} />
-                &nbsp;{collection.name}
-              </>
+                <CollectionName>{collection.name}</CollectionName>
+              </Flex>
             ),
           }))}
         />
-      </DropdownMenu>
-    );
-  }
+      </ContextMenu>
+    </>
+  );
 }
 
-export default withTranslation()<NewDocumentMenu>(
-  inject("collections", "documents", "policies")(NewDocumentMenu)
-);
+const CollectionName = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export default observer(NewDocumentMenu);