# splitViewKeys

> Binds j/k to step through the list's items while the list keeps its scroll, keeps the list's scroll offset across full page loads, and closes the sidebar sheet when one of its links is followed.

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

Binds j/k to step through the list's items while the list keeps its scroll, keeps the
list's scroll offset across full page loads, and closes the sidebar sheet when one of
its links is followed.

## Signature

```ts
splitViewKeys(listId: string, sidebarId: string | undefined, scope: SplitViewKeyScope): MixinDescriptor<HTMLElement>
```

Returns: A mixin descriptor for the view's key marker.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `listId` | `string` | The list pane's id. |
| `sidebarId` | `string \| undefined` | The sidebar pane's id, when the view has one. |
| `scope` | `"page" \| "view"` | `"page"` answers j/k anywhere; `"view"` only while focus is inside the view. |

## Examples

```tsx
<span hidden mix={[splitViewKeys("inbox-list", "inbox-sidebar", "page")]} />
```

## Used with it

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

### SPLIT_VIEW_ITEM_ATTRIBUTE

Attribute an app puts on each list link j/k steps through, in list order.

#### Signature

```ts
const SPLIT_VIEW_ITEM_ATTRIBUTE = "data-split-view-item"
```

### setSplitViewCollapsed

Collapses or restores `pane` and remembers it. The list and the detail never both
collapse: collapsing one brings the other back, so the view always shows a record.

#### Signature

```ts
setSplitViewCollapsed(root: HTMLElement, pane: SplitViewPane, collapsed: boolean): void
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `root` | `HTMLElement` | The split view. |
| `pane` | `SplitViewPane` | The pane to change. |
| `collapsed` | `boolean` | Whether it ends collapsed. |

### SplitViewKeyScope

Where a split view's j/k answer: `"page"` anywhere in the document, `"view"` only while
focus is inside the view, for a view shown on a page whose own keys come first.

#### Signature

```ts
type SplitViewKeyScope = "page" | "view"
```

One of `"page"`, `"view"`.