Number field

"use client";

import { useId, useState } from "react";
import type { ChangeEvent, ComponentProps, FocusEvent, KeyboardEvent, MouseEvent, ReactNode } from "react";
import "./number-field.css";

export type NumberFieldProps = Omit<
  ComponentProps<"input">,
  "type" | "value" | "defaultValue" | "min" | "max" | "step"
> & {
  /** 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;
  /** Controlled value. `null` is an empty field. */
  value?: number | null;
  /** Uncontrolled starting value. */
  defaultValue?: number | null;
  /** Called with the new value after a step or when typed text is committed. */
  onValueChange?: (value: number | null) => void;
  min?: number;
  max?: number;
  /** Amount one press of an arrow or a button changes the value by. */
  step?: number;
};

/** 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 decimals(n: number) {
  const text = String(n);
  const dot = text.indexOf(".");
  return dot === -1 ? 0 : text.length - dot - 1;
}

function parse(text: string): number | null | undefined {
  const trimmed = text.trim().replace(/−/g, "-");
  if (trimmed === "") return null;
  const n = Number(trimmed);
  return Number.isFinite(n) ? n : undefined;
}

export function NumberField({
  label,
  hint,
  error,
  value,
  defaultValue = null,
  onValueChange,
  min,
  max,
  step = 1,
  className,
  style,
  id,
  disabled,
  readOnly,
  onChange,
  onKeyDown,
  onBlur,
  "aria-describedby": describedBy,
  "aria-invalid": ariaInvalid,
  ...rest
}: NumberFieldProps) {
  const autoId = useId();
  const inputId = id ?? autoId;
  const hintId = `${autoId}-hint`;
  const errorId = `${autoId}-error`;
  const [inner, setInner] = useState<number | null>(defaultValue);
  /** Text being typed; null when the field shows the committed value. */
  const [draft, setDraft] = useState<string | null>(null);
  const current = value !== undefined ? value : inner;
  const precision = Math.max(decimals(step), min !== undefined ? decimals(min) : 0);
  const locked = disabled || readOnly;

  function clamp(n: number) {
    let next = n;
    if (min !== undefined) next = Math.max(min, next);
    if (max !== undefined) next = Math.min(max, next);
    return Number(next.toFixed(precision));
  }

  function commit(next: number | null) {
    setDraft(null);
    if (next === current) return;
    if (value === undefined) setInner(next);
    onValueChange?.(next);
  }

  /** The value stepping starts from: typed text if it parses, else the committed value. */
  function base() {
    const typed = draft === null ? undefined : parse(draft);
    return typed === undefined ? current : typed;
  }

  function stepBy(count: number) {
    const from = base();
    if (from === null) {
      commit(clamp(count > 0 ? (min ?? 0) : (max ?? 0)));
      return;
    }
    commit(clamp(from + count * step));
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    onChange?.(event);
    setDraft(event.currentTarget.value);
  }

  function handleBlur(event: FocusEvent<HTMLInputElement>) {
    onBlur?.(event);
    if (draft === null) return;
    const typed = parse(draft);
    // Text that is not a number is dropped and the last good value comes back.
    commit(typed === undefined ? current : typed === null ? null : clamp(typed));
  }

  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented || locked) return;
    const big = event.shiftKey ? 10 : 1;
    switch (event.key) {
      case "ArrowUp":
        stepBy(big);
        break;
      case "ArrowDown":
        stepBy(-big);
        break;
      case "PageUp":
        stepBy(10);
        break;
      case "PageDown":
        stepBy(-10);
        break;
      case "Home":
        if (min === undefined) return;
        commit(min);
        break;
      case "End":
        if (max === undefined) return;
        commit(max);
        break;
      case "Enter": {
        if (draft === null) return;
        const typed = parse(draft);
        commit(typed === undefined ? current : typed === null ? null : clamp(typed));
        // Let Enter go on to submit a surrounding form.
        return;
      }
      default:
        return;
    }
    event.preventDefault();
  }

  function handleButton(direction: 1 | -1) {
    return (event: MouseEvent<HTMLButtonElement>) => stepBy(direction * (event.shiftKey ? 10 : 1));
  }

  /** Keeps focus where it is, so a button that disables itself at a bound never strands it. */
  function keepFocus(event: MouseEvent<HTMLButtonElement>) {
    event.preventDefault();
  }

  const text = draft ?? (current === null ? "" : String(current));
  const atMin = current !== null && min !== undefined && current <= min;
  const atMax = current !== null && max !== undefined && current >= max;

  return (
    <div className={["eq-number-field", className].filter(Boolean).join(" ")} style={style}>
      <label className="eq-number-field-label" htmlFor={inputId}>
        {label}
      </label>
      <div className="eq-number-field-control" data-disabled={disabled || undefined}>
        <button
          type="button"
          className="eq-number-field-button"
          tabIndex={-1}
          aria-label="Decrease"
          aria-controls={inputId}
          disabled={locked || atMin}
          onMouseDown={keepFocus}
          onClick={handleButton(-1)}
        >
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
            <path d="M3.5 8h9" />
          </svg>
        </button>
        <input
          inputMode={precision > 0 || (min !== undefined && min < 0) ? "decimal" : "numeric"}
          autoComplete="off"
          {...rest}
          id={inputId}
          className="eq-number-field-input"
          type="text"
          role="spinbutton"
          aria-valuenow={current ?? undefined}
          aria-valuemin={min}
          aria-valuemax={max}
          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-number-field-button"
          tabIndex={-1}
          aria-label="Increase"
          aria-controls={inputId}
          disabled={locked || atMax}
          onMouseDown={keepFocus}
          onClick={handleButton(1)}
        >
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
            <path d="M3.5 8h9M8 3.5v9" />
          </svg>
        </button>
      </div>
      {present(hint) && (
        <p className="eq-number-field-hint" id={hintId}>
          {hint}
        </p>
      )}
      {present(error) && (
        <p className="eq-number-field-error" id={errorId}>
          {error}
        </p>
      )}
    </div>
  );
}