Multi-select

"use client";

import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
import type { ComponentProps, KeyboardEvent, ReactNode } from "react";
import "./multi-select.css";

export type MultiSelectOption = { value: string; label: string; disabled?: boolean };

export type MultiSelectProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
  /** Visible label. Names the button, the search box and the list. */
  label: ReactNode;
  /** Help text under the control, linked with aria-describedby. */
  hint?: ReactNode;
  /** Error text. Marks the control invalid and is announced with it. */
  error?: ReactNode;
  /** The choices. A string is both value and label. */
  options: (MultiSelectOption | string)[];
  /** Controlled list of selected values. */
  value?: string[];
  /** Uncontrolled starting selection. */
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
  /** Submits each selected value under this name, like a native select multiple. */
  name?: string;
  /** At least one value must be chosen. Checked by native constraint validation. */
  required?: boolean;
  disabled?: boolean;
  /** Shown in the box while nothing is selected. */
  placeholder?: string;
  /** "chips" lists each choice with a remove button; "count" sums them up as "3 selected". */
  display?: "chips" | "count";
  /** Adds a search box at the top of the list. */
  searchable?: boolean;
  /** Adds a Select all row that toggles every option that matches the search. */
  selectAll?: boolean;
  /** Row shown when the search matches nothing. */
  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 supportsPopover(el: HTMLElement) {
  return typeof el.showPopover === "function";
}

const GAP = 4;
const MIN_WIDTH = 220;

