From ee252b3e1a50b945b9b5536d8cecae94f91411fb Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 18 Apr 2024 17:44:07 +0200
Subject: [PATCH 01/10] use `Fragment` as the default element for `Transition`
 components

---
 .../@headlessui-react/src/components/transition/transition.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@headlessui-react/src/components/transition/transition.tsx b/packages/@headlessui-react/src/components/transition/transition.tsx
index de66b8a426..a40c10cdec 100644
--- a/packages/@headlessui-react/src/components/transition/transition.tsx
+++ b/packages/@headlessui-react/src/components/transition/transition.tsx
@@ -264,7 +264,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
 

From c9b37d23dc9153898ba520e21926c69c10a3839b Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 18 Apr 2024 17:44:29 +0200
Subject: [PATCH 02/10] update tests to reflect default tag change

---
 .../__snapshots__/transition.test.tsx.snap    |   6 -
 .../components/transition/transition.test.tsx | 128 ++++++++++--------
 2 files changed, 73 insertions(+), 61 deletions(-)

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 1555d0302d..c00a2019cb 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 ac4adfa414..5c915b8be4 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()
     })
@@ -134,11 +128,7 @@ describe('Setup API', () => {
         }
 
         expect(() => {
-          render(
-            <Transition show={true} as={Fragment}>
-              {() => <Dummy />}
-            </Transition>
-          )
+          render(<Transition show={true}>{() => <Dummy />}</Transition>)
         }).toThrowErrorMatchingSnapshot()
       })
     )
@@ -153,7 +143,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 +155,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 +166,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 +178,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 +197,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 +225,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 +239,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 +266,10 @@ 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>{() => <Dummy>Sidebar</Dummy>}</Transition.Child>
+                  <Transition.Child>{() => <Dummy>Content</Dummy>}</Transition.Child>
+                </div>
               </Transition>
             </div>
           )
