Search Input

import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
import type { ChangeEvent, KeyboardEvent } from 'react';
import { SPRING, Spring, createLoop } from '../shared/spring';
import { resolveAccent, type Accent } from '../shared/accent';
import { RollingNumber } from '../shared/RollingNumber';
import { XIcon, useControllable, useLatest, useReducedMotion } from '../forms-kit/kit';
import '../shared/ember.css';
import './search-input.css';

export interface SearchInputProps {
  placeholder?: string;
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  loading?: boolean;
  /** A single key that focuses the field from anywhere on the page. */
  shortcut?: string;
  /** Number of results, shown under the field when defined. */
  count?: number;
  onClear?: () => void;
  /** Accessible name; the field has no visible label. */
  'aria-label'?: string;
  accent?: Accent;
  className?: string;
}

function isTypingTarget(t: EventTarget | null): boolean {
  if (!(t instanceof HTMLElement)) return false;
  if (t.isContentEditable) return true;
  const tag = t.tagName;
  if (tag === 'TEXTAREA' || tag === 'SELECT') return true;
  if (tag !== 'INPUT') return false;
  const type = (t as HTMLInputElement).type;
  return !['button', 'checkbox', 'radio', 'range', 'submit', 'reset', 'color', 'file', 'image'].includes(type);
}

function SearchIcon() {
  return (
    <svg className="em-icon" viewBox="0 0 16 16" aria-hidden="true">
      <circle cx="7.25" cy="7.25" r="4.25" />
      <path d="M10.5 10.5 13 13" />
    </svg>
  );
}

function Ring() {
  return (
    <svg className="em-search__ring" viewBox="0 0 14 14" aria-hidden="true">
      <circle cx="7" cy="7" r="5.75" className="em-search__ring-track" />
      <circle cx="7" cy="7" r="5.75" className="em-search__ring-arc" pathLength={100} />
    </svg>
  );
}

export function SearchInput({
  placeholder = 'Search',
  value,
  defaultValue = '',
  onChange,
  loading = false,
  shortcut = '/',
  count,
  onClear,
  'aria-label': ariaLabel,
  accent,
  className,
}: SearchInputProps) {
  const id = useId();
  const helpId = `${id}-help`;
  const [text, setText] = useControllable(value, defaultValue, onChange);
  const reduced = useReducedMotion();
  const [focused, setFocused] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const clearRef = useRef<HTMLButtonElement>(null);
  const filled = text.length > 0;

  /* ---------------------------------------------------------------- shortcut */

  const key = shortcut.length === 1 ? shortcut : '';
  useEffect(() => {
    if (!key) return;
    const onKey = (e: globalThis.KeyboardEvent) => {
      if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey || e.isComposing) return;
      if (e.key.toLowerCase() !== key.toLowerCase()) return;
      if (isTypingTarget(e.target) || document.activeElement === inputRef.current) return;
      e.preventDefault();
      inputRef.current?.focus();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [key]);

  /* ---------------------------------------------------------------- clear button scales in */

  const sim = useRef({ s: new Spring(filled ? 1 : 0, SPRING.snappy), loop: null as ReturnType<typeof createLoop> | null });
  const paint = useCallback(() => {
    const el = clearRef.current;
    if (!el) return;
    const v = sim.current.s.value;
    el.style.transform = `scale(${(0.5 + 0.5 * v).toFixed(4)})`;
    el.style.opacity = Math.max(0, Math.min(1, v)).toFixed(3);
  }, []);
  // Created in a layout effect so mount-time layout effects below can already wake it.
  useLayoutEffect(() => {
    const s = sim.current;
    s.loop = createLoop((dt) => {
      const moving = s.s.step(dt);
      paint();
      return moving;
    });
    return () => s.loop?.stop();
  }, [paint]);
  const reducedRef = useLatest(reduced);
  useLayoutEffect(() => {
    const s = sim.current;
    const t = filled ? 1 : 0;
    if (reducedRef.current) {
      s.s.set(t);
      paint();
      return;
    }
    s.s.target = t;
    paint();
    s.loop?.wake();
  }, [filled, paint, reducedRef]);

  /* ---------------------------------------------------------------- input */

  const clear = () => {
    setText('');
    onClear?.();
  };

  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key !== 'Escape') return;
    e.preventDefault();
    if (filled) clear();
    else inputRef.current?.blur();
  };

  const onInput = (e: ChangeEvent<HTMLInputElement>) => setText(e.target.value);

  const showCap = !!shortcut && !filled && !focused;
  const iconLit = focused || filled;

  return (
    <div
      className={`ember em-search${iconLit ? ' is-lit' : ''}${className ? ` ${className}` : ''}`}
      data-accent={resolveAccent(accent)}
    >
      <div className="em-field em-search__field" onMouseDown={(e) => {
        if (e.target !== inputRef.current && !clearRef.current?.contains(e.target as Node)) {
          e.preventDefault();
          inputRef.current?.focus();
        }
      }}>
        <span className="em-search__lead">{loading ? <Ring /> : <SearchIcon />}</span>
        <input
          ref={inputRef}
          id={id}
          className="em-search__input"
          type="search"
          value={text}
          placeholder={placeholder}
          autoComplete="off"
          spellCheck={false}
          aria-label={ariaLabel ?? placeholder}
          aria-keyshortcuts={key || undefined}
          aria-describedby={count !== undefined ? helpId : undefined}
          aria-busy={loading || undefined}
          onChange={onInput}
          onKeyDown={onKeyDown}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
        />
        <span className="em-search__end">
          {shortcut ? (
            <kbd className="em-search__kbd" data-hidden={!showCap || undefined} aria-hidden="true">
              {shortcut}
            </kbd>
          ) : null}
          <button
            ref={clearRef}
            type="button"
            className="em-search__clear"
            aria-label="Clear search"
            tabIndex={filled ? 0 : -1}
            aria-hidden={filled ? undefined : true}
            data-hidden={!filled || undefined}
            onMouseDown={(e) => e.preventDefault()}
            onClick={() => {
              clear();
              inputRef.current?.focus();
            }}
          >
            <XIcon />
          </button>
        </span>
      </div>
      <div className="em-help em-search__help" id={helpId} aria-live="polite" aria-atomic="true">
        {count === undefined ? null : count === 0 ? (
          'No results'
        ) : (
          <>
            <RollingNumber value={String(count)} reduced={reduced} />
            {count === 1 ? ' result' : ' results'}
          </>
        )}
      </div>
    </div>
  );
}

export default SearchInput;