@pagefind/component-ui 1.5.0-alpha.3

package/components/pagefind-input.ts

@@ -0,0 +1,224 @@
+import { PagefindElement } from "./base-element";
+import { Instance } from "../core/instance";
+import type { PagefindError } from "../types";
+
+const asyncSleep = (ms = 100): Promise<void> =>
+  new Promise((r) => setTimeout(r, ms));
+
+export class PagefindInput extends PagefindElement {
+  static get observedAttributes(): string[] {
+    return ["placeholder", "debounce", "autofocus"];
+  }
+
+  inputEl: HTMLInputElement | null = null;
+  clearEl: HTMLButtonElement | null = null;
+  searchID: number = 0;
+
+  placeholder: string = "";
+  debounce: number = 300;
+  autofocus: boolean = false;
+
+  constructor() {
+    super();
+  }
+
+  readAttributes(): void {
+    if (this.hasAttribute("placeholder")) {
+      this.placeholder = this.getAttribute("placeholder") || "";
+    }
+    if (this.hasAttribute("debounce")) {
+      this.debounce =
+        parseInt(this.getAttribute("debounce") || "300", 10) || 300;
+    }
+    if (this.hasAttribute("autofocus")) {
+      this.autofocus = this.hasAttribute("autofocus");
+    }
+  }
+
+  init(): void {
+    this.readAttributes();
+    this.render();
+  }
+
+  render(): void {
+    this.innerHTML = "";
+
+    const inputId = this.instance!.generateId("pfmod-input");
+
+    const searchLabel =
+      this.instance?.translate("search_label") || "Search this site";
+    const clearText = this.instance?.translate("clear_search") || "Clear";
+    const placeholderText =
+      this.placeholder || this.instance?.translate("placeholder") || "Search";
+
+    if (this.instance?.direction === "rtl") {
+      this.setAttribute("dir", "rtl");
+    } else {
+      this.removeAttribute("dir");
+    }
+
+    const wrapper = document.createElement("form");
+    wrapper.className = "pf-input-wrapper";
+    wrapper.setAttribute("role", "search");
+    wrapper.setAttribute("aria-label", searchLabel);
+    wrapper.setAttribute("action", "javascript:void(0);");
+
+    const label = document.createElement("label");
+    label.setAttribute("for", inputId);
+    label.setAttribute("data-pf-sr-hidden", "true");
+    label.textContent = searchLabel;
+    wrapper.appendChild(label);
+
+    this.inputEl = document.createElement("input");
+    this.inputEl.id = inputId;
+    this.inputEl.className = "pf-input";
+    this.inputEl.setAttribute("autocapitalize", "none");
+    this.inputEl.setAttribute("enterkeyhint", "search");
+    this.inputEl.setAttribute("placeholder", placeholderText);
+    if (this.autofocus) {
+      this.inputEl.setAttribute("autofocus", "autofocus");
+    }
+    wrapper.appendChild(this.inputEl);
+
+    this.clearEl = document.createElement("button");
+    this.clearEl.className = "pf-input-clear";
+    this.clearEl.setAttribute("data-pf-suppressed", "true");
+    this.clearEl.textContent = clearText;
+    wrapper.appendChild(this.clearEl);
+
+    this.appendChild(wrapper);
+
+    this.setupEventHandlers();
+  }
+
+  setupEventHandlers(): void {
+    if (!this.inputEl || !this.clearEl) return;
+
+    this.inputEl.addEventListener("input", async (e) => {
+      const target = e.target as HTMLInputElement;
+      if (this.instance && typeof target?.value === "string") {
+        this.updateState(target.value);
+
+        const thisSearchID = ++this.searchID;
+        await asyncSleep(this.debounce);
+
+        if (thisSearchID !== this.searchID) {
+          return;
+        }
+
+        this.instance?.triggerSearch(target.value);
+      }
+    });
+
+    this.inputEl.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        ++this.searchID;
+        if (this.inputEl) this.inputEl.value = "";
+        this.instance?.triggerSearch("");
+        this.updateState("");
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (this.inputEl) {
+          this.instance?.focusNextResults(this.inputEl);
+        }
+      }
+    });
+
+    this.inputEl.addEventListener("focus", () => {
+      this.instance?.triggerLoad();
+      const navigateText =
+        this.instance?.translate("keyboard_navigate") || "navigate";
+      const clearText = this.instance?.translate("keyboard_clear") || "clear";
+      this.instance?.registerShortcut(
+        { label: "↓", description: navigateText },
+        this,
+      );
+      this.instance?.registerShortcut(
+        { label: "esc", description: clearText },
+        this,
+      );
+    });
+
+    this.inputEl.addEventListener("blur", () => {
+      this.instance?.deregisterAllShortcuts(this);
+    });
+
+    this.clearEl.addEventListener("click", () => {
+      if (this.inputEl) {
+        this.inputEl.value = "";
+        this.instance?.triggerSearch("");
+        this.updateState("");
+        this.inputEl.focus();
+      }
+    });
+  }
+
+  updateState(term: string): void {
+    if (this.clearEl) {
+      if (term && term?.length) {
+        this.clearEl.removeAttribute("data-pf-suppressed");
+      } else {
+        this.clearEl.setAttribute("data-pf-suppressed", "true");
+      }
+    }
+  }
+
+  register(instance: Instance): void {
+    instance.registerInput(this, {
+      keyboardNavigation: true,
+    });
+
+    instance.on(
+      "search",
+      (term: unknown) => {
+        if (this.inputEl && document.activeElement !== this.inputEl) {
+          this.inputEl.value = term as string;
+          this.updateState(term as string);
+        }
+      },
+      this,
+    );
+
+    instance.on(
+      "error",
+      (error: unknown) => {
+        const err = error as PagefindError;
+        this.showError({
+          message: err.message || "Search initialization failed",
+          details: err.bundlePath
+            ? `Bundle path: ${err.bundlePath}`
+            : undefined,
+        });
+      },
+      this,
+    );
+
+    instance.on(
+      "translations",
+      () => {
+        const currentValue = this.inputEl?.value || "";
+        this.render();
+        if (this.inputEl && currentValue) {
+          this.inputEl.value = currentValue;
+          this.updateState(currentValue);
+        }
+      },
+      this,
+    );
+  }
+
+  update(): void {
+    this.render();
+  }
+
+  focus(): void {
+    if (this.inputEl) {
+      this.inputEl.focus();
+    }
+  }
+}
+
+if (!customElements.get("pagefind-input")) {
+  customElements.define("pagefind-input", PagefindInput);
+}

