Expandable Dialog

1"use client";
2 
3import * as React from "react";
4import {
5  AnimatePresence,
6  LayoutGroup,
7  motion,
8  useReducedMotion,
9} from "motion/react";
10 
11import { cn } from "@/lib/utils";
12 
13export type ExpandableDialogItem = {
14  id: string;
15  title: string;
16  description: string;
17  content: React.ReactNode;
18  image: string;
19  imageAlt?: string;
20  actionLabel?: string;
21};
22 
23export type ExpandableDialogProps = Omit<
24  React.ComponentProps<"div">,
25  "children" | "defaultValue" | "onChange" | "value"
26> & {
27  items: readonly ExpandableDialogItem[];
28  /** Id of the expanded item, or null when collapsed. */
29  value?: string | null;
30  defaultValue?: string | null;
31  /** Receives the expanded item's id, plus the item itself for convenience. */
32  onValueChange?: (
33    id: string | null,
34    item: ExpandableDialogItem | null,
35  ) => void;
36  onAction?: (item: ExpandableDialogItem) => void;
37  actionLabel?: string;
38  modalLabel?: string;
39  listClassName?: string;
40  itemClassName?: string;
41};
42 
43 
44/** How long a click waits for image decode before opening regardless. */
45const DECODE_BUDGET_MS = 200;
46 
47function wait(duration: number) {
48  return new Promise<void>((resolve) => {
49    window.setTimeout(resolve, duration);
50  });
51}
52 
53const actionButtonClassName =
54  "inline-flex h-7 shrink-0 items-center justify-center rounded-[min(var(--radius-md),12px)] border border-transparent bg-primary bg-clip-padding px-2.5 pt-px text-[0.8rem] leading-[1.4285714286] font-medium whitespace-nowrap text-primary-foreground outline-none transition-colors hover:bg-primary/80 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
55 
56export function ExpandableDialog({
57  items,
58  value,
59  defaultValue = null,
60  onValueChange,
61  onAction,
62  actionLabel = "Open",
63  modalLabel,
64  className,
65  listClassName,
66  itemClassName,
67  ...props
68}: ExpandableDialogProps) {
69  const shouldReduceMotion = useReducedMotion();
70  const reactId = React.useId();
71  const titleId = `${reactId}-title`;
72  const descriptionId = `${reactId}-description`;
73  const dialogRef = React.useRef<HTMLDivElement>(null);
74  const previouslyFocusedElement = React.useRef<HTMLElement | null>(null);
75  const imageDecodePromises = React.useRef(new Map<string, Promise<void>>());
76  const decodedImages = React.useRef(new Set<string>());
77  const openRequestId = React.useRef(0);
78  const isControlled = value !== undefined;
79  const [uncontrolledValue, setUncontrolledValue] = React.useState<
80    string | null
81// … truncated