52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T3ea8,"use client"; import * as React from "react"; import { AnimatePresence, LayoutGroup, motion, useReducedMotion, } from "motion/react"; import { cn } from "@/lib/utils"; export type ExpandableDialogItem = { id: string; title: string; description: string; content: React.ReactNode; image: string; imageAlt?: string; actionLabel?: string; }; export type ExpandableDialogProps = Omit< React.ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "value" > & { items: readonly ExpandableDialogItem[]; /** Id of the expanded item, or null when collapsed. */ value?: string | null; defaultValue?: string | null; /** Receives the expanded item's id, plus the item itself for convenience. */ onValueChange?: ( id: string | null, item: ExpandableDialogItem | null, ) => void; onAction?: (item: ExpandableDialogItem) => void; actionLabel?: string; modalLabel?: string; listClassName?: string; itemClassName?: string; }; /** How long a click waits for image decode before opening regardless. */ const DECODE_BUDGET_MS = 200; function wait(duration: number) { return new Promise((resolve) => { window.setTimeout(resolve, duration); }); } const actionButtonClassName = "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"; export function ExpandableDialog({ items, value, defaultValue = null, onValueChange, onAction, actionLabel = "Open", modalLabel, className, listClassName, itemClassName, ...props }: ExpandableDialogProps) { const shouldReduceMotion = useReducedMotion(); const reactId = React.useId(); const titleId = `${reactId}-title`; const descriptionId = `${reactId}-description`; const dialogRef = React.useRef(null); const listRef = React.useRef(null); const previouslyFocusedElement = React.useRef(null); const imageDecodePromises = React.useRef(new Map>()); const decodedImages = React.useRef(new Set()); const openRequestId = React.useRef(0); const isControlled = value !== undefined; const [uncontrolledValue, setUncontrolledValue] = React.useState< string | null >(defaultValue); const activeItemValue = isControlled ? value : uncontrolledValue; const activeItem = items.find((item) => item.id === activeItemValue) ?? null; const setActiveItem = React.useCallback( (nextItem: ExpandableDialogItem | null) => { if (!isControlled) { setUncontrolledValue(nextItem?.id ?? null); } onValueChange?.(nextItem?.id ?? null, nextItem); }, [isControlled, onValueChange], ); const decodeImage = React.useCallback((src: string) => { return new Promise((resolve) => { const image = new Image(); image.decoding = "sync"; image.onload = () => { if (typeof image.decode === "function") { image.decode().then(resolve, resolve); } else { resolve(); } }; image.onerror = () => resolve(); image.src = src; }); }, []); const prepareImage = React.useCallback( (src: string) => { if (decodedImages.current.has(src)) { return Promise.resolve(); } const cachedPromise = imageDecodePromises.current.get(src); if (cachedPromise) { return cachedPromise; } const promise = decodeImage(src).then(() => { decodedImages.current.add(src); }); imageDecodePromises.current.set(src, promise); return promise; }, [decodeImage], ); const closeActiveItem = React.useCallback(() => { openRequestId.current += 1; setActiveItem(null); }, [setActiveItem]); const handleAction = React.useCallback( (item: ExpandableDialogItem) => { onAction?.(item); closeActiveItem(); }, [closeActiveItem, onAction], ); const openItem = React.useCallback( async (item: ExpandableDialogItem) => { const requestId = openRequestId.current + 1; openRequestId.current = requestId; // Decoding first keeps the open animation from stuttering, but a slow // remote image must never make the click feel dead: past this budget the // modal opens anyway and the image lands when it lands. await Promise.race([prepareImage(item.image), wait(DECODE_BUDGET_MS)]); if (openRequestId.current === requestId) { setActiveItem(item); } }, [prepareImage, setActiveItem], ); React.useEffect(() => { const decodePromises = imageDecodePromises.current; items.forEach((item) => { void prepareImage(item.image); }); return () => { decodePromises.clear(); }; }, [items, prepareImage]); // Read via a ref inside the focus-trap effect: with an inline controlled // `onValueChange`, `closeActiveItem`'s identity changes every parent render, // and keying the effect on it would re-run the trap and yank focus back to // the dialog root while the user is tabbing through its controls. const closeActiveItemRef = React.useRef(closeActiveItem); React.useEffect(() => { closeActiveItemRef.current = closeActiveItem; }); const activeItemId = activeItem?.id ?? null; const isOpen = activeItemId !== null; // `inert` (not aria-hidden, which leaves the list's buttons focusable) takes // the list out of the tab order and accessibility tree while open. It is // applied here, synchronously after commit, so the trigger is captured and // focus is already inside the dialog before the browser's inert focus fixup // could blur it to . This cleanup runs before the passive effect's // below, so the list is interactive again by the time focus returns to it. React.useLayoutEffect(() => { if (!isOpen) return; const list = listRef.current; previouslyFocusedElement.current = document.activeElement as HTMLElement; dialogRef.current?.focus(); list?.toggleAttribute("inert", true); return () => { list?.toggleAttribute("inert", false); }; }, [isOpen]); React.useEffect(() => { if (activeItemId === null) return; dialogRef.current?.focus(); const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { // A nested overlay (select, menu) inside the content that consumed // this Escape marks it handled; closing too would dismiss both. if (event.defaultPrevented) return; event.preventDefault(); closeActiveItemRef.current(); return; } if (event.key !== "Tab") { return; } const dialog = dialogRef.current; if (!dialog) return; const focusableElements = Array.from( dialog.querySelectorAll( [ "button:not([disabled])", "a[href]", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", "[tabindex]:not([tabindex='-1'])", ].join(","), ), ).filter((element) => element.offsetParent !== null); if (focusableElements.length === 0) { event.preventDefault(); dialog.focus(); return; } const firstElement = focusableElements[0]; const lastElement = focusableElements[focusableElements.length - 1]; const activeElement = document.activeElement as HTMLElement | null; if (!activeElement || !dialog.contains(activeElement)) { event.preventDefault(); firstElement.focus(); } else if (event.shiftKey && activeElement === firstElement) { event.preventDefault(); lastElement.focus(); } else if (!event.shiftKey && activeElement === lastElement) { event.preventDefault(); firstElement.focus(); } }; document.addEventListener("keydown", handleKeyDown); return () => { document.removeEventListener("keydown", handleKeyDown); previouslyFocusedElement.current?.focus(); }; }, [activeItemId]); const layoutTransition = shouldReduceMotion ? { duration: 0 } : ({ type: "spring", duration: 0.32, bounce: 0 } as const); const fadeTransition = shouldReduceMotion ? { duration: 0 } : ({ duration: 0.2, ease: [0.215, 0.61, 0.355, 1] } as const); return (

{activeItem ? ( {activeItem ? (

{ if (event.target === event.currentTarget) { closeActiveItem(); } }} >

) : null}

void prepareImage(item.image)} className={cn( "flex w-full items-center gap-3 rounded-lg border bg-background p-3 text-left transition-colors hover:bg-muted/50", itemClassName, )} > void openItem(item)} onFocus={() => void prepareImage(item.image)} aria-label={`${item.actionLabel ?? actionLabel} ${item.title}`} className={actionButtonClassName} > {item.actionLabel ?? actionLabel}

); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@ericts","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/base/ui/expandable-dialog.tsx","content":"$54","type":"registry:ui","target":"@ui/expandable-dialog.tsx"}],"className":"h-[70svh] min-h-80"}]]}]