[ @sdxc/ui/mixins ]

keymap

Why JS.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { keymap } from "@sdxc/ui/mixins";

Usage

Binds a map of page-wide shortcuts for as long as the host stays mounted, with the host as the bindings' scope: a dialog inside it answers them, any other dialog and any field being typed in keeps its keys. The latest map passed is the one a keystroke runs.

Signature

keymap(bindings: Keymap.Bindings): MixinDescriptor<HTMLElement>

Parameters

Parameter	Type	Description
`bindings`	`Keymap.Bindings`	Combos mapped to what each runs.

Examples

<div mix={[keymap({ j: next, k: previous, "?": openHelp })]}>…</div>

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

Function

isClaimedKeystroke

Whether a keystroke belongs to someone else: handled nearer its target already, part of an IME composition, typed into a field, or pressed inside a dialog outside scope.

isClaimedKeystroke(event: KeyboardEvent, scope?: Element | null): boolean

Parameter	Type	Description
`event`	`KeyboardEvent`	The keystroke as it reached the document.
`scope?`	`Element \| null`	The element whose own dialogs still answer the bindings.

Function

bindKeymap

Listens for bindings on document in the bubble phase, so a handler nearer the target that claims the keystroke first keeps it.

bindKeymap(document: Document, bindings: Keymap.Bindings, options: Keymap.Options): void

Parameter	Type	Description
`document`	`Document`	The document to listen on.
`bindings`	`Keymap.Bindings`	Combos mapped to what each runs.
`options`	`Keymap.Options`	The signal that removes the listener, and the bindings' own scope.

bindKeymap(document, { j: next, k: previous, "?": openHelp }, { signal });

Interface

Keymap.Bindings

Each combo, as parseKeyCombo reads it, mapped to what pressing it runs. The first entry a keystroke matches runs, and the keystroke is then default-prevented.