Headless UI v2.1: API de transición simplificada y soporte mejorado para múltiples diálogos

Acabamos de lanzar Headless UI v2.1 para React, que simplifica drásticamente nuestras APIs de transición y agrega soporte para renderizar múltiples diálogos como hermanos.

API de transición simplificada

Hemos facilitado mucho las transiciones en la v2.1 agregando una nueva prop transition a todos los componentes integrados que quizás quieras transicionar, y agregando atributos de datos para cada etapa de la transición para que puedas agregar estilos de transición simplemente lanzando algunas clases en el elemento de destino:

import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
function Example() {
  return (
    <Menu>
      <MenuButton>Mi cuenta</MenuButton>
      <MenuItems
        transition
        className={`
          transition ease-out
          data-[closed]:scale-95 data-[closed]:opacity-0
          data-[enter]:duration-200 data-[leave]:duration-300
        `}
      >
        {/* Elementos del menú… */}
      </MenuItems>
    </Menu>
  );
}

Hay cuatro atributos de datos que puedes usar para apuntar a las diferentes etapas de tus transiciones:

• data-closed: Los estilos desde los que el elemento debe transicionar al entrar y hacia los que debe transicionar al salir.
• data-enter: Estilos para aplicar mientras el elemento está entrando, como una duración o una curva de easing.
• data-leave: Estilos para aplicar mientras el elemento está saliendo, como una duración o una curva de easing.
• data-transition: Estilos para aplicar mientras el elemento está entrando o saliendo, útil para compartir valores entre ambas etapas.

Puedes incluso apilar estos atributos para usar diferentes estilos closed para entrar y salir. Por ejemplo, este diálogo se desliza desde la izquierda, pero se desliza hacia la derecha:

import { Dialog } from "@headlessui/react";
import { useState } from "react";
function Example() {
  let [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Abrir diálogo</button>
      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
        transition
        className={`
          transition duration-300 ease-out
          data-[closed]:opacity-0
          data-[closed]:data-[enter]:-translate-x-8
          data-[closed]:data-[leave]:translate-x-8
        `}
      >
        {/* Contenido del diálogo… */}
      </Dialog>
    </>
  );
}

Y para transicionar elementos HTML regulares u otros componentes, todavía puedes usar el componente <Transition> pero con las nuevas APIs de atributos de datos:

import { Transition } from "@headlessui/react";
import { useState } from "react";
function Example() {
  const [isShowing, setIsShowing] = useState(false);
  return (
    <>
      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>Alternar</button>
      <Transition show={isShowing}>
        <div className="transition duration-300 data-[closed]:opacity-0">Apareceré y desapareceré gradualmente</div>
      </Transition>
    </>
  );
}

Ya hemos actualizado todo Tailwind UI para usar esta nueva API de transición y el código es mucho más simple y ligero. Echa un vistazo a los componentes Modal Dialog, Dropdown, Slide-over, Flyout Menu, o Select Menu para más ejemplos.

Todas las APIs existentes continúan funcionando para compatibilidad hacia atrás, pero este nuevo enfoque es lo que vamos a recomendar en adelante.

Consulta la documentación actualizada del Transition component para obtener más información.

Renderizar múltiples diálogos como hermanos

En Headless UI v2.1 finalmente puedes renderizar múltiples diálogos al mismo tiempo sin anidar uno dentro del otro.

Esto puede ser realmente útil cuando dos partes no relacionadas de tu aplicación necesitan mostrar un diálogo al mismo tiempo — por ejemplo, quizás ya tengas abierto algún tipo de diálogo de confirmación pero otra parte de tu aplicación detecta que has perdido la conectividad de red o tu sesión ha expirado y necesita mostrar un nuevo diálogo encima.

Así es como podría verse algo así con Catalyst, el kit de interfaz de usuario de aplicación en el que hemos estado trabajando recientemente:

Mantenemos un registro del orden en que se abre cada diálogo, y el que se abrió último es el que se cerrará cuando presiones escape o hagas clic fuera del diálogo.

Para empezar a usar esto hoy, simplemente instala la última versión de Headless UI:

npm i @headlessui/react@latest

Si tienes algún problema, ¡háznoslo saber en GitHub!