Context Menu

1import { css, html, LitElement, nothing, type PropertyValues } from "lit";
2import {
3  customElement,
4  property,
5  query,
6  queryAssignedElements,
7  state,
8} from "lit/decorators.js";
9import { unsafeSVG } from "lit/directives/unsafe-svg.js";
10import { Check, ChevronRight, Circle } from "lucide-static";
11 
12import { TW } from "@/registry/lib/tailwindMixin";
13import { cn } from "@/registry/lib/utils";
14import "@/registry/ui/popover/popover";
15 
16export type ContextMenuProperties = {
17  open?: boolean;
18  modal?: boolean;
19  disabled?: boolean;
20};
21 
22type VirtualAnchor = {
23  getBoundingClientRect(): DOMRect;
24};
25 
26type AnchorElement = Element | VirtualAnchor;
27 
28export type MenuItemWithProperties = HTMLElement & {
29  disabled?: boolean;
30  highlighted?: boolean;
31  value?: string;
32  checked?: boolean;
33};
34 
35export function isMenuItemElement(
36  element: HTMLElement,
37): element is MenuItemWithProperties {
38  const validTags = [
39    "UI-CONTEXT-MENU-ITEM",
40    "UI-CONTEXT-MENU-CHECKBOX-ITEM",
41    "UI-CONTEXT-MENU-RADIO-ITEM",
42    "UI-CONTEXT-MENU-SUB-TRIGGER",
43  ];
44  return validTags.includes(element.tagName);
45}
46 
47const isNode = (value: EventTarget | null): value is Node => {
48  return value instanceof Node;
49};
50 
51@customElement("ui-context-menu")
52export class ContextMenu
53  extends TW(LitElement)
54  implements ContextMenuProperties
55{
56  static styles = css`
57    :host {
58      display: contents;
59    }
60  `;
61 
62  @property({ type: Boolean, reflect: true }) open = false;
63  @property({ type: Boolean }) modal = true;
64  @property({ type: Boolean }) disabled = false;
65 
66  @state() private cursorX = 0;
67  @state() private cursorY = 0;
68  @state() private virtualAnchor?: AnchorElement;
69 
70  @query("ui-popover") popoverElement?: HTMLElement;
71 
72  private clickAwayHandler = (e: MouseEvent) => {
73    if (!this.open) return;
74 
75    if (!isNode(e.target)) return;
76 
77    if (this.querySelector("ui-context-menu-content")?.contains(e.target))
78      return;
79    if (this.querySelector("ui-popover")?.contains(e.target)) return;
80 
81    const triggerSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(
82      'slot[name="trigger"]',
83    );
84    if (triggerSlot) {
85      const assignedElements = triggerSlot.assignedElements({ flatten: true });
86      for (const el of assignedElements) {
87        if (el.contains(e.target)) return;
88      }
89    }
90 
91    this.open = false;
92  };
93 
94  private escapeHandler = (e: KeyboardEvent) => {
95    if (e.key === "Escape" && this.open) {
96      e.preventDefault();
97      this.open = false;
98    }
99  };
100 
101// … truncated