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

* add optional `start` and `end` events to `useTransitionData`

This will be used when we implement the `<Transition />` component
purely using the `useTransitionData` information. But because there is a
hierarchy between `<Transition />` and `<TransitionChild />` we need to
know when transitions start and end.

* implement `<Transition />` and `<TransitionChild />` on top of `useTransitionData()`

* update tests

Due to a timing issue bug, we updated the snapshot tests in
#3273 incorrectly so this
commit fixes that which is why there are a lot of changes.

Most tests have `show={true}` but not `appear` which means that they
should _not_ transition which means that no data attributes should be
present.

* wait a microTask to ensure that `prepare()` has the time to render

Now that we set state instead of mutating the DOM directly we need to
wait a tiny bit and then we can trigger the transition to ensure
a smooth transition.

* cleanup `prepareTransition` now that it returns a cleanup function

* move `waitForTransition` and `prepareTransition` into `useTransitionData`

* remove existing `useTransition` hook and related utilities

* rename `useTransitionData` to `useTransition`

* update changelog

* Update packages/@headlessui-react/src/components/transition/transition.tsx

Co-authored-by: Jordan Pittman <[email protected]>

* add missing `TransitionState.Enter`

This makes sure that the `Enter` state is applied initially when it has
to.

This also means that we can simplify the `prepareTransition` code again
because we don't need to wait for the next microTask which made sure
`TransitionState.Enter` was available.

* add transition playground page with both APIs

* update tests to reflect latest bug fix

---------

