Skip to content

zidane-ui/keybindings

import { … } from 'zidane-ui/keybindings'ui/src/keybindings/index.ts

Components#

FooterHintComponent#

A footer legend entry: the keys, then what they do (↑ ↓ Navigate).

TypeScript
function FooterHint(props: FooterHintProps): Element
Parameters
NameTypeDescription
propsFooterHintProps

See FooterHintProps.

Element
FooterHint props
NameTypeDescription
className?string

Classes merged on the root.

keysreadonly string[]

The binding specs, each drawn as a small KeyHint.

labelstring

What they do (Navigate).

style?CSSProperties

Styles on the root.

ui/src/keybindings/KeyHint.tsx:69

KeybindingsProviderComponent#

Provides a KeybindingsHost and optional label overrides to the keybindings hooks and components below it.

TypeScript
function KeybindingsProvider(props: KeybindingsProviderProps): Element
Parameters
NameTypeDescription
propsKeybindingsProviderProps

Provider props: the host, optional labels, and the children to render.

Element
KeybindingsProvider props
NameTypeDescription
childrenReactNode

The app.

hostKeybindingsHost

Where the user's overrides live.

labels?Partial<{ keyHintOr: string }>

Overrides for the built-in strings. Keys you leave out keep the default English label.

ui/src/keybindings/KeybindingsProvider.tsx:70

KeyCommandsProviderComponent#

Holds a key command registry and fires its handlers on the document, against the bindings of the nearest KeybindingsProvider (the defaults without one). AppHostProvider mounts one.

TypeScript
function KeyCommandsProvider(props: KeyCommandsProviderProps): Element
Parameters
NameTypeDescription
propsKeyCommandsProviderProps

The optional registry and the children.

Element
KeyCommandsProvider props
NameTypeDescription
childrenReactNode

The app.

registry?KeyCommandRegistry

The registry to dispatch. Absent: the provider makes its own.

ui/src/keybindings/KeyCommands.tsx:52

KeyHintComponent#

A key binding as keycaps: one .zg-keycap per key (⌘ K), macOS glyphs, alternatives quietly separated.

TypeScript
function KeyHint(props: KeyHintProps): Element
Parameters
NameTypeDescription
propsKeyHintProps

See KeyHintProps.

Element
KeyHint props
NameTypeDescription
className?string

Classes merged on the root.

size?'sm' | 'md'

sm for dense rows (footer hints), md (default) for lists.

specstring

The binding spec (cmd+k, ctrl+w | cmd+w).

style?CSSProperties

Styles on the root.

ui/src/keybindings/KeyHint.tsx:36

Functions#

bindKeyListenersFunction#

Listens on the document for the given actions' chords (the dispatcher's rules, see the header) and calls the handler read returns at press time. Returns the function that removes the listeners.

TypeScript
function bindKeyListeners(
  actions: readonly KeyAction[],
  merged: KeyBindings,
  read: (action: KeyAction) => (() => void) | undefined,
): () => void
Parameters
NameTypeDescription
actionsreadonly KeyAction[]

The bound actions, in order: the first matching a chord wins.

mergedKeyBindings

The bindings in effect.

read(action: KeyAction) => (() => void) | undefined

The handler of an action now (undefined: let the press through).

() => void

ui/src/keybindings/KeybindingsProvider.tsx:169

matchesBindingFunction#

Whether a key event fires a binding. All declared modifiers must be pressed and no others, so 'o' does not match ctrl+o and 'ctrl+o' does not match ctrl+shift+o. A spec with alternatives (ctrl+w | cmd+w) matches any.

TypeScript
function matchesBinding(event: KeyboardEvent, spec: string | ParsedBinding): boolean
Parameters
NameTypeDescription
eventKeyboardEvent

The key event.

specstring | ParsedBinding

A spec string, or one parsed chord.

boolean

ui/src/keybindings/match.ts:15

modIsMetaFunction#

Whether this platform's mod is ⌘.

TypeScript
function modIsMeta(): boolean
boolean

ui/src/keybindings/press.ts:29

pressChordFunction#

Presses chord where focus is. Returns whether a binding took it (a listener called preventDefault). A chord that doesn't parse presses nothing and returns false.

TypeScript
function pressChord(chord: string, options?: PressChordOptions): boolean
Parameters
NameTypeDefaultDescription
chordstring

The chord ('mod+k', 'escape').

options?PressChordOptions{}

How to resolve mod, and where the key goes.

boolean

ui/src/keybindings/press.ts:61

resolveChordFunction#

A chord with mod resolved: cmd on macOS, ctrl elsewhere. Other parts stay as written.

TypeScript
function resolveChord(chord: string, mac?: boolean): string
Parameters
NameTypeDescription
chordstring

The chord ('mod+shift+k').

mac?boolean

Resolve mod to cmd. Default: this platform's.

string

ui/src/keybindings/press.ts:39

