Bottom sheet

"use client";

import {
  useEffect,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
  type KeyboardEvent,
  type MouseEvent,
  type PointerEvent,
  type SyntheticEvent,
} from "react";
import "./bottom-sheet.css";

// React 19 does not type invoker commands yet. This lets any button take them.
declare module "react" {
  interface ButtonHTMLAttributes<T> {
    command?: string;
    commandfor?: string;
  }
}

const DEFAULT_DETENTS = [0.5, 0.92];

export type BottomSheetProps = Omit<ComponentProps<"dialog">, "closedby"> & {
  /** Required. Triggers point at it with commandfor. */
  id: string;
  /** The sheet's accessible name. */
  label: string;
  /** Resting heights as a share of the viewport, lowest first. */
  detents?: number[];
  /** Index into detents for the height it opens at. */
  defaultDetent?: number;
  /** Lets Escape, a backdrop click and a downward fling close it. */
  dismissible?: boolean;
};

type Drag = { startY: number; startHeight: number; samples: { y: number; t: number }[]; moved: boolean };

/**
 * A modal dialog that rises from the bottom edge and rests at one of several
 * heights. Opens with a native invoker: a button carrying command="show-modal"
 * and commandfor set to this id.
 */
export function BottomSheet({
  id,
  label,
  detents = DEFAULT_DETENTS,
  defaultDetent = 0,
  dismissible = true,
  className,
  style,
  onClick,
  onCancel,
  onClose,
  children,
  ...rest
}: BottomSheetProps) {
  const stops = detents.filter((d) => d > 0 && d <= 1).sort((a, b) => a - b);
  if (stops.length === 0) stops.push(DEFAULT_DETENTS[0]);
  const last = stops.length - 1;
  const start = Math.min(Math.max(0, defaultDetent), last);

  const sheetRef = useRef<HTMLDialogElement>(null);
  const drag = useRef<Drag | null>(null);
  const swallowClick = useRef(false);
  const [level, setLevel] = useState(start);

  useEffect(() => {
    if ("command" in HTMLButtonElement.prototype) return;
    function invoke(event: globalThis.MouseEvent) {
      if (!(event.target instanceof Element)) return;
      const invoker = event.target.closest("button[commandfor]");
      if (!invoker || invoker.getAttribute("commandfor") !== id) return;
      const sheet = document.getElementById(id);
      if (!(sheet instanceof HTMLDialogElement)) return;
      const command = invoker.getAttribute("command");
      if (command === "show-modal" && !sheet.open) sheet.showModal();
      if ((command === "close" || command === "request-close") && sheet.open) sheet.close();
    }
    document.addEventListener("click", invoke);
    return () => document.removeEventListener("click", invoke);
  }, [id]);

  // The height lives in a custom property written straight to the element, so a drag never re-renders.
  function setHeight(share: number) {
    sheetRef.current?.style.setProperty("--_h", String(share));
  }

  function settle(index: number) {
    const next = Math.min(Math.max(0, index), last);
    setLevel(next);
    setHeight(stops[next]);
  }

  function handlePointerDown(event: PointerEvent<HTMLButtonElement>) {
    const sheet = sheetRef.current;
    if (!sheet || event.button !== 0) return;
    event.currentTarget.setPointerCapture(event.pointerId);
    swallowClick.current = false;
    drag.current = {
      startY: event.clientY,
      startHeight: sheet.getBoundingClientRect().height,
      samples: [{ y: event.clientY, t: event.timeStamp }],
      moved: false,
    };
    sheet.setAttribute("data-dragging", "");
  }

  function handlePointerMove(event: PointerEvent<HTMLButtonElement>) {
    const state = drag.current;
    if (!state) return;
    const dy = event.clientY - state.startY;
    if (Math.abs(dy) > 3) state.moved = true;
    const height = Math.min(Math.max(state.startHeight - dy, 0), window.innerHeight);
    setHeight(height / window.innerHeight);
    state.samples.push({ y: event.clientY, t: event.timeStamp });
    while (state.samples.length > 2 && event.timeStamp - state.samples[0].t > 100) state.samples.shift();
  }

  function handlePointerEnd(event: PointerEvent<HTMLButtonElement>) {
    const state = drag.current;
    const sheet = sheetRef.current;
    drag.current = null;
    if (!state || !sheet) return;
    sheet.removeAttribute("data-dragging");
    if (!state.moved) return;
    swallowClick.current = true;

    const first = state.samples[0];
    const elapsed = Math.max(event.timeStamp - first.t, 1);
    const velocity = (event.clientY - first.y) / elapsed; // px per ms, positive is down
    const viewport = window.innerHeight;
    const share = sheet.getBoundingClientRect().height / viewport;
    // Where the sheet would coast to in 200ms: a quick flick counts for more than its distance.
    const projected = share - (velocity * 200) / viewport;

    if (dismissible && (velocity > 1 || projected < stops[0] / 2)) {
      sheet.close();
      return;
    }
    let nearest = 0;
    for (let i = 1; i < stops.length; i++) {
      if (Math.abs(stops[i] - projected) < Math.abs(stops[nearest] - projected)) nearest = i;
    }
    settle(nearest);
  }

  function handleHandleClick() {
    if (swallowClick.current) {
      swallowClick.current = false;
      return;
    }
    settle(level === last ? 0 : last);
  }

  function handleHandleKey(event: KeyboardEvent<HTMLButtonElement>) {
    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
      event.preventDefault();
      event.stopPropagation();
      settle(level + (event.key === "ArrowUp" ? 1 : -1));
    }
  }

  function handleClick(event: MouseEvent<HTMLDialogElement>) {
    onClick?.(event);
    // closedby="any" does this natively where supported.
    if (event.defaultPrevented || !dismissible) return;
    if ("closedBy" in HTMLDialogElement.prototype) return;
    const sheet = event.currentTarget;
    if (event.target !== sheet) return;
    const box = sheet.getBoundingClientRect();
    const inside =
      event.clientX >= box.left &&
      event.clientX <= box.right &&
      event.clientY >= box.top &&
      event.clientY <= box.bottom;
    if (!inside) sheet.close();
  }

  function handleCancel(event: SyntheticEvent<HTMLDialogElement>) {
    onCancel?.(event);
    if (!dismissible) event.preventDefault();
  }

  function handleClose(event: SyntheticEvent<HTMLDialogElement>) {
    onClose?.(event);
    const sheet = event.currentTarget;
    // Back to the opening height once the sheet has finished leaving, so it never jumps on the way out.
    const reset = () => {
      if (sheet.open) return;
      setLevel(start);
      sheet.style.setProperty("--_h", String(stops[start]));
    };
    Promise.all(sheet.getAnimations().map((animation) => animation.finished)).then(reset, reset);
  }

  return (
    <dialog
      aria-label={label}
      {...rest}
      ref={sheetRef}
      id={id}
      closedby={dismissible ? "any" : "none"}
      className={["eq-bottom-sheet", className].filter(Boolean).join(" ")}
      style={{ ...style, "--_h": stops[start], "--_low": stops[0] } as CSSProperties}
      onClick={handleClick}
      onCancel={handleCancel}
      onClose={handleClose}
    >
      <button
        type="button"
        className="eq-bottom-sheet-handle"
        aria-label="Resize sheet"
        aria-expanded={stops.length > 1 ? level === last : undefined}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerEnd}
        onPointerCancel={handlePointerEnd}
        onClick={handleHandleClick}
        onKeyDown={handleHandleKey}
      >
        <span className="eq-bottom-sheet-grip" aria-hidden="true" />
      </button>
      {children}
    </dialog>
  );
}

export function BottomSheetTitle({ className, ...rest }: ComponentProps<"h2">) {
  return <h2 {...rest} className={["eq-bottom-sheet-title", className].filter(Boolean).join(" ")} />;
}

/** The content. Takes the free height and scrolls without moving the page behind. */
export function BottomSheetBody({ className, ...rest }: ComponentProps<"div">) {
  return <div {...rest} className={["eq-bottom-sheet-body", className].filter(Boolean).join(" ")} />;
}