Better dropdown menu close

Author: nolannbiron

packages/gitbook/src/components/AIActions/AIActions.tsx

@@ -8,7 +8,7 @@ import { MarkdownIcon } from '@/components/AIActions/assets/MarkdownIcon';
 import { getAIChatName } from '@/components/AIChat';
 import { AIChatIcon } from '@/components/AIChat';
 import { Button } from '@/components/primitives/Button';
-import { DropdownMenuItem } from '@/components/primitives/DropdownMenu';
+import { DropdownMenuItem, useDropdownMenuClose } from '@/components/primitives/DropdownMenu';
 import { tString, useLanguage } from '@/intl/client';
 import type { TranslationLanguage } from '@/intl/translations';
 import { Icon, type IconName, IconStyle } from '@gitbook/icons';
@@ -62,7 +62,7 @@ type CopiedStore = {
 const useCopiedStore = create<
     CopiedStore & {
         setState: (partial: Partial<CopiedStore>) => void;
-        copyWithTimeout: (props: { markdown: string; shouldCloseDropdown: boolean }) => void;
+        copyWithTimeout: (props: { markdown: string }, opts?: { onSuccess?: () => void }) => void;
     }
 >((set) => {
     let timeoutRef: ReturnType<typeof setTimeout> | null = null;
@@ -71,24 +71,24 @@ const useCopiedStore = create<
         copied: false,
         loading: false,
         setState: (partial: Partial<CopiedStore>) => set((state) => ({ ...state, ...partial })),
-        copyWithTimeout: async (props) => {
-            const { markdown, shouldCloseDropdown } = props;
+        copyWithTimeout: async (props, opts) => {
+            const { markdown } = props;
+            const { onSuccess } = opts || {};
 
             if (timeoutRef) {
                 clearTimeout(timeoutRef);
             }
 
             await navigator.clipboard.writeText(markdown);
 
-            set({ copied: true, loading: false });
+            set({ copied: true });
 
             timeoutRef = setTimeout(() => {
                 set({ copied: false });
-                timeoutRef = null;
+                onSuccess?.();
 
-                if (shouldCloseDropdown) {
-                    closeDropdown();
-                }
+                // Reset the timeout ref to avoid multiple timeouts
+                timeoutRef = null;
             }, 1500);
         },
     };
@@ -99,18 +99,6 @@ const useCopiedStore = create<
  */
 const markdownCache = new QuickLRU<string, string>({ maxSize: 10 });
 
-/**
- * Function to manually close the dropdown
- */
-function closeDropdown() {
-    const dropdownMenu = document.querySelector('div[data-radix-popper-content-wrapper]');
-    if (!dropdownMenu) return;
-
-    // Dispatch on `document` so that the event is captured by Radix's
-    // dismissable-layer listener regardless of focus location.
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-}
-
 /**
  * Copies the markdown version of the page to the clipboard.
  */
@@ -122,6 +110,8 @@ export function CopyMarkdown(props: {
     const { markdownPageUrl, type, isDefaultAction } = props;
     const language = useLanguage();
 
+    const closeDropdown = useDropdownMenuClose();
+
     const { copied, loading, setState, copyWithTimeout } = useCopiedStore();
 
     // Fetch the markdown from the page
@@ -143,10 +133,19 @@ export function CopyMarkdown(props: {
             e.preventDefault();
         }
 
-        copyWithTimeout({
-            markdown: markdownCache.get(markdownPageUrl) || (await fetchMarkdown()),
-            shouldCloseDropdown: type === 'dropdown-menu-item' && !isDefaultAction,
-        });
+        copyWithTimeout(
+            {
+                markdown: markdownCache.get(markdownPageUrl) || (await fetchMarkdown()),
+            },
+            {
+                onSuccess: () => {
+                    // We close the dropdown menu if the action is a dropdown menu item and not the default action.
+                    if (type === 'dropdown-menu-item' && !isDefaultAction) {
+                        closeDropdown();
+                    }
+                },
+            }
+        );
     };
 
     return (

packages/gitbook/src/components/primitives/DropdownMenu.tsx

@@ -2,19 +2,28 @@
 
 import { Icon } from '@gitbook/icons';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
-import { useState } from 'react';
+import { createContext, useContext, useState } from 'react';
 
 import { type ClassValue, tcls } from '@/lib/tailwind';
 
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 
+import { assert } from 'ts-essentials';
 import { Link, type LinkInsightsProps } from '.';
 
 export type DropdownButtonProps<E extends HTMLElement = HTMLElement> = Omit<
     Partial<DetailedHTMLProps<HTMLAttributes<E>, E>>,
     'ref'
 >;
 
+const DropdownMenuContext = createContext<{
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}>({
+    open: false,
+    setOpen: () => {},
+});
+
 /**
  * Button with a dropdown.
  */
@@ -47,46 +56,46 @@ export function DropdownMenu(props: {
         align = 'start',
     } = props;
     const [hovered, setHovered] = useState(false);
-    const [clicked, setClicked] = useState(false);
+    const [open, setOpen] = useState(false);
 
-    return (
-        <RadixDropdownMenu.Root
-            modal={false}
-            open={openOnHover ? clicked || hovered : clicked}
-            onOpenChange={setClicked}
-        >
-            <RadixDropdownMenu.Trigger
-                asChild
-                onMouseEnter={() => setHovered(true)}
-                onMouseLeave={() => setHovered(false)}
-                onClick={() => (openOnHover ? setClicked(!clicked) : null)}
-                className="group/dropdown"
-            >
-                {button}
-            </RadixDropdownMenu.Trigger>
+    const isOpen = openOnHover ? open || hovered : open;
 
-            <RadixDropdownMenu.Portal>
-                <RadixDropdownMenu.Content
-                    data-testid="dropdown-menu"
-                    hideWhenDetached
-                    collisionPadding={8}
+    return (
+        <DropdownMenuContext.Provider value={{ open: isOpen, setOpen }}>
+            <RadixDropdownMenu.Root modal={false} open={isOpen} onOpenChange={setOpen}>
+                <RadixDropdownMenu.Trigger
+                    asChild
                     onMouseEnter={() => setHovered(true)}
                     onMouseLeave={() => setHovered(false)}
-                    align={align}
-                    side={side}
-                    className="z-40 animate-scaleIn border-tint pt-2"
+                    onClick={() => (openOnHover ? setOpen(!open) : null)}
+                    className="group/dropdown"
                 >
-                    <div
-                        className={tcls(
-                            'flex max-h-80 min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto circular-corners:rounded-xl rounded-md straight-corners:rounded-none border border-tint bg-tint-base p-2 shadow-lg sm:min-w-52 sm:max-w-80',
-                            className
-                        )}
+                    {button}
+                </RadixDropdownMenu.Trigger>
+
+                <RadixDropdownMenu.Portal>
+                    <RadixDropdownMenu.Content
+                        data-testid="dropdown-menu"
+                        hideWhenDetached
+                        collisionPadding={8}
+                        onMouseEnter={() => setHovered(true)}
+                        onMouseLeave={() => setHovered(false)}
+                        align={align}
+                        side={side}
+                        className="z-40 animate-scaleIn border-tint pt-2"
                     >
-                        {children}
-                    </div>
-                </RadixDropdownMenu.Content>
-            </RadixDropdownMenu.Portal>
-        </RadixDropdownMenu.Root>
+                        <div
+                            className={tcls(
+                                'flex max-h-80 min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto circular-corners:rounded-xl rounded-md straight-corners:rounded-none border border-tint bg-tint-base p-2 shadow-lg sm:min-w-52 sm:max-w-80',
+                                className
+                            )}
+                        >
+                            {children}
+                        </div>
+                    </RadixDropdownMenu.Content>
+                </RadixDropdownMenu.Portal>
+            </RadixDropdownMenu.Root>
+        </DropdownMenuContext.Provider>
     );
 }
 
@@ -193,3 +202,12 @@ export function DropdownSubMenu(props: { children: React.ReactNode; label: React
         </RadixDropdownMenu.Sub>
     );
 }
+
+/**
+ * Hook to close the dropdown menu.
+ */
+export function useDropdownMenuClose() {
+    const context = useContext(DropdownMenuContext);
+    assert(context, 'DropdownMenuContext not found');
+    return () => context.setOpen(false);
+}