package/components/pagefind-keyboard-hints.ts

@@ -0,0 +1,62 @@
+import { PagefindElement } from "./base-element";
+import { Instance } from "../core/instance";
+
+export class PagefindKeyboardHints extends PagefindElement {
+  init(): void {
+    this.classList.add("pf-keyboard-hints");
+    // Keyboard hints are visual aids for sighted users, not meaningful for screen readers
+    this.setAttribute("aria-hidden", "true");
+  }
+
+  render(): void {
+    this.innerHTML = "";
+
+    if (this.instance?.direction === "rtl") {
+      this.setAttribute("dir", "rtl");
+    } else {
+      this.removeAttribute("dir");
+    }
+
+    const shortcuts = this.instance?.getActiveShortcuts() || [];
+
+    if (shortcuts.length === 0) {
+      return;
+    }
+
+    // Deduplicate by label
+    // for example, only show ↑↓ once even if multiple components have it
+    const seen = new Set<string>();
+    for (const shortcut of shortcuts) {
+      if (seen.has(shortcut.label)) continue;
+      seen.add(shortcut.label);
+
+      const hint = document.createElement("div");
+      hint.className = "pf-keyboard-hint";
+
+      const key = document.createElement("kbd");
+      key.className = "pf-keyboard-key";
+      key.textContent = shortcut.label;
+      hint.appendChild(key);
+
+      hint.appendChild(document.createTextNode(` ${shortcut.description}`));
+      this.appendChild(hint);
+    }
+  }
+
+  register(instance: Instance): void {
+    instance.registerUtility(this, "keyboard-hints");
+    this.render();
+
+    instance.on(
+      "translations",
+      () => {
+        this.render();
+      },
+      this,
+    );
+  }
+}
+
+if (!customElements.get("pagefind-keyboard-hints")) {
+  customElements.define("pagefind-keyboard-hints", PagefindKeyboardHints);
+}

package/components/pagefind-modal-body.ts

@@ -0,0 +1,19 @@
+import { PagefindElement } from "./base-element";
+import { Instance } from "../core/instance";
+
+export class PagefindModalBody extends PagefindElement {
+  init(): void {
+    this.classList.add("pf-modal-body");
+    // Prevent scrollable container from being in tab order,
+    // as all children should be interactable
+    this.setAttribute("tabindex", "-1");
+  }
+
+  register(_instance: Instance): void {
+    /* structural - unregistered */
+  }
+}
+
+if (!customElements.get("pagefind-modal-body")) {
+  customElements.define("pagefind-modal-body", PagefindModalBody);
+}

