Dropdown 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";
11import { TW } from "@/registry/lib/tailwindMixin";
12import { cn } from "@/registry/lib/utils";
13import "@/registry/ui/popover/popover";
14 
15export interface DropdownMenuProperties {
16  open?: boolean;
17  modal?: boolean;
18}
19 
20export type MenuItemWithProperties = HTMLElement & {
21  disabled?: boolean;
22  highlighted?: boolean;
23  value?: string;
24  checked?: boolean;
25};
26 
27export function isMenuItemElement(
28  element: HTMLElement,
29): element is MenuItemWithProperties {
30  const validTags = [
31    "UI-DROPDOWN-MENU-ITEM",
32    "UI-DROPDOWN-MENU-CHECKBOX-ITEM",
33    "UI-DROPDOWN-MENU-RADIO-ITEM",
34    "UI-DROPDOWN-MENU-SUB-TRIGGER",
35  ];
36  return validTags.includes(element.tagName);
37}
38 
39const isNode = (value: EventTarget | null): value is Node => {
40  return value instanceof Node;
41};
42 
43@customElement("ui-dropdown-menu")
44export class DropdownMenu
45  extends TW(LitElement)
46  implements DropdownMenuProperties
47{
48  static styles = css`
49    :host {
50      display: contents;
51    }
52  `;
53 
54  @property({ type: Boolean, reflect: true }) open = false;
55  @property({ type: Boolean }) modal = true;
56 
57  @query("ui-dropdown-menu-trigger") triggerElement?: HTMLElement;
58  @query("ui-popover") popoverElement?: HTMLElement;
59 
60  private clickAwayHandler = (e: MouseEvent) => {
61    if (!this.open) return;
62    const content = this.querySelector("ui-dropdown-menu-content");
63    if (
64      isNode(e.target) &&
65      !this.contains(e.target) &&
66      (!content || !content.contains(e.target))
67    ) {
68      this.open = false;
69    }
70  };
71 
72  override connectedCallback() {
73    super.connectedCallback();
74    this.addEventListener("trigger-click", this.handleTriggerClick);
75    this.addEventListener("item-select", this.handleItemSelect);
76  }
77 
78  override disconnectedCallback() {
79    super.disconnectedCallback();
80    this.removeEventListener("trigger-click", this.handleTriggerClick);
81    this.removeEventListener("item-select", this.handleItemSelect);
82    document.removeEventListener("click", this.clickAwayHandler);
83  }
84 
85  override updated(changedProperties: PropertyValues) {
86    super.updated(changedProperties);
87 
88    if (changedProperties.has("open")) {
89      if (this.open) {
90        setTimeout(
91// … truncated