Expandable Panel

1"use client";
2 
3import { ChevronsUpDown } from "lucide-react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9const PANEL_TRANSITION = {
10  type: "spring",
11  duration: 0.24,
12  bounce: 0,
13} as const;
14const CONTENT_TRANSITION = {
15  duration: 0.2,
16  ease: [0.16, 1, 0.3, 1],
17} as const;
18const REDUCED_TRANSITION = { duration: 0 } as const;
19// Single source of truth for the panel's height cap. Applied to the content
20// region so consumers can add a scroll area / pinned footer without knowing it.
21const CONTENT_MAX_HEIGHT =
22  "var(--expandable-panel-max-height, min(15.5rem, calc(100dvh - 8rem)))";
23 
24type ExpandablePanelContextValue = {
25  open: boolean;
26  setOpen: (open: boolean) => void;
27};
28 
29const ExpandablePanelContext =
30  React.createContext<ExpandablePanelContextValue | null>(null);
31 
32/**
33 * Access the expanding panel's open state from within its `children`, e.g. to
34 * collapse the panel after an action. Throws when used outside the component.
35 */
36export function useExpandablePanel() {
37  const context = React.useContext(ExpandablePanelContext);
38 
39  if (!context) {
40    throw new Error(
41      "useExpandablePanel must be used within an <ExpandablePanel>.",
42    );
43  }
44 
45  return context;
46}
47 
48export type ExpandablePanelClassNames = {
49  panel?: string;
50  content?: string;
51  trigger?: string;
52};
53 
54export type ExpandablePanelProps = Omit<
55  React.ComponentProps<"aside">,
56  "children"
57> & {
58  open?: boolean;
59  defaultOpen?: boolean;
60  onOpenChange?: (open: boolean) => void;
61  triggerIcon?: React.ReactNode;
62  openLabel?: string;
63  closeLabel?: string;
64  closeOnEscape?: boolean;
65  /**
66   * Collapse when a pointer goes down outside the panel. Content that portals
67   * outside the panel's subtree (Select, Popover, Dialog) registers as
68   * "outside"; set this to false and close manually in that case.
69   */
70  closeOnOutsideClick?: boolean;
71  classNames?: ExpandablePanelClassNames;
72  children?: React.ReactNode;
73};
74 
75/**
76 * A floating panel that grows in width and height from a compact icon trigger
77 * in its top-right corner. It is intentionally content-agnostic.
78 *
79 * The panel is bounded by `--expandable-panel-width` and
80 * `--expandable-panel-max-height` and clips overflow, so the morph never runs
81 * off-screen. The content region is a flex column capped at that height, so
82 * tall content can add a `flex-1` scroll area (and, e.g., a `shrink-0` pinned
83// … truncated