# ListDetailDetail

> The detail pane.

Source: https://ui.jcsoftdev.com/docs/components/list-detail-detail

The detail pane. A labelled region named by its `ListDetailDetailHeader` title or an `aria-label`.

## Import

```ts
import { ListDetailDetail } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/list-detail`.

## Usage

```tsx
export const SideBySide: Story = {
  decorators: inWidth("48rem"),
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const list = canvas.getByRole("list", { name: "Students" });
    await expect(list).toBeVisible();
    await expect(canvas.getByText("Pick a student.")).toBeVisible();
    await expect(canvas.queryByRole("button", { name: "Back to list" })).toBeNull();
    await userEvent.click(canvas.getByRole("button", { name: /Luis/ }));
    await expect(canvas.getByRole("button", { name: /Luis/ })).toHaveAttribute(
      "aria-current",
      "true",
    );
    await expect(canvas.getByRole("region", { name: "Luis Ramírez" })).toBeVisible();
    // Beside the list, the list stays visible and keeps focus.
    await expect(list).toBeVisible();
    await expect(canvas.getByRole("button", { name: /Luis/ })).toHaveFocus();
    await expect(
      getComputedStyle(list.closest("[data-view]") as Element).gridTemplateColumns.split(" "),
    ).toHaveLength(2);
  },
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `backLabel` | `string` |  | Label of the back action shown in the single-pane view. Defaults to the localized "Back to list". |
| `hideBack` | `boolean` | `false` | Hides the back action (the consumer then provides its own way back). |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Side By Side](/storybook/?path=/story/containers-listdetail--side-by-side)
- [Collapses To Single Pane](/storybook/?path=/story/containers-listdetail--collapses-to-single-pane)
- [Controlled](/storybook/?path=/story/containers-listdetail--controlled)
- [Reports Selection](/storybook/?path=/story/containers-listdetail--reports-selection)
- [Spanish Back](/storybook/?path=/story/containers-listdetail--spanish-back)
- [Back Calls On Back](/storybook/?path=/story/containers-listdetail--back-calls-on-back)
- [List Rail](/storybook/?path=/story/containers-listdetail--list-rail)
- [Narrow Ratio](/storybook/?path=/story/containers-listdetail--narrow-ratio)
- [Card With Header](/storybook/?path=/story/containers-listdetail--card-with-header)

## Source

`packages/ui/src/containers/list-detail/list-detail.tsx`