UI Context Menu

1"use client";
2 
3import {
4  DropdownMenuItemRow,
5  type DropdownMenuItemState,
6  type DropdownMenuItemStyle,
7  type DropdownMenuItemStyleContext,
8  dropdownMenuItemStyle,
9  dropdownMenuItemStyleContext,
10} from "@/components/remocn/dropdown-menu-item";
11import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
12 
13export type ContextMenuState = "opened" | "closed";
14 
15export interface ContextMenuProps {
16  state?: ContextMenuState;
17  style?: ContextMenuStyle;
18  items?: string[];
19  highlightedIndex?: number;
20  pressedIndex?: number;
21  itemStyles?: (DropdownMenuItemStyle | undefined)[];
22  theme?: Partial<RemocnTheme>;
23  className?: string;
24}
25 
26const WIDTH = 200;
27 
28export interface ContextMenuStyle {
29  opacity: number;
30  scale: number;
31  translateY: number;
32}
33 
34export interface ContextMenuStyleContext {
35  panelBg: string;
36  panelBorder: string;
37  radius: number;
38  itemCtx: DropdownMenuItemStyleContext;
39}
40 
41export function contextMenuStyleContext(
42  theme: RemocnTheme,
43): ContextMenuStyleContext {
44  return {
45    panelBg: theme.popover,
46    panelBorder: theme.border,
47    radius: theme.radius,
48    itemCtx: dropdownMenuItemStyleContext(theme),
49  };
50}
51 
52export function contextMenuStyle(
53  state: ContextMenuState,
54  _ctx: ContextMenuStyleContext,
55): ContextMenuStyle {
56  switch (state) {
57    case "opened":
58      return { opacity: 1, scale: 1, translateY: 0 };
59    default:
60      return { opacity: 0, scale: 0.95, translateY: -4 };
61  }
62}
63 
64function rowState(
65  i: number,
66  highlightedIndex: number,
67  pressedIndex: number,
68): DropdownMenuItemState {
69  if (i === pressedIndex) return "press";
70  if (i === highlightedIndex) return "hover";
71  return "idle";
72}
73 
74export function ContextMenu({
75  state = "closed",
76  style,
77  items = ["Back", "Reload", "Save As…", "Inspect"],
78  highlightedIndex = -1,
79  pressedIndex = -1,
80  itemStyles,
81  theme: themeOverride,
82  className,
83}: ContextMenuProps) {
84  const theme = useRemocnTheme(themeOverride, "light");
85  const ctx = contextMenuStyleContext(theme);
86  const v = style ?? contextMenuStyle(state, ctx);
87 
88  return (
89    <div
90      className={className}
91      style={{
92        width: WIDTH,
93        opacity: v.opacity,
94        transformOrigin: "top left",
95        transform: `translateY(${v.translateY}px) scale(${v.scale})`,
96        background: ctx.panelBg,
97        border: `1px solid ${ctx.panelBorder}`,
98        borderRadius: ctx.radius + 2,
99        padding: 4,
100        display: "flex",
101        flexDirection: "column",
102        gap: 2,
103// … truncated