@vvedantb/ui 0.4.3 → 0.5.0

package/src/ui/command.tsx

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { IconSearch } from "@tabler/icons-react";
-import { Dialog, DialogContent } from "./dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
 import { cn } from "../utils/cn";
 
 const Command = React.forwardRef<
@@ -19,16 +25,50 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
+// The list is pinned rather than `max-h`: a palette that resizes on every
+// keystroke shifts the whole dialog under the cursor.
+const commandDialogPinnedClass =
+  "[&_[cmdk-list]]:h-80 [&_[cmdk-list]]:max-h-[60dvh] [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-1.5 [&_[cmdk-input-wrapper]_svg]:h-4 [&_[cmdk-input-wrapper]_svg]:w-4 [&_[cmdk-input]]:h-11 [&_[cmdk-item]]:rounded-md [&_[cmdk-item]]:px-2.5 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4";
+
+// The list sizes itself and items keep the caller's styling.
+const commandDialogAutoClass =
+  "[&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-1.5 [&_[cmdk-input-wrapper]_svg]:h-4 [&_[cmdk-input-wrapper]_svg]:w-4 [&_[cmdk-input]]:h-11 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4"; // check-tokens-allow: text-muted
+
+interface CommandDialogProps extends React.ComponentProps<typeof Dialog> {
+  /** Screen-reader title. With `description`, adds a visually hidden header. */
+  title?: string;
+  /** Screen-reader description. With `title`, adds a visually hidden header. */
+  description?: string;
+  /** Merged onto the dialog content. */
+  className?: string;
+  /** Passed to `Command`. Set `false` to filter items yourself. */
+  shouldFilter?: boolean;
+  /** `"pinned"` (default) fixes the list height; `"auto"` lets it size itself. */
+  listLayout?: "pinned" | "auto";
+}
+
 function CommandDialog({
   children,
+  title,
+  description,
+  className,
+  shouldFilter,
+  listLayout = "pinned",
   ...props
-}: React.ComponentProps<typeof Dialog>) {
+}: CommandDialogProps) {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 sm:max-w-xl">
-        {/* The list is pinned rather than `max-h`: a palette that resizes on
-            every keystroke shifts the whole dialog under the cursor. */}
-        <Command className="[&_[cmdk-list]]:h-80 [&_[cmdk-list]]:max-h-[60dvh] [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-1.5 [&_[cmdk-input-wrapper]_svg]:h-4 [&_[cmdk-input-wrapper]_svg]:w-4 [&_[cmdk-input]]:h-11 [&_[cmdk-item]]:rounded-md [&_[cmdk-item]]:px-2.5 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4">
+      <DialogContent className={cn("overflow-hidden p-0 sm:max-w-xl", className)}>
+        {title !== undefined || description !== undefined ? (
+          <DialogHeader className="sr-only">
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>{description}</DialogDescription>
+          </DialogHeader>
+        ) : null}
+        <Command
+          shouldFilter={shouldFilter}
+          className={listLayout === "auto" ? commandDialogAutoClass : commandDialogPinnedClass}
+        >
           {children}
         </Command>
       </DialogContent>

package/src/ui/context-menu.tsx

@@ -15,6 +15,7 @@ import {
   menuShortcutClass,
   menuSubTriggerClass,
 } from "./_menu-classes";
+import { MenuItemRow, SubTriggerRow, suppressAltKeyDown } from "./_menu-parts";
 
 const ContextMenu = ContextMenuPrimitive.Root;
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
@@ -27,14 +28,18 @@ const ContextMenuSubTrigger = React.forwardRef<
   React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean;
+    /** Leading icon or mark. The label then fills the row. */
+    startContent?: React.ReactNode;
   }
->(({ className, inset, children, ...props }, ref) => (
+>(({ className, inset, startContent, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(menuSubTriggerClass, inset && "pl-8", className)}
     {...props}
   >
-    {children}
+    {startContent === undefined ? children : (
+      <SubTriggerRow startContent={startContent}>{children}</SubTriggerRow>
+    )}
     <IconChevronRight className="ml-auto" />
   </ContextMenuPrimitive.SubTrigger>
 ));
@@ -54,12 +59,16 @@ ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
   React.ComponentRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
+    /** Stop a bare Alt press from moving focus (e.g. into the browser menu bar). */
+    suppressAltKey?: boolean;
+  }
+>(({ className, suppressAltKey, onKeyDown, ...props }, ref) => (
   <ContextMenuPrimitive.Portal>
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(menuContentClass, "w-40", className)}
+      onKeyDown={suppressAltKey ? suppressAltKeyDown(onKeyDown) : onKeyDown}
       {...props}
     />
   </ContextMenuPrimitive.Portal>
@@ -70,14 +79,34 @@ const ContextMenuItem = React.forwardRef<
   React.ComponentRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
     inset?: boolean;
+    /** Leading icon or mark. Ignored with `asChild`. */
+    startContent?: React.ReactNode;
+    /** Second line under the label. Ignored with `asChild`. */
+    description?: React.ReactNode;
+    /** Trailing content. Ignored with `asChild`. */
+    endContent?: React.ReactNode;
   }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(menuItemClass, inset && "pl-8", className)}
