Expandable Panel

"use client";

import { type ComponentProps, type ReactNode, useId, useState } from "react";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export interface ExpandablePanelProps extends Omit<ComponentProps<"div">, "title"> {
  /** Text of the button that shows and hides the content. */
  title: ReactNode;
  /** Controlled open state. Pair with `onOpenChange`. */
  open?: boolean;
  /** Initial open state when uncontrolled. */
  defaultOpen?: boolean;
  /** Called with the next open state when the button is pressed. */
  onOpenChange?: (open: boolean) => void;
  /** Prevents opening and closing. */
  disabled?: boolean;
  /** Classes for the toggle button. */
  triggerClassName?: string;
  /** Classes for the padded content wrapper. `className` styles the outer element. */
  contentClassName?: string;
}

/**
 * A disclosure: a compact button with a leading chevron that shows and hides a region below it.
 * The height animates with CSS grid rows (220ms quint ease-out, 180ms to close) while the content
 * fades; both are instant with reduced motion.
 */
export function ExpandablePanel({
  title,
  open: openProp,
  defaultOpen = false,
  onOpenChange,
  disabled = false,
  triggerClassName,
  contentClassName,
  className,
  children,
  ...props
}: ExpandablePanelProps) {
  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
  const controlled = openProp !== undefined;
  const open = controlled ? openProp : uncontrolledOpen;

  const id = useId();
  const triggerId = `${id}-trigger`;
  const regionId = `${id}-region`;

  function toggle() {
    const next = !open;
    if (!controlled) setUncontrolledOpen(next);
    onOpenChange?.(next);
  }

  return (
    <div data-open={open ? "" : undefined} className={cx("w-full", className)} {...props}>
      <button
        type="button"
        id={triggerId}
        aria-expanded={open}
        aria-controls={regionId}
        disabled={disabled}
        onClick={toggle}
        className={cx(
          "group -ml-1.5 inline-flex min-h-8 max-w-[calc(100%+0.375rem)] cursor-pointer items-center gap-1.5 rounded-lg py-1.5 pr-2.5 pl-1.5 text-left text-sm font-medium",
          "text-zinc-600 transition-[background-color,color] duration-150 ease-out motion-reduce:transition-none",
          "hover:bg-zinc-950/[0.04] hover:text-zinc-950 aria-expanded:text-zinc-950",
          "dark:text-zinc-400 dark:hover:bg-white/[0.06] dark:hover:text-white dark:aria-expanded:text-white",
          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500",
          "disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:bg-transparent",
          triggerClassName,
        )}
      >
        <svg
          aria-hidden="true"
          viewBox="0 0 16 16"
          fill="none"
          className={cx(
            "size-4 shrink-0 text-zinc-400 dark:text-zinc-500",
            "transition-[rotate,color] duration-220 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
            "group-hover:text-current group-aria-expanded:rotate-90 group-aria-expanded:text-current",
          )}
        >
          <path d="m6.25 4.5 3.5 3.5-3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <span className="min-w-0">{title}</span>
      </button>
      {/*
        Rows animate between 0fr and 1fr. `visibility` is transitioned too, so closed content
        leaves the tab order and accessibility tree only after the closing animation ends.
      */}
      <div
        id={regionId}
        role="region"
        aria-labelledby={triggerId}
        className={cx(
          "grid transition-[grid-template-rows,visibility] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
          open ? "visible grid-rows-[1fr] duration-220" : "invisible grid-rows-[0fr] duration-180",
        )}
      >
        <div className="min-h-0 overflow-hidden">
          <div
            className={cx(
              "pt-1.5 pb-2 pl-5.5 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400",
              "transition-opacity ease-out motion-reduce:transition-none",
              open ? "opacity-100 duration-220" : "opacity-0 duration-120",
              contentClassName,
            )}
          >
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}