search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.02k stars 1.03k forks source link

Implement `<Transition />` and `<TransitionChild />` on top of data attributes #3303

Closed RobinMalfait closed 1 week ago

RobinMalfait commented 1 week ago

This PR is mainly a refactor to implement the <Transition /> and <TransitionChild /> components on top of the data attribute implementation. The big difference is that there is no direct DOM mutation anymore, but just applying data attributes to the underlying element.

This also means that the <Transition /> and useTransitionData() don't have 2 separate paths for controlling the transition, but there is only a single source of truth.

This PR also renames the useTransitionData() to useTransition() and removed the original useTransition().

Because of the refactor and not relying on direct DOM mutations we can use React to declaratively provide the correct state instead of doing it imperatively by mutating directly. Which in turn fixes an issue: #3277

From an API perspective nothing changes, it's purely an internal refactor.

Fixes: #3277

vercel[bot] commented 1 week ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2024 9:41pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 19, 2024 9:41pm