# detailSheetKeys

> Why JS: a detail sheet whose open record lives in the URL answers Esc and ↑/↓ (k/j) by following its own Close and previous/next links, and moves focus into itself on open; HTML wires neither a keystroke to a link nor focus to a server-opened region.

```ts
import { detailSheetKeys } from "@sdxc/ui/app";
```

Binds the sheet's keys for as long as the controls stay mounted: Esc follows Close
unless a popover is open (the popover takes it), k/j and ↑/↓ follow previous/next.
Keys typed in a field, or claimed nearer their target, pass through.

## Signature

```ts
detailSheetKeys(scope: DetailSheetKeyScope): MixinDescriptor<HTMLElement>
```

Returns: A mixin descriptor for the sheet's controls.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `scope` | `"page" \| "sheet"` | Where the keys answer. |

## Examples

```tsx
<div mix={[detailSheetKeys("page")]}>{links}</div>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/app` too.

### DETAIL_SHEET_LINK_ATTRIBUTE

Attribute naming which of the sheet's links a control is, read by detailSheetKeys.

#### Signature

```ts
const DETAIL_SHEET_LINK_ATTRIBUTE = "data-detail-sheet-link"
```

### DetailSheetKeyScope

Where the sheet's keys answer: `"page"` anywhere in the document, with focus moved into
the sheet on open; `"sheet"` only while focus is inside the sheet, for a sheet shown on
a page whose own keys come first, such as a catalogue.

#### Signature

```ts
type DetailSheetKeyScope = "page" | "sheet"
```

One of `"page"`, `"sheet"`.