-    {...props}
-  />
-));
+>(
+  (
+    { className, inset, startContent, description, endContent, children, asChild, ...props },
+    ref,
+  ) => (
+    <ContextMenuPrimitive.Item
+      ref={ref}
+      asChild={asChild}
+      className={cn(menuItemClass, inset && "pl-8", className)}
+      {...props}
+    >
+      {asChild || (startContent === undefined && description === undefined && endContent === undefined) ? (
+        children
+      ) : (
+        <MenuItemRow startContent={startContent} description={description} endContent={endContent}>
+          {children}
+        </MenuItemRow>
+      )}
+    </ContextMenuPrimitive.Item>
+  ),
+);
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<

package/src/ui/dropdown-menu.tsx

@@ -15,6 +15,13 @@ import {
   menuShortcutClass,
   menuSubTriggerClass,
 } from "./_menu-classes";
+import {
+  fitViewportClass,
+  MenuItemRow,
+  SubTriggerRow,
+  suppressAltKeyDown,
+} from "./_menu-parts";
+import { restoreModalScrollLock } from "./overlay-a11y";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -27,14 +34,18 @@ const DropdownMenuSubTrigger = React.forwardRef<
   React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
+    /** Leading icon or mark. The label then fills the row. */
+    startContent?: React.ReactNode;
   }
