"use client" import * as React from "react" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" interface CollapsibleContextValue { open: boolean onOpenChange: (open: boolean) => void } const CollapsibleContext = React.createContext({ open: false, onOpenChange: () => {}, }) interface CollapsibleProps extends React.HTMLAttributes { open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void } const Collapsible = React.forwardRef( ({ className, open: controlledOpen, defaultOpen = false, onOpenChange, children, ...props }, ref) => { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) const isControlled = controlledOpen !== undefined const open = isControlled ? controlledOpen : uncontrolledOpen const handleOpenChange = React.useCallback( (value: boolean) => { if (!isControlled) { setUncontrolledOpen(value) } onOpenChange?.(value) }, [isControlled, onOpenChange] ) return (

{children}

) } ) Collapsible.displayName = "Collapsible" const CollapsibleTrigger = React.forwardRef< HTMLButtonElement, React.ButtonHTMLAttributes >(({ className, children, onClick, ...props }, ref) => { const { open, onOpenChange } = React.useContext(CollapsibleContext) return ( ) }) CollapsibleTrigger.displayName = "CollapsibleTrigger" const CollapsibleContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, children, ...props }, ref) => { const { open } = React.useContext(CollapsibleContext) const contentRef = React.useRef(null) const [height, setHeight] = React.useState( open ? undefined : 0 ) React.useEffect(() => { const node = contentRef.current if (!node) return if (open) { const contentHeight = node.scrollHeight setHeight(contentHeight) const timer = setTimeout(() => setHeight(undefined), 200) return () => clearTimeout(timer) } else { setHeight(node.scrollHeight) requestAnimationFrame(() => { setHeight(0) }) } }, [open]) return (

{children}

) }) CollapsibleContent.displayName = "CollapsibleContent" export { Collapsible, CollapsibleTrigger, CollapsibleContent }

Collapsible

Live-Demo

Quellcode