@@ -283,7 +289,7 @@ describe('Setup API', () => {
         expect(() => {
           render(
             <div className="My Page">
-              <Transition show={true} as={Fragment}>
+              <Transition show={true}>
                 {() => (
                   <Dummy>
                     <Transition.Child>{() => <aside>Sidebar</aside>}</Transition.Child>
@@ -362,7 +368,7 @@ describe('Setup API', () => {
           leaveFrom="leave-from"
           leaveTo="leave-to"
         >
-          Children
+          <div>Children</div>
         </Transition>
       )
 
@@ -387,7 +393,7 @@ describe('Setup API', () => {
             leaveFrom="leave-from"
             leaveTo="leave-to"
           >
-            Children
+            <div>Children</div>
           </Transition>
         )
       }
@@ -732,10 +738,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 +787,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 +959,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 +1120,9 @@ describe('Events', () => {
                 leave="leave-1"
                 leaveFrom="leave-from"
                 leaveTo="leave-to"
-              />
+              >
+                <div />
+              </Transition.Child>
               <Transition.Child
                 enter="enter-1"
                 enterFrom="enter-from"

From 2b597496da2496318002bbe5318131f057b4b8da Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 18 Apr 2024 18:05:35 +0200
Subject: [PATCH 03/10] 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.
---
 .../src/components/transition/transition.tsx  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/@headlessui-react/src/components/transition/transition.tsx b/packages/@headlessui-react/src/components/transition/transition.tsx
index a40c10cdec..42d3485be7 100644
--- a/packages/@headlessui-react/src/components/transition/transition.tsx
+++ b/packages/@headlessui-react/src/components/transition/transition.tsx
@@ -292,7 +292,8 @@ 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 = Boolean(enter || enterFrom || enterTo || leave || leaveFrom || leaveTo)
+  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 +343,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 +498,17 @@ 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 = Boolean(
+    props.enter ||
+      props.enterFrom ||
+      props.enterTo ||
+      props.leave ||
+      props.leaveFrom ||
+      props.leaveTo
+  )
+  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()

From 58725bca7cae0e11e661d3e717c41ec8da57ab44 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 18 Apr 2024 18:06:24 +0200
Subject: [PATCH 04/10] add test to ensure we don't error on missing `ref` when
 not required
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

+ 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.
---
 .../components/transition/transition.test.tsx | 38 +++++++++++++++++--
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/packages/@headlessui-react/src/components/transition/transition.test.tsx b/packages/@headlessui-react/src/components/transition/transition.test.tsx
index 5c915b8be4..7ce2b032de 100644
--- a/packages/@headlessui-react/src/components/transition/transition.test.tsx
+++ b/packages/@headlessui-react/src/components/transition/transition.test.tsx
@@ -128,7 +128,11 @@ describe('Setup API', () => {
         }
 
         expect(() => {
-          render(<Transition show={true}>{() => <Dummy />}</Transition>)
+          render(
+            <Transition show={true} enter="duration-200">
+              {() => <Dummy />}
+            </Transition>
+          )
         }).toThrowErrorMatchingSnapshot()
       })
     )
@@ -267,8 +271,12 @@ describe('Setup API', () => {
             <div className="My Page">
               <Transition show={true}>
                 <div>
-                  <Transition.Child>{() => <Dummy>Sidebar</Dummy>}</Transition.Child>
-                  <Transition.Child>{() => <Dummy>Content</Dummy>}</Transition.Child>
+                  <Transition.Child enter="duration-200">
+                    {() => <Dummy>Sidebar</Dummy>}
+                  </Transition.Child>
+                  <Transition.Child enter="duration-200">
+                    {() => <Dummy>Content</Dummy>}
+                  </Transition.Child>
                 </div>
               </Transition>
             </div>
@@ -277,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(() => {
@@ -289,7 +319,7 @@ describe('Setup API', () => {
         expect(() => {
           render(
             <div className="My Page">
-              <Transition show={true}>
+              <Transition show={true} enter="duration-200">
                 {() => (
                   <Dummy>
                     <Transition.Child>{() => <aside>Sidebar</aside>}</Transition.Child>

From dea822b7e7d557cf7dc8219609dc8f09c4ade02a Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 19 Apr 2024 00:55:26 +0200
Subject: [PATCH 05/10] improve `requiresRef` check

Also ensure that a ref is required if the `as` prop is provided and
it's not a `Fragment`
---
 .../src/components/transition/transition.tsx        | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/@headlessui-react/src/components/transition/transition.tsx b/packages/@headlessui-react/src/components/transition/transition.tsx
index 42d3485be7..15d07b881d 100644
--- a/packages/@headlessui-react/src/components/transition/transition.tsx
+++ b/packages/@headlessui-react/src/components/transition/transition.tsx
@@ -292,7 +292,15 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
     ...rest
   } = props as typeof props
   let container = useRef<HTMLElement | null>(null)
-  let requiresRef = Boolean(enter || enterFrom || enterTo || leave || leaveFrom || leaveTo)
+  let requiresRef = Boolean(
+    enter ||
+      enterFrom ||
+      enterTo ||
+      leave ||
+      leaveFrom ||
+      leaveTo ||
+      (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== Fragment
+  )
   let transitionRef = useSyncRefs(...(requiresRef ? [container, ref] : ref === null ? [] : [ref]))
   let strategy = rest.unmount ?? true ? RenderStrategy.Unmount : RenderStrategy.Hidden
 
@@ -504,7 +512,8 @@ function TransitionRootFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_C
       props.enterTo ||
       props.leave ||
       props.leaveFrom ||
-      props.leaveTo
+      props.leaveTo ||
+      (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== Fragment
   )
   let transitionRef = useSyncRefs(
     ...(requiresRef ? [internalTransitionRef, ref] : ref === null ? [] : [ref])

From 312a52c0e65cbc776f17ca125c4cb011cca68276 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 19 Apr 2024 01:07:08 +0200
Subject: [PATCH 06/10] add `shouldForwardRef` helper

---
 .../src/components/transition/transition.tsx  | 60 +++++++++++++------
 1 file changed, 42 insertions(+), 18 deletions(-)

diff --git a/packages/@headlessui-react/src/components/transition/transition.tsx b/packages/@headlessui-react/src/components/transition/transition.tsx
index 15d07b881d..ea107653a5 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
@@ -292,15 +330,8 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
     ...rest
   } = props as typeof props
   let container = useRef<HTMLElement | null>(null)
-  let requiresRef = Boolean(
-    enter ||
-      enterFrom ||
-      enterTo ||
-      leave ||
-      leaveFrom ||
-      leaveTo ||
-      (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== Fragment
-  )
+  let requiresRef = shouldForwardRef(props)
+
   let transitionRef = useSyncRefs(...(requiresRef ? [container, ref] : ref === null ? [] : [ref]))
   let strategy = rest.unmount ?? true ? RenderStrategy.Unmount : RenderStrategy.Hidden
 
@@ -506,15 +537,8 @@ 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 requiresRef = Boolean(
-    props.enter ||
-      props.enterFrom ||
-      props.enterTo ||
-      props.leave ||
-      props.leaveFrom ||
-      props.leaveTo ||
-      (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== Fragment
-  )
+  let requiresRef = shouldForwardRef(props)
+
   let transitionRef = useSyncRefs(
     ...(requiresRef ? [internalTransitionRef, ref] : ref === null ? [] : [ref])
   )

From 3970e646358ab642660561cc8a5941b77618cf98 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 19 Apr 2024 01:12:33 +0200
Subject: [PATCH 07/10] 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.
---
 .../src/components/disclosure/disclosure.test.tsx               | 2 +-
 .../@headlessui-react/src/components/popover/popover.test.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
index 36a5896ddd..2c7aeb29df 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 6fff12f3a4..d11610a53e 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>

From 5bdb4ccc167c488dac7caa5221ec37379c559c3b Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 19 Apr 2024 01:18:24 +0200
Subject: [PATCH 08/10] update changelog

---
 packages/@headlessui-react/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 5017d60533..67447d1a12 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 `Transition` tag from `div` to `Fragment` ([#3110](https://github.com/tailwindlabs/headlessui/pull/3110))
 
 ### Added
 

From 99698a49cdc8ee92716ec5720c550e59407c3b8c Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 19 Apr 2024 01:27:53 +0200
Subject: [PATCH 09/10] update playgrounds to reflect tag change

---
 playgrounds/react/pages/dialog/dialog-scroll-issue.tsx    | 5 ++---
 playgrounds/react/pages/dialog/dialog.tsx                 | 5 ++---
 playgrounds/react/pages/dialog/scrollable-dialog.tsx      | 6 ++----
 .../react/pages/dialog/scrollable-page-with-dialog.tsx    | 5 ++---
 .../react/pages/listbox/listbox-with-pure-tailwind.tsx    | 3 +--
 playgrounds/react/pages/menu/menu-with-transition.tsx     | 2 --
 playgrounds/react/pages/popover/popover.tsx               | 3 +--
 playgrounds/react/pages/transitions/appear.tsx            | 8 ++++++++
 .../pages/transitions/component-examples/dropdown.tsx     | 1 +
 .../react/pages/transitions/component-examples/modal.tsx  | 2 ++
 .../transitions/component-examples/nested/hidden.tsx      | 2 +-
 .../transitions/component-examples/nested/unmount.tsx     | 3 ++-
 .../pages/transitions/component-examples/peek-a-boo.tsx   | 1 +
 .../full-page-examples/full-page-transition.tsx           | 1 +
 .../full-page-examples/layout-with-sidebar.tsx            | 4 +++-
 playgrounds/react/pages/transitions/react-hot-toast.tsx   | 1 +
 16 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/playgrounds/react/pages/dialog/dialog-scroll-issue.tsx b/playgrounds/react/pages/dialog/dialog-scroll-issue.tsx
index 858558b4e4..6ab3f4acbd 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 cc298b1a0a..c6a5f2f614 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 08ddf8bb08..3a99d61a2e 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 db3024dc92..a950df4253 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 5264d09b84..7ee9ecbfe3 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 bef7e0497d..ee4b5b97c8 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 80b10eb0f8..930ecdfec5 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 f0f9067538..8eaaa70e98 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 7adb637a5d..1f16f746e9 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 89e4c4e8f0..29d1a1c798 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 31e8fab822..e32e5dc8c9 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 380a919372..51e32deebb 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 8eeab0e7c8..40c0ef375c 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 504e03b113..1095cdc5e7 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 6c9c4180bf..f55459cadd 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 888efaafb9..7676cbe0b3 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"

From 7fced21a11102e694cf02d5a6564eb7639b8959e Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Fri, 19 Apr 2024 10:11:08 -0400
Subject: [PATCH 10/10] Tweak changelog

---
 packages/@headlessui-react/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 67447d1a12..c7de49700c 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -30,7 +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 `Transition` tag from `div` to `Fragment` ([#3110](https://github.com/tailwindlabs/headlessui/pull/3110))
+- Change default tag from `div` to `Fragment` on `Transition` components ([#3110](https://github.com/tailwindlabs/headlessui/pull/3110))
 
 ### Added