Combobox

"use client";

import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
import type { ChangeEvent, ComponentProps, FocusEvent, KeyboardEvent, ReactNode, Ref } from "react";
import "./combobox.css";

export type ComboboxProps = Omit<ComponentProps<"input">, "value" | "defaultValue" | "type"> & {
  /** Visible label. */
  label: ReactNode;
  /** Help text under the control, linked with aria-describedby. */
  hint?: ReactNode;
  /** Error text. When set, the input is marked invalid and the text is announced with it. */
  error?: ReactNode;
  /** Suggestions, filtered by what is typed. */
  options: string[];
  /** Controlled text of the input. */
  value?: string;
  /** Uncontrolled starting text. */
  defaultValue?: string;
  /** Called on every change of the text, typed or picked from the list. */
  onValueChange?: (value: string) => void;
  /** Row shown when nothing matches. */
  emptyText?: string;
};

/** True when there is something to render; false, null and "" count as nothing. */
function present(node: ReactNode): boolean {
  return node != null && node !== false && node !== "";
}

function setRefs<T>(node: T, ...refs: (Ref<T> | undefined)[]) {
  for (const ref of refs) {
    if (typeof ref === "function") ref(node);
    else if (ref) ref.current = node;
  }
}

function supportsPopover(el: HTMLElement) {
  return typeof el.showPopover === "function";
}

const GAP = 4;

