Pin input

"use client";

import { Fragment, useId, useRef, useState } from "react";
import type { ChangeEvent, ClipboardEvent, ComponentProps, FocusEvent, KeyboardEvent, ReactNode } from "react";
import "./pin-input.css";

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

const allowed = { numeric: /^[0-9]$/, alphanumeric: /^[a-z0-9]$/i };

export type PinInputProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
  /** Visible label for the whole code. */
  label: ReactNode;
  /** Number of boxes. */
  length?: number;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Called once when the last box is filled. */
  onComplete?: (value: string) => void;
  /** Which characters are accepted. Anything else is dropped from typing and paste. */
  type?: "numeric" | "alphanumeric";
  /** Shows dots instead of the characters. */
  mask?: boolean;
  /** Submits the code through a hidden input with this name. */
  name?: string;
  hint?: ReactNode;
  /** Error text. Marks every box invalid. */
  error?: ReactNode;
  disabled?: boolean;
  /** Puts a visual gap after every this many boxes, e.g. 3 for 123 456. */
  groupAfter?: number;
};

export function PinInput({
  label,
  length = 6,
  value,
  defaultValue = "",
  onValueChange,
  onComplete,
  type = "numeric",
  mask = false,
  name,
  hint,
  error,
  disabled = false,
  groupAfter,
  className,
  ...rest
}: PinInputProps) {
  const id = useId();
  const keep = (text: string) =>
    Array.from(text)
      .filter((c) => allowed[type].test(c))
      .join("");
  const [inner, setInner] = useState(() => keep(defaultValue).slice(0, length));
  const current = value === undefined ? inner : keep(value).slice(0, length);
  // Which boxes just received a character, so only they land. The flip restarts the animation.
  const [landed, setLanded] = useState<{ from: number; to: number; flip: boolean } | null>(null);
  const boxes = useRef<(HTMLInputElement | null)[]>([]);
  // Set while the part moves focus itself, before React has rendered the new value.
  const moving = useRef(false);

  const labelId = `${id}-label`;
  const hintId = present(hint) ? `${id}-hint` : undefined;
  const errorId = present(error) ? `${id}-error` : undefined;
  const described = [hintId, errorId].filter(Boolean).join(" ") || undefined;
  const noun = type === "numeric" ? "Digit" : "Character";

  const focus = (index: number) => {
    const box = boxes.current[Math.max(0, Math.min(index, length - 1))];
    moving.current = true;
    box?.focus();
    box?.select();
    moving.current = false;
  };

  const commit = (next: string) => {
    if (value === undefined) setInner(next);
    onValueChange?.(next);
    if (next.length === length && current.length < length) onComplete?.(next);
  };

  const fill = (index: number, text: string) => {
    const chars = keep(text);
    if (!chars) return;
    const at = Math.min(index, current.length);
    const added = chars.slice(0, length - at);
    commit((current.slice(0, at) + added + current.slice(at + added.length)).slice(0, length));
    setLanded((last) => ({ from: at, to: at + added.length, flip: !last?.flip }));
    focus(at + added.length);
  };

  const removeAt = (index: number) => {
    setLanded(null);
    commit(current.slice(0, index) + current.slice(index + 1));
  };

  const onChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {
    const raw = event.target.value;
    const had = current[index];
    if (raw === "") {
      if (had) removeAt(index);
      return;
    }
    // The caret can sit beside the existing character; keep only what was just typed.
    const typed = had && Array.from(raw).length === 2 ? (raw.startsWith(had) ? raw.slice(had.length) : raw.slice(0, raw.length - had.length)) : raw;
    fill(index, typed);
  };

  const onKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {
    switch (event.key) {
      case "Backspace":
        event.preventDefault();
        if (current[index]) removeAt(index);
        else if (index > 0) {
          removeAt(index - 1);
          focus(index - 1);
        }
        break;
      case "Delete":
        event.preventDefault();
        if (current[index]) removeAt(index);
        break;
      case "ArrowLeft":
        event.preventDefault();
        focus(index - 1);
        break;
      case "ArrowRight":
        event.preventDefault();
        focus(Math.min(index + 1, current.length));
        break;
      case "Home":
        event.preventDefault();
        focus(0);
        break;
      case "End":
        event.preventDefault();
        focus(current.length);
        break;
    }
  };

  // Boxes fill in order: focusing one past the first empty box moves to that empty box.
  const onFocus = (index: number) => (event: FocusEvent<HTMLInputElement>) => {
    if (!moving.current && index > current.length) focus(current.length);
    else event.currentTarget.select();
  };

  const onPaste = (index: number) => (event: ClipboardEvent<HTMLInputElement>) => {
    event.preventDefault();
    fill(index, event.clipboardData.getData("text"));
  };

  return (
    <div
      role="group"
      aria-labelledby={labelId}
      {...rest}
      className={["eq-pin-input", className].filter(Boolean).join(" ")}
    >
      <label className="eq-pin-input-label" id={labelId} htmlFor={`${id}-0`}>
        {label}
      </label>
      <div className="eq-pin-input-boxes">
        {Array.from({ length }, (_, index) => (
          <Fragment key={index}>
            {groupAfter != null && groupAfter > 0 && index > 0 && index % groupAfter === 0 && (
              <span className="eq-pin-input-gap" aria-hidden="true" />
            )}
            <input
              ref={(el) => {
                boxes.current[index] = el;
              }}
              id={`${id}-${index}`}
              className="eq-pin-input-box"
              type={mask ? "password" : "text"}
              inputMode={type === "numeric" ? "numeric" : "text"}
              autoComplete={index === 0 ? "one-time-code" : "off"}
              autoCapitalize="off"
              spellCheck={false}
              aria-label={`${noun} ${index + 1} of ${length}`}
              aria-describedby={described}
              aria-invalid={present(error) || undefined}
              disabled={disabled}
              // One tab stop: the first empty box, or the last box once the code is full.
              tabIndex={index === Math.min(current.length, length - 1) ? 0 : -1}
              value={current[index] ?? ""}
              data-filled={current[index] ? "" : undefined}
              data-landed={landed && index >= landed.from && index < landed.to ? (landed.flip ? "a" : "b") : undefined}
              onChange={onChange(index)}
              onKeyDown={onKeyDown(index)}
              onFocus={onFocus(index)}
              onPaste={onPaste(index)}
            />
          </Fragment>
        ))}
      </div>
      {name != null && <input type="hidden" name={name} value={current} disabled={disabled} />}
      {present(hint) && (
        <p className="eq-pin-input-hint" id={hintId}>
          {hint}
        </p>
      )}
      {present(error) && (
        <p className="eq-pin-input-error" id={errorId}>
          {error}
        </p>
      )}
    </div>
  );
}