componente · @solu30/ui-kit/feedback

AlertDialog

Diálogo que no se cierra con Escape ni con clic afuera: obliga a elegir una de sus dos acciones.

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

El componente, montado

Cargando el espécimen…

Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.

Cómo se usa

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@solu30/ui-kit/feedback'

<AlertDialog open={abierto} onOpenChange={setAbierto}>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>¿Cancelar la reserva?</AlertDialogTitle>
      <AlertDialogDescription>La seña no se devuelve.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Volver</AlertDialogCancel>
      <AlertDialogAction>Cancelar la reserva</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Anatomía

Las partes que componen AlertDialog se importan del mismo subpath. Sueltas no significan nada: se montan siempre dentro de su padre.

AlertDialog
├── AlertDialogAction
├── AlertDialogCancel
├── AlertDialogContent
├── AlertDialogDescription
├── AlertDialogFooter
├── AlertDialogHeader
├── AlertDialogTitle
└── AlertDialogTrigger

Props

3 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
open	opcional	`boolean`	—
onOpenChange	opcional	`(open: boolean) => void`	—
children	sí	`ReactNode`	—

Acción irreversible

Para pedir confirmación antes de una acción que no se puede deshacer y además notifica a alguien afuera del sistema —acá, avisarle al cliente—. A diferencia de «Dialog», un «AlertDialog» no se cierra con Escape ni haciendo click afuera: exige que el usuario elija un botón a propósito.

Cargando el espécimen…

export function AlertDialogCancelar() {
  const [cancelOpen, setCancelOpen] = useState(false)
  const cancelFocus = useFocusReturnCheck()
  const closeCancel = () => {
    setCancelOpen(false)
    cancelFocus.notifyClosed()
  }

  return (
    <div className="flex flex-col items-center gap-1.5">
      <AlertDialog open={cancelOpen} onOpenChange={(next) => (next ? setCancelOpen(true) : closeCancel())}>
        <AlertDialogTrigger asChild>
          <TriggerButton tone="danger" onClick={(e) => cancelFocus.openFrom(e, () => {})}>
            Cancelar reserva del sábado
          </TriggerButton>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>¿Cancelar la reserva del sábado 21:00?</AlertDialogTitle>
            <AlertDialogDescription>
              Se libera el salón y se notifica al cliente por WhatsApp. No se puede deshacer.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel asChild>
              <TriggerButton>Volver</TriggerButton>
            </AlertDialogCancel>
            <AlertDialogAction asChild>
              <TriggerButton tone="danger">Cancelar reserva</TriggerButton>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <FocusReturnNote result={cancelFocus.result} />
    </div>
  )
}

De specimens/feedback.tsx · AlertDialogCancelar: 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.

Pérdida de datos

Para confirmar antes de descartar datos ya cargados que no se guardaron en ningún lado — perderlos es instantáneo y no hay forma de deshacerlo. Mismo comportamiento no descartable que el resto del componente: ni Escape ni click afuera lo cierran.

Cargando el espécimen…

export function AlertDialogVaciar() {
  const [clearOpen, setClearOpen] = useState(false)
  const clearFocus = useFocusReturnCheck()
  const closeClear = () => {
    setClearOpen(false)
    clearFocus.notifyClosed()
  }

  return (
    <div className="flex flex-col items-center gap-1.5">
      <AlertDialog open={clearOpen} onOpenChange={(next) => (next ? setClearOpen(true) : closeClear())}>
        <AlertDialogTrigger asChild>
          <TriggerButton onClick={(e) => clearFocus.openFrom(e, () => {})}>Vaciar el pedido</TriggerButton>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>¿Vaciar el pedido en curso?</AlertDialogTitle>
            <AlertDialogDescription>
              Se pierden los 3 combos ya cargados en el pedido #482.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel asChild>
              <TriggerButton>Seguir cargando</TriggerButton>
            </AlertDialogCancel>
            <AlertDialogAction asChild>
              <TriggerButton>Vaciar pedido</TriggerButton>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <FocusReturnNote result={clearFocus.result} />
    </div>
  )
}

De specimens/feedback.tsx · AlertDialogVaciar: 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.

Ejemplo del paquete

// El que NO se cierra al hacer click afuera: la decisión hay que tomarla.
<AlertDialog open={abierto} onOpenChange={setAbierto}>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>¿Borrar la reserva?</AlertDialogTitle>
      <AlertDialogDescription>No se puede deshacer.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancelar</AlertDialogCancel>
      <AlertDialogAction onClick={borrar}>Borrar</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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.