@adia-ai/web-components 0.4.5 → 0.4.7

package/components/select/class.js

@@ -0,0 +1,408 @@
+/**
+ * Non-side-effect class export for `<select-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/select`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { UIFormElement } from '../../core/form.js';
+import { anchorPopover } from '../../core/anchor.js';
+
+function escapeHTML(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+export class UISelect extends UIFormElement {
+  static properties = {
+    ...UIFormElement.properties,
+    placeholder: { type: String,  default: 'Select...', reflect: true },
+    open:        { type: Boolean, default: false, reflect: true },
+    label:       { type: String,  default: '', reflect: true },
+    icon:        { type: String,  default: '', reflect: true },
+    avatar:      { type: String,  default: '', reflect: true },
+    multiple:    { type: Boolean, default: false, reflect: true },
+    searchable:  { type: Boolean, default: false, reflect: true },
+    freeText:    { type: Boolean, default: false, reflect: true, attribute: 'free-text' },
+    divider:     { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #options = [];
+  #listbox = null;
+  #anchorCleanup = null;
+  #query = '';
+  #searchInput = null;
+  #rafId = null;
+
+  #onSearchFocus = () => { if (!this.disabled) this.open = true; };
+  #onSearchClick = (e) => { e.stopPropagation(); if (!this.disabled) this.open = true; };
+
+  #onOptionClick = (e) => {
+    const el = e.currentTarget;
+    e.stopPropagation();
+    const opt = el.__adiaOption;
+    if (!opt) return;
+    if (opt.disabled) return;
+    if (opt.action) {
+      this.open = false;
+      this.dispatchEvent(new CustomEvent('action', { bubbles: true, detail: { action: opt.action } }));
+      return;
+    }
+    this.value = opt.value;
+    this.open = false;
+    this.#query = '';
+    this.syncValue(opt.value);
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+  };
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'combobox');
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKey);
+    // Only parse declarative <option>/<optgroup> children if options
+    // weren't already set programmatically (e.g. via .options = [...])
+    if (this.#options.length === 0) {
+      this.#parseOptions();
+    }
+  }
+
+  render() {
+    // Stamp default trigger if none provided
+    if (!this.querySelector('[slot="trigger"]')) {
+      // Detach listbox before innerHTML wipe so it isn't destroyed
+      const lb = this.#listbox;
+      if (lb?.parentNode === this) this.removeChild(lb);
+
+      const leading = this.avatar
+        ? `<img slot="leading" src="${this.avatar}" alt="" />`
+        : this.icon
+          ? `<icon-ui slot="leading" name="${this.icon}"></icon-ui>`
+          : '';
+      const displayMarkup = this.searchable
+        ? `<input slot="display" type="text" role="combobox" aria-autocomplete="list" autocomplete="off" placeholder="${escapeHTML(this.placeholder || '')}" value="${escapeHTML(this.#displayText() === this.placeholder ? '' : this.#displayText())}" />`
+        : `<span slot="display">${escapeHTML(this.#displayText())}</span>`;
+      this.innerHTML = `
+        <span slot="trigger">
+          ${leading}
+          ${displayMarkup}
+          <icon-ui name="caret-up-down" slot="caret"></icon-ui>
+        </span>
+      `;
+
+      if (this.searchable) {
+        // Detach from previous search input if any
+        if (this.#searchInput) {
+          this.#searchInput.removeEventListener('input', this.#onSearchInput);
+          this.#searchInput.removeEventListener('focus', this.#onSearchFocus);
+          this.#searchInput.removeEventListener('click', this.#onSearchClick);
+        }
+        this.#searchInput = this.querySelector('input[slot="display"]');
+        if (this.#searchInput) {
+          this.#searchInput.addEventListener('input', this.#onSearchInput);
+          this.#searchInput.addEventListener('focus', this.#onSearchFocus);
+          this.#searchInput.addEventListener('click', this.#onSearchClick);
+        }
+      }
+
+      // Re-attach listbox after trigger is stamped
+      if (lb) this.appendChild(lb);
+    } else {
+      const display = this.querySelector('[slot="display"]');
+      if (display) {
+        if (display.tagName === 'INPUT') {
+          // Only update value when not actively editing (no active query)
+          if (!this.#query) display.value = this.#displayText() === this.placeholder ? '' : this.#displayText();
+        } else {
+          display.textContent = this.#displayText();
+        }
+      }
+    }
+
+    // Ensure listbox exists (regardless of trigger source)
+    if (!this.#listbox) {
+      this.#listbox = this.querySelector('[slot="listbox"]');
+      if (!this.#listbox) {
+        this.#listbox = document.createElement('div');
+        this.#listbox.setAttribute('slot', 'listbox');
+        this.#listbox.setAttribute('role', 'listbox');
+        this.#listbox.setAttribute('popover', 'manual');
+        this.appendChild(this.#listbox);
+      }
+      this.#renderOptions();
+    }
+
+    // Sync aria-selected when value changes
+    if (this.#listbox) {
+      for (const opt of this.#listbox.querySelectorAll('[role="option"]')) {
+        const selected = opt.getAttribute('data-value') === this.value;
+        if (selected) opt.setAttribute('aria-selected', 'true');
+        else opt.removeAttribute('aria-selected');
+      }
+    }
+
+    this.setAttribute('aria-expanded', String(this.open));
+
+    // Toggle popover
+    if (this.open) {
+      this.#listbox?.showPopover?.();
+      const trigger = this.querySelector('[slot="trigger"]') || this;
+      this.#listbox.style.minWidth = `${trigger.getBoundingClientRect().width}px`;
+      this.#listbox.style.width = 'max-content';
+      this.#anchorCleanup = anchorPopover(trigger, this.#listbox, {
+        placement: this.getAttribute('placement') || 'bottom-start', gap: 4, matchWidth: false,
+      });
+      // Dismiss on outside click (next frame so current click doesn't trigger it)
+      this.#rafId = requestAnimationFrame(() => {
+        this.#rafId = null;
+        document.addEventListener('pointerdown', this.#onOutside, { once: true });
+      });
+    } else {
+      this.#anchorCleanup?.();
+      this.#anchorCleanup = null;
+      this.#listbox?.hidePopover?.();
+      if (this.#rafId != null) {
+        cancelAnimationFrame(this.#rafId);
+        this.#rafId = null;
+      }
+      document.removeEventListener('pointerdown', this.#onOutside);
+    }
+  }
+
+  /** Parse <option> and <optgroup> children into internal model. */
+  #parseOptions() {
+    this.#options = [];
+    for (const child of this.children) {
+      if (child.tagName === 'OPTGROUP') {
+        const group = { label: child.label || child.getAttribute('label') || '', options: [] };
+        for (const opt of child.querySelectorAll('option')) {
+          group.options.push({ value: opt.value, label: opt.textContent.trim(), disabled: opt.disabled });
+        }
+        this.#options.push(group);
+      } else if (child.tagName === 'OPTION') {
+        this.#options.push({ value: child.value, label: child.textContent.trim(), disabled: child.disabled });
+      }
+    }
+    for (const child of [...this.querySelectorAll('option, optgroup')]) child.remove();
+  }
+
+  set options(list) {
+    this.#options = list;
+    // Ensure listbox exists before rendering (may be called before first render)
+    if (!this.#listbox) {
+      this.#listbox = this.querySelector('[slot="listbox"]');
+      if (!this.#listbox) {
+        this.#listbox = document.createElement('div');
+        this.#listbox.setAttribute('slot', 'listbox');
+        this.#listbox.setAttribute('role', 'listbox');
+        this.#listbox.setAttribute('popover', 'manual');
+        this.appendChild(this.#listbox);
+      }
+    }
+    this.#renderOptions();
+    const display = this.querySelector('[slot="display"]');
+    if (display) display.textContent = this.#displayText();
+  }
+
+  get options() { return this.#options; }
+
+  #renderOptions() {
+    if (!this.#listbox) return;
+    this.#listbox.innerHTML = '';
+
+    const renderOpt = (opt) => {
+      if (opt.separator) {
+        const hr = document.createElement('hr');
+        hr.setAttribute('data-separator', '');
+        return hr;
+      }
+      const el = document.createElement('div');
+      el.setAttribute('role', 'option');
+      el.setAttribute('data-value', opt.value || '');
+      if (opt.icon) el.innerHTML = `<icon-ui name="${escapeHTML(opt.icon)}"></icon-ui>${escapeHTML(opt.label)}`;
+      else el.textContent = opt.label;
+      if (opt.value === this.value) el.setAttribute('aria-selected', 'true');
+      if (opt.disabled) el.setAttribute('aria-disabled', 'true');
+      if (opt.action) el.dataset.action = opt.action;
+      el.__adiaOption = opt;
+      el.addEventListener('click', this.#onOptionClick);
+      return el;
+    };
+
+    for (const item of this.#options) {
+      if (item.separator) {
+        this.#listbox.appendChild(renderOpt(item));
+      } else if (item.header) {
+        const hdr = document.createElement('div');
+        hdr.setAttribute('data-menu-header', '');
+        hdr.innerHTML = item.avatar
+          ? `<img src="${item.avatar}" alt="" /><div><strong>${escapeHTML(item.label)}</strong><span>${escapeHTML(item.description || '')}</span></div>`
+          : `<div><strong>${escapeHTML(item.label)}</strong><span>${escapeHTML(item.description || '')}</span></div>`;
+        this.#listbox.appendChild(hdr);
+      } else if (item.options) {
+        const group = document.createElement('div');
+        group.setAttribute('role', 'group');
+        group.innerHTML = `<div slot="group-label">${escapeHTML(item.label)}</div>`;
+        for (const opt of item.options) group.appendChild(renderOpt(opt));
+        this.#listbox.appendChild(group);
+      } else {
+        this.#listbox.appendChild(renderOpt(item));
+      }
+    }
+    if (this.#query) this.#applyFilter();
+  }
+
+  #displayText() {
+    const flat = this.#options.flatMap(o => o.options || [o]);
+    const selected = flat.find(o => o.value === this.value || (o.header && o.label === this.value));
+    return selected?.label || this.value || this.placeholder;
+  }
+
+  #onClick = (e) => {
+    if (this.disabled) return;
+    // Ignore clicks inside the popover listbox
+    if (this.#listbox && e.composedPath().includes(this.#listbox)) return;
+    this.open = !this.open;
+  };
+
+  #onOutside = (e) => {
+    // Close if click is outside the select and outside the popover
+    if (!this.contains(e.target) && !(this.#listbox && e.composedPath().includes(this.#listbox))) {
+      this.open = false;
+    }
+  };
+
+  #onKey = (e) => {
+    if (e.key === 'Escape') {
+      if (this.searchable && this.#query) {
+        // First Escape: clear query
+        this.#query = '';
+        const input = this.querySelector('input[slot="display"]');
+        if (input) input.value = '';
+        this.#applyFilter();
+        return;
+      }
+      this.open = false;
+      return;
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (this.open) {
+        const focused = this.#listbox?.querySelector('[role="option"][data-focused]:not([data-filtered-out])');
+        if (focused) {
+          focused.click();
+        } else if (this.searchable && this.freeText && this.#query) {
+          // Commit free-text
+          const q = this.#query;
+          this.value = q;
+          this.#query = '';
+          this.open = false;
+          this.syncValue?.(q);
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+        } else {
+          this.open = false;
+        }
+      } else {
+        this.open = true;
+      }
+      return;
+    }
+    if (e.key === ' ' && !this.searchable) {
+      e.preventDefault();
+      if (this.open) {
+        const focused = this.#listbox?.querySelector('[role="option"][data-focused]');
+        if (focused) focused.click();
+        else this.open = false;
+      } else {
+        this.open = true;
+      }
+      return;
+    }
+    if (e.key === 'ArrowDown' && this.open) {
+      e.preventDefault();
+      this.#focusOption(1);
+    }
+    if (e.key === 'ArrowUp' && this.open) {
+      e.preventDefault();
+      this.#focusOption(-1);
+    }
+  };
+
+  #onSearchInput = (e) => {
+    this.#query = e.target.value || '';
+    if (!this.open) this.open = true;
+    this.#applyFilter();
+  };
+
+  #applyFilter() {
+    if (!this.#listbox) return;
+    const q = this.#query.toLowerCase();
+    const opts = this.#listbox.querySelectorAll('[role="option"]');
+    let anyVisible = false;
+    for (const opt of opts) {
+      const label = (opt.textContent || '').toLowerCase();
+      const match = !q || label.includes(q);
+      if (match) {
+        opt.removeAttribute('data-filtered-out');
+        opt.style.display = '';
+        anyVisible = true;
+      } else {
+        opt.setAttribute('data-filtered-out', '');
+        opt.style.display = 'none';
+      }
+    }
+    // Hide empty groups
+    for (const grp of this.#listbox.querySelectorAll('[role="group"]')) {
+      const visible = grp.querySelectorAll('[role="option"]:not([data-filtered-out])').length;
+      grp.style.display = visible ? '' : 'none';
+    }
+    // Clear focus if filtered-out
+    const focused = this.#listbox.querySelector('[role="option"][data-focused]');
+    if (focused && focused.hasAttribute('data-filtered-out')) {
+      focused.removeAttribute('data-focused');
+    }
+  }
+
+  #focusOption(dir) {
+    if (!this.#listbox) return;
+    const opts = [...this.#listbox.querySelectorAll('[role="option"]:not([aria-disabled]):not([data-filtered-out])')];
+    if (!opts.length) return;
+    const current = this.#listbox.querySelector('[role="option"][data-focused]');
+    const i = current ? opts.indexOf(current) : -1;
+    const next = opts[(i + dir + opts.length) % opts.length];
+    if (current) current.removeAttribute('data-focused');
+    if (next) {
+      next.setAttribute('data-focused', '');
+      next.scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+    if (this.#rafId != null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
+    document.removeEventListener('pointerdown', this.#onOutside);
+    if (this.#searchInput) {
+      this.#searchInput.removeEventListener('input', this.#onSearchInput);
+      this.#searchInput.removeEventListener('focus', this.#onSearchFocus);
+      this.#searchInput.removeEventListener('click', this.#onSearchClick);
+      this.#searchInput = null;
+    }
+    this.#anchorCleanup?.();
+    this.#anchorCleanup = null;
+    this.#listbox?.hidePopover?.();
+    this.#listbox = null;
+  }
+}

package/components/select/select.d.ts

@@ -0,0 +1,57 @@
+/**
+ * `<select-ui>` — Custom-styled select / combobox / multi-select.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/select
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface SelectOption {
+  value: string;
+  label?: string;
+  icon?: string;
+  avatar?: string;
+  disabled?: boolean;
+  action?: string;
+  divider?: boolean;
+}
+
+export interface SelectChangeEventDetail {
+  value: string;
+}
+export type SelectChangeEvent = CustomEvent<SelectChangeEventDetail>;
+
+export interface SelectActionEventDetail {
+  action: string;
+}
+export type SelectActionEvent = CustomEvent<SelectActionEventDetail>;
+
+export class UISelect extends UIFormElement {
+  placeholder: string;
+  /** Open/closed reflected attribute — toggled by trigger click / keyboard. */
+  open: boolean;
+  label: string;
+  /** Leading icon name (Phosphor registry). */
+  icon: string;
+  /** Leading avatar URL or name. */
+  avatar: string;
+  multiple: boolean;
+  searchable: boolean;
+  /** Allow values not in the option list (combobox mode). */
+  freeText: boolean;
+  divider: boolean;
+
+  /**
+   * Dynamic option list. Setting `.options = [...]` stamps option elements at
+   * connection time + auto-syncs the listbox.
+   */
+  options: readonly SelectOption[];
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UISelect, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: SelectChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'action', listener: (ev: SelectActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}