->(({ className, inset, children, ...props }, ref) => (
+>(({ className, inset, startContent, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(menuSubTriggerClass, inset && "pl-8", className)}
     {...props}
   >
-    {children}
+    {startContent === undefined ? children : (
+      <SubTriggerRow startContent={startContent}>{children}</SubTriggerRow>
+    )}
     <IconChevronRight className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
@@ -58,17 +69,48 @@ DropdownMenuSubContent.displayName =
 
 const DropdownMenuContent = React.forwardRef<
   React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(menuContentClass, className)}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    /** On small screens, cap the height to the viewport and scroll. */
+    fitViewport?: boolean;
+    /** Stop a bare Alt press from moving focus (e.g. into the browser menu bar). */
+    suppressAltKey?: boolean;
+    /** On close, clear any body scroll lock left behind when no dialog is open. */
+    restoreScrollLockOnClose?: boolean;
+  }
+>(
+  (
+    {
+      className,
+      sideOffset = 4,
+      fitViewport,
+      suppressAltKey,
+      restoreScrollLockOnClose,
+      onKeyDown,
+      onCloseAutoFocus,
+      ...props
+    },
+    ref,
+  ) => (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(menuContentClass, fitViewport && fitViewportClass, className)}
+        onKeyDown={suppressAltKey ? suppressAltKeyDown(onKeyDown) : onKeyDown}
+        onCloseAutoFocus={
+          restoreScrollLockOnClose
+            ? (event) => {
+                restoreModalScrollLock();
+                window.setTimeout(restoreModalScrollLock, 0);
+                onCloseAutoFocus?.(event);
+              }
+            : onCloseAutoFocus
+        }
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  ),
+);
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
@@ -79,10 +121,12 @@ const DropdownMenuItem = React.forwardRef<
     startContent?: React.ReactNode;
     /** Second line under the label. Ignored with `asChild`. */
     description?: React.ReactNode;
+    /** Trailing content. The label then fills the row. Ignored with `asChild`. */
+    endContent?: React.ReactNode;
   }
 >(
   (
-    { className, inset, startContent, description, children, asChild, ...props },
+    { className, inset, startContent, description, endContent, children, asChild, ...props },
     ref,
   ) => (
     <DropdownMenuPrimitive.Item
@@ -91,8 +135,12 @@ const DropdownMenuItem = React.forwardRef<
       className={cn(menuItemClass, inset && "pl-8", className)}
       {...props}
     >
-      {asChild || (startContent === undefined && description === undefined) ? (
+      {asChild || (startContent === undefined && description === undefined && endContent === undefined) ? (
         children
+      ) : endContent !== undefined ? (
+        <MenuItemRow startContent={startContent} description={description} endContent={endContent}>
+          {children}
+        </MenuItemRow>
       ) : (
         <>
           {startContent}

package/src/ui/overlay-a11y.ts

@@ -32,6 +32,25 @@ export function restoreBodyPointerEvents(): void {
   }
 }
 
+/**
+ * Clears the body pointer-events and scroll lock a closing modal menu can leave
+ * behind. Keeps the scroll lock while any dialog or alert dialog is still open.
+ */
+export function restoreModalScrollLock(): void {
+  if (typeof document === "undefined") return;
+  document.body.style.removeProperty("pointer-events");
+  if (
+    document.querySelector(
+      '[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]',
+    )
+  ) {
+    return;
+  }
+  document.body.style.removeProperty("overflow");
+  document.body.style.removeProperty("padding-right");
+  document.documentElement.style.removeProperty("overflow");
+}
+
 export function connectBodyPointerEventsFix(): () => void {
   restoreBodyPointerEvents();
   const observer = new MutationObserver(() => restoreBodyPointerEvents());

package/src/ui/popover.tsx

@@ -5,23 +5,33 @@ import {
   floatingSurfaceAnimateClass,
   floatingSurfaceClass,
 } from "./_menu-classes";
+import { fitViewportClass } from "./_menu-parts";
 
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ComponentRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 6, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    /**
+     * Grow from the trigger, keep 8px from the viewport edge (unless
+     * `collisionPadding` is set) and, on small screens, cap width and height.
+     */
+    fitViewport?: boolean;
+  }
+>(({ className, align = "center", sideOffset = 6, fitViewport, collisionPadding, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
+      collisionPadding={fitViewport ? (collisionPadding ?? 8) : collisionPadding}
       className={cn(
         "z-50 w-72 max-sm:max-w-[calc(100vw-2rem)] max-sm:max-h-[85dvh] max-sm:overflow-y-auto p-4 outline-none",
         floatingSurfaceClass,
         floatingSurfaceAnimateClass,
+        fitViewport &&
+          `origin-[var(--radix-popper-transform-origin)] max-sm:max-w-[calc(100vw-1.5rem)] ${fitViewportClass}`,
         className,
       )}
       {...props}

package/src/ui/select-field.tsx

@@ -0,0 +1,58 @@
+import type * as React from "react";
+import { cn } from "../utils/cn";
+import { Label } from "./label";
+import { Select, SelectContent, SelectTrigger, SelectValue } from "./select";
+
+export interface SelectFieldProps {
+  /** Merged onto the trigger. */
+  className?: string;
+  /** `SelectItem` elements. */
+  children?: React.ReactNode;
+  label?: React.ReactNode;
+  placeholder?: string;
+  /** An empty string shows the placeholder. */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  name?: string;
+  /** Set on the trigger; the label points at it. */
+  id?: string;
+  "aria-label"?: string;
+}
+
+/** Labelled single select built from the `Select` primitives. */
+function SelectField({
+  className,
+  children,
+  label,
+  placeholder,
+  value,
+  onValueChange,
+  disabled,
+  name,
+  id,
+  "aria-label": ariaLabel,
+}: SelectFieldProps) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      {label ? (
+        <Label htmlFor={id} className="text-sm font-medium leading-none">
+          {label}
+        </Label>
+      ) : null}
+      <Select
+        value={value === undefined || value === "" ? undefined : value}
+        onValueChange={onValueChange}
+        disabled={disabled}
+        name={name}
+      >
+        <SelectTrigger id={id} aria-label={ariaLabel} className={cn("w-full", className)}>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>{children}</SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+export { SelectField };

package/shell/src/SessionsHoverCard.test.tsx

@@ -1,256 +0,0 @@
-// @vitest-environment happy-dom
-import { act, createRef } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { SessionsHoverCard } from "./SessionsHoverCard";
-
-(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-
-let root: Root | null = null;
-let host: HTMLElement | null = null;
-
-async function mount(node: React.ReactNode) {
-  host = document.createElement("div");
-  document.body.appendChild(host);
-  root = createRoot(host);
-  await act(async () => {
-    root!.render(node);
-  });
-}
-
-afterEach(async () => {
-  await act(async () => root?.unmount());
-  host?.remove();
-  document.body.innerHTML = "";
-  root = null;
-  host = null;
-});
-
-describe("SessionsHoverCard", () => {
-  it("renders header, body and footer slots when open", async () => {
-    await mount(
-      <SessionsHoverCard open header="Head" body="Body text" footer="Foot">
-        <button type="button">Row</button>
-      </SessionsHoverCard>,
-    );
-    const text = document.body.textContent ?? "";
-    expect(text).toContain("Row");
-    expect(text).toContain("Head");
-    expect(text).toContain("Body text");
-    expect(text).toContain("Foot");
-    expect(document.body.innerHTML).toContain("w-64");
-  });
-
-  it("does not call the body render prop or loadContent while closed", async () => {
-    const body = vi.fn(() => "x");
-    const loadContent = vi.fn(() => "y");
-    await mount(
-      <>
-        <SessionsHoverCard open={false} body={body}>
-          <button type="button">A</button>
-        </SessionsHoverCard>
-        <SessionsHoverCard open={false} loadContent={loadContent}>
-          <button type="button">B</button>
-        </SessionsHoverCard>
-      </>,
-    );
-    expect(body).not.toHaveBeenCalled();
-    expect(loadContent).not.toHaveBeenCalled();
-  });
-
-  it("calls the render prop with open true and loads content once when open", async () => {
-    const body = vi.fn((ctx: { open: boolean }) => `open=${ctx.open}`);
-    const loadContent = vi.fn(async () => "Loaded preview");
-    await mount(
-      <>
-        <SessionsHoverCard open body={body}>
-          <button type="button">A</button>
-        </SessionsHoverCard>
-        <SessionsHoverCard open loadContent={loadContent} loadingFallback="Loading">
-          <button type="button">B</button>
-        </SessionsHoverCard>
-      </>,
-    );
-    expect(body).toHaveBeenCalledWith({ open: true });
-    expect(document.body.textContent).toContain("open=true");
-    expect(loadContent).toHaveBeenCalledTimes(1);
-    expect(document.body.textContent).toContain("Loaded preview");
-  });
-
-  it("portals the content to document.body by default", async () => {
-    await mount(
-      <div id="clip" style={{ overflow: "hidden" }}>
-        <SessionsHoverCard open body="Body text">
-          <button type="button">Row</button>
-        </SessionsHoverCard>
-      </div>,
-    );
-    const content = document.querySelector("[data-radix-popper-content-wrapper]");
-    expect(content).not.toBeNull();
-    expect(document.getElementById("clip")!.contains(content)).toBe(false);
-    expect(document.body.textContent).toContain("Body text");
-  });
-
-  it("keeps the content in place with portal={false}", async () => {
-    await mount(
-      <div id="clip" style={{ overflow: "hidden" }}>
-        <SessionsHoverCard open portal={false} body="Body text">
-          <button type="button">Row</button>
-        </SessionsHoverCard>
-      </div>,
-    );
-    const content = document.querySelector("[data-radix-popper-content-wrapper]");
-    expect(document.getElementById("clip")!.contains(content)).toBe(true);
-  });
-
-  it("swaps the surface without keeping the default one", async () => {
-    await mount(
-      <>
-        <SessionsHoverCard open surface="glass" body="G" className="p-5">
-          <button type="button">A</button>
-        </SessionsHoverCard>
-      </>,
-    );
-    const card = document.querySelector("[data-state=open][data-side]") as HTMLElement;
-    expect(card.className).toContain("glass-panel-strong");
-    expect(card.className).toContain("rounded-surface");
-    expect(card.className).not.toContain("bg-overlay");
-    expect(card.className).not.toContain("rounded-lg");
-    expect(card.className).toContain("p-5");
-    expect(card.className).not.toContain("p-3");
-  });
-
-  it("uses the floating overlay surface by default", async () => {
-    await mount(
-      <SessionsHoverCard open body="B">
-        <button type="button">A</button>
-      </SessionsHoverCard>,
-    );
-    const card = document.querySelector("[data-state=open][data-side]") as HTMLElement;
-    expect(card.className).toContain("bg-overlay");
-    expect(card.className).toContain("rounded-lg");
-  });
-
-  it("forwards the ref and props to the child trigger and keeps its handlers", async () => {
-    const ref = createRef<HTMLButtonElement>();
-    const onClick = vi.fn();
-    await mount(
-      <SessionsHoverCard ref={ref as never} data-testid="row" body="B">
-        <button type="button" onClick={onClick}>
-          Row
-        </button>
-      </SessionsHoverCard>,
-    );
-    const button = document.querySelector("button") as HTMLButtonElement;
-    expect(ref.current).toBe(button);
-    expect(button.getAttribute("data-testid")).toBe("row");
-    await act(async () => button.click());
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("renders its own trigger element with asChild={false}", async () => {
-    await mount(
-      <SessionsHoverCard asChild={false} body="B">
-        <span>Row</span>
-      </SessionsHoverCard>,
-    );
-    const trigger = document.querySelector("[data-state]") as HTMLElement;
-    expect(trigger.tagName).toBe("A");
-    expect(trigger.textContent).toBe("Row");
-  });
-
-  describe("focus and pointer", () => {
-    function setFocusVisible(el: HTMLElement, value: boolean) {
-      const orig = el.matches.bind(el);
-      el.matches = (sel: string) => (sel === ":focus-visible" ? value : orig(sel));
-    }
-
-    it("does not open on pointer-driven focus after a context menu", async () => {
-      const onOpenChange = vi.fn();
-      await mount(
-        <SessionsHoverCard openDelay={0} header="Head" onOpenChange={onOpenChange}>
-          <button type="button">Row</button>
-        </SessionsHoverCard>,
-      );
-      const row = document.querySelector("button")!;
-      setFocusVisible(row, false);
-      await act(async () => {
-        row.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true }));
-        row.dispatchEvent(new FocusEvent("focus", { bubbles: false }));
-        row.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
-      });
-      await act(async () => new Promise((r) => setTimeout(r, 20)));
-      expect(onOpenChange).not.toHaveBeenCalledWith(true);
-      expect(document.body.textContent).not.toContain("Head");
-    });
-
-    it("opens on keyboard focus-visible", async () => {
-      const onOpenChange = vi.fn();
-      await mount(
-        <SessionsHoverCard openDelay={0} header="Head" onOpenChange={onOpenChange}>
-          <button type="button">Row</button>
-        </SessionsHoverCard>,
-      );
-      const row = document.querySelector("button")!;
-      setFocusVisible(row, true);
-      await act(async () => {
-        row.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
-      });
-      await act(async () => new Promise((r) => setTimeout(r, 20)));
-      expect(onOpenChange).toHaveBeenCalledWith(true);
-    });
-
-    // React derives onPointerLeave from native pointerout (with a null or outside
-    // relatedTarget). A native pointerleave event does not reach the handler.
-    function leave(el: HTMLElement) {
-      return act(async () => {
-        el.dispatchEvent(new PointerEvent("pointerout", { pointerType: "mouse", bubbles: true, relatedTarget: null }));
-      });
-    }
-
-    it("closes on pointer leave when stuck open by non-focus-visible focus", async () => {
-      const onOpenChange = vi.fn();
-      await mount(
-        <SessionsHoverCard defaultOpen header="Head" onOpenChange={onOpenChange}>
-          <button type="button">Row</button>
-        </SessionsHoverCard>,
-      );
-      const row = document.querySelector("button")!;
-      setFocusVisible(row, false);
-      row.focus();
-      await leave(row);
-      expect(onOpenChange).toHaveBeenCalledWith(false);
-      await act(async () => new Promise((r) => setTimeout(r, 20)));
-      expect(document.body.textContent).not.toContain("Head");
-    });
-
-    it("stays open on pointer leave with keyboard focus-visible", async () => {
-      const onOpenChange = vi.fn();
-      await mount(
-        <SessionsHoverCard defaultOpen header="Head" onOpenChange={onOpenChange}>
-          <button type="button">Row</button>
-        </SessionsHoverCard>,
-      );
-      const row = document.querySelector("button")!;
-      setFocusVisible(row, true);
-      row.focus();
-      await leave(row);
-      await act(async () => new Promise((r) => setTimeout(r, 20)));
-      expect(onOpenChange).not.toHaveBeenCalledWith(false);
-      expect(document.body.textContent).toContain("Head");
-    });
-
-    it("does not force-close on pointer leave without focus (Radix owns hover close)", async () => {
-      const onOpenChange = vi.fn();
-      await mount(
-        <SessionsHoverCard defaultOpen closeDelay={1000} header="Head" onOpenChange={onOpenChange}>
-          <button type="button">Row</button>
-        </SessionsHoverCard>,
-      );
-      const row = document.querySelector("button")!;
-      await leave(row);
-      expect(onOpenChange).not.toHaveBeenCalledWith(false);
-      expect(document.body.textContent).toContain("Head");
-    });
-  });
-});