@nextclaw/ui 0.15.21 → 0.15.23

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

@@ -0,0 +1,103 @@
+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";
+
+describe("ContextMenu", () => {
+  it("opens at the trigger and supports keyboard selection", async () => {
+    const onSelect = vi.fn();
+    render(
+      <ContextMenu
+        label="File actions"
+        groups={[
+          {
+            key: "file",
+            items: [
+              { key: "open", label: "Open", onSelect: vi.fn() },
+              { key: "copy", label: "Copy path", onSelect },
+            ],
+          },
+        ]}
+      >
+        <button type="button">README.md</button>
+      </ContextMenu>,
+    );
+
+    fireEvent.contextMenu(screen.getByRole("button", { name: "README.md" }), {
+      clientX: 120,
+      clientY: 80,
+    });
+
+    expect(screen.getByRole("menu", { name: "File actions" })).toBeTruthy();
+    expect(document.activeElement).toBe(
+      screen.getByRole("menuitem", { name: "Open" }),
+    );
+    await userEvent.keyboard("{ArrowDown}{Enter}");
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole("menu")).toBeNull();
+  });
+
+  it("opens the same menu from an explicit trigger", async () => {
+    const onSelect = vi.fn();
+    render(
+      <ContextMenu
+        label="File actions"
+        groups={[
+          {
+            key: "file",
+            items: [{ key: "add", label: "Add to chat", onSelect }],
+          },
+        ]}
+      >
+        <div>
+          <span>README.md</span>
+          <ContextMenuTrigger>
+            <button type="button" aria-label="More actions" />
+          </ContextMenuTrigger>
+        </div>
+      </ContextMenu>,
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "More actions" }));
+    expect(screen.getByRole("menu", { name: "File actions" })).toBeTruthy();
+    await userEvent.click(screen.getByRole("menuitem", { name: "Add to chat" }));
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not steal focus back when an action focuses the composer", async () => {
+    render(
+      <div>
+        <button type="button" data-testid="composer">Composer</button>
+        <ContextMenu
+          label="File actions"
+          groups={[
+            {
+              key: "chat",
+              items: [
+                {
+                  key: "add",
+                  label: "Add to chat",
+                  restoreFocus: false,
+                  onSelect: () => screen.getByTestId("composer").focus(),
+                },
+              ],
+            },
+          ]}
+        >
+          <button type="button">README.md</button>
+        </ContextMenu>
+      </div>,
+    );
+
+    fireEvent.contextMenu(screen.getByRole("button", { name: "README.md" }));
+    await userEvent.click(screen.getByRole("menuitem", { name: "Add to chat" }));
+
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByTestId("composer"));
+    });
+  });
+});

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

