componente · @solu30/ui-kit/feedback
AlertDialogContent
El panel, en un portal a document.body y con el foco atrapado. NO se cierra solo: ni Escape ni clic en el fondo, porque el punto de este diálogo es exigir una elección. Se sale por AlertDialogAction o por AlertDialogCancel. manageHistory decide si además consume una entrada del historial (ADR-262).
36 sitios de import en 3 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- cmp-packages
- dietaly
- gestorsalon
La parte, adentro de su padre
Cargando el espécimen…
export function AlertDialogMatrix() {
return (
<Stage label="AlertDialog · no dismissable, a propósito" tall wide>
<Row>
<AlertDialogCancelar />
<AlertDialogVaciar />
</Row>
</Stage>
)
}De specimens/feedback.tsx · AlertDialogMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.
AlertDialogContent es una parte de AlertDialog: sola no significa nada. Así que el escenario monta el padre completo, y lo que se ve incluye más piezas que la de esta ficha.
Cómo se usa
import { AlertDialogContent } from '@solu30/ui-kit/feedback'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| children | sí | ReactNode | — |
| className | opcional | string | — |
| manageHistory | opcional | boolean | Si este diálogo maneja su propia entrada de `window.history` (pushState al abrir). Default `true` — sin cambios de comportamiento para consumidores existentes. Poné `false` cuando el diálogo se abre ANIDADO dentro de un overlay URL-driven (Next.js App Router: `?param=` + `router.push`/`searchParams`): el pushState propio del kit mete una entrada espuria en el historial y "atrás" necesita un press de más para cerrar lo de afuera (ADR-262). OJO — a diferencia del resto de los overlays del kit, un AlertDialog es deliberadamente no-dismissable (sin Escape ni click en el backdrop: exige una acción explícita), así que su callback de cierre es un no-op. Con el default `true` eso hace que "atrás" quede TRAGADO mientras está abierto (no cierra el diálogo y tampoco navega). Si te importa que "atrás" siga vivo, pasá `false`. @default true |
Ejemplo del paquete
<AlertDialogContent>
<AlertDialogHeader><AlertDialogTitle>¿Borrar?</AlertDialogTitle></AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancelar</AlertDialogCancel>
<AlertDialogAction onClick={borrar}>Borrar</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.