detailSheetKeys
Why JS.
import { detailSheetKeys } from "@sdxc/ui/app";Usage
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
detailSheetKeys(scope: DetailSheetKeyScope): MixinDescriptor<HTMLElement>Returns a mixin descriptor for the sheet's controls.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
scope | "page" | "sheet" | Yes | Where the keys answer. |
Examples
<div mix={[detailSheetKeys("page")]}>{links}</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/app too.
Constant
DETAIL_SHEET_LINK_ATTRIBUTE
Attribute naming which of the sheet's links a control is, read by detailSheetKeys.
const DETAIL_SHEET_LINK_ATTRIBUTE = "data-detail-sheet-link"Type
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.
type DetailSheetKeyScope = "page" | "sheet"