Overflow list

"use client";

import {
  Children,
  cloneElement,
  isValidElement,
  useCallback,
  useEffect,
  useId,
  useLayoutEffect,
  useRef,
  useState,
  type ComponentProps,
  type ReactElement,
  type ReactNode,
  type Ref,
  type ToggleEvent,
} from "react";
import "./overflow-list.css";

export type OverflowListProps = Omit<ComponentProps<"ul">, "children"> & {
  /** OverflowItem elements, in priority order: the first ones stay visible longest. */
  children: ReactNode;
  /** Accessible name of the list, such as Labels or Reviewers. */
  label: string;
  /** Accessible name of the counter and of the list it opens, for n hidden items. */
  moreLabel?: (n: number) => string;
};

/* Must match the @supports condition in overflow-list.css exactly. */
const ANCHOR_SUPPORT =
  "(anchor-name: --a) and (position-area: block-end) and (position-try-fallbacks: flip-block)";

function anchorSupported() {
  return typeof CSS !== "undefined" && CSS.supports(ANCHOR_SUPPORT);
}

/** Fallback for engines without anchor positioning: fixed coordinates from the counter's box. */
function place(trigger: Element, surface: HTMLElement) {
  const box = trigger.getBoundingClientRect();
  const viewWidth = document.documentElement.clientWidth;
  const viewHeight = document.documentElement.clientHeight;
  const gap = parseFloat(getComputedStyle(surface).marginTop) || 0;
  let top = false;
  // The counter sits at the end of the row, so the list lines up with its end edge.
  let end = true;

  const height = surface.offsetHeight + gap;
  const width = surface.offsetWidth;
  if (surface.offsetHeight > 0) {
    if (box.bottom + height > viewHeight && box.top - height >= 0) top = true;
    if (box.right - width < 0 && box.left + width <= viewWidth) end = false;
  }

  const style = surface.style;
  style.top = top ? "auto" : `${box.bottom}px`;
  style.bottom = top ? `${viewHeight - box.top}px` : "auto";
  style.left = end ? "auto" : `${box.left}px`;
  style.right = end ? `${viewWidth - box.right}px` : "auto";
}

function setRefs<T>(node: T, ...refs: (Ref<T> | undefined)[]) {
  for (const ref of refs) {
    if (typeof ref === "function") ref(node);
    else if (ref) ref.current = node;
  }
}

/** Half a pixel of slack absorbs subpixel rounding between widths. */
const SLACK = 0.5;

