Context Menu

1"use client";2​3import * as React from "react";4import { ContextMenu as ContextMenuPrimitive } from "radix-ui";5import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react/ssr";6​7import { usePortalContainer } from "@/lib/surface";8import { cn } from "@/lib/utils";9​10// A right-click menu, extrapolated from the console (Figma 427:2715), drawn as the dropdown menu: the panel is a raised white panel (8px corners, the floating11// shadow) with 4px of padding; items are 36px rows with 8px corners like the rail's nav rows, a 20px glyph in the12// action-glyph purple 10px from a 14px ink label, and the lilac under the highlighted row. Section labels are 13px in13// the label purple ("Channels"), separators the rail's hairline, shortcuts 12px muted, destructive items red. The14// panel grows out of its trigger from 96 percent with a fade; highlighting a row is instant (menus are used by keyboard15// and many times a day).16const CONTENT =17  "z-50 max-h-(--radix-context-menu-content-available-height) min-w-48 overflow-x-hidden overflow-y-auto rounded-control bg-surface p-1 text-fg shadow-floating outline-none data-[state=closed]:animate-pop-out data-[state=open]:animate-pop-in";18const ITEM =19  "relative flex h-9 cursor-default items-center gap-2.5 rounded-control px-2.5 font-sans text-body leading-tight text-fg outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-subtle data-[inset]:pl-10.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5.5 [&_svg:not([class*='text-'])]:text-icon-secondary";20​21function ContextMenu(props: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {22  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;23}24​25function ContextMenuPortal(props: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {26  const container = usePortalContainer();27  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" container={container} {...props} />;28}29​30function ContextMenuTrigger({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {31  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" className={cn("select-none", className)} {...props} />;32}33​34function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {35  return (36    <ContextMenuPortal>37      <ContextMenuPrimitive.Content data-slot="context-menu-content" className={cn(CONTENT, "origin-(--radix-context-menu-content-transform-origin)", className)} {...props} />38    </ContextMenuPortal>39  );40}41​42function ContextMenuGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {43  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;44}45​46function ContextMenuItem({ className, inset, variant = "default", ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & { inset?: boolean; variant?: "default" | "destructive" }) {47  return (48    <ContextMenuPrimitive.Item49      data-slot="context-menu-item"50      data-inset={inset || undefined}51      data-variant={variant}52      className={cn(ITEM, "data-[variant=destructive]:text-danger data-[variant=destructive]:[&_svg]:text-danger", className)}53      {...props}54    />55  );56}57​58function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {59  return (60    <ContextMenuPrimitive.CheckboxItem data-slot="context-menu-checkbox-item" checked={checked} className={cn(ITEM, "pl-10.5", className)} {...props}>61      <span className="pointer-events-none absolute left-2.5 flex size-5.5 items-center justify-center">62        <ContextMenuPrimitive.ItemIndicator>63          <CheckIcon weight="bold" className="size-4.5 text-fg-brand" />64        </ContextMenuPrimitive.ItemIndicator>65      </span>66      {children}67    </ContextMenuPrimitive.CheckboxItem>68  );69}70​71function ContextMenuRadioGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {72  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;73}74​75// The selected choice wears the console's radio mark: a pink ring around white.76function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {77  return (78    <ContextMenuPrimitive.RadioItem data-slot="context-menu-radio-item" className={cn(ITEM, "pl-10.5", className)} {...props}>79      <span className="pointer-events-none absolute left-2.5 flex size-5.5 items-center justify-center">80        <ContextMenuPrimitive.ItemIndicator>81          <span className="block size-3.5 rounded-pill border-[3.5px] border-pink bg-surface" />82        </ContextMenuPrimitive.ItemIndicator>83      </span>84      {children}85    </ContextMenuPrimitive.RadioItem>86  );87}88​89function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & { inset?: boolean }) {90  return <ContextMenuPrimitive.Label data-slot="context-menu-label" data-inset={inset || undefined} className={cn("px-2.5 pt-2 pb-1 font-sans text-body-sm leading-tight text-fg-label data-[inset]:pl-10.5", className)} {...props} />;91}92​93function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {94  return <ContextMenuPrimitive.Separator data-slot="context-menu-separator" className={cn("-mx-1 my-1 h-px bg-line-subtle", className)} {...props} />;95}96​97function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {98  return <span data-slot="context-menu-shortcut" className={cn("ml-auto pl-4 font-sans text-caption text-fg-muted", className)} {...props} />;99}100​101function ContextMenuSub(props: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {102  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;103}104​105function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }) {106  return (107    <ContextMenuPrimitive.SubTrigger data-slot="context-menu-sub-trigger" data-inset={inset || undefined} className={cn(ITEM, "data-[state=open]:bg-subtle", className)} {...props}>108      {children}109      <CaretRightIcon className="ml-auto size-4.5 text-fg-muted" />110    </ContextMenuPrimitive.SubTrigger>111  );112}113​114function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {115  return (116    <ContextMenuPortal>117      <ContextMenuPrimitive.SubContent data-slot="context-menu-sub-content" className={cn(CONTENT, "max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin)", className)} {...props} />118    </ContextMenuPortal>119  );120}121​122export {123  ContextMenu,124  ContextMenuCheckboxItem,125  ContextMenuContent,126  ContextMenuGroup,127  ContextMenuItem,128  ContextMenuLabel,129  ContextMenuPortal,130  ContextMenuRadioGroup,131  ContextMenuRadioItem,132  ContextMenuSeparator,133  ContextMenuShortcut,134  ContextMenuSub,135  ContextMenuSubContent,136  ContextMenuSubTrigger,137  ContextMenuTrigger,138};