chore: Refactors towards shared menu component (#4445)

app/components/ContextMenu/MenuItem.tsx

@@ -1,6 +1,7 @@
 import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -8,6 +9,7 @@ import MenuIconWrapper from "../MenuIconWrapper";
 
 type Props = {
   onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
+  active?: boolean;
   selected?: boolean;
   disabled?: boolean;
   dangerous?: boolean;
@@ -18,18 +20,23 @@ type Props = {
   hide?: () => void;
   level?: number;
   icon?: React.ReactElement;
+  children?: React.ReactNode;
 };
 
-const MenuItem: React.FC<Props> = ({
-  onClick,
-  children,
-  selected,
-  disabled,
-  as,
-  hide,
-  icon,
-  ...rest
-}) => {
+const MenuItem = (
+  {
+    onClick,
+    children,
+    active,
+    selected,
+    disabled,
+    as,
+    hide,
+    icon,
+    ...rest
+  }: Props,
+  ref: React.Ref<HTMLAnchorElement>
+) => {
   const handleClick = React.useCallback(
     (ev) => {
       if (onClick) {
@@ -63,10 +70,14 @@ const MenuItem: React.FC<Props> = ({
       {(props) => (
         <MenuAnchor
           {...props}
-          $toggleable={selected !== undefined}
+          $active={active}
           as={onClick ? "button" : as}
           onClick={handleClick}
           onMouseDown={handleMouseDown}
+          ref={mergeRefs([
+            ref,
+            props.ref as React.RefObject<HTMLAnchorElement>,
+          ])}
         >
           {selected !== undefined && (
             <>
@@ -97,6 +108,7 @@ type MenuAnchorProps = {
   disabled?: boolean;
   dangerous?: boolean;
   disclosure?: boolean;
+  $active?: boolean;
 };
 
 export const MenuAnchorCSS = css<MenuAnchorProps>`
@@ -104,6 +116,7 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
   margin: 0;
   border: 0;
   padding: 12px;
+  border-radius: 4px;
   padding-left: ${(props) => 12 + (props.level || 0) * 10}px;
   width: 100%;
   min-height: 32px;
@@ -146,6 +159,20 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
       }
     }
   }
+
+  ${
+    props.$active &&
+    `
+      color: ${props.theme.white};
+      background: ${props.dangerous ? props.theme.danger : props.theme.primary};
+      box-shadow: none;
+      cursor: var(--pointer);
+
+      svg {
+        fill: ${props.theme.white};
+      }
+    `
+  }
   `};
 
   ${breakpoint("tablet")`
@@ -160,4 +187,4 @@ export const MenuAnchor = styled.a`
   ${MenuAnchorCSS}
 `;
 
-export default MenuItem;
+export default React.forwardRef<HTMLAnchorElement, Props>(MenuItem);

app/components/ContextMenu/Separator.tsx

@@ -11,5 +11,5 @@ export default function Separator(rest: React.HTMLAttributes<HTMLHRElement>) {
 }
 
 const HorizontalRule = styled.hr`
-  margin: 0.5em 12px;
+  margin: 6px 0;
 `;

app/components/ContextMenu/index.tsx

@@ -205,7 +205,7 @@ export const Background = styled(Scrollable)<BackgroundProps>`
   max-width: 100%;
   background: ${(props) => props.theme.menuBackground};
   border-radius: 6px;
-  padding: 6px 0;
+  padding: 6px;
   min-width: 180px;
   min-height: 44px;
   max-height: 75vh;