Co-authored-by: Jordan Pittman <[email protected]>

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use `useId` instead of React internals (for React 19 compatibility) ([#3254](https://github.com/tailwindlabs/headlessui/pull/3254))
 - Ensure `ComboboxInput` does not sync with current value while typing ([#3259](https://github.com/tailwindlabs/headlessui/pull/3259))
 - Cancel outside click behavior on touch devices when scrolling ([#3266](https://github.com/tailwindlabs/headlessui/pull/3266))
+- Correctly apply conditional classses when using `<Transition />` and `<TransitionChild />` components ([#3303](https://github.com/tailwindlabs/headlessui/pull/3303))
 
 ### Changed
 

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -41,7 +41,7 @@ import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { useScrollLock } from '../../hooks/use-scroll-lock'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { useTransitionData, type TransitionData } from '../../hooks/use-transition-data'
+import { useTransition, type TransitionData } from '../../hooks/use-transition'
 import { useTreeWalker } from '../../hooks/use-tree-walker'
 import { useWatch } from '../../hooks/use-watch'
 import { useDisabled } from '../../internal/disabled'
@@ -1610,7 +1610,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   let ownerDocument = useOwnerDocument(data.optionsRef)
 
   let usesOpenClosedState = useOpenClosed()
-  let [visible, transitionData] = useTransitionData(
+  let [visible, transitionData] = useTransition(
     transition,
     data.optionsRef,
     usesOpenClosedState !== null

packages/@headlessui-react/src/components/disclosure/disclosure.tsx

@@ -24,7 +24,7 @@ import { useEvent } from '../../hooks/use-event'
 import { useId } from '../../hooks/use-id'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { optionalRef, useSyncRefs } from '../../hooks/use-sync-refs'
-import { useTransitionData, type TransitionData } from '../../hooks/use-transition-data'
+import { useTransition, type TransitionData } from '../../hooks/use-transition'
 import { CloseProvider } from '../../internal/close-provider'
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
 import type { Props } from '../../types'
@@ -458,7 +458,7 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
   }, [id, dispatch])
 
   let usesOpenClosedState = useOpenClosed()
-  let [visible, transitionData] = useTransitionData(
+  let [visible, transitionData] = useTransition(
     transition,
     state.panelRef,
     usesOpenClosedState !== null

packages/@headlessui-react/src/components/listbox/listbox.tsx

@@ -42,7 +42,7 @@ import { useScrollLock } from '../../hooks/use-scroll-lock'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { useTextValue } from '../../hooks/use-text-value'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { useTransitionData, type TransitionData } from '../../hooks/use-transition-data'
+import { useTransition, type TransitionData } from '../../hooks/use-transition'
 import { useDisabled } from '../../internal/disabled'
 import {
   FloatingProvider,
@@ -919,7 +919,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   let ownerDocument = useOwnerDocument(data.optionsRef)
 
   let usesOpenClosedState = useOpenClosed()
-  let [visible, transitionData] = useTransitionData(
+  let [visible, transitionData] = useTransition(
     transition,
     data.optionsRef,
     usesOpenClosedState !== null

packages/@headlessui-react/src/components/menu/menu.tsx

@@ -37,7 +37,7 @@ import { useScrollLock } from '../../hooks/use-scroll-lock'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { useTextValue } from '../../hooks/use-text-value'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { useTransitionData, type TransitionData } from '../../hooks/use-transition-data'
+import { useTransition, type TransitionData } from '../../hooks/use-transition'
 import { useTreeWalker } from '../../hooks/use-tree-walker'
 import {
   FloatingProvider,
@@ -612,7 +612,7 @@ function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
   }
 
   let usesOpenClosedState = useOpenClosed()
-  let [visible, transitionData] = useTransitionData(
+  let [visible, transitionData] = useTransition(
     transition,
     state.itemsRef,
     usesOpenClosedState !== null

packages/@headlessui-react/src/components/popover/popover.tsx

@@ -36,7 +36,7 @@ import { useMainTreeNode, useRootContainers } from '../../hooks/use-root-contain
 import { useScrollLock } from '../../hooks/use-scroll-lock'
 import { optionalRef, useSyncRefs } from '../../hooks/use-sync-refs'
 import { Direction as TabDirection, useTabDirection } from '../../hooks/use-tab-direction'
-import { useTransitionData, type TransitionData } from '../../hooks/use-transition-data'
+import { useTransition, type TransitionData } from '../../hooks/use-transition'
 import { CloseProvider } from '../../internal/close-provider'
 import {
   FloatingProvider,
@@ -750,7 +750,7 @@ function OverlayFn<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(
   let overlayRef = useSyncRefs(ref, internalOverlayRef)
 
   let usesOpenClosedState = useOpenClosed()
-  let [visible, transitionData] = useTransitionData(
+  let [visible, transitionData] = useTransition(
     transition,
     internalOverlayRef,
     usesOpenClosedState !== null
@@ -862,7 +862,7 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
   }, [id, dispatch])
 
   let usesOpenClosedState = useOpenClosed()
-  let [visible, transitionData] = useTransitionData(
+  let [visible, transitionData] = useTransition(
     transition,
     internalPanelRef,
     usesOpenClosedState !== null

packages/@headlessui-react/src/components/transition/__snapshots__/transition.test.tsx.snap

@@ -4,29 +4,11 @@ exports[`Setup API nested should be possible to change the underlying DOM tag of
 <div
   class="My Page"
 >
-  <article
-    data-closed=""
-    data-enter=""
-    data-headlessui-state="closed enter transition"
-    data-transition=""
-    style=""
-  >
-    <aside
-      data-closed=""
-      data-enter=""
-      data-headlessui-state="closed enter transition"
-      data-transition=""
-      style=""
-    >
+  <article>
+    <aside>
       Sidebar
     </aside>
-    <section
-      data-closed=""
-      data-enter=""
-      data-headlessui-state="closed enter transition"
-      data-transition=""
-      style=""
-    >
+    <section>
       Content
     </section>
   </article>
@@ -37,29 +19,11 @@ exports[`Setup API nested should be possible to change the underlying DOM tag of
 <div
   class="My Page"
 >
-  <div
-    data-closed=""
-    data-enter=""
-    data-headlessui-state="closed enter transition"
-    data-transition=""
-    style=""
-  >
-    <aside
-      data-closed=""
-      data-enter=""
-      data-headlessui-state="closed enter transition"
-      data-transition=""
-      style=""
-    >
+  <div>
+    <aside>
       Sidebar
     </aside>
-    <section
-      data-closed=""
-      data-enter=""
-      data-headlessui-state="closed enter transition"
-      data-transition=""
-      style=""
-    >
+    <section>
       Content
     </section>
   </div>
@@ -70,29 +34,11 @@ exports[`Setup API nested should be possible to nest transition components 1`] =
 <div
   class="My Page"
 >
-  <div
-    data-closed=""
-    data-enter=""
-    data-headlessui-state="closed enter transition"
-    data-transition=""
-    style=""
-  >
-    <div
-      data-closed=""
-      data-enter=""
-      data-headlessui-state="closed enter transition"
-      data-transition=""
-      style=""
-    >
+  <div>
+    <div>
       Sidebar
     </div>
-    <div
-      data-closed=""
-      data-enter=""
-      data-headlessui-state="closed enter transition"
-      data-transition=""
-      style=""
-    >
+    <div>
       Content
     </div>
   </div>
@@ -103,26 +49,11 @@ exports[`Setup API nested should be possible to use render props on the Transiti
 <div
   class="My Page"
 >
-  <article
-    data-closed=""
-    data-enter=""
-    data-headlessui-state="closed enter transition"
-    data-transition=""
-  >
-    <aside
-      data-closed=""
-      data-enter=""
-      data-headlessui-state="closed enter transition"
-      data-transition=""
-    >
+  <article>
+    <aside>
       Sidebar
     </aside>
-    <section
-      data-closed=""
-      data-enter=""
-      data-headlessui-state="closed enter transition"
-      data-transition=""
-    >
+    <section>
       Content
     </section>
   </article>
@@ -133,27 +64,11 @@ exports[`Setup API nested should be possible to use render props on the Transiti
 <div
   class="My Page"
 >
-  <div
-    data-closed=""
-    data-enter=""
-    data-headlessui-state="closed enter transition"
-    data-transition=""
-    style=""
-  >
-    <aside
-      data-closed=""
-      data-enter=""
-      data-headlessui-state="closed enter transition"
-      data-transition=""
-    >
+  <div>
+    <aside>
       Sidebar
     </aside>
-    <section
-      data-closed=""
-      data-enter=""
-      data-headlessui-state="closed enter transition"
-      data-transition=""
-    >
+    <section>
       Content
     </section>
   </div>
@@ -167,37 +82,21 @@ exports[`Setup API nested should yell at us when we forgot to forward a ref on t
 exports[`Setup API nested should yell at us when we forgot to forward the ref on one of the Transition.Child components 1`] = `"Did you forget to passthrough the \`ref\` to the actual DOM node?"`;
 
 exports[`Setup API shallow should be possible to change the underlying DOM tag 1`] = `
-<span
-  data-closed=""
-  data-enter=""
-  data-headlessui-state="closed enter transition"
-  data-transition=""
-  style=""
->
+<span>
   Children
 </span>
 `;
 
 exports[`Setup API shallow should be possible to use a render prop 1`] = `
-<span
-  data-closed=""
-  data-enter=""
-  data-headlessui-state="closed enter transition"
-  data-transition=""
->
+<span>
   Children
 </span>
 `;
 
 exports[`Setup API shallow should passthrough all the props (that we do not use internally) 1`] = `
 <div
   class="text-blue-400"
-  data-closed=""
-  data-enter=""
-  data-headlessui-state="closed enter transition"
-  data-transition=""
   id="root"
-  style=""
 >
   Children
 </div>
@@ -206,25 +105,14 @@ exports[`Setup API shallow should passthrough all the props (that we do not use
 exports[`Setup API shallow should passthrough all the props (that we do not use internally) even when using an \`as\` prop 1`] = `
 <a
   class="text-blue-400"
-  data-closed=""
-  data-enter=""
-  data-headlessui-state="closed enter transition"
-  data-transition=""
   href="/"
-  style=""
 >
   Children
 </a>
 `;
 
 exports[`Setup API shallow should render another component if the \`as\` prop is used and its children by default 1`] = `
-<a
-  data-closed=""
-  data-enter=""
-  data-headlessui-state="closed enter transition"
-  data-transition=""
-  style=""
->
+<a>
   Children
 </a>
 `;
@@ -234,13 +122,7 @@ exports[`Setup API shallow should render nothing when the show prop is false 1`]
 exports[`Setup API shallow should yell at us when we forget to forward the ref when using a render prop 1`] = `"Did you forget to passthrough the \`ref\` to the actual DOM node?"`;
 
 exports[`Setup API transition classes should be possible to passthrough the transition classes 1`] = `
-<div
-  data-closed=""
-  data-enter=""
-  data-headlessui-state="closed enter transition"
-  data-transition=""
-  style=""
->
+<div>
   Children
 </div>
 `;
@@ -249,7 +131,9 @@ exports[`Setup API transition classes should be possible to passthrough the tran
 <div
   class="enter enter-from"
   data-closed=""
-  data-headlessui-state="closed"
+  data-enter=""
+  data-headlessui-state="closed enter transition"
+  data-transition=""
   style=""
 >
   Children

packages/@headlessui-react/src/components/transition/transition.test.tsx

@@ -358,11 +358,6 @@ describe('Setup API', () => {
           <div
             class="foo1
         foo2"
-            data-closed=""
-            data-enter=""
-            data-headlessui-state="closed enter transition"
-            data-transition=""
-            style=""
           >
             Children
           </div>
@@ -371,20 +366,16 @@ describe('Setup API', () => {
 
       await click(getByText('toggle'))
 
-      // TODO: This is not quite right
-      // The `foo1\nfoo2` should be gone
-      // I think this is a quirk of JSDOM
       expect(container.firstChild).toMatchInlineSnapshot(`
          <div>
            <button>
              toggle
            </button>
            <div
              class="foo1
-         foo2 foo1 foo2 leave"
-             data-closed=""
-             data-enter=""
-             data-headlessui-state="closed enter transition"
+         foo2 leave"
+             data-headlessui-state="leave transition"
+             data-leave=""
              data-transition=""
              style=""
            >