export function OverflowList({
  children,
  label,
  moreLabel = (n) => `${n} more`,
  className,
  ref,
  ...rest
}: OverflowListProps) {
  const auto = useId();
  const popoverId = `${auto}more`;
  const anchorName = `--eq-overflow-list-${auto.replace(/[^\w-]/g, "")}`;
  const listRef = useRef<HTMLUListElement | null>(null);
  const moreRef = useRef<HTMLLIElement | null>(null);
  const popoverRef = useRef<HTMLDivElement | null>(null);
  const counterRef = useRef<HTMLButtonElement | null>(null);
  const mergedRef = useCallback((node: HTMLUListElement | null) => setRefs(node, listRef, ref), [ref]);
  const [open, setOpen] = useState(false);
  // null until measured: the server and the first client frame show every item, clipped.
  const [fit, setFit] = useState<number | null>(null);

  const items = Children.toArray(children).filter(isValidElement) as ReactElement<ComponentProps<"li">>[];
  const shown = fit === null ? items.length : Math.min(fit, items.length);
  const hidden = items.length - shown;

  const measure = useCallback(() => {
    const list = listRef.current;
    const more = moreRef.current;
    if (!list || !more) return;
    // Hidden items stay in the DOM out of flow at their natural width, so they can be measured.
    const rows = Array.from(list.children).filter((el) => el !== more);
    const widths = rows.map((el) => el.getBoundingClientRect().width);
    const style = getComputedStyle(list);
    const gap = parseFloat(style.columnGap) || 0;
    const available =
      list.getBoundingClientRect().width -
      (parseFloat(style.paddingInlineStart) || 0) -
      (parseFloat(style.paddingInlineEnd) || 0);

    let next = widths.length;
    const total = widths.reduce((sum, w) => sum + w, 0) + gap * Math.max(0, widths.length - 1);
    if (total > available + SLACK) {
      let used = more.getBoundingClientRect().width;
      next = 0;
      for (const width of widths) {
        used += width + gap;
        if (used > available + SLACK) break;
        next++;
      }
    }
    setFit((current) => (current === next ? current : next));
  }, []);

  // Every commit: the counter's width depends on its number, so a change can need a second pass.
  useLayoutEffect(() => {
    measure();
  });

  // The row's own size and each item's size (fonts arriving, content changing) trigger a remeasure.
  useEffect(() => {
    const list = listRef.current;
    if (!list || typeof ResizeObserver === "undefined") return;
    const observer = new ResizeObserver(() => measure());
    observer.observe(list);
    for (const child of Array.from(list.children)) observer.observe(child);
    return () => observer.disconnect();
  }, [measure, items.length]);

  // Nothing left to list: close the surface rather than show it empty.
  useEffect(() => {
    const surface = popoverRef.current;
    if (hidden === 0 && surface?.matches(":popover-open")) surface.hidePopover();
  }, [hidden]);

  // Fallback positioning follows the counter while the page scrolls.
  useEffect(() => {
    if (!open || anchorSupported()) return;
    function update() {
      if (counterRef.current && popoverRef.current) place(counterRef.current, popoverRef.current);
    }
    window.addEventListener("scroll", update, true);
    window.addEventListener("resize", update);
    return () => {
      window.removeEventListener("scroll", update, true);
      window.removeEventListener("resize", update);
    };
  }, [open]);

  function handleBeforeToggle(event: ToggleEvent<HTMLDivElement>) {
    if (event.newState === "open" && counterRef.current && !anchorSupported()) {
      place(counterRef.current, event.currentTarget);
    }
  }

  function handleToggle(event: ToggleEvent<HTMLDivElement>) {
    const isOpen = event.newState === "open";
    setOpen(isOpen);
    // Second pass now that the surface has a size, so the fallback can flip.
    if (isOpen && counterRef.current && !anchorSupported()) place(counterRef.current, event.currentTarget);
  }

  const name = moreLabel(hidden);

  return (
    <ul
      role="list"
      aria-label={label}
      {...rest}
      ref={mergedRef}
      className={["eq-overflow-list", className].filter(Boolean).join(" ")}
    >
      {items.map((item, index) =>
        index < shown ? item : cloneElement(item, { "aria-hidden": true, "data-overflow": "" } as ComponentProps<"li">),
      )}
      <li ref={moreRef} className="eq-overflow-list-more" data-empty={hidden === 0 || undefined}>
        <button
          ref={counterRef}
          type="button"
          className="eq-overflow-list-counter"
          style={{ anchorName }}
          popoverTarget={popoverId}
          aria-label={name}
          aria-expanded={open}
          aria-controls={popoverId}
        >
          {/* Before measuring it holds the widest count it could need. */}
          {`+${fit === null ? items.length : hidden}`}
        </button>
        <div
          ref={popoverRef}
          id={popoverId}
          popover="auto"
          className="eq-overflow-list-popover"
          style={{ positionAnchor: anchorName }}
          onBeforeToggle={handleBeforeToggle}
          onToggle={handleToggle}
        >
          <ul role="list" className="eq-overflow-list-menu" aria-label={name}>
            {items.slice(shown).map((item, index) => cloneElement(item, { key: `more-${index}` }))}
          </ul>
        </div>
      </li>
    </ul>
  );
}

export type OverflowItemProps = ComponentProps<"li">;

export function OverflowItem({ className, ...rest }: OverflowItemProps) {
  return <li {...rest} className={["eq-overflow-list-item", className].filter(Boolean).join(" ")} />;
}