useHelpKeyFunction#

Calls onOpen on a bare ? outside fields. The listener attaches once; both callbacks are read at press time.

TypeScript
function useHelpKey(onOpen: (() => void) | undefined, blocked?: () => boolean): void
Parameters
NameTypeDescription
onOpen(() => void) | undefined

Opens the shortcut reference. Absent: nothing listens.

blocked?() => boolean

Whether something else owns input now (a modal is open).

ui/src/keybindings/useHelpKey.ts:19

useKeybindingsFunction#

Listens on the document for the bound actions' keys and calls their handlers. Handlers are read at press time, so a fresh object each render costs nothing; only the set of bound actions decides what is listened for. The first action (in the caller's order) matching a chord wins.

TypeScript
function useKeybindings(handlers: KeybindingHandlers): void
Parameters
NameTypeDescription
handlersKeybindingHandlers

A handler per action to bind.

ui/src/keybindings/KeybindingsProvider.tsx:120

useKeybindingsHostFunction#

The KeybindingsHost from the nearest KeybindingsProvider, or null outside one (the defaults apply).

TypeScript
function useKeybindingsHost(): KeybindingsHost | null

ui/src/keybindings/KeybindingsProvider.tsx:79

useKeybindingsLabelsFunction#

Returns the keybindings components' strings: the defaults merged with any overrides.

TypeScript
function useKeybindingsLabels(): { keyHintOr: string }
{ keyHintOr: string }

ui/src/keybindings/useKeybindingsLabels.ts:11

useKeyCommandActionsFunction#

The bound actions of the nearest registry, as one space-separated string: re-renders only when the set changes.

TypeScript
function useKeyCommandActions(): string
string

ui/src/keybindings/KeyCommands.tsx:116

useKeyCommandRegistryFunction#

The registry of the nearest KeyCommandsProvider, or null outside one.

TypeScript
function useKeyCommandRegistry(): KeyCommandRegistry | null

ui/src/keybindings/KeyCommands.tsx:85

useKeyCommandsFunction#

Registers handlers with the nearest KeyCommandsProvider for as long as the component is mounted. A fresh object each render costs nothing: handlers are read at press time. Outside a provider it does nothing.

TypeScript
function useKeyCommands(commands: KeyCommands): void
Parameters
NameTypeDescription
commandsKeyCommands

A handler per action this part binds.

ui/src/keybindings/KeyCommands.tsx:95

useMergedKeybindingsFunction#

The bindings in effect (defaults plus the host's overrides), re-rendering when the overrides change.

TypeScript
function useMergedKeybindings(): KeyBindings

ui/src/keybindings/KeybindingsProvider.tsx:88

Interfaces#

FooterHintPropsInterface#

Props for FooterHint.

TypeScript
interface FooterHintProps
FooterHintProps properties
NameTypeDescription
className?string

Classes merged on the root.

keysreadonly string[]

The binding specs, each drawn as a small KeyHint.

labelstring

What they do (Navigate).

style?CSSProperties

Styles on the root.

ui/src/keybindings/KeyHint.tsx:53

KeybindingsProviderPropsInterface#

Props for KeybindingsProvider.

TypeScript
interface KeybindingsProviderProps
KeybindingsProviderProps properties
NameTypeDescription
childrenReactNode

The app.

hostKeybindingsHost

Where the user's overrides live.

labels?Partial<{ keyHintOr: string }>

Overrides for the built-in strings. Keys you leave out keep the default English label.

ui/src/keybindings/KeybindingsProvider.tsx:56

KeyCommandsProviderPropsInterface#

Props for KeyCommandsProvider.

TypeScript
interface KeyCommandsProviderProps
KeyCommandsProviderProps properties
NameTypeDescription
childrenReactNode

The app.

registry?KeyCommandRegistry

The registry to dispatch. Absent: the provider makes its own.

ui/src/keybindings/KeyCommands.tsx:37

KeyHintPropsInterface#

Props for KeyHint.

TypeScript
interface KeyHintProps
KeyHintProps properties
NameTypeDescription
className?string

Classes merged on the root.

size?'sm' | 'md'

sm for dense rows (footer hints), md (default) for lists.

specstring

The binding spec (cmd+k, ctrl+w | cmd+w).

style?CSSProperties

Styles on the root.

ui/src/keybindings/KeyHint.tsx:14

PressChordOptionsInterface#

Options of pressChord.

TypeScript
interface PressChordOptions
PressChordOptions properties
NameTypeDescription
mac?boolean

Resolve mod to cmd. Default: this platform's.

target?EventTarget

Where the key goes. Default: the focused element, else the body.

ui/src/keybindings/press.ts:47

Types#

KeybindingHandlersType#

A handler per action the caller binds.

TypeScript
type KeybindingHandlers = KeyCommands

ui/src/keybindings/KeybindingsProvider.tsx:111