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/ShareMenu.js

@@ -1,75 +1,69 @@
 // @flow
-import { observable } from "mobx";
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
-import { Redirect } from "react-router-dom";
-
-import SharesStore from "stores/SharesStore";
-import UiStore from "stores/UiStore";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import { useMenuState } from "reakit/Menu";
 import Share from "models/Share";
+import ContextMenu from "components/ContextMenu";
+import MenuItem from "components/ContextMenu/MenuItem";
+import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
 import CopyToClipboard from "components/CopyToClipboard";
-import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
+import useStores from "hooks/useStores";
 
 type Props = {
-  onOpen?: () => void,
-  onClose: () => void,
-  shares: SharesStore,
-  ui: UiStore,
   share: Share,
-  t: TFunction,
 };
 
-@observer
-class ShareMenu extends React.Component<Props> {
-  @observable redirectTo: ?string;
+function ShareMenu({ share }: Props) {
+  const menu = useMenuState({ modal: true });
+  const { ui, shares } = useStores();
+  const { t } = useTranslation();
+  const history = useHistory();
 
-  componentDidUpdate() {
-    this.redirectTo = undefined;
-  }
+  const handleGoToDocument = React.useCallback(
+    (ev: SyntheticEvent<>) => {
+      ev.preventDefault();
+      history.push(share.documentUrl);
+    },
+    [history, share]
+  );
 
-  handleGoToDocument = (ev: SyntheticEvent<>) => {
-    ev.preventDefault();
-    this.redirectTo = this.props.share.documentUrl;
-  };
+  const handleRevoke = React.useCallback(
+    async (ev: SyntheticEvent<>) => {
+      ev.preventDefault();
 
-  handleRevoke = async (ev: SyntheticEvent<>) => {
-    ev.preventDefault();
+      try {
+        await shares.revoke(share);
+        ui.showToast(t("Share link revoked"), { type: "info" });
+      } catch (err) {
+        ui.showToast(err.message, { type: "error" });
+      }
+    },
+    [t, shares, share, ui]
+  );
 
-    try {
-      await this.props.shares.revoke(this.props.share);
-      const { t } = this.props;
-      this.props.ui.showToast(t("Share link revoked"), { type: "info" });
-    } catch (err) {
-      this.props.ui.showToast(err.message, { type: "error" });
-    }
-  };
+  const handleCopy = React.useCallback(() => {
+    ui.showToast(t("Share link copied"), { type: "info" });
+  }, [t, ui]);
 
-  handleCopy = () => {
-    const { t } = this.props;
-    this.props.ui.showToast(t("Share link copied"), { type: "info" });
-  };
-
-  render() {
-    if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
-
-    const { share, onOpen, onClose, t } = this.props;
-
-    return (
-      <DropdownMenu onOpen={onOpen} onClose={onClose}>
-        <CopyToClipboard text={share.url} onCopy={this.handleCopy}>
-          <DropdownMenuItem>{t("Copy link")}</DropdownMenuItem>
+  return (
+    <>
+      <OverflowMenuButton {...menu} />
+      <ContextMenu {...menu} aria-label={t("Share options")}>
+        <CopyToClipboard text={share.url} onCopy={handleCopy}>
+          <MenuItem {...menu}>{t("Copy link")}</MenuItem>
         </CopyToClipboard>
-        <DropdownMenuItem onClick={this.handleGoToDocument}>
+        <MenuItem {...menu} onClick={handleGoToDocument}>
           {t("Go to document")}
-        </DropdownMenuItem>
+        </MenuItem>
         <hr />
-        <DropdownMenuItem onClick={this.handleRevoke}>
+        <MenuItem {...menu} onClick={handleRevoke}>
           {t("Revoke link")}
-        </DropdownMenuItem>
-      </DropdownMenu>
-    );
-  }
+        </MenuItem>
+      </ContextMenu>
+    </>
+  );
 }
 
-export default withTranslation()<ShareMenu>(inject("shares", "ui")(ShareMenu));
+export default observer(ShareMenu);