Select

1import { 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, ChevronDown } from "lucide-static";
11import { TW } from "@/registry/lib/tailwindMixin";
12 
13export interface SelectChangeEvent extends CustomEvent {
14  detail: { value: string };
15}
16 
17export interface SelectProperties {
18  value?: string;
19  name?: string;
20  disabled?: boolean;
21  required?: boolean;
22  open?: boolean;
23}
24 
25@customElement("ui-select")
26export class Select extends TW(LitElement) implements SelectProperties {
27  static formAssociated = true;
28  private internals: ElementInternals;
29 
30  @property({ type: String }) value = "";
31  @property({ type: String }) name = "";
32  @property({ type: Boolean }) disabled = false;
33  @property({ type: Boolean }) required = false;
34  @property({ type: Boolean, reflect: true }) open = false;
35  @property({ type: String, attribute: "aria-label", reflect: true })
36  ariaLabel: string | null = null;
37  @property({ type: String, attribute: "aria-invalid", reflect: true })
38  ariaInvalid: string | null = null;
39 
40  @query("ui-select-trigger") triggerElement?: HTMLElement;
41  @query("ui-popover") popupElement?: HTMLElement;
42 
43  private clickAwayHandler = (e: MouseEvent) => {
44    const popup = this.popupElement;
45    if (
46      this.open &&
47      !this.contains(e.target as Node) &&
48      (!popup || !popup.contains(e.target as Node))
49    ) {
50      this.open = false;
51    }
52  };
53 
54  constructor() {
55    super();
56    this.internals = this.attachInternals();
57  }
58 
59  override firstUpdated() {
60    setTimeout(() => {
61      this.updateTriggerAttributes();
62      this.updateTriggerAriaExpanded();
63    }, 0);
64  }
65 
66  connectedCallback() {
67    super.connectedCallback();
68 
69    this.addEventListener("trigger-click", this.handleTriggerClick);
70    this.addEventListener("select-item-click", this.handleItemClick);
71  }
72 
73  disconnectedCallback() {
74    super.disconnectedCallback();
75    this.removeEventListener("trigger-click", this.handleTriggerClick);
76    this.removeEventListener("select-item-click", this.handleItemClick);
77    document.removeEventListener("click", this.clickAwayHandler);
78  }
79 
80  private handleItemClick = (e: CustomEvent) => {
81    e.stopPropagation();
82    const newValue = e.detail.value;
83    const oldValue = this.value;
84 
85    if (newValue !== oldValue) {
86      this.value = newValue;
87// … truncated