@nextclaw/ui 0.25.4 → 0.26.1

package/src/shared/components/ui/context-menu/__tests__/context-menu.test.tsx

@@ -1,9 +1,113 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
-import { ContextMenu, ContextMenuTrigger } from '@/shared/components/ui/context-menu/context-menu';
+import { ContextMenu, ContextMenuItems, ContextMenuTrigger } from '@/shared/components/ui/context-menu/context-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/shared/components/ui/dialog';
 
 describe('ContextMenu', () => {
+  it('returns from an embedded submenu before dismissing its Radix popover', async () => {
+    render(<Popover><PopoverTrigger>Actions</PopoverTrigger><PopoverContent>
+      <ContextMenuItems onClose={vi.fn()} groups={[{ key: 'layout', items: [
+        { key: 'layout', label: 'Layout', children: [{ key: 'placement', items: [
+          { key: 'dock', label: 'Dock', onSelect: vi.fn() },
+        ] }] },
+      ] }]} />
+    </PopoverContent></Popover>);
+    await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Layout' }));
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByRole('menuitem', { name: 'Dock' })).toBeNull();
+    expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Layout' }));
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByRole('menuitem')).toBeNull();
+  });
+
+  it('dismisses a resource menu before its enclosing Radix dialog', async () => {
+    const onOpenChange = vi.fn();
+    render(<Dialog open onOpenChange={onOpenChange}><DialogContent>
+      <DialogTitle>Details</DialogTitle><DialogDescription>Resource details</DialogDescription>
+      <ContextMenu label="Resource actions" groups={[{ key: 'main', items: [{ key: 'copy', label: 'Copy', onSelect: vi.fn() }] }]}>
+        <div><ContextMenuTrigger><button>Actions</button></ContextMenuTrigger></div>
+      </ContextMenu>
+    </DialogContent></Dialog>);
+    await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByRole('menu')).toBeNull();
+    expect(onOpenChange).not.toHaveBeenCalled();
+    await userEvent.keyboard('{Escape}');
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('keeps layout actions collapsed and returns focus from the submenu', async () => {
+    const onSelect = vi.fn();
+    render(<ContextMenu label="Actions" groups={[{ key: 'main', items: [
+      { key: 'copy', label: 'Copy', onSelect: vi.fn() },
+      { key: 'layout', label: 'Layout', children: [{ key: 'placement', items: [
+        { key: 'dock', label: 'Dock', onSelect },
+      ] }] },
+    ] }]}><div><ContextMenuTrigger><button>More</button></ContextMenuTrigger></div></ContextMenu>);
+    await userEvent.click(screen.getByRole('button', { name: 'More' }));
+    expect(screen.queryByRole('menuitem', { name: 'Dock' })).toBeNull();
+    await userEvent.keyboard('{ArrowDown}{ArrowRight}');
+    expect(screen.getByRole('menuitem', { name: 'Copy' })).toBeTruthy();
+    expect(screen.getAllByRole('menu')).toHaveLength(2);
+    expect(screen.getByRole('menuitem', { name: 'Layout' }).getAttribute('aria-expanded')).toBe('true');
+    expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Dock' }));
+    await userEvent.keyboard('{Escape}');
+    expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Layout' }));
+    expect(screen.getByRole('menu')).toBeTruthy();
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Layout' }));
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Dock' }));
+    expect(onSelect).toHaveBeenCalledOnce();
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('opens beside the parent on hover, preserves both levels, and closes when another parent item is entered', async () => {
+    render(<ContextMenu label="Actions" groups={[{ key: 'main', items: [
+      { key: 'copy', label: 'Copy', onSelect: vi.fn() },
+      { key: 'layout', label: 'Layout', children: [{ key: 'placement', items: [
+        { key: 'dock', label: 'Dock', onSelect: vi.fn() },
+      ] }] },
+    ] }]}><div><ContextMenuTrigger><button>More</button></ContextMenuTrigger></div></ContextMenu>);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'More' }));
+    await user.hover(screen.getByRole('menuitem', { name: 'Layout' }));
+    const dock = await screen.findByRole('menuitem', { name: 'Dock' });
+    expect(screen.getByRole('menuitem', { name: 'Copy' })).toBeTruthy();
+    expect(['left', 'right']).toContain(screen.getByRole('menu', { name: 'Layout' }).getAttribute('data-side'));
+    await user.hover(dock);
+    expect(screen.getAllByRole('menu')).toHaveLength(2);
+    await user.click(screen.getByRole('menuitem', { name: 'Layout' }));
+    expect(screen.getByRole('menuitem', { name: 'Dock' })).toBeTruthy();
+    expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Dock' }));
+    await user.hover(screen.getByRole('menuitem', { name: 'Copy' }));
+    await waitFor(() => expect(screen.queryByRole('menuitem', { name: 'Dock' })).toBeNull());
+    expect(screen.getByRole('menu', { name: 'Actions' })).toBeTruthy();
+  });
+
+  it('keeps modal actions inside the dialog focus boundary and consumes Escape', async () => {
+    const onSelect = vi.fn();
+    const onDialogKeyDown = vi.fn();
+    render(
+      <div role="dialog" onKeyDown={onDialogKeyDown}>
+        <ContextMenu label="Resource actions" groups={[{ key: 'open', items: [{ key: 'open', label: 'Open resource', onSelect }] }]}>
+          <div><ContextMenuTrigger><button type="button">Actions</button></ContextMenuTrigger></div>
+        </ContextMenu>
+      </div>,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
+    const menu = screen.getByRole('menu');
+    expect(menu.closest('[role="dialog"]')).toBe(screen.getByRole('dialog'));
+    expect(menu.parentElement?.className).toContain('pointer-events-auto');
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByRole('menu')).toBeNull();
+    expect(onDialogKeyDown).not.toHaveBeenCalled();
+    await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Open resource' }));
+    expect(onSelect).toHaveBeenCalledOnce();
+  });
+
   it('opens at the trigger and supports keyboard selection', async () => {
     const onSelect = vi.fn();
     render(

package/src/shared/components/ui/context-menu/context-menu-items.tsx

@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+import type { ContextMenuGroup, ContextMenuItem } from "./context-menu";
+
+export const CONTEXT_MENU_SURFACE_CLASS =
+  "w-max min-w-52 max-w-[min(18rem,calc(100vw-16px))] overflow-y-auto rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[0_18px_48px_-20px_rgba(15,23,42,0.42)] outline-none";
+
+function MenuItemContent({ item }: { item: ContextMenuItem }) {
+  return <>
+    {item.icon ? <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground">{item.icon}</span> : null}
+    <span className="min-w-0 flex-1 truncate">{item.label}</span>
+    {item.children ? <ChevronRight className="h-4 w-4 shrink-0" /> : null}
+  </>;
+}
+
+function ContextSubmenu({ item, open, onOpenChange, onClose, className, children }: {
+  item: ContextMenuItem & { children: readonly ContextMenuGroup[] };
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onClose: (restoreFocus: boolean) => void;
+  className: string;
+  children: ReactNode;
+}) {
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [portalHost, setPortalHost] = useState<HTMLElement>();
+  const setTrigger = useCallback((node: HTMLButtonElement | null) => {
+    triggerRef.current = node;
+    setPortalHost(node?.closest<HTMLElement>("[data-context-menu-layer]") ?? undefined);
+  }, []);
+  const timer = useRef<ReturnType<typeof setTimeout>>();
+  const keyboardOpen = useRef(false);
+  const cancelPending = () => clearTimeout(timer.current);
+  const schedule = (next: boolean) => {
+    cancelPending();
+    timer.current = setTimeout(() => onOpenChange(next), next ? 100 : 250);
+  };
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const closeLevel = () => {
+    cancelPending();
+    onOpenChange(false);
+    triggerRef.current?.focus();
+  };
+  const openFromControl = () => {
+    cancelPending();
+    keyboardOpen.current = true;
+    onOpenChange(true);
+    contentRef.current?.querySelector<HTMLElement>('[role="menuitem"]:not(:disabled)')?.focus();
+  };
+  return <Popover.Root open={open} onOpenChange={onOpenChange}>
+    <Popover.Trigger asChild>
+      <button
+        ref={setTrigger}
+        type="button"
+        role="menuitem"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        disabled={item.disabled}
+        data-menu-key={item.key}
+        className={cn(className, open && "bg-muted")}
+        onPointerEnter={(event) => {
+          if (event.pointerType === "touch") return;
+          keyboardOpen.current = false;
+          schedule(true);
+        }}
+        onPointerLeave={() => schedule(false)}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          openFromControl();
+        }}
+        onKeyDown={(event) => {
+          if (event.key !== "ArrowRight") return;
+          event.preventDefault();
+          event.stopPropagation();
+          openFromControl();
+        }}
+      >{children}</button>
+    </Popover.Trigger>
+    <Popover.Portal container={portalHost}>
+      <Popover.Content
+        ref={contentRef}
+        role="menu"
+        aria-label={item.label}
+        data-menu-escape-owner=""
+        data-theme-overlay="menu"
+        side="right"
+        align="start"
+        sideOffset={2}
+        collisionPadding={8}
+        className={cn(CONTEXT_MENU_SURFACE_CLASS, "z-[var(--z-tooltip)]")}
+        style={{
+          minWidth: "min(13rem, var(--radix-popover-content-available-width))",
+          maxWidth: "min(18rem, var(--radix-popover-content-available-width))",
+          maxHeight: "var(--radix-popover-content-available-height)",
+        }}
+        onPointerEnter={cancelPending}
+        onPointerLeave={() => schedule(false)}
+        onPointerDown={(event) => event.stopPropagation()}
+        onOpenAutoFocus={(event) => {
+          if (!keyboardOpen.current) event.preventDefault();
+        }}
+        onCloseAutoFocus={(event) => event.preventDefault()}
+        onEscapeKeyDown={(event) => { event.preventDefault(); closeLevel(); }}
+        onKeyDown={(event) => {
+          if (event.key === "ArrowLeft" || event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            closeLevel();
+          }
+        }}
+      >
+        <ContextMenuItems groups={item.children} onClose={onClose} />
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>;
+}
+
+/** The single item/group renderer for standalone and embedded action menus. */
+export function ContextMenuItems({ groups, onClose }: {
+  groups: readonly ContextMenuGroup[];
+  onClose: (restoreFocus: boolean) => void;
+}) {
+  const [openKey, setOpenKey] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  return <div
+    ref={containerRef}
+    data-menu-level=""
+    data-menu-escape-owner={openKey ? "" : undefined}
+    onKeyDown={(event) => {
+      // Portalled descendants retain React ancestry; each level owns its keys.
+      if ((event.target as Element).closest('[data-menu-level]') !== containerRef.current) return;
+      if (event.key === "Escape" && openKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        containerRef.current?.querySelector<HTMLElement>('[aria-expanded="true"]')?.focus();
+        setOpenKey(null);
+      } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const items = Array.from(containerRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]:not(:disabled)') ?? [])
+          .filter((item) => item.closest('[data-menu-level]') === containerRef.current);
+        const index = items.indexOf(document.activeElement as HTMLElement);
+        const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1
+          : (index + (event.key === "ArrowUp" ? -1 : 1) + items.length) % items.length;
+        setOpenKey(null);
+        items[next]?.focus();
+      }
+    }}
+  >
+    {groups.filter((group) => group.items.length).map((group, index) => <div key={group.key} role="group">
+      {index > 0 ? <div className="my-1 h-px bg-border" /> : null}
+      {group.items.map((item) => {
+        const className = cn(
+          "flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-[13px] font-medium outline-none transition-colors disabled:pointer-events-none disabled:opacity-45",
+          item.destructive ? "text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10" : "text-foreground hover:bg-muted focus-visible:bg-muted",
+        );
+        const content = <MenuItemContent item={item} />;
+        if (item.children) return <ContextSubmenu key={item.key} item={item} open={openKey === item.key}
+          onOpenChange={(open) => setOpenKey((current) => open ? item.key : current === item.key ? null : current)}
+          onClose={onClose} className={className}>{content}</ContextSubmenu>;
+        const select = () => { item.onSelect?.(); onClose(item.href ? false : item.restoreFocus !== false); };
+        return item.href ? <a key={item.key} role="menuitem" className={className} href={item.href} download={item.download}
+          onPointerEnter={() => setOpenKey(null)} onClick={(event) => { event.stopPropagation(); select(); }}>{content}</a>
+          : <button key={item.key} type="button" role="menuitem" disabled={item.disabled} aria-pressed={item.pressed}
+            data-menu-key={item.key} className={className} onPointerEnter={() => setOpenKey(null)}
+            onClick={(event) => { event.stopPropagation(); select(); }}>{content}</button>;
+      })}
+    </div>)}
+  </div>;
+}

package/src/shared/components/ui/context-menu/context-menu.tsx

@@ -8,9 +8,11 @@ import {
   type MouseEvent,
   type ReactElement,
   type ReactNode,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { cn } from '@/shared/lib/utils';
+} from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/shared/lib/utils";
+import { ContextMenuItems, CONTEXT_MENU_SURFACE_CLASS } from "./context-menu-items";
+export { ContextMenuItems } from "./context-menu-items";
 
 type ContextMenuItemBase = {
   key: string;
@@ -18,21 +20,30 @@ type ContextMenuItemBase = {
   icon?: ReactNode;
   destructive?: boolean;
   disabled?: boolean;
+  pressed?: boolean;
   restoreFocus?: boolean;
 };
 
 export type ContextMenuItem = ContextMenuItemBase &
   (
     | {
+        children?: never;
         download?: string;
         href: string;
         onSelect?: () => void;
       }
     | {
+        children?: never;
         download?: never;
         href?: never;
         onSelect: () => void;
       }
+    | {
+        children: readonly ContextMenuGroup[];
+        download?: never;
+        href?: never;
+        onSelect?: never;
+      }
   );
 
 export type ContextMenuGroup = {
@@ -41,7 +52,7 @@ export type ContextMenuGroup = {
 };
 
 type ContextMenuPosition = {
-  align: 'start' | 'end';
+  align: "start" | "end";
   x: number;
   y: number;
   trigger: HTMLElement;
@@ -52,10 +63,18 @@ type ContextMenuController = {
   toggleFromButton: (trigger: HTMLElement) => void;
 };
 
-const ContextMenuControllerContext = createContext<ContextMenuController | null>(null);
+const ContextMenuControllerContext =
+  createContext<ContextMenuController | null>(null);
 
 const CONTEXT_MENU_EDGE_GAP = 8;
 
+/** Radix dismisses overlays during capture, before the inner menu handles Escape. */
+export function deferEscapeToNestedMenu(event: KeyboardEvent): boolean {
+  if (!(event.target instanceof Element) || !event.target.closest('[data-menu-escape-owner]')) return false;
+  event.preventDefault();
+  return true;
+}
+
 function ContextMenuSurface({
   groups,
   label,
@@ -68,129 +87,90 @@ function ContextMenuSurface({
   position: ContextMenuPosition;
 }) {
   const menuRef = useRef<HTMLDivElement | null>(null);
+  // Keep modal menus inside the dialog's focus and pointer-event boundary.
+  const portalHost =
+    position.trigger.closest<HTMLElement>('[role="dialog"]') ?? document.body;
+  const isModal = portalHost !== document.body;
 
   useLayoutEffect(() => {
     const menu = menuRef.current;
     if (!menu) {
       return;
     }
-    const rect = menu.getBoundingClientRect();
-    const preferredLeft = position.align === 'end' ? position.x - rect.width : position.x;
-    const left = Math.max(
-      CONTEXT_MENU_EDGE_GAP,
-      Math.min(preferredLeft, window.innerWidth - rect.width - CONTEXT_MENU_EDGE_GAP),
-    );
-    const top = Math.max(
-      CONTEXT_MENU_EDGE_GAP,
-      Math.min(position.y, window.innerHeight - rect.height - CONTEXT_MENU_EDGE_GAP),
-    );
-    menu.style.left = `${left}px`;
-    menu.style.top = `${top}px`;
-    menu.querySelector<HTMLElement>('[role="menuitem"]:not(:disabled)')?.focus();
-  }, [position]);
-
-  const moveFocus = (direction: 1 | -1) => {
-    const items = Array.from(menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]:not(:disabled)') ?? []);
-    if (items.length === 0) {
-      return;
-    }
-    const currentIndex = items.indexOf(document.activeElement as HTMLElement);
-    const nextIndex = currentIndex < 0 ? 0 : (currentIndex + direction + items.length) % items.length;
-    items[nextIndex]?.focus();
-  };
+    const reposition = () => {
+      const bounds = isModal
+        ? portalHost.getBoundingClientRect()
+        : {
+            left: 0,
+            top: 0,
+            right: window.innerWidth,
+            bottom: window.innerHeight,
+            height: window.innerHeight,
+          };
+      menu.style.maxHeight = `${Math.max(0, bounds.height - CONTEXT_MENU_EDGE_GAP * 2)}px`;
+      const rect = menu.getBoundingClientRect();
+      const preferredLeft =
+        position.align === "end" ? position.x - rect.width : position.x;
+      const left = Math.max(
+        bounds.left + CONTEXT_MENU_EDGE_GAP,
+        Math.min(
+          preferredLeft,
+          bounds.right - rect.width - CONTEXT_MENU_EDGE_GAP,
+        ),
+      );
+      const top = Math.max(
+        bounds.top + CONTEXT_MENU_EDGE_GAP,
+        Math.min(
+          position.y,
+          bounds.bottom - rect.height - CONTEXT_MENU_EDGE_GAP,
+        ),
+      );
+      menu.style.left = `${left - bounds.left}px`;
+      menu.style.top = `${top - bounds.top}px`;
+    };
+    reposition();
+    menu
+      .querySelector<HTMLElement>('[role="menuitem"]:not(:disabled)')
+      ?.focus();
+    const observer = new ResizeObserver(reposition);
+    observer.observe(menu);
+    return () => observer.disconnect();
+  }, [position, portalHost, isModal]);
 
   return createPortal(
     <div
-      className="fixed inset-0 z-[var(--z-tooltip)]"
+      className={cn(
+        "pointer-events-auto inset-0 z-[var(--z-tooltip)]",
+        isModal ? "absolute" : "fixed",
+      )}
+      data-context-menu-layer=""
       onContextMenu={(event) => event.preventDefault()}
       onPointerDown={() => onClose(true)}
     >
       <div
         ref={menuRef}
         role="menu"
+        data-menu-escape-owner=""
         data-theme-overlay="menu"
         aria-label={label}
-        className="fixed min-w-52 max-w-72 overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[0_18px_48px_-20px_rgba(15,23,42,0.42)]"
+        className={cn(
+          CONTEXT_MENU_SURFACE_CLASS,
+          isModal ? "absolute" : "fixed",
+        )}
         style={{ left: position.x, top: position.y }}
         onPointerDown={(event) => event.stopPropagation()}
         onKeyDown={(event) => {
-          if (event.key === 'Escape') {
+          if (event.key === "Escape") {
             event.preventDefault();
+            event.stopPropagation();
             onClose(true);
-          } else if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            moveFocus(1);
-          } else if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            moveFocus(-1);
-          } else if (event.key === 'Home' || event.key === 'End') {
-            event.preventDefault();
-            const items = menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]:not(:disabled)');
-            items?.[event.key === 'Home' ? 0 : items.length - 1]?.focus();
           }
         }}
       >
-        {groups.map((group, groupIndex) => (
-          <div key={group.key} role="group">
-            {groupIndex > 0 ? <div className="my-1 h-px bg-border" /> : null}
-            {group.items.map((item) => {
-              const itemClassName = cn(
-                'flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-[13px] font-medium outline-none transition-colors',
-                item.destructive
-                  ? 'text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10'
-                  : 'text-foreground hover:bg-muted focus-visible:bg-muted',
-                'disabled:pointer-events-none disabled:opacity-45',
-              );
-              const content = (
-                <>
-                  {item.icon ? (
-                    <span
-                      className={cn(
-                        'inline-flex h-4 w-4 shrink-0 items-center justify-center',
-                        item.destructive ? 'text-destructive' : 'text-muted-foreground',
-                      )}
-                    >
-                      {item.icon}
-                    </span>
-                  ) : null}
-                  <span className="min-w-0 flex-1 truncate">{item.label}</span>
-                </>
-              );
-              return item.href ? (
-                <a
-                  key={item.key}
-                  role="menuitem"
-                  className={itemClassName}
-                  href={item.href}
-                  download={item.download}
-                  onClick={() => {
-                    item.onSelect?.();
-                    onClose(false);
-                  }}
-                >
-                  {content}
-                </a>
-              ) : (
-                <button
-                  key={item.key}
-                  type="button"
-                  role="menuitem"
-                  disabled={item.disabled}
-                  className={itemClassName}
-                  onClick={() => {
-                    item.onSelect?.();
-                    onClose(item.restoreFocus !== false);
-                  }}
-                >
-                  {content}
-                </button>
-              );
-            })}
-          </div>
-        ))}
+        <ContextMenuItems groups={groups} onClose={onClose} />
       </div>
     </div>,
-    document.body,
+    portalHost,
   );
 }
 
@@ -200,7 +180,7 @@ export function ContextMenu({
   label,
 }: {
   children: ReactElement<{
-    'data-context-menu-open'?: string;
+    "data-context-menu-open"?: string;
     onContextMenu?: (event: MouseEvent) => void;
   }>;
   groups: readonly ContextMenuGroup[];
@@ -226,7 +206,7 @@ export function ContextMenu({
     }
     const bounds = trigger.getBoundingClientRect();
     setPosition({
-      align: 'end',
+      align: "end",
       x: bounds.right,
       y: bounds.bottom,
       trigger,
@@ -234,7 +214,7 @@ export function ContextMenu({
   };
 
   const child = cloneElement(children, {
-    'data-context-menu-open': position ? '' : undefined,
+    "data-context-menu-open": position ? "" : undefined,
     onContextMenu: (event: MouseEvent) => {
       children.props.onContextMenu?.(event);
       if (event.defaultPrevented || visibleGroups.length === 0) {
@@ -244,7 +224,7 @@ export function ContextMenu({
       const trigger = event.currentTarget as HTMLElement;
       const bounds = trigger.getBoundingClientRect();
       setPosition({
-        align: 'start',
+        align: "start",
         x: event.clientX || bounds.left,
         y: event.clientY || bounds.bottom,
         trigger,
@@ -253,10 +233,17 @@ export function ContextMenu({
   });
 
   return (
-    <ContextMenuControllerContext.Provider value={{ isOpen: Boolean(position), toggleFromButton }}>
+    <ContextMenuControllerContext.Provider
+      value={{ isOpen: Boolean(position), toggleFromButton }}
+    >
       {child}
       {position ? (
-        <ContextMenuSurface groups={visibleGroups} label={label} position={position} onClose={closeMenu} />
+        <ContextMenuSurface
+          groups={visibleGroups}
+          label={label}
+          position={position}
+          onClose={closeMenu}
+        />
       ) : null}
     </ContextMenuControllerContext.Provider>
   );
@@ -266,19 +253,19 @@ export function ContextMenuTrigger({
   children,
 }: {
   children: ReactElement<{
-    'aria-expanded'?: boolean;
-    'aria-haspopup'?: 'menu';
+    "aria-expanded"?: boolean;
+    "aria-haspopup"?: "menu";
     onClick?: (event: MouseEvent) => void;
   }>;
 }) {
   const controller = useContext(ContextMenuControllerContext);
   if (!controller) {
-    throw new Error('ContextMenuTrigger must be rendered inside ContextMenu');
+    throw new Error("ContextMenuTrigger must be rendered inside ContextMenu");
   }
 
   return cloneElement(children, {
-    'aria-expanded': controller.isOpen,
-    'aria-haspopup': 'menu',
+    "aria-expanded": controller.isOpen,
+    "aria-haspopup": "menu",
     onClick: (event: MouseEvent) => {
       children.props.onClick?.(event);
       if (event.defaultPrevented) {

package/src/shared/components/ui/dialog.tsx

@@ -3,6 +3,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
 
 import { cn } from "@/shared/lib/utils"
+import { deferEscapeToNestedMenu } from './context-menu/context-menu';
 
 const Dialog = DialogPrimitive.Root
 
@@ -42,6 +43,9 @@ const DialogContent = React.forwardRef<
         className
       )}
       {...props}
+      onEscapeKeyDown={(event) => {
+        if (!deferEscapeToNestedMenu(event)) props.onEscapeKeyDown?.(event);
+      }}
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1 opacity-70 transition-all duration-fast hover:bg-[var(--interaction-hover)] hover:text-accent-foreground hover:opacity-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none">

package/src/shared/components/ui/overlays/sheet.tsx

@@ -4,6 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 
 import { cn } from "@/shared/lib/utils";
+import { deferEscapeToNestedMenu } from '@/shared/components/ui/context-menu/context-menu';
 
 const Sheet = SheetPrimitive.Root;
 const SheetTrigger = SheetPrimitive.Trigger;
@@ -63,6 +64,9 @@ const SheetContent = React.forwardRef<
       data-theme-overlay="sheet"
       className={cn(sheetVariants({ side }), className)}
       {...props}
+      onEscapeKeyDown={(event) => {
+        if (!deferEscapeToNestedMenu(event)) props.onEscapeKeyDown?.(event);
+      }}
     >
       {children}
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1.5 text-muted-foreground opacity-75 transition-colors hover:bg-muted hover:text-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none">