Listbox

"use client";

import {
  createContext,
  useContext,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type KeyboardEvent,
  type MouseEvent,
  type ReactNode,
} from "react";
import "./listbox.css";

type ListboxBase = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "children"> & {
  /** Visible label above the list. */
  label: ReactNode;
  /** Submits one hidden input per selected value under this name. */
  name?: string;
  disabled?: boolean;
  /** ListboxOption and ListboxGroup elements. */
  children: ReactNode;
};

type SingleProps = ListboxBase & {
  multiple?: false;
  value?: string | null;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
};

type MultipleProps = ListboxBase & {
  multiple: true;
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
};

export type ListboxProps = SingleProps | MultipleProps;

type ListboxContext = {
  multiple: boolean;
  selected: string[];
  activeId: string | null;
  pick: (id: string) => void;
};

const Context = createContext<ListboxContext>({
  multiple: false,
  selected: [],
  activeId: null,
  pick: () => {},
});

function toList(value: string | string[] | null | undefined) {
  if (value == null) return [];
  return Array.isArray(value) ? value : [value];
}

export function Listbox(props: ListboxProps) {
  const {
    label,
    multiple = false,
    value,
    defaultValue,
    onValueChange,
    name,
    disabled = false,
    className,
    children,
    ...rest
  } = props;
  const labelId = useId();
  const listRef = useRef<HTMLDivElement>(null);
  const typed = useRef({ text: "", at: 0 });
  const [internal, setInternal] = useState<string[]>(() => toList(defaultValue));
  const [activeId, setActiveId] = useState<string | null>(null);
  const selected = value !== undefined ? toList(value) : internal;

  function commit(next: string[]) {
    if (value === undefined) setInternal(next);
    if (props.multiple) props.onValueChange?.(next);
    else if (next[0] !== undefined) props.onValueChange?.(next[0]);
  }

  function options() {
    return Array.from(listRef.current?.querySelectorAll<HTMLElement>('[role="option"]') ?? []);
  }

  function usable(option: HTMLElement) {
    return option.getAttribute("aria-disabled") !== "true";
  }

  function choose(option: HTMLElement, mode: "set" | "toggle" | "add") {
    const optionValue = option.dataset.value;
    if (optionValue === undefined || !usable(option)) return;
    if (!multiple) {
      if (selected[0] !== optionValue) commit([optionValue]);
      return;
    }
    const has = selected.includes(optionValue);
    if (mode === "add" && has) return;
    commit(has && mode === "toggle" ? selected.filter((v) => v !== optionValue) : [...selected, optionValue]);
  }

  function moveTo(option: HTMLElement | undefined) {
    if (!option) return;
    setActiveId(option.id);
    option.scrollIntoView({ block: "nearest" });
  }

  function pick(id: string) {
    if (disabled) return;
    setActiveId(id);
    const option = options().find((o) => o.id === id);
    if (option) choose(option, "toggle");
  }

  function handleFocus() {
    if (activeId && options().some((o) => o.id === activeId)) return;
    const all = options();
    setActiveId((all.find((o) => o.dataset.value === selected[0]) ?? all[0])?.id ?? null);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    if (disabled) return;
    const all = options();
    if (all.length === 0) return;
    const index = all.findIndex((o) => o.id === activeId);
    const active = all[index];
    const mod = event.ctrlKey || event.metaKey;

    switch (event.key) {
      case "ArrowDown":
      case "ArrowUp": {
        event.preventDefault();
        const next =
          index < 0
            ? all[0]
            : all[Math.min(all.length - 1, Math.max(0, index + (event.key === "ArrowDown" ? 1 : -1)))];
        moveTo(next);
        if (multiple && event.shiftKey && next !== active) {
          const span = [active, next].filter((o): o is HTMLElement => !!o && usable(o)).map((o) => o.dataset.value ?? "");
          const added = span.filter((v) => !selected.includes(v));
          if (added.length) commit([...selected, ...added]);
        }
        return;
      }
      case "Home":
      case "End": {
        event.preventDefault();
        moveTo(event.key === "Home" ? all[0] : all[all.length - 1]);
        return;
      }
      case " ":
      case "Enter": {
        if (!active) return;
        if (event.key === "Enter" && multiple) return;
        event.preventDefault();
        choose(active, "toggle");
        return;
      }
      case "a":
      case "A": {
        if (!multiple || !mod) break;
        event.preventDefault();
        const values = all.filter(usable).map((o) => o.dataset.value ?? "");
        const everything = values.every((v) => selected.includes(v));
        commit(everything ? selected.filter((v) => !values.includes(v)) : [...new Set([...selected, ...values])]);
        return;
      }
    }

    if (event.key.length !== 1 || mod || event.altKey) return;
    if (event.key === " ") return;
    const memory = typed.current;
    memory.text = event.timeStamp - memory.at > 600 ? event.key.toLowerCase() : memory.text + event.key.toLowerCase();
    memory.at = event.timeStamp;
    const repeated = memory.text.length > 1 && [...memory.text].every((c) => c === memory.text[0]);
    const search = repeated ? memory.text[0] : memory.text;
    // A fresh search starts after the active option, so pressing one letter cycles through matches.
    const start = search.length === 1 ? index + 1 : Math.max(index, 0);
    for (let step = 0; step < all.length; step++) {
      const option = all[(start + step) % all.length];
      const text = option.querySelector(".eq-listbox-option-label")?.textContent ?? "";
      if (text.trim().toLowerCase().startsWith(search)) {
        event.preventDefault();
        moveTo(option);
        return;
      }
    }
  }

  return (
    <div
      {...rest}
      className={["eq-listbox", className].filter(Boolean).join(" ")}
      data-disabled={disabled || undefined}
    >
      <span id={labelId} className="eq-listbox-label">
        {label}
      </span>
      <div
        ref={listRef}
        role="listbox"
        className="eq-listbox-list"
        tabIndex={disabled ? -1 : 0}
        aria-labelledby={labelId}
        aria-multiselectable={multiple || undefined}
        aria-disabled={disabled || undefined}
        aria-activedescendant={activeId ?? undefined}
        onFocus={handleFocus}
        onKeyDown={handleKeyDown}
      >
        <Context.Provider value={{ multiple, selected, activeId, pick }}>{children}</Context.Provider>
      </div>
      {name &&
        selected.map((v) => <input key={v} type="hidden" name={name} value={v} disabled={disabled} />)}
    </div>
  );
}

