@lilydesignsystem/angular-menu-picker 0.1.0 → 0.1.2

package/menu-picker.component.spec.ts

@@ -1,276 +0,0 @@
-import { Component, viewChild } from "@angular/core";
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
-
-import {
-  MenuPicker,
-  MenuPickerIcon,
-  nextMenuPickerId,
-} from "./menu-picker.component";
-
-const flush = () => new Promise<void>((r) => setTimeout(r, 0));
-
-@Component({
-  standalone: true,
-  imports: [MenuPicker, MenuPickerIcon],
-  template: `
-    <lily-menu-picker #menu label="Menu" [closeOnSelect]="closeOnSelect" [(open)]="isOpen" className="{{ extra }}" [attr.data-x]="'1'">
-      <a href="/a/">Alpha</a>
-      <button type="button" class="b">Beta</button>
-      <div data-menu-picker-keep-open><button type="button" class="keep">Keep</button></div>
-      <button type="button" class="closer" (click)="$event.stopPropagation(); menu.close()">Closer</button>
-    </lily-menu-picker>
-  `,
-})
-class Host {
-  closeOnSelect = true;
-  isOpen = false;
-  extra = "";
-  picker = viewChild.required(MenuPicker);
-}
-
-@Component({
-  standalone: true,
-  imports: [MenuPicker, MenuPickerIcon],
-  template: `<lily-menu-picker label="Menu"><ng-template lilyMenuPickerIcon let-args><span class="mine">{{ args.open ? "-" : "+" }}</span></ng-template></lily-menu-picker>`,
-})
-class IconHost {}
-
-@Component({
-  standalone: true,
-  imports: [MenuPicker],
-  template: `<lily-menu-picker label="Menu" />`,
-})
-class EmptyHost {}
-
-let fixtures: ComponentFixture<unknown>[] = [];
-
-function mount(patch: Partial<Host> = {}): ComponentFixture<Host> {
-  const fixture = TestBed.createComponent(Host);
-  Object.assign(fixture.componentInstance, patch);
-  fixture.detectChanges();
-  fixtures.push(fixture);
-  return fixture;
-}
-
-const q = <T extends Element>(f: ComponentFixture<unknown>, sel: string) =>
-  f.nativeElement.querySelector(sel) as T;
-const trigger = (f: ComponentFixture<unknown>) => q<HTMLButtonElement>(f, ".menu-picker-button");
-const panel = (f: ComponentFixture<unknown>) => q<HTMLDivElement>(f, ".menu-picker-panel");
-
-async function press(f: ComponentFixture<unknown>, target: HTMLElement, key: string): Promise<void> {
-  target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
-  f.detectChanges();
-  await flush();
-  f.detectChanges();
-}
-
-async function click(f: ComponentFixture<unknown>, target: HTMLElement): Promise<void> {
-  target.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }));
-  f.detectChanges();
-  await flush();
-  f.detectChanges();
-}
-
-afterEach(() => {
-  for (const f of fixtures) f.destroy();
-  fixtures = [];
-});
-
-describe("MenuPicker", () => {
-  test("7.1 renders the root, button, tooltip and a hidden panel", () => {
-    const f = mount();
-    expect(q(f, "div.menu-picker")).toBeTruthy();
-    expect(trigger(f)).toBeTruthy();
-    expect(q(f, ".menu-picker-tooltip")).toBeTruthy();
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.2 the button is named by label with aria-expanded and aria-controls", () => {
-    const f = mount();
-    expect(trigger(f).getAttribute("aria-label")).toBe("Menu");
-    expect(trigger(f).getAttribute("aria-expanded")).toBe("false");
-    expect(trigger(f).getAttribute("aria-controls")).toBe(panel(f).id);
-  });
-
-  test("7.3 the default icon is an aria-hidden svg; a projected template replaces it", () => {
-    const f = mount();
-    const svg = q<SVGElement>(f, "svg.menu-picker-icon");
-    expect(svg.getAttribute("aria-hidden")).toBe("true");
-    expect(svg.getAttribute("viewBox")).toBe("0 0 16 16");
-    const hf = TestBed.createComponent(IconHost);
-    hf.detectChanges();
-    fixtures.push(hf);
-    expect(hf.nativeElement.querySelector(".mine")).toBeTruthy();
-    expect(hf.nativeElement.querySelector("svg.menu-picker-icon")).toBeNull();
-  });
-
-  test("7.4 the panel is a role=group named with label", () => {
-    const f = mount();
-    expect(panel(f).getAttribute("role")).toBe("group");
-    expect(panel(f).getAttribute("aria-label")).toBe("Menu");
-  });
-
-  test("7.5 the app's content renders inside; with none the panel is empty", () => {
-    const f = mount();
-    expect(panel(f).querySelector("a")?.textContent).toBe("Alpha");
-    const ef = TestBed.createComponent(EmptyHost);
-    ef.detectChanges();
-    fixtures.push(ef);
-    expect(q<HTMLElement>(ef, ".menu-picker-panel").textContent?.trim()).toBe("");
-  });
-
-  test("7.6 click opens and leaves focus on the button", async () => {
-    const f = mount();
-    trigger(f).focus();
-    await click(f, trigger(f));
-    expect(panel(f).hasAttribute("hidden")).toBe(false);
-    expect(trigger(f).getAttribute("aria-expanded")).toBe("true");
-    expect(document.activeElement).toBe(trigger(f));
-  });
-
-  test("7.7 a second click closes", async () => {
-    const f = mount();
-    await click(f, trigger(f));
-    await click(f, trigger(f));
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.8 ArrowDown opens at the first focusable, ArrowUp at the last", async () => {
-    const f = mount();
-    await press(f, trigger(f), "ArrowDown");
-    expect(panel(f).hasAttribute("hidden")).toBe(false);
-    expect(document.activeElement).toBe(panel(f).querySelector("a"));
-    const g = mount();
-    await press(g, trigger(g), "ArrowUp");
-    expect(document.activeElement).toBe(panel(g).querySelector(".closer"));
-  });
-
-  test("7.9 Escape closes and returns focus to the button", async () => {
-    const f = mount();
-    await press(f, trigger(f), "ArrowDown");
-    await press(f, panel(f), "Escape");
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-    expect(document.activeElement).toBe(trigger(f));
-  });
-
-  test("7.10 Tab closes without sending focus to the document top", async () => {
-    const f = mount();
-    await press(f, trigger(f), "ArrowDown");
-    await press(f, panel(f), "Tab");
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-    expect(document.activeElement).toBe(trigger(f));
-  });
-
-  test("7.11 clicking outside closes", async () => {
-    const f = mount();
-    await click(f, trigger(f));
-    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    f.detectChanges();
-    await flush();
-    f.detectChanges();
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.12 focus leaving the picker closes", async () => {
-    const f = mount();
-    await click(f, trigger(f));
-    const outside = document.createElement("button");
-    document.body.appendChild(outside);
-    q(f, "div.menu-picker").dispatchEvent(new FocusEvent("focusout", { bubbles: true, relatedTarget: outside }));
-    f.detectChanges();
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-    outside.remove();
-  });
-
-  test("7.13 activating a link or button closes; keep-open and closeOnSelect=false do not", async () => {
-    const f = mount();
-    await click(f, trigger(f));
-    panel(f).querySelector("a")!.addEventListener("click", (e) => e.preventDefault());
-    await click(f, panel(f).querySelector("a")!);
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-    expect(document.activeElement).toBe(trigger(f));
-    await click(f, trigger(f));
-    await click(f, panel(f).querySelector(".b")!);
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-    await click(f, trigger(f));
-    await click(f, panel(f).querySelector(".keep")!);
-    expect(panel(f).hasAttribute("hidden")).toBe(false);
-    const g = mount({ closeOnSelect: false });
-    await click(g, trigger(g));
-    await click(g, panel(g).querySelector(".b")!);
-    expect(panel(g).hasAttribute("hidden")).toBe(false);
-  });
-
-  test("7.14 the content can call close()", async () => {
-    const f = mount({ closeOnSelect: false });
-    await click(f, trigger(f));
-    await click(f, panel(f).querySelector(".closer")!);
-    expect(panel(f).hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.15 [(open)] updates once per actual change", async () => {
-    const f = mount();
-    await click(f, trigger(f));
-    expect(f.componentInstance.isOpen).toBe(true);
-    await click(f, trigger(f));
-    expect(f.componentInstance.isOpen).toBe(false);
-    const g = mount({ isOpen: true });
-    expect(panel(g).hasAttribute("hidden")).toBe(false);
-  });
-
-  test("7.16 the tooltip is a hidden role=tooltip holding the label", () => {
-    const f = mount();
-    const tip = q<HTMLElement>(f, ".menu-picker-tooltip");
-    expect(tip.getAttribute("role")).toBe("tooltip");
-    expect(tip.textContent).toBe("Menu");
-    expect(tip.hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.17 the tooltip shows on hover, hides on Escape, and never shows while open", async () => {
-    const f = mount();
-    const tip = q<HTMLElement>(f, ".menu-picker-tooltip");
-    const host = q<HTMLElement>(f, "lily-icon-button");
-    host.dispatchEvent(new MouseEvent("mouseenter"));
-    f.detectChanges();
-    expect(tip.hasAttribute("hidden")).toBe(false);
-    await flush();
-    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-    f.detectChanges();
-    expect(tip.hasAttribute("hidden")).toBe(true);
-    host.dispatchEvent(new MouseEvent("mouseleave"));
-    host.dispatchEvent(new MouseEvent("mouseenter"));
-    f.detectChanges();
-    expect(tip.hasAttribute("hidden")).toBe(false);
-    await click(f, trigger(f));
-    expect(tip.hasAttribute("hidden")).toBe(true);
-  });
-
-  test("7.18 the tooltip is not wired with aria-describedby", () => {
-    const f = mount();
-    expect(trigger(f).hasAttribute("aria-describedby")).toBe(false);
-  });
-
-  test("7.19 className is appended to the root", () => {
-    const f = mount({ extra: "extra" });
-    expect(q(f, "div.menu-picker").classList.contains("extra")).toBe(true);
-  });
-
-  test("7.20 two instances get distinct ids", () => {
-    expect(nextMenuPickerId()).not.toBe(nextMenuPickerId());
-    const a = mount();
-    const b = mount();
-    expect(panel(a).id).not.toBe(panel(b).id);
-  });
-
-  test("7.21 the source ships no stylesheet, inline style or English default", () => {
-    const src = readFileSync(resolve(__dirname, "menu-picker.component.ts"), "utf8")
-      .replace(/<!--[\s\S]*?-->/g, "")
-      .replace(/\/\*[\s\S]*?\*\//g, "")
-      .replace(/^\s*\/\/.*$/gm, "");
-    expect(src).not.toMatch(/styles:|\sstyle=/);
-    expect(src).not.toMatch(/(label|href):\s*["'`]/);
-  });
-});

package/menu-picker.component.ts

@@ -1,325 +0,0 @@
-import { NgTemplateOutlet } from "@angular/common";
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Directive,
-  ElementRef,
-  TemplateRef,
-  computed,
-  contentChild,
-  effect,
-  input,
-  model,
-  signal,
-  viewChild,
-} from "@angular/core";
-// Only the trigger button composes a headless primitive. The panel is a disclosure of whatever the
-// app projects into it — links, buttons, forms — so it carries no ARIA menu roles (role="menu" would
-// promise a roving-focus menuitem widget that arbitrary content is not). See spec/index.md §3.
-import { IconButton } from "@lilydesignsystem/angular-headless";
-
-/** Context passed to a custom icon `<ng-template>` (the button icon). */
-export type ChildArgs = {
-  /** Is the panel open? */
-  open: boolean;
-};
-
-let uid = 0;
-/** Stable per-instance id prefix; SSR-safe (no Math.random / Date.now). */
-export function nextMenuPickerId(): string {
-  uid += 1;
-  return `menu-picker-${uid}`;
-}
-
-/** The selector for focusable things inside the panel. */
-export const FOCUSABLE =
-  'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-
-/**
- * Marker for the projected icon template. Gives consumers typed `let-` variables:
- *
- * ```html
- * <lily-menu-picker label="Menu">
- *   <ng-template lilyMenuPickerIcon let-args>{{ args.open ? "×" : "☰" }}</ng-template>
- *   …the panel's content…
- * </lily-menu-picker>
- * ```
- */
-@Directive({
-  selector: "ng-template[lilyMenuPickerIcon]",
-  standalone: true,
-})
-export class MenuPickerIcon {
-  static ngTemplateContextGuard(
-    _dir: MenuPickerIcon,
-    _ctx: unknown,
-  ): _ctx is ChildArgs & { $implicit: ChildArgs } {
-    return true;
-  }
-}
-
-/**
- * MenuPicker — a headless dropdown control.
- *
- * A single-icon button (a bundled hamburger SVG) that opens a disclosure panel holding whatever
- * the app projects into it. It applies nothing to the document and persists nothing. Give the
- * element a template reference (`#menu`) to call `menu.close()` from the projected content.
- * See `spec/index.md`.
- */
-@Component({
-  selector: "lily-menu-picker",
-  standalone: true,
-  exportAs: "lilyMenuPicker",
-  imports: [NgTemplateOutlet, IconButton],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    "(document:click)": "onDocumentClick($event)",
-  },
-  template: `
-    <div
-      #rootEl
-      class="menu-picker {{ className() }}"
-      (focusout)="onRootFocusOut($event)"
-    >
-      <lily-icon-button
-        #buttonEl
-        [label]="label()"
-        baseClass="menu-picker-button"
-        [ariaExpanded]="open()"
-        [ariaControls]="panelId"
-        (click)="onButtonClick(); hoverButton.set(false)"
-        (mouseenter)="onTooltipButtonEnter()"
-        (mouseleave)="hoverButton.set(false)"
-        (focusin)="onTooltipButtonFocusIn()"
-        (focusout)="onTooltipButtonFocusOut()"
-        (keydown)="onButtonKeydown($event); onTooltipKeydown($event)"
-      >
-        @if (iconTemplate(); as tpl) {
-          <ng-container
-            [ngTemplateOutlet]="tpl"
-            [ngTemplateOutletContext]="childContext()"
-          />
-        } @else {
-          <svg
-            class="menu-picker-icon"
-            viewBox="0 0 16 16"
-            width="1.05rem"
-            height="1.05rem"
-            aria-hidden="true"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.6"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M1.5 3.5h13M1.5 8h13M1.5 12.5h13" />
-          </svg>
-        }
-      </lily-icon-button>
-
-      <!-- Purely visual: the same text is already the button's aria-label, so it is not wired
-           with aria-describedby (that would announce the name twice). -->
-      <div
-        class="menu-picker-tooltip"
-        role="tooltip"
-        [id]="tooltipId"
-        [attr.hidden]="tooltipVisible() ? null : ''"
-        (mouseenter)="hoverTooltip.set(true)"
-        (mouseleave)="hoverTooltip.set(false)"
-      >{{ label() }}</div>
-
-      <!-- A named group, not a menu: the content is the app's. The handlers are pure delegation
-           for whatever focusable content the app projects. -->
-      <div
-        #panelEl
-        class="menu-picker-panel"
-        [id]="panelId"
-        role="group"
-        [attr.aria-label]="label() || null"
-        [attr.hidden]="open() ? null : ''"
-        (keydown)="onPanelKeydown($event)"
-        (click)="onPanelClick($event)"
-      >
-        <ng-content />
-      </div>
-    </div>
-  `,
-})
-export class MenuPicker {
-  /** Accessible name for the button, the panel and the tooltip. */
-  readonly label = input.required<string>();
-  /** Is the panel open? Two-way bindable: `[(open)]`. */
-  readonly open = model<boolean>(false);
-  /**
-   * Close the panel when a link, button or `[role="menuitem"]` inside it is activated. Add
-   * `data-menu-picker-keep-open` to an element (or an ancestor) to opt it out. Default `true`.
-   */
-  readonly closeOnSelect = input<boolean>(true);
-  /** Extra CSS class on the root div. */
-  readonly className = input<string>("");
-
-  /** Projected icon template; replaces the default icon when supplied. */
-  protected readonly iconTemplate = contentChild(MenuPickerIcon, { read: TemplateRef });
-
-  private readonly rootRef =
-    viewChild.required<ElementRef<HTMLDivElement>>("rootEl");
-  // A template-ref-variable on a component tag resolves to the component INSTANCE, which is what
-  // is needed to call the headless component's own public `focus()` method.
-  private readonly buttonRef = viewChild.required<IconButton>("buttonEl");
-  private readonly panelRef =
-    viewChild.required<ElementRef<HTMLDivElement>>("panelEl");
-
-  private readonly baseId = nextMenuPickerId();
-  protected readonly panelId = `${this.baseId}-panel`;
-
-  // Tooltip: shown while the pointer is over the button or the tooltip itself (hoverable, WCAG
-  // 1.4.13) or while the button has keyboard focus; Escape dismisses it without moving focus;
-  // never shown while the popup is open, since the popup then explains the control.
-  protected readonly tooltipId = `${this.baseId}-tooltip`;
-  protected readonly hoverButton = signal(false);
-  protected readonly hoverTooltip = signal(false);
-  protected readonly focusButton = signal(false);
-  protected readonly dismissed = signal(false);
-  protected readonly tooltipVisible = computed(
-    () =>
-      !this.open() &&
-      !this.dismissed() &&
-      (this.hoverButton() || this.hoverTooltip() || this.focusButton()),
-  );
-
-  protected onTooltipButtonEnter(): void {
-    this.hoverButton.set(true);
-    this.dismissed.set(false);
-  }
-
-  protected onTooltipButtonFocusIn(): void {
-    // Keyboard focus only: a mouse click also focuses the button in Chromium, and the tooltip
-    // should not stick after a click.
-    try {
-      this.focusButton.set(
-        this.buttonRef().element?.matches(":focus-visible") ?? false,
-      );
-    } catch {
-      this.focusButton.set(true); // engine without :focus-visible — err towards showing
-    }
-  }
-
-  protected onTooltipButtonFocusOut(): void {
-    this.focusButton.set(false);
-    this.dismissed.set(false);
-  }
-
-  protected onTooltipKeydown(event: KeyboardEvent): void {
-    if (event.key === "Escape" && this.tooltipVisible()) this.dismissed.set(true);
-  }
-
-  // WCAG 1.4.13 "dismissable": while the tooltip is visible, Escape works wherever focus is. The
-  // listener exists only while visible; the effect cleanup removes it on hide and on destroy.
-  private readonly tooltipEscapeListener = effect((onCleanup) => {
-    if (!this.tooltipVisible() || typeof document === "undefined") return;
-    const onKey = (event: KeyboardEvent): void => {
-      if (event.key === "Escape") this.dismissed.set(true);
-    };
-    document.addEventListener("keydown", onKey);
-    onCleanup(() => document.removeEventListener("keydown", onKey));
-  });
-
-  protected readonly childContext = computed(() => {
-    const args: ChildArgs = { open: this.open() };
-    return { $implicit: args, ...args };
-  });
-
-  private focusables(): HTMLElement[] {
-    return Array.from(
-      this.panelRef().nativeElement.querySelectorAll<HTMLElement>(FOCUSABLE),
-    );
-  }
-
-  // ---------------------------------------------------------------
-  // Open / close
-  // ---------------------------------------------------------------
-
-  /** Open the panel, optionally focusing its first or last focusable element. */
-  openPanel(focus: "none" | "first" | "last" = "none"): void {
-    this.open.set(true);
-    if (focus === "none") return;
-    // Deferred so the `hidden` attribute is gone before focus is moved.
-    queueMicrotask(() => {
-      const all = this.focusables();
-      (focus === "last" ? all[all.length - 1] : all[0])?.focus({ preventScroll: true });
-    });
-  }
-
-  /** Close the panel; `refocus` returns focus to the trigger. */
-  closePanel(refocus = true): void {
-    if (!this.open()) return;
-    this.open.set(false);
-    if (refocus) queueMicrotask(() => this.buttonRef().focus({ preventScroll: true }));
-  }
-
-  /** Close the panel and return focus to the button. For the projected content to call. */
-  close(): void {
-    this.closePanel();
-  }
-
-  protected onButtonClick(): void {
-    if (this.open()) this.closePanel();
-    else this.openPanel();
-  }
-
-  protected onPanelClick(event: MouseEvent): void {
-    if (!this.closeOnSelect()) return;
-    const target = event.target as Element | null;
-    const hit = target?.closest?.('a[href], button, [role="menuitem"]');
-    if (!hit || !this.panelRef().nativeElement.contains(hit)) return;
-    if (hit.closest("[data-menu-picker-keep-open]")) return;
-    this.closePanel();
-  }
-
-  // ---------------------------------------------------------------
-  // Keyboard
-  // ---------------------------------------------------------------
-
-  protected onButtonKeydown(event: KeyboardEvent): void {
-    if (event.key === "Escape" && this.open()) {
-      event.preventDefault();
-      this.closePanel();
-    } else if (event.key === "ArrowDown") {
-      // Enter and Space already produce a click; the arrows open and move into the panel.
-      event.preventDefault();
-      if (!this.open()) this.openPanel("first");
-      else this.focusables()[0]?.focus({ preventScroll: true });
-    } else if (event.key === "ArrowUp") {
-      event.preventDefault();
-      if (!this.open()) this.openPanel("last");
-      else {
-        const all = this.focusables();
-        all[all.length - 1]?.focus({ preventScroll: true });
-      }
-    }
-  }
-
-  protected onPanelKeydown(event: KeyboardEvent): void {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      this.closePanel();
-    } else if (event.key === "Tab") {
-      // Focus goes to the button FIRST, without cancelling the key, so the browser continues
-      // from the picker's position rather than from <body>.
-      this.buttonRef().focus?.({ preventScroll: true });
-      this.closePanel(false);
-    }
-  }
-
-  protected onRootFocusOut(event: FocusEvent): void {
-    const next = event.relatedTarget as Node | null;
-    if (next && this.rootRef().nativeElement.contains(next)) return;
-    this.closePanel(false);
-  }
-
-  protected onDocumentClick(event: Event): void {
-    if (!this.open()) return;
-    const t = event.target as Node | null;
-    if (t && !this.rootRef().nativeElement.contains(t)) this.closePanel(false);
-  }
-}

package/ng-package.json

@@ -1,10 +0,0 @@
-{
-  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "./dist",
-  "lib": {
-    "entryFile": "index.ts"
-  },
-  "allowedNonPeerDependencies": [
-    "@lilydesignsystem/angular-headless"
-  ]
-}