@@ -0,0 +1,263 @@
+import {
+  cloneElement,
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/shared/lib/utils";
+
+export type ContextMenuItem = {
+  key: string;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  restoreFocus?: boolean;
+  onSelect: () => void;
+};
+
+export type ContextMenuGroup = {
+  key: string;
+  items: readonly ContextMenuItem[];
+};
+
+type ContextMenuPosition = {
+  align: "start" | "end";
+  x: number;
+  y: number;
+  trigger: HTMLElement;
+};
+
+type ContextMenuController = {
+  isOpen: boolean;
+  toggleFromButton: (trigger: HTMLElement) => void;
+};
+
+const ContextMenuControllerContext = createContext<ContextMenuController | null>(null);
+
+const CONTEXT_MENU_EDGE_GAP = 8;
+
+function ContextMenuSurface({
+  groups,
+  label,
+  onClose,
+  position,
+}: {
+  groups: readonly ContextMenuGroup[];
+  label: string;
+  onClose: (restoreFocus: boolean) => void;
+  position: ContextMenuPosition;
+}) {
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  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<HTMLButtonElement>('[role="menuitem"]:not(:disabled)')?.focus();
+  }, [position]);
+
+  const moveFocus = (direction: 1 | -1) => {
+    const items = Array.from(
+      menuRef.current?.querySelectorAll<HTMLButtonElement>(
+        '[role="menuitem"]:not(:disabled)',
+      ) ?? [],
+    );
+    if (items.length === 0) {
+      return;
+    }
+    const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);
+    const nextIndex = currentIndex < 0
+      ? 0
+      : (currentIndex + direction + items.length) % items.length;
+    items[nextIndex]?.focus();
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[var(--z-tooltip)]"
+      onContextMenu={(event) => event.preventDefault()}
+      onPointerDown={() => onClose(true)}
+    >
+      <div
+        ref={menuRef}
+        role="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)]"
+        style={{ left: position.x, top: position.y }}
+        onPointerDown={(event) => event.stopPropagation()}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            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<HTMLButtonElement>(
+              '[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) => (
+              <button
+                key={item.key}
+                type="button"
+                role="menuitem"
+                disabled={item.disabled}
+                className={cn(
+                  "flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-[13px] font-medium text-foreground outline-none transition-colors",
+                  "hover:bg-muted focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-45",
+                )}
+                onClick={() => {
+                  item.onSelect();
+                  onClose(item.restoreFocus !== false);
+                }}
+              >
+                {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>
+              </button>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export function ContextMenu({
+  children,
+  groups,
+  label,
+}: {
+  children: ReactElement<{
+    "data-context-menu-open"?: string;
+    onContextMenu?: (event: MouseEvent) => void;
+  }>;
+  groups: readonly ContextMenuGroup[];
+  label: string;
+}) {
+  const [position, setPosition] = useState<ContextMenuPosition | null>(null);
+  const visibleGroups = groups.filter((group) => group.items.length > 0);
+  const closeMenu = (restoreFocus: boolean) => {
+    const trigger = position?.trigger;
+    setPosition(null);
+    if (restoreFocus && trigger) {
+      window.setTimeout(() => trigger.isConnected && trigger.focus(), 0);
+    }
+  };
+
+  const toggleFromButton = (trigger: HTMLElement) => {
+    if (position?.trigger === trigger) {
+      closeMenu(true);
+      return;
+    }
+    if (visibleGroups.length === 0) {
+      return;
+    }
+    const bounds = trigger.getBoundingClientRect();
+    setPosition({
+      align: "end",
+      x: bounds.right,
+      y: bounds.bottom,
+      trigger,
+    });
+  };
+
+  const child = cloneElement(children, {
+    "data-context-menu-open": position ? "" : undefined,
+    onContextMenu: (event: MouseEvent) => {
+      children.props.onContextMenu?.(event);
+      if (event.defaultPrevented || visibleGroups.length === 0) {
+        return;
+      }
+      event.preventDefault();
+      const trigger = event.currentTarget as HTMLElement;
+      const bounds = trigger.getBoundingClientRect();
+      setPosition({
+        align: "start",
+        x: event.clientX || bounds.left,
+        y: event.clientY || bounds.bottom,
+        trigger,
+      });
+    },
+  });
+
+  return (
+    <ContextMenuControllerContext.Provider
+      value={{ isOpen: Boolean(position), toggleFromButton }}
+    >
+      {child}
+      {position ? (
+        <ContextMenuSurface
+          groups={visibleGroups}
+          label={label}
+          position={position}
+          onClose={closeMenu}
+        />
+      ) : null}
+    </ContextMenuControllerContext.Provider>
+  );
+}
+
+export function ContextMenuTrigger({
+  children,
+}: {
+  children: ReactElement<{
+    "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");
+  }
+
+  return cloneElement(children, {
+    "aria-expanded": controller.isOpen,
+    "aria-haspopup": "menu",
+    onClick: (event: MouseEvent) => {
+      children.props.onClick?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      event.stopPropagation();
+      controller.toggleFromButton(event.currentTarget as HTMLElement);
+    },
+  });
+}

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

@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1 opacity-70 transition-all duration-fast hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none">
+      <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">
         <X className="h-4 w-4 text-muted-foreground" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

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

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-xl border border-border/75 bg-card px-3.5 py-2 text-sm text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/55 placeholder:font-normal transition-colors focus:outline-none focus:ring-0 focus:border-border disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-9 w-full rounded-xl border border-border/75 bg-card px-3.5 py-2 text-sm text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/55 placeholder:font-normal transition-colors focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

package/src/shared/components/ui/scroll-area.tsx

@@ -5,6 +5,8 @@ interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
+export const SCROLL_BOTTOM_EDGE_FADE_CLASS = '[mask-image:linear-gradient(to_bottom,black_calc(100%_-_28px),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,black_calc(100%_-_28px),transparent)]';
+
 const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
   ({ className, children, ...props }, ref) => (
     <div

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

@@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.Item
         ref={ref}
         className={cn(
-            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent",
+            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-[var(--interaction-hover)]",
             className
         )}
         {...props}

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

@@ -18,7 +18,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         ref={ref}
         className={cn(
           'switch-track peer inline-flex h-[22px] w-10 shrink-0 cursor-pointer items-center rounded-full border-2 transition-colors duration-fast focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-50',
-          checked ? 'border-primary/70 bg-primary' : 'border-border/60 bg-muted hover:bg-accent',
+          checked ? 'border-primary/70 bg-primary' : 'border-border/60 bg-muted hover:bg-[var(--interaction-hover)]',
           className
         )}
         onClick={() => onCheckedChange?.(!checked)}

package/src/shared/components/ui/tab-strip/__tests__/compact-tab-strip.test.tsx

@@ -141,12 +141,18 @@ describe("CompactTabStrip", () => {
             label: "index.html",
             active: true,
             menuLabel: "File actions",
-            menuActions: [
+            menuGroups: [
               {
-                key: "preview",
-                icon: <span />,
-                label: "Open preview",
-                onClick: onAction,
+                key: "file",
+                items: [
+                  {
+                    key: "preview",
+                    icon: <span />,
+                    label: "Open preview",
+                    restoreFocus: false,
+                    onSelect: onAction,
+                  },
+                ],
               },
             ],
             onSelect,
@@ -160,7 +166,14 @@ describe("CompactTabStrip", () => {
     await user.click(menuTrigger);
     await user.click(screen.getByRole("menuitem", { name: "Open preview" }));
 
-    expect(onAction).toHaveBeenCalledTimes(1);
+    const tabItem = screen
+      .getByRole("button", { name: "index.html" })
+      .closest("[data-compact-tab-item]");
+    expect(tabItem).not.toBeNull();
+    fireEvent.contextMenu(tabItem!);
+    await user.click(screen.getByRole("menuitem", { name: "Open preview" }));
+
+    expect(onAction).toHaveBeenCalledTimes(2);
     expect(onSelect).not.toHaveBeenCalled();
     expect(document.activeElement).not.toBe(menuTrigger);
   });

package/src/shared/components/ui/tab-strip/compact-tab-strip.tsx

@@ -2,10 +2,10 @@ import * as React from "react";
 import { MoreVertical, X } from "lucide-react";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/shared/components/ui/popover";
+  ContextMenu,
+  ContextMenuTrigger,
+  type ContextMenuGroup,
+} from "@/shared/components/ui/context-menu/context-menu";
 import {
   Tooltip,
   TooltipContent,
@@ -26,7 +26,7 @@ export type CompactTabStripTab = {
   closeLabel?: string;
   closePlacement?: "leading-hover" | "trailing";
   menuLabel?: string;
-  menuActions?: readonly CompactTabStripAction[];
+  menuGroups?: readonly ContextMenuGroup[];
   onSelect: () => void;
   onClose?: () => void;
 };
@@ -64,73 +64,28 @@ function closeCompactTab(event: React.MouseEvent<HTMLButtonElement>, onClose: ()
 }
 
 function CompactTabMenu({ tab }: { tab: CompactTabStripTab }) {
-  const [open, setOpen] = React.useState(false);
-  const restoreTriggerFocus = React.useRef(true);
-  if (!tab.menuActions?.length) {
+  if (!tab.menuGroups?.some((group) => group.items.length > 0)) {
     return null;
   }
 
   const menuLabel = tab.menuLabel ?? tab.label;
   return (
-    <Popover
-      open={open}
-      onOpenChange={(nextOpen) => {
-        if (nextOpen) {
-          restoreTriggerFocus.current = true;
-        }
-        setOpen(nextOpen);
-      }}
+    <div
+      className={cn(
+        "-ml-1.5 flex w-0 shrink-0 overflow-hidden opacity-0 transition-[width,margin,opacity] group-hover:ml-0 group-hover:w-5 group-hover:opacity-100 group-focus-within:ml-0 group-focus-within:w-5 group-focus-within:opacity-100",
+        "group-data-[context-menu-open]:ml-0 group-data-[context-menu-open]:w-5 group-data-[context-menu-open]:opacity-100",
+      )}
     >
-      <div
-        className={cn(
-          "-ml-1.5 flex w-0 shrink-0 overflow-hidden opacity-0 transition-[width,margin,opacity] group-hover:ml-0 group-hover:w-5 group-hover:opacity-100 group-focus-within:ml-0 group-focus-within:w-5 group-focus-within:opacity-100",
-          open ? "ml-0 w-5 opacity-100" : null,
-        )}
-      >
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            aria-label={menuLabel}
-            onClick={(event) => event.stopPropagation()}
-            className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 focus-visible:bg-gray-200 focus-visible:text-gray-700 focus-visible:outline-none"
-          >
-            <MoreVertical className="h-3.5 w-3.5" />
-          </button>
-        </PopoverTrigger>
-      </div>
-      <PopoverContent
-        align="end"
-        className="w-40 rounded-xl p-1.5"
-        onClick={(event) => event.stopPropagation()}
-        onCloseAutoFocus={(event) => {
-          if (!restoreTriggerFocus.current) {
-            event.preventDefault();
-          }
-        }}
-      >
-        <div role="menu" aria-label={menuLabel}>
-          {tab.menuActions.map((action) => (
-            <button
-              key={action.key}
-              type="button"
-              role="menuitem"
-              disabled={action.disabled}
-              className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-xs text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-45"
-              onClick={() => {
-                restoreTriggerFocus.current = false;
-                setOpen(false);
-                action.onClick();
-              }}
-            >
-              <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
-                {action.icon}
-              </span>
-              <span>{action.label}</span>
-            </button>
-          ))}
-        </div>
-      </PopoverContent>
-    </Popover>
+      <ContextMenuTrigger>
+        <button
+          type="button"
+          aria-label={menuLabel}
+          className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 focus-visible:bg-gray-200 focus-visible:text-gray-700 focus-visible:outline-none"
+        >
+          <MoreVertical className="h-3.5 w-3.5" />
+        </button>
+      </ContextMenuTrigger>
+    </div>
   );
 }
 
@@ -196,7 +151,7 @@ function CompactTabItem({
   | "tabBaseClassName"
 > & { itemRef?: React.Ref<HTMLDivElement>; tab: CompactTabStripTab }) {
   const leadingClose = tab.onClose && tab.closePlacement === "leading-hover";
-  return (
+  const item = (
     <div
       ref={itemRef}
       data-compact-tab-item=""
@@ -237,6 +192,12 @@ function CompactTabItem({
       ) : null}
     </div>
   );
+
+  return tab.menuGroups?.some((group) => group.items.length > 0) ? (
+    <ContextMenu groups={tab.menuGroups} label={tab.menuLabel ?? tab.label}>
+      {item}
+    </ContextMenu>
+  ) : item;
 }
 
 export function CompactTabStrip({

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

@@ -67,7 +67,7 @@ export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
         'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-[13px] font-medium transition-all duration-fast focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none disabled:opacity-50',
         isActive
           ? 'bg-card text-foreground shadow-sm'
-          : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+          : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
         className
       )}
     >

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

@@ -7,7 +7,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => (
     <textarea
       className={cn(
-        "flex min-h-28 w-full rounded-xl border border-border/75 bg-card px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/55 placeholder:font-normal transition-colors focus:outline-none focus:ring-0 focus:border-border disabled:cursor-not-allowed disabled:opacity-50",
+        "flex min-h-28 w-full rounded-xl border border-border/75 bg-card px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/55 placeholder:font-normal transition-colors focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       ref={ref}