Search field

"use client";

import { useEffect, useId, useRef, useState } from "react";
import type { ChangeEvent, ComponentProps, FormEvent, KeyboardEvent, ReactNode } from "react";
import "./search-field.css";

export type SearchFieldProps = Omit<
  ComponentProps<"input">,
  "type" | "value" | "defaultValue" | "onChange" | "size" | "children"
> & {
  label: ReactNode;
  /** Keeps the label for assistive tech only. */
  hideLabel?: boolean;
  value?: string;
  defaultValue?: string;
  /** Called as the text changes, after `debounce` milliseconds of quiet. */
  onValueChange?: (value: string) => void;
  /** Called on Enter, with the current text. */
  onSearch?: (value: string) => void;
  debounce?: number;
  loading?: boolean;
  /** Announced politely once a search settles, e.g. "12 results". */
  resultCount?: number;
  /** Key shown as a hint while the field is empty and unfocused. Display only. */
  shortcut?: string;
  size?: "s" | "m" | "l";
};

export function SearchField({
  label,
  hideLabel = true,
  value,
  defaultValue = "",
  onValueChange,
  onSearch,
  debounce = 0,
  loading = false,
  resultCount,
  shortcut,
  size = "m",
  disabled,
  className,
  style,
  id,
  onKeyDown,
  ...rest
}: SearchFieldProps) {
  const autoId = useId();
  const inputId = id ?? autoId;
  const inputRef = useRef<HTMLInputElement>(null);
  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
  const pending = useRef<string | null>(null);
  const emitted = useRef(value ?? defaultValue);
  // The field keeps its own text even when controlled, so a debounced parent never makes typing lag.
  const [text, setText] = useState(value ?? defaultValue);

  useEffect(() => {
    if (value !== undefined && value !== emitted.current) {
      clearTimeout(timer.current);
      pending.current = null;
      emitted.current = value;
      setText(value);
    }
  }, [value]);

  useEffect(() => () => clearTimeout(timer.current), []);

  function emit(next: string) {
    clearTimeout(timer.current);
    pending.current = null;
    emitted.current = next;
    onValueChange?.(next);
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    const next = event.currentTarget.value;
    setText(next);
    if (debounce <= 0) return emit(next);
    clearTimeout(timer.current);
    pending.current = next;
    timer.current = setTimeout(() => emit(next), debounce);
  }

  function clear() {
    setText("");
    emit("");
  }

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (pending.current !== null) emit(pending.current);
    onSearch?.(text);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented || event.key !== "Escape") return;
    event.preventDefault();
    if (text) {
      // Only the press that clears is kept from the page; the next one is free to close a dialog.
      event.stopPropagation();
      clear();
    } else {
      event.currentTarget.blur();
    }
  }

  const status =
    loading || resultCount === undefined || text === ""
      ? ""
      : `${resultCount} ${resultCount === 1 ? "result" : "results"}`;

  return (
    <form
      role="search"
      className={["eq-search-field", className].filter(Boolean).join(" ")}
      style={style}
      data-size={size}
      data-empty={text === "" || undefined}
      data-disabled={disabled || undefined}
      aria-busy={loading || undefined}
      onSubmit={handleSubmit}
    >
      <label className="eq-search-field-label" htmlFor={inputId} data-hidden={hideLabel || undefined}>
        {label}
      </label>
      <div className="eq-search-field-control">
        {loading ? (
          <span className="eq-search-field-spinner" aria-hidden="true" />
        ) : (
          <svg className="eq-search-field-icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <circle cx="7" cy="7" r="4.25" stroke="currentColor" strokeWidth="1.5" />
            <path d="m10.25 10.25 3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
          </svg>
        )}
        <input
          autoComplete="off"
          enterKeyHint="search"
          {...rest}
          ref={inputRef}
          id={inputId}
          className="eq-search-field-input"
          type="search"
          value={text}
          disabled={disabled}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
        />
        {shortcut && (
          <kbd className="eq-search-field-shortcut" aria-hidden="true">
            {shortcut}
          </kbd>
        )}
        {text !== "" && !disabled && (
          <button
            type="button"
            className="eq-search-field-clear"
            aria-label="Clear search"
            onClick={() => {
              clear();
              inputRef.current?.focus();
            }}
          >
            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="m5 5 6 6m0-6-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
            </svg>
          </button>
        )}
      </div>
      <span className="eq-search-field-status" role="status">
        {status}
      </span>
    </form>
  );
}