export function MultiSelect({
  label,
  hint,
  error,
  options,
  value,
  defaultValue = [],
  onValueChange,
  name,
  required = false,
  disabled = false,
  placeholder = "Choose",
  display = "chips",
  searchable = true,
  selectAll = true,
  emptyText = "No matches",
  className,
  ...rest
}: MultiSelectProps) {
  const id = useId();
  const labelId = `${id}-label`;
  const valueId = `${id}-value`;
  const listId = `${id}-list`;
  const hintId = present(hint) ? `${id}-hint` : undefined;
  const errorId = present(error) ? `${id}-error` : undefined;
  const optionId = (index: number) => (index === -1 ? `${id}-all` : `${id}-option-${index}`);

  const rootRef = useRef<HTMLDivElement>(null);
  const controlRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const popoverRef = useRef<HTMLDivElement>(null);
  const searchRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLDivElement>(null);

  const [inner, setInner] = useState(defaultValue);
  const [open, setOpen] = useState(false);
  /** Read by key handlers, which can run again before a render has caught up with a fast typist. */
  const openRef = useRef(false);
  const setShown = (next: boolean) => {
    openRef.current = next;
    setOpen(next);
  };
  const [query, setQuery] = useState("");
  /** Index into the visible rows; -1 is the Select all row, null is nothing. */
  const [active, setActive] = useState<number | null>(null);
  const [status, setStatus] = useState("");

  const all: MultiSelectOption[] = options.map((o) => (typeof o === "string" ? { value: o, label: o } : o));
  const selected = value ?? inner;
  const needle = query.trim().toLowerCase();
  const matches = needle ? all.filter((o) => o.label.toLowerCase().includes(needle)) : all;
  const pickable = matches.filter((o) => !o.disabled);
  const showAll = selectAll && pickable.length > 1;
  const allOn = pickable.length > 0 && pickable.every((o) => selected.includes(o.value));
  const first = showAll ? -1 : 0;
  const activeIndex = active !== null && active < matches.length && (active >= 0 || showAll) ? active : null;
  const chosen = all.filter((o) => selected.includes(o.value));
  const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;

  function commit(next: string[]) {
    // Keep the order of the options, whatever order they were picked in.
    const ordered = all.map((o) => o.value).filter((v) => next.includes(v));
    if (value === undefined) setInner(ordered);
    onValueChange?.(ordered);
    setStatus(`${ordered.length} selected`);
  }

  function toggle(option: MultiSelectOption) {
    if (option.disabled || disabled) return;
    commit(selected.includes(option.value) ? selected.filter((v) => v !== option.value) : [...selected, option.value]);
  }

  function toggleAll() {
    const values = pickable.map((o) => o.value);
    commit(allOn ? selected.filter((v) => !values.includes(v)) : [...selected, ...values]);
  }

  function activate(index: number | null) {
    if (index === -1) toggleAll();
    else if (index !== null && matches[index]) toggle(matches[index]);
  }

  function show(at: "first" | "last" = "first", seed = "") {
    if (disabled) return;
    setQuery(seed);
    // Starts on the first option, not Select all, so Enter never picks everything by surprise.
    setActive(at === "last" ? Math.max(all.length - 1, first) : all.length > 0 ? 0 : first);
    setShown(true);
  }

  function hide(refocus: boolean) {
    setShown(false);
    setActive(null);
    setStatus("");
    if (refocus) triggerRef.current?.focus();
  }

  // The list floats in the top layer, pinned under the control while the page scrolls.
  useLayoutEffect(() => {
    const popover = popoverRef.current;
    const control = controlRef.current;
    if (!popover || !control) return;
    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();
      const width = Math.max(rect.width, MIN_WIDTH);
      const left = Math.max(GAP, Math.min(rect.left, window.innerWidth - width - GAP));
      popover.style.left = `${left}px`;
      popover.style.width = `${width}px`;
      const height = popover.offsetHeight;
      const below = rect.bottom + GAP;
      const above = below + height > window.innerHeight && rect.top - GAP - height >= 0;
      popover.style.top = `${above ? rect.top - GAP - height : below}px`;
      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, chosen.length]);

  // Opening moves focus into the list surface; a press anywhere outside the part closes it.
  useEffect(() => {
    if (!open) return;
    (searchRef.current ?? listRef.current)?.focus();
    function outside(event: PointerEvent) {
      if (event.target instanceof Node && !rootRef.current?.contains(event.target)) hide(false);
    }
    document.addEventListener("pointerdown", outside);
    return () => document.removeEventListener("pointerdown", outside);
  }, [open]);

  useEffect(() => {
    if (open && activeIndex !== null) document.getElementById(optionId(activeIndex))?.scrollIntoView({ block: "nearest" });
  });

  // A form reset puts the native select back to its default; follow it.
  useEffect(() => {
    const form = rootRef.current?.closest("form");
    if (!form) return;
    function reset() {
      if (value === undefined) setInner(defaultValue);
      onValueChange?.(defaultValue);
    }
    form.addEventListener("reset", reset);
    return () => form.removeEventListener("reset", reset);
  });

  function move(delta: number) {
    const count = matches.length;
    if (count === 0) return setActive(showAll ? -1 : null);
    const start = activeIndex ?? (delta > 0 ? first - 1 : count);
    let next = start + delta;
    if (next > count - 1) next = first;
    if (next < first) next = count - 1;
    setActive(next);
    return next;
  }

  function handleListKey(event: KeyboardEvent<HTMLElement>) {
    if (event.nativeEvent.isComposing) return;
    const typing = event.currentTarget === searchRef.current && query !== "";
    switch (event.key) {
      case "ArrowDown":
      case "ArrowUp": {
        event.preventDefault();
        const next = move(event.key === "ArrowDown" ? 1 : -1);
        // Shift with an arrow selects as it goes, as in a native multiple list.
        if (event.shiftKey && next !== undefined && next >= 0 && matches[next] && !selected.includes(matches[next].value)) {
          toggle(matches[next]);
        }
        return;
      }
      case "Home":
      case "End":
        if (typing) return;
        event.preventDefault();
        setActive(event.key === "Home" ? first : matches.length - 1);
        return;
      case "Enter":
        // Always taken, so Enter never submits the surrounding form from inside the list.
        event.preventDefault();
        if (!event.repeat) activate(activeIndex);
        return;
      case " ":
        if (typing) return;
        event.preventDefault();
        activate(activeIndex);
        return;
      case "Escape":
        event.preventDefault();
        event.stopPropagation();
        hide(true);
        return;
      case "a":
        if ((event.metaKey || event.ctrlKey) && !typing) {
          event.preventDefault();
          if (pickable.length > 0) toggleAll();
        }
        return;
    }
  }

  function handleTriggerKey(event: KeyboardEvent<HTMLButtonElement>) {
    if (disabled) return;
    if (openRef.current && (event.key === "Enter" || event.key.startsWith("Arrow") || event.key === "Escape")) {
      // Keys that land before focus has moved into the list still act on it.
      handleListKey(event);
    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
      event.preventDefault();
      show(event.key === "ArrowUp" ? "last" : "first");
    } else if ((event.key === "Backspace" || event.key === "Delete") && chosen.length > 0) {
      event.preventDefault();
      const last = chosen[chosen.length - 1];
      commit(selected.filter((v) => v !== last.value));
      setStatus(`${last.label} removed. ${selected.length - 1} selected`);
    } else if (searchable && event.key.length === 1 && event.key !== " " && !event.metaKey && !event.ctrlKey && !event.altKey) {
      // Typing on the button starts a search with that letter.
      event.preventDefault();
      event.stopPropagation();
      if (openRef.current) {
        setQuery((q) => q + event.key);
        setActive(0);
      } else show("first", event.key);
    }
  }

  const summary =
    chosen.length === 0 ? "" : chosen.length === 1 ? chosen[0].label : `${chosen.length} selected`;
  const spoken = chosen.length === 0 ? placeholder : `${chosen.length} selected: ${chosen.map((o) => o.label).join(", ")}`;
  const announce = status || (open && needle ? (matches.length === 0 ? emptyText : `${matches.length} ${matches.length === 1 ? "option" : "options"}`) : "");

  return (
    <div
      {...rest}
      ref={rootRef}
      className={["eq-multi-select", className].filter(Boolean).join(" ")}
      data-display={display}
      onBlur={(event) => {
        // Focus leaving the part, list included, closes it.
        if (open && !(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))) hide(false);
      }}
    >
      <label className="eq-multi-select-label" id={labelId} htmlFor={`${id}-trigger`}>
        {label}
      </label>
      <div
        ref={controlRef}
        className="eq-multi-select-control"
        data-disabled={disabled || undefined}
        data-invalid={present(error) || undefined}
        data-open={open || undefined}
        onClick={(event) => {
          // The bare box opens the list too; the chips' own buttons do their own thing.
          if (event.target === event.currentTarget && !disabled) {
            triggerRef.current?.focus();
            if (!open) show();
          }
        }}
      >
        {display === "chips" && chosen.length > 0 && (
          <ul className="eq-multi-select-chips">
            {chosen.map((option) => (
              <li key={option.value} className="eq-multi-select-chip">
                <span className="eq-multi-select-chip-label">{option.label}</span>
                <button
                  type="button"
                  className="eq-multi-select-chip-remove"
                  // One tab stop for the part: Backspace on the button removes from the keyboard.
                  tabIndex={-1}
                  aria-label={`Remove ${option.label}`}
                  disabled={disabled || option.disabled}
                  onClick={() => {
                    toggle(option);
                    triggerRef.current?.focus();
                  }}
                >
                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
                    <path d="m4.5 4.5 7 7m0-7-7 7" />
                  </svg>
                </button>
              </li>
            ))}
          </ul>
        )}
        <button
          ref={triggerRef}
          id={`${id}-trigger`}
          type="button"
          className="eq-multi-select-trigger"
          aria-haspopup="listbox"
          aria-expanded={open}
          aria-controls={listId}
          aria-labelledby={`${labelId} ${valueId}`}
          aria-describedby={describedBy}
          aria-invalid={present(error) || undefined}
          disabled={disabled}
          onClick={() => (open ? hide(true) : show())}
          onKeyDown={handleTriggerKey}
        >
          <span className="eq-multi-select-value" data-empty={chosen.length === 0 || undefined}>
            {display === "count" || chosen.length === 0 ? summary || placeholder : null}
          </span>
          <span className="eq-multi-select-sr" id={valueId}>
            {spoken}
          </span>
          <svg className="eq-multi-select-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="m4.5 6.25 3.5 3.5 3.5-3.5" />
          </svg>
        </button>
      </div>
      {present(hint) && (
        <p className="eq-multi-select-hint" id={hintId}>
          {hint}
        </p>
      )}
      {present(error) && (
        <p className="eq-multi-select-error" id={errorId}>
          {error}
        </p>
      )}
      {/* The real form control: submits every value and carries required. Focus is handed to the button. */}
      <select
        className="eq-multi-select-native"
        multiple
        name={name}
        required={required}
        disabled={disabled}
        tabIndex={-1}
        aria-hidden="true"
        value={selected}
        onChange={() => {}}
        onFocus={() => triggerRef.current?.focus()}
      >
        {all.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <div
        ref={popoverRef}
        className="eq-multi-select-popover"
        popover="manual"
        hidden={!open}
        // A press on a row must not move focus off the search box.
        onMouseDown={(event) => {
          if (!(event.target instanceof HTMLInputElement) && !(event.target instanceof HTMLButtonElement)) event.preventDefault();
        }}
      >
        {searchable && (
          <div className="eq-multi-select-search">
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
              <circle cx="7" cy="7" r="4.5" />
              <path d="m10.5 10.5 3 3" />
            </svg>
            <input
              ref={searchRef}
              className="eq-multi-select-search-input"
              type="text"
              role="combobox"
              aria-autocomplete="list"
              aria-expanded={open}
              aria-controls={listId}
              aria-labelledby={labelId}
              aria-activedescendant={activeIndex !== null ? optionId(activeIndex) : undefined}
              autoComplete="off"
              spellCheck={false}
              placeholder="Search"
              value={query}
              onChange={(event) => {
                setQuery(event.target.value);
                setActive(0);
                setStatus("");
              }}
              onKeyDown={handleListKey}
            />
          </div>
        )}
        <div
          ref={listRef}
          id={listId}
          className="eq-multi-select-list"
          role="listbox"
          aria-multiselectable="true"
          aria-labelledby={labelId}
          tabIndex={searchable ? undefined : -1}
          aria-activedescendant={!searchable && activeIndex !== null ? optionId(activeIndex) : undefined}
          onKeyDown={searchable ? undefined : handleListKey}
        >
          {showAll && (
            <div
              id={optionId(-1)}
              className="eq-multi-select-option eq-multi-select-all"
              role="option"
              aria-selected={allOn}
              data-active={activeIndex === -1 || undefined}
              onClick={() => {
                setActive(-1);
                toggleAll();
              }}
            >
              <span className="eq-multi-select-box" aria-hidden="true">
                <svg className="eq-multi-select-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="m4.5 8.25 2.25 2.25 4.75-5" pathLength="1" />
                </svg>
              </span>
              <span className="eq-multi-select-option-label">{needle ? `Select all ${pickable.length} matches` : "Select all"}</span>
            </div>
          )}
          {matches.map((option, index) => (
            <div
              key={option.value}
              id={optionId(index)}
              className="eq-multi-select-option"
              role="option"
              aria-selected={selected.includes(option.value)}
              aria-disabled={option.disabled || undefined}
              data-active={activeIndex === index || undefined}
              onClick={() => {
                setActive(index);
                toggle(option);
              }}
            >
              <span className="eq-multi-select-box" aria-hidden="true">
                <svg className="eq-multi-select-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="m4.5 8.25 2.25 2.25 4.75-5" pathLength="1" />
                </svg>
              </span>
              <span className="eq-multi-select-option-label">{option.label}</span>
            </div>
          ))}
        </div>
        {matches.length === 0 && <div className="eq-multi-select-empty">{emptyText}</div>}
        <div className="eq-multi-select-footer">
          <span className="eq-multi-select-count">{selected.length} selected</span>
          <button
            type="button"
            className="eq-multi-select-clear"
            disabled={selected.length === 0}
            onClick={() => {
              commit([]);
              (searchRef.current ?? listRef.current)?.focus();
            }}
          >
            Clear
          </button>
        </div>
      </div>
      <div className="eq-multi-select-sr" role="status" aria-live="polite">
        {announce}
      </div>
    </div>
  );
}