Detail Panel

A panel at the window's right edge that opens a list row's detail, pushing the list aside when there is room and sliding over it when there is not.

"use client";

import { useCallback, useState } from "react";

import { DetailPanel } from "@smartacteam/ambient-web/detail-panel";

const ORDERS = [
  { id: "1042", customer: "Sarah Butler", status: "Shipped" },
  { id: "1041", customer: "Philip Branum", status: "Delivered" },
  { id: "1040", customer: "Ana Ortiz", status: "Processing" },
  { id: "1039", customer: "Dev Patel", status: "Delivered" },
];

export function DetailPanelDemo() {
  const [openId, setOpenId] = useState<string | null>(null);
  const order = ORDERS.find((entry) => entry.id === openId);
  const close = useCallback(() => setOpenId(null), []);
  return (
    <div className="h-72 w-full overflow-hidden rounded-lg border border-stroke-default">
      <DetailPanel.Root open={order !== undefined} onClose={close}>
        <DetailPanel.Main>
          <ul className="divide-y divide-stroke-default">
            {ORDERS.map((entry) => (
              <li key={entry.id}>
                <button
                  type="button"
                  onClick={() => setOpenId(entry.id)}
                  className="flex w-full justify-between px-4 py-3 text-left text-sm text-text-primary hover:bg-surface-hover"
                >
                  <span>
                    #{entry.id} · {entry.customer}
                  </span>
                  <span className="text-text-secondary">{entry.status}</span>
                </button>
              </li>
            ))}
          </ul>
        </DetailPanel.Main>
        <DetailPanel.Panel title={order ? `Order #${order.id}` : "Order"}>
          <dl className="grid grid-cols-2 gap-2 p-4 text-sm">
            <dt className="text-text-secondary">Customer</dt>
            <dd className="text-text-primary">{order?.customer}</dd>
            <dt className="text-text-secondary">Status</dt>
            <dd className="text-text-primary">{order?.status}</dd>
          </dl>
        </DetailPanel.Panel>
      </DetailPanel.Root>
    </div>
  );
}

Usage

import { DetailPanel } from "@smartacteam/ambient-web/detail-panel";

<DetailPanel.Root open={open} onClose={close}>
  <DetailPanel.Main>{/* the list */}</DetailPanel.Main>
  <DetailPanel.Panel title="Order snapshot">
    {/* the detail */}
  </DetailPanel.Panel>
</DetailPanel.Root>

Push or slide over

The panel is fixed to the window's right edge. While it is open, Root measures how much of its own width the panel covers and how much room is left of the panel:

Push: when that room is at least minMainWidth, Main gives up the covered width, so the list stays in reach beside the detail. A layout that ends short of the window's edge gives up only the part the panel covers.
Slide over: when the panel overlaps Root and that room is under minMainWidth, Main keeps its width and the panel covers it with a subtle shadow (shadow-lg).

The push leaves that room alone, so opening the panel cannot flip the choice; a resize of the window or of Root while open switches it.

The panel moves focus into itself when it opens and back to the opener when it closes. Escape closes it unless something inside, such as a menu, handled the key first.

Root API Reference

Prop	Type	Default
`open`	`boolean`
`onClose`	`() => void`
`panelWidth`	`number`	`400`
`minMainWidth`	`number`	`640`