From 8fa5caf0dcbcbd2ccd2ea3164e2a177a33a0aa61 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 19 Apr 2024 16:15:11 +0200
Subject: [PATCH] Change default tag from `div` to `Fragment` on `Transition`
 components (#3110)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* use `Fragment` as the default element for `Transition` components

* update tests to reflect default tag change

* only error on missing `ref` if it's actually required

If the `<Transition />` component "root" is used as a root placeholder
(for state management) and not making actual transitions itself, then we
don't require a `ref` element.

* add test to ensure we don't error on missing `ref` when not required

+ add `className="…"` to some places to indicate that we _do_ want to
  perform a transition and thus have to fail if the `ref` is missing.

* improve `requiresRef` check

Also ensure that a ref is required if the `as` prop is provided and
it's not a `Fragment`

* add `shouldForwardRef` helper

* fix broken tests

These tests were rendering a `Debug` element that didn't render any DOM
nodes. Adding `as="div"` ensures that we are forwarding the ref
correctly.

* update changelog

* update playgrounds to reflect tag change

* Tweak changelog

---------

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
---
 packages/@headlessui-react/CHANGELOG.md       |   1 +
 .../components/disclosure/disclosure.test.tsx |   2 +-
 .../src/components/popover/popover.test.tsx   |   2 +-
 .../__snapshots__/transition.test.tsx.snap    |   6 -
 .../components/transition/transition.test.tsx | 150 ++++++++++++------
 .../src/components/transition/transition.tsx  |  54 ++++++-
 .../pages/dialog/dialog-scroll-issue.tsx      |   5 +-
 playgrounds/react/pages/dialog/dialog.tsx     |   5 +-
 .../react/pages/dialog/scrollable-dialog.tsx  |   6 +-
 .../dialog/scrollable-page-with-dialog.tsx    |   5 +-
 .../listbox/listbox-with-pure-tailwind.tsx    |   3 +-
 .../react/pages/menu/menu-with-transition.tsx |   2 -
 playgrounds/react/pages/popover/popover.tsx   |   3 +-
 .../react/pages/transitions/appear.tsx        |   8 +
 .../component-examples/dropdown.tsx           |   1 +
 .../transitions/component-examples/modal.tsx  |   2 +
 .../component-examples/nested/hidden.tsx      |   2 +-
 .../component-examples/nested/unmount.tsx     |   3 +-
 .../component-examples/peek-a-boo.tsx         |   1 +
 .../full-page-transition.tsx                  |   1 +
 .../layout-with-sidebar.tsx                   |   4 +-
 .../pages/transitions/react-hot-toast.tsx     |   1 +
 22 files changed, 182 insertions(+), 85 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 5017d60..c7de497 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use native `useId` and `useSyncExternalStore` hooks ([#3092](https://github.com/tailwindlabs/headlessui/pull/3092))
 - Use `absolute` as the default Floating UI strategy ([#3097](https://github.com/tailwindlabs/headlessui/pull/3097))
 - Change default tags for `ListboxOptions`, `ListboxOption`, `ComboboxOptions`, `ComboboxOption` and `TabGroup` components ([#3109](https://github.com/tailwindlabs/headlessui/pull/3109))
+- Change default tag from `div` to `Fragment` on `Transition` components ([#3110](https://github.com/tailwindlabs/headlessui/pull/3110))
 
 ### Added
 
diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
index 36a5896..2c7aeb2 100644
--- a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
+++ b/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
@@ -597,7 +597,7 @@ describe('Composition', () => {
           <Transition>
             <Debug name="Transition" fn={orderFn} />
             <Disclosure.Panel>
-              <Transition.Child>
+              <Transition.Child as="div">
                 <Debug name="Transition.Child" fn={orderFn} />
               </Transition.Child>
             </Disclosure.Panel>
diff --git a/packages/@headlessui-react/src/components/popover/popover.test.tsx b/packages/@headlessui-react/src/components/popover/popover.test.tsx
index 6fff12f..d11610a 100644
--- a/packages/@headlessui-react/src/components/popover/popover.test.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.test.tsx
@@ -977,7 +977,7 @@ describe('Composition', () => {
           <Transition>
             <Debug name="Transition" fn={orderFn} />
             <Popover.Panel>
-              <Transition.Child>
+              <Transition.Child as="div">
                 <Debug name="Transition.Child" fn={orderFn} />
               </Transition.Child>
             </Popover.Panel>
diff --git a/packages/@headlessui-react/src/components/transition/__snapshots__/transition.test.tsx.snap b/packages/@headlessui-react/src/components/transition/__snapshots__/transition.test.tsx.snap
index 1555d03..c00a201 100644
--- a/packages/@headlessui-react/src/components/transition/__snapshots__/transition.test.tsx.snap
+++ b/packages/@headlessui-react/src/components/transition/__snapshots__/transition.test.tsx.snap
@@ -111,12 +111,6 @@ exports[`Setup API shallow should passthrough all the props (that we do not use
 </a>
 `;
 
-exports[`Setup API shallow should render a div and its children by default 1`] = `
-<div>
-  Children
-</div>
-`;
-
 exports[`Setup API shallow should render another component if the \`as\` prop is used and its children by default 1`] = `
 <a>
   Children
diff --git a/packages/@headlessui-react/src/components/transition/transition.test.tsx b/packages/@headlessui-react/src/components/transition/transition.test.tsx
index ac4adfa..7ce2b03 100644
--- a/packages/@headlessui-react/src/components/transition/transition.test.tsx
+++ b/packages/@headlessui-react/src/components/transition/transition.test.tsx
@@ -1,5 +1,5 @@
 import { act as _act, fireEvent, render } from '@testing-library/react'
-import React, { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { getByText } from '../../test-utils/accessibility-assertions'
 import { executeTimeline } from '../../test-utils/execute-timeline'
 import { click } from '../../test-utils/interactions'
@@ -22,7 +22,7 @@ function nextFrame() {
 it('should not steal the ref from the child', async () => {
   let fn = jest.fn()
   render(
-    <Transition show={true} as={Fragment}>
+    <Transition show={true}>
       <div ref={fn}>...</div>
     </Transition>
   )
@@ -40,11 +40,6 @@ it('should render without crashing', () => {
   )
 })
 
-it('should be possible to render a Transition without children', () => {
-  render(<Transition show={true} className="transition" />)
-  expect(document.getElementsByClassName('transition')).not.toBeNull()
-})
-
 it(
   'should yell at us when we forget the required show prop',
   suppressConsoleLogs(() => {
@@ -62,16 +57,15 @@ it(
 
 describe('Setup API', () => {
   describe('shallow', () => {
-    it('should render a div and its children by default', () => {
-      let { container } = render(<Transition show={true}>Children</Transition>)
-
-      expect(container.firstChild).toMatchSnapshot()
-    })
-
     it('should passthrough all the props (that we do not use internally)', () => {
       let { container } = render(
+        /**
+         * Renders a Fragment by default and forwards props. But not possible to
+         * type in TypeScript land. This is also discouraged, but it works.
+         */
+        // @ts-expect-error
         <Transition show={true} id="root" className="text-blue-400">
-          Children
+          <div>Children</div>
         </Transition>
       )
 
@@ -99,7 +93,11 @@ describe('Setup API', () => {
     })
 
     it('should render nothing when the show prop is false', () => {
-      let { container } = render(<Transition show={false}>Children</Transition>)
+      let { container } = render(
+        <Transition show={false}>
+          <div>Children</div>
+        </Transition>
+      )
 
       expect(container.firstChild).toMatchSnapshot()
     })
@@ -115,11 +113,7 @@ describe('Setup API', () => {
     })
 
     it('should be possible to use a render prop', () => {
-      let { container } = render(
-        <Transition show={true} as={Fragment}>
-          {() => <span>Children</span>}
-        </Transition>
-      )
+      let { container } = render(<Transition show={true}>{() => <span>Children</span>}</Transition>)
 
       expect(container.firstChild).toMatchSnapshot()
     })
@@ -135,7 +129,7 @@ describe('Setup API', () => {
 
         expect(() => {
           render(
-            <Transition show={true} as={Fragment}>
+            <Transition show={true} enter="duration-200">
               {() => <Dummy />}
             </Transition>
           )
@@ -153,7 +147,9 @@ describe('Setup API', () => {
         expect(() => {
           render(
             <div className="My Page">
-              <Transition.Child>Oops</Transition.Child>
+              <Transition.Child>
+                <div>Oops</div>
+              </Transition.Child>
             </div>
           )
         }).toThrowErrorMatchingSnapshot()
@@ -163,7 +159,9 @@ describe('Setup API', () => {
     it('should be possible to render a Transition.Child without children', () => {
       render(
         <Transition show={true}>
-          <Transition.Child className="transition" />
+          <Transition.Child>
+            <div className="transition" />
+          </Transition.Child>
         </Transition>
       )
       expect(document.getElementsByClassName('transition')).not.toBeNull()
@@ -172,7 +170,9 @@ describe('Setup API', () => {
     it('should be possible to use a Transition.Root and a Transition.Child', () => {
       render(
         <Transition.Root show={true}>
-          <Transition.Child className="transition" />
+          <Transition.Child>
+            <div className="transition" />
+          </Transition.Child>
         </Transition.Root>
       )
       expect(document.getElementsByClassName('transition')).not.toBeNull()
@@ -182,8 +182,14 @@ describe('Setup API', () => {
       let { container } = render(
         <div className="My Page">
           <Transition show={true}>
-            <Transition.Child>Sidebar</Transition.Child>
-            <Transition.Child>Content</Transition.Child>
+            <div>
+              <Transition.Child>
+                <div>Sidebar</div>
+              </Transition.Child>
+              <Transition.Child>
+                <div>Content</div>
+              </Transition.Child>
+            </div>
           </Transition>
         </div>
       )
@@ -195,8 +201,10 @@ describe('Setup API', () => {
       let { container } = render(
         <div className="My Page">
           <Transition show={true}>
-            <Transition.Child as="aside">Sidebar</Transition.Child>
-            <Transition.Child as="section">Content</Transition.Child>
+            <div>
+              <Transition.Child as="aside">Sidebar</Transition.Child>
+              <Transition.Child as="section">Content</Transition.Child>
+            </div>
           </Transition>
         </div>
       )
@@ -221,8 +229,10 @@ describe('Setup API', () => {
       let { container } = render(
         <div className="My Page">
           <Transition show={true}>
-            <Transition.Child as={Fragment}>{() => <aside>Sidebar</aside>}</Transition.Child>
-            <Transition.Child as={Fragment}>{() => <section>Content</section>}</Transition.Child>
+            <div>
+              <Transition.Child>{() => <aside>Sidebar</aside>}</Transition.Child>
+              <Transition.Child>{() => <section>Content</section>}</Transition.Child>
+            </div>
           </Transition>
         </div>
       )
@@ -233,13 +243,11 @@ describe('Setup API', () => {
     it('should be possible to use render props on the Transition and Transition.Child components', () => {
       let { container } = render(
         <div className="My Page">
-          <Transition show={true} as={Fragment}>
+          <Transition show={true}>
             {() => (
               <article>
-                <Transition.Child as={Fragment}>{() => <aside>Sidebar</aside>}</Transition.Child>
-                <Transition.Child as={Fragment}>
-                  {() => <section>Content</section>}
-                </Transition.Child>
+                <Transition.Child>{() => <aside>Sidebar</aside>}</Transition.Child>
+                <Transition.Child>{() => <section>Content</section>}</Transition.Child>
               </article>
             )}
           </Transition>
@@ -262,8 +270,14 @@ describe('Setup API', () => {
           render(
             <div className="My Page">
               <Transition show={true}>
-                <Transition.Child as={Fragment}>{() => <Dummy>Sidebar</Dummy>}</Transition.Child>
-                <Transition.Child as={Fragment}>{() => <Dummy>Content</Dummy>}</Transition.Child>
+                <div>
+                  <Transition.Child enter="duration-200">
+                    {() => <Dummy>Sidebar</Dummy>}
+                  </Transition.Child>
+                  <Transition.Child enter="duration-200">
+                    {() => <Dummy>Content</Dummy>}
+                  </Transition.Child>
+                </div>
               </Transition>
             </div>
           )
@@ -271,6 +285,28 @@ describe('Setup API', () => {
       })
     )
 
+    it(
+      'should not error when the `Transition` component does not contain any props that need to be forwarded',
+      suppressConsoleLogs(() => {
+        expect.assertions(1)
+
+        expect(() => {
+          render(
+            <div className="My Page">
+              <Transition show={true}>
+                <Transition.Child>
+                  <div>Sidebar</div>
+                </Transition.Child>
+                <Transition.Child>
+                  <div>Content</div>
+                </Transition.Child>
+              </Transition>
+            </div>
+          )
+        }).not.toThrow()
+      })
+    )
+
     it(
       'should yell at us when we forgot to forward a ref on the Transition component',
       suppressConsoleLogs(() => {
@@ -283,7 +319,7 @@ describe('Setup API', () => {
         expect(() => {
           render(
             <div className="My Page">
-              <Transition show={true} as={Fragment}>
+              <Transition show={true} enter="duration-200">
                 {() => (
                   <Dummy>
                     <Transition.Child>{() => <aside>Sidebar</aside>}</Transition.Child>
@@ -362,7 +398,7 @@ describe('Setup API', () => {
           leaveFrom="leave-from"
           leaveTo="leave-to"
         >
-          Children
+          <div>Children</div>
         </Transition>
       )
 
@@ -387,7 +423,7 @@ describe('Setup API', () => {
             leaveFrom="leave-from"
             leaveTo="leave-to"
           >
-            Children
+            <div>Children</div>
           </Transition>
         )
       }
@@ -732,10 +768,10 @@ describe('Transitions', () => {
 
               <Transition show={show}>
                 <Transition.Child leave="leave-fast" leaveFrom="leave-from" leaveTo="leave-to">
-                  I am fast
+                  <div>I am fast</div>
                 </Transition.Child>
                 <Transition.Child leave="leave-slow" leaveFrom="leave-from" leaveTo="leave-to">
-                  I am slow
+                  <div>I am slow</div>
                 </Transition.Child>
               </Transition>
 
@@ -781,11 +817,11 @@ describe('Transitions', () => {
                 <Transition.Child leave="leave-fast" leaveFrom="leave-from" leaveTo="leave-to">
                   <span>I am fast</span>
                   <Transition show={show} leave="leave-slow">
-                    I am my own root component and I don't talk to the parent
+                    <div>I am my own root component and I don't talk to the parent</div>
                   </Transition>
                 </Transition.Child>
                 <Transition.Child leave="leave-slow" leaveFrom="leave-from" leaveTo="leave-to">
-                  I am slow
+                  <div>I am slow</div>
                 </Transition.Child>
               </Transition>
 
@@ -953,12 +989,22 @@ describe('Events', () => {
             <style>{`.child-2-2.leave { transition-duration: ${leaveDuration * 2.5}ms; }`}</style>
 
             <Transition show={show} {...getProps('root')}>
-              <Transition.Child {...getProps('child-1')}>Child 1.</Transition.Child>
-              <Transition.Child {...getProps('child-2')}>
-                Child 2.
-                <Transition.Child {...getProps('child-2-1')}>Child 2.1.</Transition.Child>
-                <Transition.Child {...getProps('child-2-2')}>Child 2.2.</Transition.Child>
-              </Transition.Child>
+              <div>
+                <Transition.Child {...getProps('child-1')}>
+                  <div>Child 1.</div>
+                </Transition.Child>
+                <Transition.Child {...getProps('child-2')}>
+                  <div>
+                    <div>Child 2.</div>
+                    <Transition.Child {...getProps('child-2-1')}>
+                      <div>Child 2.1.</div>
+                    </Transition.Child>
+                    <Transition.Child {...getProps('child-2-2')}>
+                      <div>Child 2.2.</div>
+                    </Transition.Child>
+                  </div>
+                </Transition.Child>
+              </div>
             </Transition>
 
             <button
@@ -1104,7 +1150,9 @@ describe('Events', () => {
                 leave="leave-1"
                 leaveFrom="leave-from"
                 leaveTo="leave-to"
-              />
+              >
+                <div />
+              </Transition.Child>
               <Transition.Child
                 enter="enter-1"
                 enterFrom="enter-from"
diff --git a/packages/@headlessui-react/src/components/transition/transition.tsx b/packages/@headlessui-react/src/components/transition/transition.tsx
index de66b8a..ea10765 100644
--- a/packages/@headlessui-react/src/components/transition/transition.tsx
+++ b/packages/@headlessui-react/src/components/transition/transition.tsx
@@ -49,6 +49,44 @@ function splitClasses(classes: string = '') {
   return classes.split(/\s+/).filter((className) => className.length > 1)
 }
 
+/**
+ * Check if we should forward the ref to the child element or not. This is to
+ * prevent crashes when the `as` prop is a Fragment _and_ the component just acts
+ * as a state container (aka, there is no actual transition happening).
+ *
+ * E.g.:
+ *
+ * ```tsx
+ * <Transition show={true}>
+ *   <Transition.Child enter="duration-100"><div>Child 1</div></Transition.Child>
+ *   <Transition.Child enter="duration-200"><div>Child 2</div></Transition.Child>
+ * </Transition>
+ * ```
+ *
+ * In this scenario, the child components are transitioning, but the
+ * `Transition` parent, which is a `Fragment`, is not. So we should not forward
+ * the ref to the `Fragment`.
+ */
+function shouldForwardRef<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(
+  props: TransitionRootProps<TTag>
+) {
+  return (
+    // If we have any of the enter/leave classes
+    Boolean(
+      props.enter ||
+        props.enterFrom ||
+        props.enterTo ||
+        props.leave ||
+        props.leaveFrom ||
+        props.leaveTo
+    ) ||
+    // If the `as` prop is not a Fragment
+    (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== Fragment ||
+    // If we have a single child, then we can forward the ref directly
+    React.Children.count(props.children) === 1
+  )
+}
+
 interface TransitionContextValues {
   show: boolean
   appear: boolean
@@ -264,7 +302,7 @@ function useNesting(done?: () => void, parent?: NestingContextValues) {
 
 // ---
 
-let DEFAULT_TRANSITION_CHILD_TAG = 'div' as const
+let DEFAULT_TRANSITION_CHILD_TAG = Fragment
 type TransitionChildRenderPropArg = MutableRefObject<HTMLDivElement>
 let TransitionChildRenderFeatures = RenderFeatures.RenderStrategy
 
@@ -292,7 +330,9 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
     ...rest
   } = props as typeof props
   let container = useRef<HTMLElement | null>(null)
-  let transitionRef = useSyncRefs(container, ref)
+  let requiresRef = shouldForwardRef(props)
+
+  let transitionRef = useSyncRefs(...(requiresRef ? [container, ref] : ref === null ? [] : [ref]))
   let strategy = rest.unmount ?? true ? RenderStrategy.Unmount : RenderStrategy.Hidden
 
   let { show, appear, initial } = useTransitionContext()
@@ -342,10 +382,12 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
   let ready = useServerHandoffComplete()
 
   useIsoMorphicEffect(() => {
+    if (!requiresRef) return
+
     if (ready && state === TreeStates.Visible && container.current === null) {
       throw new Error('Did you forget to passthrough the `ref` to the actual DOM node?')
     }
-  }, [container, state, ready])
+  }, [container, state, ready, requiresRef])
 
   // Skipping initial transition
   let skip = initial && !appear
@@ -495,7 +537,11 @@ function TransitionRootFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_C
   // @ts-expect-error
   let { show, appear = false, unmount = true, ...theirProps } = props as typeof props
   let internalTransitionRef = useRef<HTMLElement | null>(null)
-  let transitionRef = useSyncRefs(internalTransitionRef, ref)
+  let requiresRef = shouldForwardRef(props)
+
+  let transitionRef = useSyncRefs(
+    ...(requiresRef ? [internalTransitionRef, ref] : ref === null ? [] : [ref])
+  )
 
   // The TransitionChild will also call this hook, and we have to make sure that we are ready.
   useServerHandoffComplete()
diff --git a/playgrounds/react/pages/dialog/dialog-scroll-issue.tsx b/playgrounds/react/pages/dialog/dialog-scroll-issue.tsx
index 858558b..6ab3f4a 100644
--- a/playgrounds/react/pages/dialog/dialog-scroll-issue.tsx
+++ b/playgrounds/react/pages/dialog/dialog-scroll-issue.tsx
@@ -1,13 +1,12 @@
 import { Dialog, Transition } from '@headlessui/react'
-import { Fragment, useState } from 'react'
+import { useState } from 'react'
 
 function MyDialog({ open, close }) {
   return (
     <>
-      <Transition show={open} as={Fragment}>
+      <Transition show={open}>
         <Dialog onClose={close} className="relative z-50">
           <Transition.Child
-            as={Fragment}
             enter="transition duration-500 ease-out"
             enterFrom="opacity-0"
             enterTo="opacity-100"
diff --git a/playgrounds/react/pages/dialog/dialog.tsx b/playgrounds/react/pages/dialog/dialog.tsx
index cc298b1..c6a5f2f 100644
--- a/playgrounds/react/pages/dialog/dialog.tsx
+++ b/playgrounds/react/pages/dialog/dialog.tsx
@@ -1,5 +1,5 @@
 import { Dialog, Menu, Portal, Transition } from '@headlessui/react'
-import { Fragment, useState } from 'react'
+import { useState } from 'react'
 import Flatpickr from 'react-flatpickr'
 import { Button } from '../../components/button'
 import { classNames } from '../../utils/class-names'
@@ -64,7 +64,6 @@ export default function Home() {
       <Transition
         data-debug="Dialog"
         show={isOpen}
-        as={Fragment}
         beforeEnter={() => console.log('[Transition] Before enter')}
         afterEnter={() => console.log('[Transition] After enter')}
         beforeLeave={() => console.log('[Transition] Before leave')}
@@ -79,7 +78,6 @@ export default function Home() {
           <div className="fixed inset-0 z-10 overflow-y-auto">
             <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
               <Transition.Child
-                as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
                 enterTo="opacity-75"
@@ -96,6 +94,7 @@ export default function Home() {
               </Transition.Child>
 
               <Transition.Child
+                as="div"
                 enter="ease-out transform duration-300"
                 enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 enterTo="opacity-100 translate-y-0 sm:scale-100"
diff --git a/playgrounds/react/pages/dialog/scrollable-dialog.tsx b/playgrounds/react/pages/dialog/scrollable-dialog.tsx
index 08ddf8b..3a99d61 100644
--- a/playgrounds/react/pages/dialog/scrollable-dialog.tsx
+++ b/playgrounds/react/pages/dialog/scrollable-dialog.tsx
@@ -1,6 +1,6 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { ExclamationIcon } from '@heroicons/react/outline'
-import { Fragment, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 
 export default function Example() {
   const [open, setOpen] = useState(false)
@@ -18,10 +18,9 @@ export default function Example() {
           Open Dialog
         </button>
       </div>
-      <Transition.Root show={open} as={Fragment}>
+      <Transition.Root show={open}>
         <Dialog as="div" className="relative z-10" initialFocus={cancelButtonRef} onClose={setOpen}>
           <Transition.Child
-            as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
             enterTo="opacity-100"
@@ -35,7 +34,6 @@ export default function Example() {
           <div className="fixed inset-0 z-10 overflow-y-auto">
             <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
               <Transition.Child
-                as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 enterTo="opacity-100 translate-y-0 sm:scale-100"
diff --git a/playgrounds/react/pages/dialog/scrollable-page-with-dialog.tsx b/playgrounds/react/pages/dialog/scrollable-page-with-dialog.tsx
index db3024d..a950df4 100644
--- a/playgrounds/react/pages/dialog/scrollable-page-with-dialog.tsx
+++ b/playgrounds/react/pages/dialog/scrollable-page-with-dialog.tsx
@@ -1,5 +1,5 @@
 import { Dialog, Transition } from '@headlessui/react'
-import { Fragment, useState } from 'react'
+import { useState } from 'react'
 
 export default function Home() {
   let [isOpen, setIsOpen] = useState(false)
@@ -37,7 +37,6 @@ export default function Home() {
       <Transition
         data-debug="Dialog"
         show={isOpen}
-        as={Fragment}
         beforeEnter={() => console.log('[Transition] Before enter')}
         afterEnter={() => console.log('[Transition] After enter')}
         beforeLeave={() => console.log('[Transition] Before leave')}
@@ -52,7 +51,6 @@ export default function Home() {
           <div className="fixed inset-0 z-10 overflow-y-auto">
             <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
               <Transition.Child
-                as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
                 enterTo="opacity-75"
@@ -69,6 +67,7 @@ export default function Home() {
               </Transition.Child>
 
               <Transition.Child
+                as="div"
                 enter="ease-out transform duration-300"
                 enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 enterTo="opacity-100 translate-y-0 sm:scale-100"
diff --git a/playgrounds/react/pages/listbox/listbox-with-pure-tailwind.tsx b/playgrounds/react/pages/listbox/listbox-with-pure-tailwind.tsx
index 5264d09..7ee9ecb 100644
--- a/playgrounds/react/pages/listbox/listbox-with-pure-tailwind.tsx
+++ b/playgrounds/react/pages/listbox/listbox-with-pure-tailwind.tsx
@@ -1,5 +1,5 @@
 import { Listbox, Transition } from '@headlessui/react'
-import { Fragment, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 let people = [
   'Wade Cooper',
@@ -60,7 +60,6 @@ export default function Home() {
               </span>
 
               <Transition
-                as={Fragment}
                 enter="transition duration-500 ease-out"
                 enterFrom="transform scale-95 opacity-0"
                 enterTo="transform scale-100 opacity-100"
diff --git a/playgrounds/react/pages/menu/menu-with-transition.tsx b/playgrounds/react/pages/menu/menu-with-transition.tsx
index bef7e04..ee4b5b9 100644
--- a/playgrounds/react/pages/menu/menu-with-transition.tsx
+++ b/playgrounds/react/pages/menu/menu-with-transition.tsx
@@ -1,5 +1,4 @@
 import { Menu, Transition } from '@headlessui/react'
-import { Fragment } from 'react'
 import { Button } from '../../components/button'
 import { classNames } from '../../utils/class-names'
 
@@ -30,7 +29,6 @@ export default function Home() {
           </span>
 
           <Transition
-            as={Fragment}
             enter="transition duration-500 ease-out"
             enterFrom="transform scale-95 opacity-0"
             enterTo="transform scale-100 opacity-100"
diff --git a/playgrounds/react/pages/popover/popover.tsx b/playgrounds/react/pages/popover/popover.tsx
index 80b10eb..930ecdf 100644
--- a/playgrounds/react/pages/popover/popover.tsx
+++ b/playgrounds/react/pages/popover/popover.tsx
@@ -1,5 +1,5 @@
 import { Popover, Portal, Transition } from '@headlessui/react'
-import React, { Fragment, forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import { usePopper } from '../../utils/hooks/use-popper'
 
 let Button = forwardRef(
@@ -33,7 +33,6 @@ export default function Home() {
       <Popover.Group as="nav" aria-label="Mythical University" className="flex space-x-3">
         <Popover as="div" className="relative">
           <Transition
-            as={Fragment}
             enter="transition ease-out duration-300 transform"
             enterFrom="opacity-0"
             enterTo="opacity-100"
diff --git a/playgrounds/react/pages/transitions/appear.tsx b/playgrounds/react/pages/transitions/appear.tsx
index f0f9067..8eaaa70 100644
--- a/playgrounds/react/pages/transitions/appear.tsx
+++ b/playgrounds/react/pages/transitions/appear.tsx
@@ -18,6 +18,7 @@ export default function AppearExample() {
           <span className="mb-2">Initial render</span>
           <div className="grid max-w-6xl grid-cols-4 gap-4">
             <Transition
+              as="div"
               show={show}
               appear={true}
               unmount={true}
@@ -50,6 +51,7 @@ export default function AppearExample() {
             </Transition>
 
             <Transition
+              as="div"
               show={show}
               appear={false}
               unmount={true}
@@ -82,6 +84,7 @@ export default function AppearExample() {
             </Transition>
 
             <Transition
+              as="div"
               show={show}
               appear={true}
               unmount={false}
@@ -114,6 +117,7 @@ export default function AppearExample() {
             </Transition>
 
             <Transition
+              as="div"
               show={show}
               appear={false}
               unmount={false}
@@ -152,6 +156,7 @@ export default function AppearExample() {
             <span className="mb-2">Not on the initial render</span>
             <div className="grid max-w-6xl grid-cols-4 gap-4">
               <Transition
+                as="div"
                 show={show}
                 appear={true}
                 unmount={true}
@@ -184,6 +189,7 @@ export default function AppearExample() {
               </Transition>
 
               <Transition
+                as="div"
                 show={show}
                 appear={false}
                 unmount={true}
@@ -216,6 +222,7 @@ export default function AppearExample() {
               </Transition>
 
               <Transition
+                as="div"
                 show={show}
                 appear={true}
                 unmount={false}
@@ -248,6 +255,7 @@ export default function AppearExample() {
               </Transition>
 
               <Transition
+                as="div"
                 show={show}
                 appear={false}
                 unmount={false}
diff --git a/playgrounds/react/pages/transitions/component-examples/dropdown.tsx b/playgrounds/react/pages/transitions/component-examples/dropdown.tsx
index 7adb637..1f16f74 100644
--- a/playgrounds/react/pages/transitions/component-examples/dropdown.tsx
+++ b/playgrounds/react/pages/transitions/component-examples/dropdown.tsx
@@ -44,6 +44,7 @@ function Dropdown() {
       </div>
 
       <Transition
+        as="div"
         show={isOpen}
         enter="transition ease-out duration-75"
         enterFrom="transform opacity-0 scale-95"
diff --git a/playgrounds/react/pages/transitions/component-examples/modal.tsx b/playgrounds/react/pages/transitions/component-examples/modal.tsx
index 89e4c4e..29d1a1c 100644
--- a/playgrounds/react/pages/transitions/component-examples/modal.tsx
+++ b/playgrounds/react/pages/transitions/component-examples/modal.tsx
@@ -41,6 +41,7 @@ export default function Home() {
       </div>
 
       <Transition
+        as="div"
         show={isOpen}
         className="fixed inset-0 z-10 overflow-y-auto"
         beforeEnter={() => {
@@ -78,6 +79,7 @@ export default function Home() {
           {/* This element is to trick the browser into centering the modal contents. */}
           <span className="hidden sm:inline-block sm:h-screen sm:align-middle"></span>&#8203;
           <Transition.Child
+            as="div"
             className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle"
             role="dialog"
             aria-modal="true"
diff --git a/playgrounds/react/pages/transitions/component-examples/nested/hidden.tsx b/playgrounds/react/pages/transitions/component-examples/nested/hidden.tsx
index 31e8fab..e32e5dc 100644
--- a/playgrounds/react/pages/transitions/component-examples/nested/hidden.tsx
+++ b/playgrounds/react/pages/transitions/component-examples/nested/hidden.tsx
@@ -18,7 +18,7 @@ export default function Home() {
             </button>
           </span>
 
-          <Transition show={isOpen} unmount={false}>
+          <Transition as="div" show={isOpen} unmount={false}>
             <Box>
               <Box>
                 <Box>
diff --git a/playgrounds/react/pages/transitions/component-examples/nested/unmount.tsx b/playgrounds/react/pages/transitions/component-examples/nested/unmount.tsx
index 380a919..51e32de 100644
--- a/playgrounds/react/pages/transitions/component-examples/nested/unmount.tsx
+++ b/playgrounds/react/pages/transitions/component-examples/nested/unmount.tsx
@@ -18,7 +18,7 @@ export default function Home() {
             </button>
           </span>
 
-          <Transition show={isOpen} unmount={true}>
+          <Transition as="div" show={isOpen} unmount={true}>
             <Box>
               <Box>
                 <Box>
@@ -43,6 +43,7 @@ export default function Home() {
 function Box({ children }: { children?: ReactNode }) {
   return (
     <Transition.Child
+      as="div"
       unmount={true}
       enter="transition translate duration-300"
       enterFrom="transform -translate-x-full"
diff --git a/playgrounds/react/pages/transitions/component-examples/peek-a-boo.tsx b/playgrounds/react/pages/transitions/component-examples/peek-a-boo.tsx
index 8eeab0e..40c0ef3 100644
--- a/playgrounds/react/pages/transitions/component-examples/peek-a-boo.tsx
+++ b/playgrounds/react/pages/transitions/component-examples/peek-a-boo.tsx
@@ -19,6 +19,7 @@ export default function Home() {
           </span>
 
           <Transition
+            as="div"
             show={isOpen}
             appear={false}
             beforeEnter={() => console.log('beforeEnter')}
diff --git a/playgrounds/react/pages/transitions/full-page-examples/full-page-transition.tsx b/playgrounds/react/pages/transitions/full-page-examples/full-page-transition.tsx
index 504e03b..1095cdc 100644
--- a/playgrounds/react/pages/transitions/full-page-examples/full-page-transition.tsx
+++ b/playgrounds/react/pages/transitions/full-page-examples/full-page-transition.tsx
@@ -160,6 +160,7 @@ function FullPageTransition() {
             <div className="relative h-96 overflow-hidden rounded-lg">
               {pages.map((page, i) => (
                 <Transition
+                  as="div"
                   appear={false}
                   key={page}
                   show={activePage === i}
diff --git a/playgrounds/react/pages/transitions/full-page-examples/layout-with-sidebar.tsx b/playgrounds/react/pages/transitions/full-page-examples/layout-with-sidebar.tsx
index 6c9c418..f55459c 100644
--- a/playgrounds/react/pages/transitions/full-page-examples/layout-with-sidebar.tsx
+++ b/playgrounds/react/pages/transitions/full-page-examples/layout-with-sidebar.tsx
@@ -26,9 +26,10 @@ export default function App() {
 
       <div className="bg-cool-gray-100 flex h-screen overflow-hidden">
         {/* Off-canvas menu for mobile */}
-        <Transition show={mobileOpen} unmount={false} className="fixed inset-0 z-40 flex">
+        <Transition as="div" show={mobileOpen} unmount={false} className="fixed inset-0 z-40 flex">
           {/* Off-canvas menu overlay, show/hide based on off-canvas menu state. */}
           <Transition.Child
+            as="div"
             unmount={false}
             enter="transition-opacity ease-linear duration-300"
             enterFrom="opacity-0"
@@ -49,6 +50,7 @@ export default function App() {
 
           {/* Off-canvas menu, show/hide based on off-canvas menu state. */}
           <Transition.Child
+            as="div"
             unmount={false}
             enter="transition ease-in-out duration-300 transform"
             enterFrom="-translate-x-full"
diff --git a/playgrounds/react/pages/transitions/react-hot-toast.tsx b/playgrounds/react/pages/transitions/react-hot-toast.tsx
index 888efaa..7676cbe 100644
--- a/playgrounds/react/pages/transitions/react-hot-toast.tsx
+++ b/playgrounds/react/pages/transitions/react-hot-toast.tsx
@@ -7,6 +7,7 @@ const TailwindToaster = () => {
       {(t) => (
         <Transition
           appear
+          as="div"
           show={t.visible}
           className="flex transform rounded bg-white p-4 shadow-lg"
           enter="transition-all duration-500"