# ListDetailEmpty

> Placeholder for the detail pane while nothing is selected ("Choose an item").

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

Placeholder for the detail pane while nothing is selected ("Choose an item"). Render it inside
`ListDetailDetail`; it renders nothing once an item is selected, so it needs no condition.

## Import

```ts
import { ListDetailEmpty } 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 |
| --- | --- | --- | --- |
| `icon` | `ReactNode` |  | Decorative icon; hidden from screen readers. |
| `title` * | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `action` | `ReactNode` |  | Call to action under the text. |

`*` 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`