export type ListboxOptionProps = Omit<ComponentProps<"div">, "children"> & {
  value: string;
  disabled?: boolean;
  /** A second, quieter line under the label. */
  description?: ReactNode;
  children: ReactNode;
};

export function ListboxOption({
  value,
  disabled,
  description,
  className,
  children,
  onClick,
  ...rest
}: ListboxOptionProps) {
  const { multiple, selected, activeId, pick } = useContext(Context);
  const id = useId();
  const isSelected = selected.includes(value);

  return (
    <div
      {...rest}
      id={id}
      role="option"
      className={["eq-listbox-option", className].filter(Boolean).join(" ")}
      data-value={value}
      data-active={activeId === id || undefined}
      aria-selected={isSelected}
      aria-disabled={disabled || undefined}
      aria-labelledby={`${id}label`}
      aria-describedby={description != null ? `${id}description` : undefined}
      onClick={(event: MouseEvent<HTMLDivElement>) => {
        onClick?.(event);
        if (!event.defaultPrevented) pick(id);
      }}
    >
      {multiple && (
        <span className="eq-listbox-box" aria-hidden="true">
          <svg className="eq-listbox-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 8.25l2.75 2.75L12 5.5" pathLength={1} />
          </svg>
        </span>
      )}
      <span className="eq-listbox-text">
        <span id={`${id}label`} className="eq-listbox-option-label">
          {children}
        </span>
        {description != null && (
          <span id={`${id}description`} className="eq-listbox-description">
            {description}
          </span>
        )}
      </span>
      {!multiple && (
        <svg className="eq-listbox-tick" 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" pathLength={1} />
        </svg>
      )}
    </div>
  );
}

export type ListboxGroupProps = Omit<ComponentProps<"div">, "children"> & {
  label: ReactNode;
  children: ReactNode;
};

export function ListboxGroup({ label, className, children, ...rest }: ListboxGroupProps) {
  const id = useId();
  return (
    <div
      {...rest}
      role="group"
      aria-labelledby={id}
      className={["eq-listbox-group", className].filter(Boolean).join(" ")}
    >
      <div id={id} className="eq-listbox-group-label">
        {label}
      </div>
      {children}
    </div>
  );
}