Ir al contenido
sebs7n-ui2.10.0
Superposiciones

ShortcutsDialog

La hoja de atajos de teclado: un diálogo con lo que hace cada tecla, con Kbd. Solo la hoja: el atajo que la abre lo registra la app.

Ver como .mdVer el código
import { ShortcutsDialog } from "sebs7n-ui/shortcuts-dialog"

Ejemplos

Abierta con «?»

La hoja es solo el diálogo: el atajo lo registra la app con `useKeySequence`. Probalo con el foco fuera de un campo: «?» la abre y «g» y «f» navegan (acá, solo lo anuncian).

import { Button } from "sebs7n-ui/button"
import { Kbd } from "sebs7n-ui/kbd"
import { ShortcutsDialog } from "sebs7n-ui/shortcuts-dialog"
import { useKeySequence } from "sebs7n-ui/lib/use-key-sequence"
import { useState } from "react"

function Sheet() {
  const [open, setOpen] = useState(false)
  const [last, setLast] = useState("—")
  useKeySequence({
    "?": () => setOpen(true),
    "g i": () => setLast("Inicio"),
    "g f": () => setLast("Facturas"),
    "g c": () => setLast("Clientes"),
  })
  return (
    <div className="flex flex-col items-start gap-3">
      <Button onClick={() => setOpen(true)} variant="secondary">
        Ver atajos <Kbd size="sm">?</Kbd>
      </Button>
      <p aria-live="polite" className="text-callout text-label-secondary">
        Última navegación por teclado: {last}
      </p>
      <ShortcutsDialog onOpenChange={setOpen} open={open} shortcuts={SHORTCUTS} />
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

ShortcutsDialog

PropTipoPor defectoDescripción
onOpenChange*(open: boolean) => void—Avisa que se pidió abrirla o cerrarla (Escape, click afuera).
open*boolean—Si la hoja está abierta.
shortcuts*readonly ShortcutItem[]—Los atajos, en el orden en que se muestran: { keys, label, sequence? }.
descriptionReact.ReactNode—La bajada del diálogo, para explicar lo que no se ve en la lista. Por defecto, labels.description.
labelsPartial<ShortcutsLabels>—Textos: title, description, list y then. Por defecto, shortcutsLabels.
classNamestring—Clases del contenido del diálogo.

Teclado

Escape
Cierra el diálogo y devuelve el foco.
Tab
Queda adentro del diálogo.

Accesibilidad

  • Es un Dialog: título, descripción y foco atrapado vienen resueltos. La lista es una <ul> con nombre (labels.list).
  • Las teclas de una secuencia (sequence: «g» y enseguida «i») se leen con «luego» en el medio; las que van juntas («⌘» y «K») se leen seguidas.

Reglas de uso

  • El componente no escucha el teclado. ?, ⌘K y g + letra los registra la app, en el layout, con useKeySequence de sebs7n-ui/lib/use-key-sequence: useKeySequence({ "?": () => setOpen(true), "g i": () => router.push("/inicio") }). Ahí mismo se pasa open.
  • Una sola lista, shortcuts: [{ keys, label, sequence? }], alimenta la hoja, el mapa del hook y los ítems de CommandPalette (con la descripción «g luego f»): así nunca se desfasan.
  • useKeySequence no dispara con ⌘, Ctrl o Alt apretados, ni mientras el foco está en un campo, un diálogo, una lista o un menú; un atajo dura 1,2 s entre tecla y tecla (timeout). Para ⌘K, un keydown propio: el hook es para teclas sueltas y secuencias.
  • Solo por subpath (sebs7n-ui/shortcuts-dialog).

Relacionados

KbdDialogCommandPalette