package/components/pagefind-modal-footer.ts

@@ -0,0 +1,16 @@
+import { PagefindElement } from "./base-element";
+import { Instance } from "../core/instance";
+
+export class PagefindModalFooter extends PagefindElement {
+  init(): void {
+    this.classList.add("pf-modal-footer");
+  }
+
+  register(_instance: Instance): void {
+    /* structural - unregistered */
+  }
+}
+
+if (!customElements.get("pagefind-modal-footer")) {
+  customElements.define("pagefind-modal-footer", PagefindModalFooter);
+}

package/components/pagefind-modal-header.ts

@@ -0,0 +1,59 @@
+import { PagefindElement } from "./base-element";
+import { Instance } from "../core/instance";
+
+interface ModalElement extends HTMLElement {
+  close?: () => void;
+}
+
+export class PagefindModalHeader extends PagefindElement {
+  private closeBtn: HTMLButtonElement | null = null;
+
+  init(): void {
+    this.classList.add("pf-modal-header");
+
+    const content = document.createElement("div");
+    content.className = "pf-modal-header-content";
+    while (this.firstChild) {
+      content.appendChild(this.firstChild);
+    }
+
+    // Create close button visible on mobile only
+    this.closeBtn = document.createElement("button");
+    this.closeBtn.type = "button";
+    this.closeBtn.className = "pf-modal-close";
+    this.closeBtn.setAttribute(
+      "aria-label",
+      this.instance?.translate("keyboard_close") || "Close",
+    );
+    this.closeBtn.innerHTML = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M15 5L5 15M5 5l10 10"/></svg>`;
+    this.closeBtn.addEventListener("click", () => {
+      const modal = this.closest("pagefind-modal") as ModalElement | null;
+      if (modal && typeof modal.close === "function") {
+        modal.close();
+      }
+    });
+
+    this.append(content, this.closeBtn);
+  }
+
+  register(instance: Instance): void {
+    instance.registerUtility(this, "modal-header");
+
+    instance.on(
+      "translations",
+      () => {
+        if (this.closeBtn) {
+          this.closeBtn.setAttribute(
+            "aria-label",
+            instance.translate("keyboard_close") || "Close",
+          );
+        }
+      },
+      this,
+    );
+  }
+}
+
+if (!customElements.get("pagefind-modal-header")) {
+  customElements.define("pagefind-modal-header", PagefindModalHeader);
+}

package/components/pagefind-modal-trigger.ts

