Merge signalapp/Signal-Desktop#6822

stylesheets/components/NavSidebar.scss

@@ -195,6 +195,15 @@
     }
   }
 
+  &:active {
+    @include light-theme {
+      background: $color-gray-20;
+    }
+    @include dark-theme {
+      background: $color-gray-62;
+    }
+  }
+
   &:focus {
     outline: none;
     @include keyboard-mode {

ts/components/CallsTab.tsx

@@ -244,10 +244,11 @@ export function CallsTab({
                     }}
                     portalToRoot
                   >
-                    {({ openMenu, onKeyDown }) => {
+                    {({ onClick, onKeyDown, ref }) => {
                       return (
                         <NavSidebarActionButton
-                          onClick={openMenu}
+                          ref={ref}
+                          onClick={onClick}
                           onKeyDown={onKeyDown}
                           icon={<span className="CallsTab__MoreActionsIcon" />}
                           label={i18n('icu:CallsTab__MoreActionsLabel')}

ts/components/ContextMenu.tsx

@@ -25,7 +25,7 @@ export type ContextMenuOptionType<T> = Readonly<{
 }>;
 
 type RenderButtonProps = Readonly<{
-  openMenu: (ev: React.MouseEvent) => void;
+  onClick: (ev: React.MouseEvent) => void;
   onKeyDown: (ev: KeyboardEvent) => void;
   isMenuShowing: boolean;
   ref: React.Ref<HTMLButtonElement> | null;
@@ -207,10 +207,15 @@ export function ContextMenu<T>({
   };
 
   const handleClick = (ev: React.MouseEvent) => {
+    if (isMenuShowing && ev.type !== 'contextmenu') {
+      setIsMenuShowing(false);
+      closeCurrentOpenContextMenu = undefined;
+    } else {
       closeCurrentOpenContextMenu?.();
       closeCurrentOpenContextMenu = () => setIsMenuShowing(false);
       virtualElement.current = generateVirtualElement(ev.clientX, ev.clientY);
       setIsMenuShowing(true);
+    }
     ev.stopPropagation();
     ev.preventDefault();
   };
@@ -316,7 +321,7 @@ export function ContextMenu<T>({
     buttonNode = (
       <>
         {(children as (props: RenderButtonProps) => JSX.Element)({
-          openMenu: onClick || handleClick,
+          onClick: onClick || handleClick,
           onKeyDown: handleKeyDown,
           isMenuShowing,
           ref: setReferenceElement,

ts/components/LeftPane.tsx

@@ -671,10 +671,11 @@ export function LeftPane({
             }}
             portalToRoot
           >
-            {({ openMenu, onKeyDown }) => {
+            {({ onClick, onKeyDown, ref }) => {
               return (
                 <NavSidebarActionButton
-                  onClick={openMenu}
+                  ref={ref}
+                  onClick={onClick}
                   onKeyDown={onKeyDown}
                   icon={<span className="module-left-pane__moreActionsIcon" />}
                   label="More Actions"

ts/components/NavSidebar.tsx

@@ -16,19 +16,23 @@ import {
 import { WidthBreakpoint, getNavSidebarWidthBreakpoint } from './_util';
 import type { UnreadStats } from '../util/countUnreadStats';
 
-export function NavSidebarActionButton({
-  icon,
-  label,
-  onClick,
-  onKeyDown,
-}: {
+type NavSidebarActionButtonProps = {
   icon: ReactNode;
   label: ReactNode;
   onClick: MouseEventHandler<HTMLButtonElement>;
   onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
-}): JSX.Element {
+};
+
+export const NavSidebarActionButton = React.forwardRef<
+  HTMLButtonElement,
+  NavSidebarActionButtonProps
+>(function NavSidebarActionButtonInner(
+  { icon, label, onClick, onKeyDown },
+  ref
+): JSX.Element {
   return (
     <button
+      ref={ref}
       type="button"
       className="NavSidebar__ActionButton"
       onClick={onClick}
@@ -38,7 +42,7 @@ export function NavSidebarActionButton({
       <span className="NavSidebar__ActionButtonLabel">{label}</span>
     </button>
   );
-}
+});
 
 export type NavSidebarProps = Readonly<{
   actions?: ReactNode;

ts/components/NavTabs.tsx

@@ -307,7 +307,7 @@ export function NavTabs({
             }}
             portalToRoot
           >
-            {({ openMenu, onKeyDown, ref }) => {
+            {({ onClick, onKeyDown, ref }) => {
               return (
                 <button
                   type="button"
@@ -319,7 +319,7 @@ export function NavTabs({
                   }}
                   onClick={event => {
                     if (hasPendingUpdate) {
-                      openMenu(event);
+                      onClick(event);
                     } else {
                       onShowSettings();
                     }

ts/components/SendStoryModal.tsx

@@ -919,14 +919,14 @@ export function SendStoryModal({
               }}
               theme={theme === ThemeType.dark ? Theme.Dark : Theme.Light}
             >
-              {({ openMenu, onKeyDown, ref, menuNode }) => (
+              {({ onClick, onKeyDown, ref, menuNode }) => (
                 <div>
                   <Button
                     ref={ref}
                     className="SendStoryModal__new-story__button"
                     variant={ButtonVariant.Secondary}
                     size={ButtonSize.Small}
-                    onClick={openMenu}
+                    onClick={onClick}
                     onKeyDown={onKeyDown}
                   >
                     {i18n('icu:SendStoryModal__new')}

ts/components/StoriesTab.tsx

@@ -174,10 +174,11 @@ export function StoriesTab({
                 }}
                 portalToRoot
               >
-                {({ openMenu, onKeyDown }) => {
+                {({ onClick, onKeyDown, ref }) => {
                   return (
                     <NavSidebarActionButton
-                      onClick={openMenu}
+                      ref={ref}
+                      onClick={onClick}
                       onKeyDown={onKeyDown}
                       icon={<span className="StoriesTab__MoreActionsIcon" />}
                       label={i18n('icu:StoriesTab__MoreActionsLabel')}

ts/components/StoryViewsNRepliesModal.tsx

@@ -649,9 +649,9 @@ function ReplyOrReactionMessage({
 
   return reply.author.isMe && !reply.deletedForEveryone ? (
     <ContextMenu i18n={i18n} key={reply.id} menuOptions={menuOptions}>
-      {({ openMenu, menuNode }) => (
+      {({ onClick, menuNode }) => (
         <>
-          {renderContent(openMenu)}
+          {renderContent(onClick)}
           {menuNode}
         </>
       )}

ts/components/conversation/conversation-details/ConversationDetails.tsx

@@ -539,12 +539,12 @@ export function ConversationDetails({
                     },
                   ]}
                 >
-                  {({ openMenu }) => {
+                  {({ onClick }) => {
                     return (
                       <button
                         type="button"
                         className="ConversationDetails--nickname-actions"
-                        onClick={openMenu}
+                        onClick={onClick}
                       >
                         <span className="ConversationDetails--nickname-actions-label">
                           {i18n('icu:ConversationDetails--nickname-actions')}