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/scenes/CollectionMembers/components/CollectionGroupMemberListItem.js

@@ -4,9 +4,9 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import CollectionGroupMembership from "models/CollectionGroupMembership";
 import Group from "models/Group";
-import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
 import GroupListItem from "components/GroupListItem";
 import InputSelect from "components/InputSelect";
+import CollectionGroupMemberMenu from "menus/CollectionGroupMemberMenu";
 
 type Props = {
   group: Group,
@@ -50,15 +50,10 @@ const MemberListItem = ({
             labelHidden
           />
           <ButtonWrap>
-            <DropdownMenu>
-              <DropdownMenuItem onClick={openMembersModal}>
-                {t("Members")}…
-              </DropdownMenuItem>
-              <hr />
-              <DropdownMenuItem onClick={onRemove}>
-                {t("Remove")}
-              </DropdownMenuItem>
-            </DropdownMenu>
+            <CollectionGroupMemberMenu
+              onMembers={openMembersModal}
+              onRemove={onRemove}
+            />
           </ButtonWrap>
         </>
       )}

app/scenes/CollectionMembers/components/MemberListItem.js

@@ -7,11 +7,11 @@ import User from "models/User";
 import Avatar from "components/Avatar";
 import Badge from "components/Badge";
 import Button from "components/Button";
-import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
 import Flex from "components/Flex";
 import InputSelect from "components/InputSelect";
 import ListItem from "components/List/Item";
 import Time from "components/Time";
+import MemberMenu from "menus/MemberMenu";
 
 type Props = {
   user: User,
@@ -69,13 +69,7 @@ const MemberListItem = ({
             />
           )}
             
-          {canEdit && onRemove && (
-            <DropdownMenu>
-              <DropdownMenuItem onClick={onRemove}>
-                {t("Remove")}
-              </DropdownMenuItem>
-            </DropdownMenu>
-          )}
+          {canEdit && onRemove && <MemberMenu onRemove={onRemove} />}
           {canEdit && onAdd && (
             <Button onClick={onAdd} neutral>
               {t("Add")}