@@ -0,0 +1,195 @@
+import { PagefindElement } from "./base-element";
+import { Instance, PagefindComponent } from "../core/instance";
+
+interface ModalComponent extends PagefindComponent {
+  dialogEl?: HTMLDialogElement;
+  open?: () => void;
+}
+
+interface NavigatorUAData {
+  platform?: string;
+}
+
+export class PagefindModalTrigger extends PagefindElement {
+  static get observedAttributes(): string[] {
+    return ["placeholder", "shortcut", "hide-shortcut", "compact"];
+  }
+
+  buttonEl: HTMLButtonElement | null = null;
+  private _userPlaceholder: string | null = null;
+  shortcut: string = "k";
+  hideShortcut: boolean = false;
+  compact: boolean = false;
+  isMac: boolean = false;
+  private _keydownHandler: ((e: KeyboardEvent) => void) | null = null;
+
+  constructor() {
+    super();
+  }
+
+  get placeholder(): string {
+    return (
+      this._userPlaceholder ||
+      this.instance?.translate("keyboard_search") ||
+      "Search"
+    );
+  }
+
+  init(): void {
+    this.isMac = this.detectMac();
+    this.readAttributes();
+    this.render();
+    this.setupKeyboardShortcut();
+  }
+
+  private detectMac(): boolean {
+    try {
+      const uaData = (
+        navigator as Navigator & { userAgentData?: NavigatorUAData }
+      ).userAgentData;
+      if (uaData?.platform) {
+        return uaData.platform.toLowerCase().includes("mac");
+      }
+    } catch (e) {}
+    return /mac/i.test(navigator.userAgent);
+  }
+
+  private readAttributes(): void {
+    if (this.hasAttribute("placeholder")) {
+      this._userPlaceholder = this.getAttribute("placeholder");
+    }
+    if (this.hasAttribute("shortcut")) {
+      this.shortcut = (this.getAttribute("shortcut") || "k").toLowerCase();
+    }
+    if (this.hasAttribute("hide-shortcut")) {
+      this.hideShortcut = this.getAttribute("hide-shortcut") !== "false";
+    }
+    if (this.hasAttribute("compact")) {
+      this.compact = this.getAttribute("compact") !== "false";
+    }
+  }
+
+  render(): void {
+    this.innerHTML = "";
+
+    if (this.instance?.direction === "rtl") {
+      this.setAttribute("dir", "rtl");
+    } else {
+      this.removeAttribute("dir");
+    }
+
+    this.buttonEl = document.createElement("button");
+    this.buttonEl.className = "pf-trigger-btn";
+    this.buttonEl.type = "button";
+    this.buttonEl.setAttribute("aria-haspopup", "dialog");
+    this.buttonEl.setAttribute("aria-expanded", "false");
+    this.buttonEl.setAttribute("aria-label", this.placeholder || "Search");
+
+    const icon = document.createElement("span");
+    icon.className = "pf-trigger-icon";
+    icon.setAttribute("aria-hidden", "true");
+    this.buttonEl.appendChild(icon);
+
+    if (!this.compact) {
+      const text = document.createElement("span");
+      text.className = "pf-trigger-text";
+      text.textContent = this.placeholder;
+      this.buttonEl.appendChild(text);
+    }
+
+    if (!this.hideShortcut) {
+      const shortcutContainer = document.createElement("span");
+      shortcutContainer.className = "pf-trigger-shortcut";
+      shortcutContainer.setAttribute("aria-hidden", "true");
+
+      const modKey = document.createElement("span");
+      modKey.className = "pf-trigger-key";
+      modKey.textContent = this.isMac ? "\u2318" : "Ctrl";
+      shortcutContainer.appendChild(modKey);
+
+      const shortcutKey = document.createElement("span");
+      shortcutKey.className = "pf-trigger-key";
+      shortcutKey.textContent = this.shortcut.toUpperCase();
+      shortcutContainer.appendChild(shortcutKey);
+
+      this.buttonEl.appendChild(shortcutContainer);
+    }
+
+    this.appendChild(this.buttonEl);
+
+    this.buttonEl.addEventListener("click", () => {
+      this.openModal();
+    });
+  }
+
+  private setupKeyboardShortcut(): void {
+    this._keydownHandler = (e: KeyboardEvent) => {
+      const modifierPressed = this.isMac ? e.metaKey : e.ctrlKey;
+      const keyPressed = e.key.toLowerCase() === this.shortcut;
+
+      if (modifierPressed && keyPressed) {
+        e.preventDefault();
+        this.openModal();
+      }
+    };
+
+    document.addEventListener("keydown", this._keydownHandler);
+  }
+
+  openModal(): void {
+    const modals = (this.instance?.getUtilities("modal") ||
+      []) as ModalComponent[];
+    const modal = modals[0];
+
+    if (modal && typeof modal.open === "function") {
+      modal.open();
+      if (this.buttonEl) {
+        this.buttonEl.setAttribute("aria-expanded", "true");
+      }
+    }
+  }
+
+  handleModalClose(): void {
+    if (this.buttonEl) {
+      this.buttonEl.setAttribute("aria-expanded", "false");
+      this.buttonEl.focus();
+    }
+  }
+
+  register(instance: Instance): void {
+    instance.registerUtility(this, "modal-trigger");
+
+    instance.on(
+      "translations",
+      () => {
+        this.render();
+      },
+      this,
+    );
+  }
+
+  reconcileAria(): void {
+    const modals = (this.instance?.getUtilities("modal") ||
+      []) as ModalComponent[];
+    const modal = modals[0];
+    if (modal?.dialogEl?.id && this.buttonEl) {
+      this.buttonEl.setAttribute("aria-controls", modal.dialogEl.id);
+    }
+  }
+
+  cleanup(): void {
+    if (this._keydownHandler) {
+      document.removeEventListener("keydown", this._keydownHandler);
+      this._keydownHandler = null;
+    }
+  }
+
+  update(): void {
+    this.readAttributes();
+    this.render();
+  }
+}
+
+if (!customElements.get("pagefind-modal-trigger")) {
+  customElements.define("pagefind-modal-trigger", PagefindModalTrigger);
+}