Toast

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import {4  createContext,5  useCallback,6  useContext,7  useEffect,8  useRef,9  useState,10} from "react";11 12/**13 * Stacked notifications that collapse into a deck and fan out on hover.14 *15 * Two things most toast implementations get wrong:16 *17 * THE LIVE REGION IS PERMANENT. `aria-live` only announces changes to a region18 * that already exists — mounting a region and its content at the same moment19 * usually announces nothing, because there was no prior state to diff against.20 * The container here is always mounted, empty, and only its children change.21 *22 * THE TIMER PAUSES ON HOVER AND ON FOCUS. A toast that dismisses itself while23 * you are reading it, or while your keyboard focus is inside it reaching for24 * its action, is worse than no toast. Elapsed time is tracked explicitly so25 * resuming does not restart the full duration.26 *27 * `role="status"` rather than `role="alert"`: alert is assertive and28 * interrupts whatever the screen reader is saying, which is right for an29 * error and rude for "Copied".30 */31 32export interface ToastItem {33  id: number;34  message: string;35  tone: "info" | "success" | "error";36}37 38let nextId = 0;39 40export type PushToast = (message: string, tone?: ToastItem["tone"]) => void;41 42const ToastContext = createContext<PushToast | null>(null);43 44/**45 * Anything inside <Toast> can raise one.46 *47 * Context rather than a render prop. A render prop reads cleaner in a demo,48 * but it hands the push function down during render, and anything below has49 * to thread it through by hand. A hook keeps the call site next to the event50 * that triggers it, which is the only place a toast should ever be raised.51 */52export function useToast(): PushToast {53  const push = useContext(ToastContext);54  if (!push) {55    throw new Error("useToast must be called inside a <Toast> boundary.");56  }57  return push;58}59 60export interface ToastProps {61  /** Milliseconds before auto-dismiss. */62  duration?: number;63  /** How many stay visible; older ones collapse behind the deck. */64  max?: number;65  accent?: string;66  still?: boolean;67  /** Anything inside can raise a toast with useToast(). */68  children?: React.ReactNode;69  className?: string;70}71 72export function Toast({73  duration = 4000,74  max = 3,75  accent = "#c3f53c",76  still = false,77  children,78  className = "",79}: ToastProps) {80  const [items, setItems] = useState<ToastItem[]>([]);81  const [paused, setPaused] = useState(false);82  const timers = useRef(83    new Map<number, { started: number; elapsed: number; handle: number }>(),84  );85 86  const dismiss = useCallback((id: number) => {87    const timer = timers.current.get(id);88    if (timer) window.clearTimeout(timer.handle);89    timers.current.delete(id);90    setItems((current) => current.filter((t) => t.id !== id));91  }, []);92 93  const schedule = useCallback(94    (id: number, remaining: number) => {95      const handle = window.setTimeout(() => dismiss(id), remaining);96      timers.current.set(id, {97        started: performance.now(),98        elapsed: timers.current.get(id)?.elapsed ?? 0,99        handle,100      });101    },102    [dismiss],103  );104 105  const push = useCallback(106    (message: string, tone: ToastItem["tone"] = "info") => {107      nextId += 1;108      const id = nextId;109      setItems((current) =>110        [...current, { id, message, tone }].slice(-max - 2),111      );112      schedule(id, duration);113    },114    [duration, max, schedule],115  );116 117  // Pause every timer while the deck is hovered or holds focus, banking the118  // time already served so resuming does not restart the full duration.119  useEffect(() => {120    if (!paused) return;121    // Captured once: the cleanup must operate on the same Map the pause122    // banked its elapsed times into.123    const map = timers.current;124 125    map.forEach((timer, id) => {126      window.clearTimeout(timer.handle);127      map.set(id, {128        ...timer,129        elapsed: timer.elapsed + (performance.now() - timer.started),130      });131    });132 133    return () => {134      map.forEach((timer, id) => {135        schedule(id, Math.max(400, duration - timer.elapsed));136      });137    };138  }, [paused, duration, schedule]);139 140  useEffect(() => {141    // Copied out of the ref: by the time cleanup runs, timers.current may142    // point at a different Map.143    const map = timers.current;144    return () => map.forEach((t) => window.clearTimeout(t.handle));145  }, []);146 147  const visible = items.slice(-max);148 149  return (150    <ToastContext.Provider value={push}>151      <div className={className}>152        {children}153 154        {/*155        Always mounted, even with nothing in it. A live region added to the DOM156        at the same time as its content usually announces nothing at all.157      */}158        <div159          role="status"160          aria-live="polite"161          aria-relevant="additions"162          onPointerEnter={() => setPaused(true)}163          onPointerLeave={() => setPaused(false)}164          onFocusCapture={() => setPaused(true)}165          onBlurCapture={() => setPaused(false)}166          className="pointer-events-none mt-6 flex min-h-[4.5rem] flex-col items-center"167        >168          <div className="pointer-events-auto relative w-full max-w-sm">169            {visible.map((item, index) => {170              // Newest sits in front at full size; older ones scale down and171              // tuck behind, so the stack reads as depth rather than a list.172              const fromTop = visible.length - 1 - index;173              const tone =174                item.tone === "error"175                  ? "#f97066"176                  : item.tone === "success"177                    ? accent178                    : "#94a3b8";179 180              return (181                <div182                  key={item.id}183                  className="absolute inset-x-0 top-0 flex items-center justify-between gap-3 rounded-lg border border-ink-500 bg-ink-800 px-4 py-3 shadow-xl"184                  style={{185                    transform: paused186                      ? `translateY(${fromTop * 58}px)`187                      : `translateY(${fromTop * 9}px) scale(${1 - fromTop * 0.05})`,188                    opacity: fromTop > 2 ? 0 : 1,189                    zIndex: index,190                    transition: still191                      ? "none"192                      : "transform 380ms cubic-bezier(0.16,1,0.3,1), opacity 240ms linear",193                  }}194                >195                  <span className="flex items-center gap-2.5 text-sm text-bone-200">196                    <span197                      aria-hidden198                      className="h-1.5 w-1.5 shrink-0 rounded-full"199                      style={{ background: tone }}200                    />201                    {item.message}202                  </span>203                  <button204                    type="button"205                    onClick={() => dismiss(item.id)}206                    className="shrink-0 font-mono text-micro text-bone-500 transition-colors hover:text-bone-100"207                  >208                    Dismiss209                  </button>210                </div>211              );212            })}213          </div>214        </div>215      </div>216    </ToastContext.Provider>217  );218}219