Menubar

1import { TW } from "@/registry/lib/tailwindMixin";
2import { cn } from "@/registry/lib/utils";
3import "@/registry/ui/popover/popover";
4import { css, html, LitElement, nothing, type PropertyValues } from "lit";
5import {
6  customElement,
7  property,
8  query,
9  queryAssignedElements,
10  state,
11} from "lit/decorators.js";
12import { unsafeSVG } from "lit/directives/unsafe-svg.js";
13import { Check, ChevronRight, Circle } from "lucide-static";
14 
15export interface MenubarProperties {
16  value?: string;
17}
18 
19export type MenuItemWithProperties = HTMLElement & {
20  disabled?: boolean;
21  highlighted?: boolean;
22  value?: string;
23  checked?: boolean;
24};
25 
26export function isMenuItemElement(
27  element: HTMLElement,
28): element is MenuItemWithProperties {
29  const validTags = [
30    "UI-MENUBAR-ITEM",
31    "UI-MENUBAR-CHECKBOX-ITEM",
32    "UI-MENUBAR-RADIO-ITEM",
33    "UI-MENUBAR-SUB-TRIGGER",
34  ];
35  return validTags.includes(element.tagName);
36}
37 
38const isNode = (value: EventTarget | null): value is Node => {
39  return value instanceof Node;
40};
41 
42@customElement("ui-menubar")
43export class Menubar extends TW(LitElement) implements MenubarProperties {
44  @property({ type: String }) value = "";
45 
46  @queryAssignedElements({ selector: "ui-menubar-menu" })
47  private menus!: MenubarMenu[];
48 
49  private clickAwayHandler = (e: MouseEvent) => {
50    if (isNode(e.target) && !this.contains(e.target)) {
51      this.value = "";
52    }
53  };
54 
55  override connectedCallback() {
56    super.connectedCallback();
57    this.addEventListener(
58      "menubar-trigger-click",
59      this.handleTriggerClick as EventListener,
60    );
61    this.addEventListener("menubar-item-select", this.handleItemSelect);
62  }
63 
64  override disconnectedCallback() {
65    super.disconnectedCallback();
66    this.removeEventListener(
67      "menubar-trigger-click",
68      this.handleTriggerClick as EventListener,
69    );
70    this.removeEventListener("menubar-item-select", this.handleItemSelect);
71    document.removeEventListener("click", this.clickAwayHandler);
72  }
73 
74  override updated(changedProperties: PropertyValues) {
75    super.updated(changedProperties);
76 
77    if (changedProperties.has("value")) {
78      this.updateMenuStates();
79      this.updateRovingTabindex();
80 
81      if (this.value !== "") {
82        setTimeout(
83          () => document.addEventListener("click", this.clickAwayHandler),
84          0,
85        );
86      } else {
87        document.removeEventListener("click", this.clickAwayHandler);
88      }
89 
90      this.dispatchEvent(
91// … truncated