useAnimatedHeight

1import { useCallback, useEffect, useRef } from "react";
2
3const MIN_FADE_DURATION = 0.15;
4const MAX_FADE_DURATION = 0.27;
5
6/**
7 * Tracks the inner element's height and writes it onto the outer element, plus
8 * a size-adaptive `--fade-duration`.
9 *
10 * `onResize` runs after each write with the measured height and the outer
11 * element. Consumers driving their own height animation use it to retarget when
12 * content resizes mid-flight. It's held in a ref, so passing an inline function
13 * won't tear down and rebuild the observer on every render. Pass a stable
14 * callback if it reads state: the ref syncs in a passive effect (after paint)
15 * while the observer fires before it, so an inline closure can be a render late.
16 */
17export function useAnimatedHeight(
18  onResize?: (height: number, outer: HTMLElement) => void,
19) {
20  const outerRef = useRef<HTMLDivElement>(null);
21  const observerRef = useRef<ResizeObserver | null>(null);
22  const previousHeight = useRef(0);
23
24  // Held in a ref rather than `useEffectEvent`: the observer is attached from a
25  // callback ref, and an effect event closed over inside that `useCallback`
26  // trips the React Compiler's memoization check (it wants the event in the
27  // deps, which effect events must never go in). Refs are recognized as stable,
28  // so this keeps the observer from rebuilding on every render.
29  const onResizeRef = useRef(onResize);
30  useEffect(() => {
31    onResizeRef.current = onResize;
32  }, [onResize]);
33
34  const innerRef = useCallback((node: HTMLDivElement | null) => {
35    if (observerRef.current) {
36      observerRef.current.disconnect();
37      observerRef.current = null;
38    }
39
40    if (!node) return;
41
42    const observer = new ResizeObserver((entries) => {
43      const outer = outerRef.current;
44      if (!outer) return;
45      // Use the layout border-box height, not `getBoundingClientRect`. The
46      // bounding rect includes ancestor transforms (e.g. a parent popover's
47      // open-time `scale-95` → `scale-100`), which previously caused this
48      // hook to write the *scaled* height onto the outer element on first
49      // observation — under-sizing the container until a later layout
50      // change happened to trigger another ResizeObserver tick.
51      const entry = entries[0];
52      const height =
53        entry.borderBoxSize?.[0]?.blockSize ??
54        (entry.target as HTMLElement).offsetHeight;
55      if (height > 0) {
56// … truncated