Smooth Height Layout

1"use client";
2 
3import * as React from "react";
4import {
5  motion,
6  useReducedMotion,
7  type HTMLMotionProps,
8} from "motion/react";
9 
10import { cn } from "@/lib/utils";
11 
12type MotionTransition = NonNullable<HTMLMotionProps<"div">["transition"]>;
13 
14export type SmoothHeightProps = Omit<
15  HTMLMotionProps<"div">,
16  "animate" | "children" | "initial" | "transition"
17> & {
18  children: React.ReactNode;
19  innerClassName?: string;
20  transition?: MotionTransition;
21};
22 
23export function SmoothHeight({
24  children,
25  className,
26  innerClassName,
27  transition,
28  ...props
29}: SmoothHeightProps) {
30  const [height, setHeight] = React.useState<number | null>(null);
31  const contentRef = React.useRef<HTMLDivElement>(null);
32  const shouldReduceMotion = useReducedMotion();
33 
34  React.useEffect(() => {
35    const content = contentRef.current;
36 
37    if (!content) return;
38 
39    const updateHeight = (nextHeight: number) => {
40      setHeight((currentHeight) => {
41        if (currentHeight === null) return nextHeight;
42 
43        return Math.abs(currentHeight - nextHeight) > 0.5
44          ? nextHeight
45          : currentHeight;
46      });
47    };
48 
49    updateHeight(content.getBoundingClientRect().height);
50 
51    if (typeof ResizeObserver === "undefined") return;
52 
53    const observer = new ResizeObserver((entries) => {
54      const entry = entries[0];
55 
56      if (!entry) return;
57 
58      const borderBoxSize = Array.isArray(entry.borderBoxSize)
59        ? entry.borderBoxSize[0]
60        : entry.borderBoxSize;
61 
62      updateHeight(
63        borderBoxSize?.blockSize ?? entry.target.getBoundingClientRect().height
64      );
65    });
66 
67    observer.observe(content);
68 
69    return () => observer.disconnect();
70  }, []);
71 
72  const resolvedTransition: MotionTransition = shouldReduceMotion
73    ? { duration: 0 }
74    : transition ?? { duration: 0.3, ease: [0.645, 0.045, 0.355, 1] };
75 
76  return (
77    <motion.div
78      {...props}
79      data-slot="smooth-height"
80      initial={false}
81      animate={{ height: height ?? "auto" }}
82      transition={resolvedTransition}
83      className={cn("overflow-hidden", className)}
84    >
85      <div
86        ref={contentRef}
87        data-slot="smooth-height-content"
88        className={innerClassName}
89      >
90        {children}
91      </div>
92    </motion.div>
93  );
94}