export function Combobox({
  label,
  hint,
  error,
  options,
  value,
  defaultValue = "",
  onValueChange,
  emptyText = "No matches",
  className,
  style,
  id,
  disabled,
  readOnly,
  ref,
  onChange,
  onKeyDown,
  onBlur,
  "aria-describedby": describedBy,
  "aria-invalid": ariaInvalid,
  ...rest
}: ComboboxProps) {
  const autoId = useId();
  const inputId = id ?? autoId;
  const labelId = `${autoId}-label`;
  const listId = `${autoId}-list`;
  const hintId = `${autoId}-hint`;
  const errorId = `${autoId}-error`;
  const optionId = (index: number) => `${autoId}-option-${index}`;

  const inputRef = useRef<HTMLInputElement | null>(null);
  const controlRef = useRef<HTMLDivElement | null>(null);
  const popoverRef = useRef<HTMLDivElement | null>(null);
  const mergedRef = useCallback((node: HTMLInputElement | null) => setRefs(node, inputRef, ref), [ref]);

  const [inner, setInner] = useState(defaultValue);
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(-1);
  /** What filters the list; null shows every option, as after a pick or on the button. */
  const [query, setQuery] = useState<string | null>(null);

  const text = value ?? inner;
  const needle = (query ?? "").trim().toLowerCase();
  const matches = needle ? options.filter((o) => o.toLowerCase().includes(needle)) : options;
  const locked = disabled || readOnly;
  // The options prop can shrink under an open list; never point at a row that is gone.
  const activeIndex = active < matches.length ? active : -1;

  function setText(next: string) {
    if (value === undefined) setInner(next);
    onValueChange?.(next);
  }

  function show(index: number) {
    setOpen(true);
    setActive(index);
  }

  function hide() {
    setOpen(false);
    setActive(-1);
  }

  function pick(option: string) {
    setText(option);
    setQuery(null);
    hide();
  }

  // Put the list in the top layer, so no overflow: hidden ancestor clips it,
  // and pin it under the control while the page scrolls or resizes.
  useLayoutEffect(() => {
    const popover = popoverRef.current;
    const control = controlRef.current;
    if (!popover || !control) return;
    // Without the Popover API the hidden attribute alone shows and hides the list.
    const native = supportsPopover(popover);
    if (!open) {
      if (native && popover.matches(":popover-open")) popover.hidePopover();
      return;
    }
    if (native && !popover.matches(":popover-open")) popover.showPopover();

    function place() {
      if (!popover || !control) return;
      const rect = control.getBoundingClientRect();
      popover.style.left = `${rect.left}px`;
      popover.style.width = `${rect.width}px`;
      // Measured after the width is set, since the width decides the height.
      const height = popover.offsetHeight;
      const below = rect.bottom + GAP;
      const fitsBelow = below + height <= window.innerHeight;
      const fitsAbove = rect.top - GAP - height >= 0;
      const above = !fitsBelow && fitsAbove;
      popover.style.top = `${above ? rect.top - GAP - height : below}px`;
      // Tells the stylesheet which way the list grows, for its entrance.
      popover.dataset.side = above ? "top" : "bottom";
    }

    place();
    window.addEventListener("scroll", place, true);
    window.addEventListener("resize", place);
    return () => {
      window.removeEventListener("scroll", place, true);
      window.removeEventListener("resize", place);
    };
  }, [open, matches.length]);

  useEffect(() => {
    if (!open || activeIndex < 0) return;
    document.getElementById(optionId(activeIndex))?.scrollIntoView({ block: "nearest" });
  });

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    onChange?.(event);
    const next = event.currentTarget.value;
    setText(next);
    setQuery(next);
    show(-1);
  }

  function handleBlur(event: FocusEvent<HTMLInputElement>) {
    onBlur?.(event);
    hide();
  }

  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented || locked || event.nativeEvent.isComposing) return;
    const count = matches.length;
    switch (event.key) {
      case "ArrowDown":
        event.preventDefault();
        if (event.altKey) show(-1);
        else if (!open) show(count ? 0 : -1);
        else setActive(count ? (activeIndex + 1) % count : -1);
        return;
      case "ArrowUp":
        event.preventDefault();
        if (event.altKey) hide();
        else if (!open) show(count - 1);
        else setActive(count ? (activeIndex <= 0 ? count - 1 : activeIndex - 1) : -1);
        return;
      case "Enter":
        if (open && activeIndex >= 0) {
          // The pick takes Enter, so a surrounding form does not submit.
          event.preventDefault();
          pick(matches[activeIndex]);
        } else if (open) {
          hide();
        }
        return;
      case "Escape":
        if (open) {
          event.preventDefault();
          hide();
        } else if (text !== "") {
          event.preventDefault();
          setText("");
          setQuery(null);
        }
        return;
      case "ArrowLeft":
      case "ArrowRight":
      case "Home":
      case "End":
        // The caret moves in the text, so visual focus returns there too.
        setActive(-1);
        return;
    }
  }

  const status = !open
    ? ""
    : matches.length === 0
      ? emptyText
      : `${matches.length} ${matches.length === 1 ? "option" : "options"} available.`;

  return (
    <div className={["eq-combobox", className].filter(Boolean).join(" ")} style={style}>
      <label className="eq-combobox-label" id={labelId} htmlFor={inputId}>
        {label}
      </label>
      <div className="eq-combobox-control" ref={controlRef} data-disabled={disabled || undefined}>
        <input
          autoComplete="off"
          autoCapitalize="none"
          spellCheck={false}
          {...rest}
          ref={mergedRef}
          id={inputId}
          className="eq-combobox-input"
          type="text"
          role="combobox"
          aria-autocomplete="list"
          aria-expanded={open}
          aria-controls={listId}
          aria-activedescendant={open && activeIndex >= 0 ? optionId(activeIndex) : undefined}
          aria-describedby={
            [describedBy, present(hint) ? hintId : null, present(error) ? errorId : null].filter(Boolean).join(" ") ||
            undefined
          }
          aria-invalid={present(error) ? true : ariaInvalid}
          disabled={disabled}
          readOnly={readOnly}
          value={text}
          onChange={handleChange}
          onBlur={handleBlur}
          onKeyDown={handleKeyDown}
        />
        <button
          type="button"
          className="eq-combobox-button"
          tabIndex={-1}
          aria-label="Show options"
          aria-expanded={open}
          aria-controls={listId}
          disabled={locked}
          onMouseDown={(event) => {
            // Keep focus in the input, which owns the keyboard.
            event.preventDefault();
            inputRef.current?.focus();
          }}
          onClick={() => {
            if (open) hide();
            else {
              setQuery(null);
              show(-1);
            }
          }}
        >
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M4.5 6.5L8 10l3.5-3.5" />
          </svg>
        </button>
      </div>
      {present(hint) && (
        <p className="eq-combobox-hint" id={hintId}>
          {hint}
        </p>
      )}
      {present(error) && (
        <p className="eq-combobox-error" id={errorId}>
          {error}
        </p>
      )}
      <div
        ref={popoverRef}
        className="eq-combobox-popover"
        popover="manual"
        hidden={!open}
        // A press inside the list must not blur the input, or the list closes before the click lands.
        onMouseDown={(event) => event.preventDefault()}
      >
        <ul className="eq-combobox-list" id={listId} role="listbox" aria-labelledby={labelId}>
          {matches.map((option, index) => (
            <li
              key={option}
              id={optionId(index)}
              className="eq-combobox-option"
              role="option"
              aria-selected={index === activeIndex}
              data-current={option === text || undefined}
              onClick={() => pick(option)}
            >
              <span className="eq-combobox-option-label">{option}</span>
              <svg
                className="eq-combobox-check"
                viewBox="0 0 16 16"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <path d="M3.5 8.5l3 3 6-7" />
              </svg>
            </li>
          ))}
        </ul>
        {matches.length === 0 && <div className="eq-combobox-empty">{emptyText}</div>}
      </div>
      <div className="eq-combobox-status" role="status" aria-live="polite">
        {status}
      </div>
    </div>
  );
}