From 35e7cbb37580c7ac7b54bbc2ea8ebbe1f62f3aa7 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 8 May 2024 12:55:27 +0200
Subject: [PATCH 01/14] sync with `1.x` branch

---
 packages/@headlessui-vue/CHANGELOG.md | 15 +++++++++++++--
 packages/@headlessui-vue/package.json |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
index 4c089a76b5..9c23c27551 100644
--- a/packages/@headlessui-vue/CHANGELOG.md
+++ b/packages/@headlessui-vue/CHANGELOG.md
@@ -12,11 +12,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `immediate` prop to `<Combobox />` for immediately opening the Combobox when the `input` receives focus ([#2686](https://github.com/tailwindlabs/headlessui/pull/2686))
 - Add `virtual` prop to `Combobox` component ([#2779](https://github.com/tailwindlabs/headlessui/pull/2779))
 
+## [1.7.22] - 2024-05-08
+
 ### Fixed
 
-- Prevent closing the `Combobox` component when clicking inside the scrollbar area ([#3104](https://github.com/tailwindlabs/headlessui/pull/3104))
+- Don’t cancel `touchmove` on `input` elements inside a dialog ([#3166](https://github.com/tailwindlabs/headlessui/pull/3166))
 - Ensure clicking a `ComboboxOption` after filtering the options, correctly triggers a change ([#3180](https://github.com/tailwindlabs/headlessui/pull/3180))
 
+## [1.7.21] - 2024-04-26
+
+### Fixed
+
+- Prevent closing the `Combobox` component when clicking inside the scrollbar area ([#3104](https://github.com/tailwindlabs/headlessui/pull/3104))
+- Don’t unmount portal targets used by other portals ([#3144](https://github.com/tailwindlabs/headlessui/pull/3144))
+
 ## [1.7.20] - 2024-04-15
 
 ### Fixed
@@ -533,7 +542,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.20...HEAD
+[unreleased]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vu@v1.7.22...HEAD
+[1.7.22]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.21...@headlessui/vue@v1.7.22
+[1.7.21]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.20...@headlessui/vue@v1.7.21
 [1.7.20]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.19...@headlessui/vue@v1.7.20
 [1.7.19]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.18...@headlessui/vue@v1.7.19
 [1.7.18]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.17...@headlessui/vue@v1.7.18
diff --git a/packages/@headlessui-vue/package.json b/packages/@headlessui-vue/package.json
index 42eb1b4824..0dd685ecc0 100644
--- a/packages/@headlessui-vue/package.json
+++ b/packages/@headlessui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@headlessui/vue",
-  "version": "1.7.16",
+  "version": "1.7.22",
   "description": "A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS.",
   "main": "dist/index.cjs",
   "typings": "dist/index.d.ts",

From 031b39d52259c81b9906d86ec7118755da6ef916 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 8 May 2024 13:35:04 +0200
Subject: [PATCH 02/14] update @headlessui/vue version in package-lock.json

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 2745db8226..3f3fcc082e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10724,7 +10724,7 @@
     },
     "packages/@headlessui-vue": {
       "name": "@headlessui/vue",
-      "version": "1.7.16",
+      "version": "1.7.22",
       "license": "MIT",
       "dependencies": {
         "@tanstack/vue-virtual": "3.0.0-beta.60"

From 4eff138adab53b9e063a911b5d7115a9891b0544 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 10 May 2024 14:55:17 -0400
Subject: [PATCH 03/14] =?UTF-8?q?Don=E2=80=99t=20set=20a=20focus=20fallbac?=
 =?UTF-8?q?k=20for=20Dialog=E2=80=99s=20in=20demo=20mode=20(#3194)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Don’t set a focus fallback for Dialog’s in demo mode

* Update changelog
---
 packages/@headlessui-react/CHANGELOG.md                     | 4 +++-
 packages/@headlessui-react/src/components/dialog/dialog.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index eaed7a3a4a..952035f4e6 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- [internal] Don’t set a focus fallback for Dialog’s in demo mode ([#3194](https://github.com/tailwindlabs/headlessui/pull/3194))
 
 ## [2.0.3] - 2024-05-07
 
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index fd2f5f0f36..958fab3748 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -393,7 +393,7 @@ function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
                   <PortalWrapper>
                     <FocusTrap
                       initialFocus={initialFocus}
-                      initialFocusFallback={internalDialogRef}
+                      initialFocusFallback={__demoMode ? undefined : internalDialogRef}
                       containers={resolveRootContainers}
                       features={focusTrapFeatures}
                     >

From ea65164e663aa7d4c92aad3697e1f553960a3675 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Mon, 13 May 2024 08:16:25 -0400
Subject: [PATCH 04/14] Add `active` prop deprecation to 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 952035f4e6..120aea2b6e 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -70,6 +70,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Require React 18 ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887), [#3092](https://github.com/tailwindlabs/headlessui/pull/3092), [#3131](https://github.com/tailwindlabs/headlessui/pull/3131))
 - Always render hidden form input fields for `Checkbox`, `Switch`, and `RadioGroup` components ([#3095](https://github.com/tailwindlabs/headlessui/pull/3095))
 - Deprecate the `RadioGroup.Option` component in favor of new `Radio` component ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887))
+- Deprecated the `MenuItem` `active` prop in favor of new `focus` prop ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887))
 - Dialog is now focused by default instead of the first focusable element ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887))
 - 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), [#3147](https://github.com/tailwindlabs/headlessui/pull/3147))

From 3407625c511e55771b219209bb9219a3f55a5e09 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Mon, 13 May 2024 08:18:05 -0400
Subject: [PATCH 05/14] Use same tense

---
 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 120aea2b6e..43e1ac4ac0 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -70,7 +70,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Require React 18 ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887), [#3092](https://github.com/tailwindlabs/headlessui/pull/3092), [#3131](https://github.com/tailwindlabs/headlessui/pull/3131))
 - Always render hidden form input fields for `Checkbox`, `Switch`, and `RadioGroup` components ([#3095](https://github.com/tailwindlabs/headlessui/pull/3095))
 - Deprecate the `RadioGroup.Option` component in favor of new `Radio` component ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887))
-- Deprecated the `MenuItem` `active` prop in favor of new `focus` prop ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887))
+- Deprecate the `MenuItem` `active` prop in favor of new `focus` prop ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887))
 - Dialog is now focused by default instead of the first focusable element ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887))
 - 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), [#3147](https://github.com/tailwindlabs/headlessui/pull/3147))

From 300e9eb95777210fd43570d31aae7da5b87d381f Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Mon, 13 May 2024 08:22:33 -0400
Subject: [PATCH 06/14] Update 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 43e1ac4ac0..79e3c7b041 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -70,7 +70,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Require React 18 ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887), [#3092](https://github.com/tailwindlabs/headlessui/pull/3092), [#3131](https://github.com/tailwindlabs/headlessui/pull/3131))
 - Always render hidden form input fields for `Checkbox`, `Switch`, and `RadioGroup` components ([#3095](https://github.com/tailwindlabs/headlessui/pull/3095))
 - Deprecate the `RadioGroup.Option` component in favor of new `Radio` component ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887))
-- Deprecate the `MenuItem` `active` prop in favor of new `focus` prop ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887))
+- Deprecate the `active` prop in favor of new `focus` prop ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887))
 - Dialog is now focused by default instead of the first focusable element ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887))
 - 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), [#3147](https://github.com/tailwindlabs/headlessui/pull/3147))

From 045f2bc761be3d30ef203ccb3da2c0292c8a5397 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 21 May 2024 13:07:04 +0200
Subject: [PATCH 07/14] Ensure page doesn't scroll down when pressing `Escape`
 to close the `Dialog` component (#3218)

* ensure we blur the `document.activeElement` when pressing `Escape`

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md           |  1 +
 .../src/components/dialog/dialog.tsx              | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 79e3c7b041..eea24174dc 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - [internal] Don’t set a focus fallback for Dialog’s in demo mode ([#3194](https://github.com/tailwindlabs/headlessui/pull/3194))
+- Ensure page doesn't scroll down when pressing `Escape` to close the `Dialog` component ([#3218](https://github.com/tailwindlabs/headlessui/pull/3218))
 
 ## [2.0.3] - 2024-05-07
 
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index 958fab3748..3032001ded 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -310,6 +310,21 @@ function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
     if (event.key !== Keys.Escape) return
     event.preventDefault()
     event.stopPropagation()
+
+    // Ensure that we blur the current activeElement to prevent maintaining
+    // focus and potentially scrolling the page to the end (because the Dialog
+    // is rendered in a Portal at the end of the document.body and the browser
+    // tries to keep the focused element in view)
+    //
+    // Typically only happens in Safari.
+    if (
+      document.activeElement &&
+      'blur' in document.activeElement &&
+      typeof document.activeElement.blur === 'function'
+    ) {
+      document.activeElement.blur()
+    }
+
     close()
   })
 

From 7fcb410be487017cde3b02c19adc7815a35b8ed9 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 22 May 2024 14:57:57 +0200
Subject: [PATCH 08/14] do not apply `aria-modal` in demo mode (#3227)

When you have a `role="dialog"` and an `aria-modal="true"` at the same
time, then Safari will focus the first focusable element inside the
dialog.

This is not ideal, because in demo mode this means that the focus is
moved around to various DOM elements.

This commit ensures that the `aria-modal` is not applied when demo mode
is enabled to prevent that behavior in Safari.
---
 packages/@headlessui-react/src/components/dialog/dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index 3032001ded..f940253c1b 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -357,7 +357,7 @@ function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
     id,
     role,
     tabIndex: -1,
-    'aria-modal': dialogState === DialogStates.Open ? true : undefined,
+    'aria-modal': __demoMode ? undefined : dialogState === DialogStates.Open ? true : undefined,
     'aria-labelledby': state.titleId,
     'aria-describedby': describedby,
   }

From b478189fad48a64aa14959fc33142a130eec2ccf Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 23 May 2024 16:24:26 +0200
Subject: [PATCH 09/14] Mark `SwitchGroup` as deprecated, prefer `Field`
 instead (#3232)

* mark `SwitchGroup` as deprecated

Also updated the `Switch.Group` message to also prefer the `<Field>`
component.

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md                     | 4 ++++
 packages/@headlessui-react/src/components/switch/switch.tsx | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index eea24174dc..81d5825c63 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [internal] Don’t set a focus fallback for Dialog’s in demo mode ([#3194](https://github.com/tailwindlabs/headlessui/pull/3194))
 - Ensure page doesn't scroll down when pressing `Escape` to close the `Dialog` component ([#3218](https://github.com/tailwindlabs/headlessui/pull/3218))
 
+### Deprecated
+
+- Mark `SwitchGroup` as deprecated, prefer `Field` instead ([#3232](https://github.com/tailwindlabs/headlessui/pull/3232))
+
 ## [2.0.3] - 2024-05-07
 
 ### Fixed
diff --git a/packages/@headlessui-react/src/components/switch/switch.tsx b/packages/@headlessui-react/src/components/switch/switch.tsx
index a5715dc7b8..e1080faded 100644
--- a/packages/@headlessui-react/src/components/switch/switch.tsx
+++ b/packages/@headlessui-react/src/components/switch/switch.tsx
@@ -269,6 +269,7 @@ export interface _internal_ComponentSwitchLabel extends _internal_ComponentLabel
 export interface _internal_ComponentSwitchDescription extends _internal_ComponentDescription {}
 
 let SwitchRoot = forwardRefWithAs(SwitchFn) as _internal_ComponentSwitch
+/** @deprecated use `<Field>` instead of `<SwitchGroup>` */
 export let SwitchGroup = GroupFn as _internal_ComponentSwitchGroup
 /** @deprecated use `<Label>` instead of `<SwitchLabel>` */
 export let SwitchLabel = Label as _internal_ComponentSwitchLabel
@@ -276,7 +277,7 @@ export let SwitchLabel = Label as _internal_ComponentSwitchLabel
 export let SwitchDescription = Description as _internal_ComponentSwitchDescription
 
 export let Switch = Object.assign(SwitchRoot, {
-  /** @deprecated use `<SwitchGroup>` instead of `<Switch.Group>` */
+  /** @deprecated use `<Field>` instead of `<Switch.Group>` */
   Group: SwitchGroup,
   /** @deprecated use `<Label>` instead of `<Switch.Label>` */
   Label: SwitchLabel,

From b822c8a400b0fd755893e4f4116660c5f6e53743 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 24 May 2024 18:15:14 +0200
Subject: [PATCH 10/14] Fix crash when toggling between `virtual` and
 non-virtual mode in `Combobox` component (#3236)

* ensure we correctly merge the `virtual` configuration

* use more generic `UpdateVirtualOptions`

This way we can passthrough the `disabled` function as well.

* properly handle re-use of `disabled` function

* use same order in objects

* cleanup `!` and `?` if we already know we are in `virtual` mode

* directly enable virtual mode in state if previously we weren't using virtual mode

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md       |  1 +
 .../src/components/combobox/combobox.tsx      | 60 +++++++++++--------
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 81d5825c63..5f823bc2d3 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [internal] Don’t set a focus fallback for Dialog’s in demo mode ([#3194](https://github.com/tailwindlabs/headlessui/pull/3194))
 - Ensure page doesn't scroll down when pressing `Escape` to close the `Dialog` component ([#3218](https://github.com/tailwindlabs/headlessui/pull/3218))
+- Fix crash when toggling between `virtual` and non-virtual mode in `Combobox` component ([#3236](https://github.com/tailwindlabs/headlessui/pull/3236))
 
 ### Deprecated
 
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index 9f8756b901..7ff520d2c1 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -125,7 +125,7 @@ enum ActionTypes {
 
   SetActivationTrigger,
 
-  UpdateVirtualOptions,
+  UpdateVirtualConfiguration,
 }
 
 function adjustOrderedState<T>(
@@ -180,7 +180,11 @@ type Actions<T> =
     }
   | { type: ActionTypes.UnregisterOption; id: string }
   | { type: ActionTypes.SetActivationTrigger; trigger: ActivationTrigger }
-  | { type: ActionTypes.UpdateVirtualOptions; options: T[] }
+  | {
+      type: ActionTypes.UpdateVirtualConfiguration
+      options: T[]
+      disabled: ((value: any) => boolean) | null
+    }
 
 let reducers: {
   [P in ActionTypes]: <T>(
@@ -236,16 +240,15 @@ let reducers: {
     }
 
     if (state.virtual) {
+      let { options, disabled } = state.virtual
       let activeOptionIndex =
         action.focus === Focus.Specific
           ? action.idx
           : calculateActiveIndex(action, {
-              resolveItems: () => state.virtual!.options,
+              resolveItems: () => options,
               resolveActiveIndex: () =>
-                state.activeOptionIndex ??
-                state.virtual!.options.findIndex((option) => !state.virtual!.disabled(option)) ??
-                null,
-              resolveDisabled: state.virtual!.disabled,
+                state.activeOptionIndex ?? options.findIndex((option) => !disabled(option)) ?? null,
+              resolveDisabled: disabled,
               resolveId() {
                 throw new Error('Function not implemented.')
               },
@@ -373,14 +376,21 @@ let reducers: {
       activationTrigger: action.trigger,
     }
   },
-  [ActionTypes.UpdateVirtualOptions]: (state, action) => {
-    if (state.virtual?.options === action.options) {
+  [ActionTypes.UpdateVirtualConfiguration]: (state, action) => {
+    if (state.virtual === null) {
+      return {
+        ...state,
+        virtual: { options: action.options, disabled: action.disabled ?? (() => false) },
+      }
+    }
+
+    if (state.virtual.options === action.options && state.virtual.disabled === action.disabled) {
       return state
     }
 
     let adjustedActiveOptionIndex = state.activeOptionIndex
     if (state.activeOptionIndex !== null) {
-      let idx = action.options.indexOf(state.virtual!.options[state.activeOptionIndex])
+      let idx = action.options.indexOf(state.virtual.options[state.activeOptionIndex])
       if (idx !== -1) {
         adjustedActiveOptionIndex = idx
       } else {
@@ -391,7 +401,7 @@ let reducers: {
     return {
       ...state,
       activeOptionIndex: adjustedActiveOptionIndex,
-      virtual: Object.assign({}, state.virtual, { options: action.options }),
+      virtual: { options: action.options, disabled: action.disabled ?? (() => false) },
     }
   },
 }
@@ -425,6 +435,7 @@ function VirtualProvider(props: {
   children: (data: { option: unknown; open: boolean }) => React.ReactElement
 }) {
   let data = useData('VirtualProvider')
+  let { options } = data.virtual!
 
   let [paddingStart, paddingEnd] = useMemo(() => {
     let el = data.optionsRef.current
@@ -441,7 +452,7 @@ function VirtualProvider(props: {
   let virtualizer = useVirtualizer({
     scrollPaddingStart: paddingStart,
     scrollPaddingEnd: paddingEnd,
-    count: data.virtual!.options.length,
+    count: options.length,
     estimateSize() {
       return 40
     },
@@ -454,7 +465,7 @@ function VirtualProvider(props: {
   let [baseKey, setBaseKey] = useState(0)
   useIsoMorphicEffect(() => {
     setBaseKey((v) => v + 1)
-  }, [data.virtual?.options])
+  }, [options])
 
   let items = virtualizer.getVirtualItems()
 
@@ -487,10 +498,7 @@ function VirtualProvider(props: {
               return
             }
 
-            if (
-              data.activeOptionIndex !== null &&
-              data.virtual!.options.length > data.activeOptionIndex
-            ) {
+            if (data.activeOptionIndex !== null && options.length > data.activeOptionIndex) {
               virtualizer.scrollToIndex(data.activeOptionIndex)
             }
           }
@@ -501,13 +509,13 @@ function VirtualProvider(props: {
             <Fragment key={item.key}>
               {React.cloneElement(
                 props.children?.({
-                  option: data.virtual!.options[item.index],
+                  option: options[item.index],
                   open: data.comboboxState === ComboboxState.Open,
                 }),
                 {
                   key: `${baseKey}-${item.key}`,
                   'data-index': item.index,
-                  'aria-setsize': data.virtual!.options.length,
+                  'aria-setsize': options.length,
                   'aria-posinset': item.index + 1,
                   style: {
                     position: 'absolute',
@@ -710,7 +718,7 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
       defaultValue,
       disabled,
       mode: multiple ? ValueMode.Multi : ValueMode.Single,
-      virtual: state.virtual,
+      virtual: virtual ? state.virtual : null,
       get activeOptionIndex() {
         if (
           defaultToFirstOption.current &&
@@ -719,7 +727,7 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
         ) {
           if (virtual) {
             let localActiveOptionIndex = virtual.options.findIndex(
-              (option) => !(virtual?.disabled?.(option) ?? false)
+              (option) => !(virtual.disabled?.(option) ?? false)
             )
 
             if (localActiveOptionIndex !== -1) {
@@ -748,8 +756,12 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
 
   useIsoMorphicEffect(() => {
     if (!virtual) return
-    dispatch({ type: ActionTypes.UpdateVirtualOptions, options: virtual.options })
-  }, [virtual, virtual?.options])
+    dispatch({
+      type: ActionTypes.UpdateVirtualConfiguration,
+      options: virtual.options,
+      disabled: virtual.disabled ?? null,
+    })
+  }, [virtual, virtual?.options, virtual?.disabled])
 
   useIsoMorphicEffect(() => {
     state.dataRef.current = data
@@ -1757,7 +1769,7 @@ function OptionFn<
   let {
     id = `headlessui-combobox-option-${internalId}`,
     value,
-    disabled = data.virtual?.disabled(value) ?? false,
+    disabled = data.virtual?.disabled?.(value) ?? false,
     order = null,
     ...theirProps
   } = props

From c2754bcb168f3656a68f404ec013eefc7ac1eaa4 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 24 May 2024 23:48:09 +0200
Subject: [PATCH 11/14] Ensure tabbing to a portalled `<PopoverPanel>`
 component moves focus inside (without using `<PortalGroup>`) (#3239)

* ensure we allow focus in the focus sentinel button

We already checked this button when inside of a `PopoverGroup`, but we
didn't when you weren't using a `PopoverGroup` component.

* add test

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md       |  1 +
 .../src/components/popover/popover.test.tsx   | 41 ++++++++++++++++++-
 .../src/components/popover/popover.tsx        | 15 ++++++-
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 5f823bc2d3..1f6c34774c 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [internal] Don’t set a focus fallback for Dialog’s in demo mode ([#3194](https://github.com/tailwindlabs/headlessui/pull/3194))
 - Ensure page doesn't scroll down when pressing `Escape` to close the `Dialog` component ([#3218](https://github.com/tailwindlabs/headlessui/pull/3218))
 - Fix crash when toggling between `virtual` and non-virtual mode in `Combobox` component ([#3236](https://github.com/tailwindlabs/headlessui/pull/3236))
+- Ensure tabbing to a portalled `<PopoverPanel>` component moves focus inside (without using `<PortalGroup>`) ([#3239](https://github.com/tailwindlabs/headlessui/pull/3239))
 
 ### Deprecated
 
diff --git a/packages/@headlessui-react/src/components/popover/popover.test.tsx b/packages/@headlessui-react/src/components/popover/popover.test.tsx
index 3777ac90f8..02a21debab 100644
--- a/packages/@headlessui-react/src/components/popover/popover.test.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.test.tsx
@@ -16,7 +16,7 @@ import { Keys, MouseButton, click, focus, press, shift } from '../../test-utils/
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Portal } from '../portal/portal'
 import { Transition } from '../transition/transition'
-import { Popover } from './popover'
+import { Popover, PopoverButton, PopoverPanel } from './popover'
 
 jest.mock('../../hooks/use-id')
 
@@ -1303,6 +1303,45 @@ describe('Keyboard interactions', () => {
   })
 
   describe('`Tab` key', () => {
+    it(
+      'should be possible to Tab through the panel contents and end up in the Button again (without PopoverGroup)',
+      suppressConsoleLogs(async () => {
+        render(
+          <Popover>
+            <PopoverButton>Trigger</PopoverButton>
+            <PopoverPanel portal>
+              <a href="/">Link 1</a>
+              <a href="/">Link 2</a>
+            </PopoverPanel>
+          </Popover>
+        )
+
+        // Focus the button of the first Popover
+        getByText('Trigger')?.focus()
+
+        // Open popover
+        await click(getByText('Trigger'))
+
+        // Verify we are focused on the first link
+        await press(Keys.Tab)
+        assertActiveElement(getByText('Link 1'))
+
+        // Verify we are focused on the second link
+        await press(Keys.Tab)
+        assertActiveElement(getByText('Link 2'))
+
+        // Let's Tab again
+        await press(Keys.Tab)
+
+        // Verify that the first Popover is still open
+        assertPopoverButton({ state: PopoverState.Visible })
+        assertPopoverPanel({ state: PopoverState.Visible })
+
+        // Verify that the button is focused again
+        assertActiveElement(getByText('Trigger'))
+      })
+    )
+
     it(
       'should be possible to Tab through the panel contents onto the next Popover.Button',
       suppressConsoleLogs(async () => {
diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
index 3940555f3d..823b044104 100644
--- a/packages/@headlessui-react/src/components/popover/popover.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -92,6 +92,7 @@ interface StateDefinition {
 
   beforePanelSentinel: MutableRefObject<HTMLButtonElement | null>
   afterPanelSentinel: MutableRefObject<HTMLButtonElement | null>
+  afterButtonSentinel: MutableRefObject<HTMLButtonElement | null>
 
   __demoMode: boolean
 }
@@ -256,9 +257,19 @@ function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
     panelId: null,
     beforePanelSentinel: createRef(),
     afterPanelSentinel: createRef(),
+    afterButtonSentinel: createRef(),
   } as StateDefinition)
   let [
-    { popoverState, button, buttonId, panel, panelId, beforePanelSentinel, afterPanelSentinel },
+    {
+      popoverState,
+      button,
+      buttonId,
+      panel,
+      panelId,
+      beforePanelSentinel,
+      afterPanelSentinel,
+      afterButtonSentinel,
+    },
     dispatch,
   ] = reducerBag
 
@@ -346,6 +357,7 @@ function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
       if (root.contains(event.target)) return
       if (beforePanelSentinel.current?.contains?.(event.target)) return
       if (afterPanelSentinel.current?.contains?.(event.target)) return
+      if (afterButtonSentinel.current?.contains?.(event.target)) return
 
       dispatch({ type: ActionTypes.ClosePopover })
     },
@@ -700,6 +712,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
       {visible && !isWithinPanel && isPortalled && (
         <Hidden
           id={sentinelId}
+          ref={state.afterButtonSentinel}
           features={HiddenFeatures.Focusable}
           data-headlessui-focus-guard
           as="button"

From 8c3499cc8d67960f0002d45d05627841bfe70341 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Sat, 25 May 2024 00:26:51 +0200
Subject: [PATCH 12/14] Only handle form reset when `defaultValue` is used
 (#3240)

* add `useDefaultValue` hook

This allows us to have a guaranteed `default value` that never changes
unless the component re-mounts.

Since the hook returns a stable value, we can safely include it in
dependency arrays of certain hooks.

Before this change, including this is in the dependency arrays it would
cause a trigger or change of the hook when the `defaultValue` changes
but we never want that.

* do not handle `reset` when no `defaultValue` or `defaultChecked` was provided

If a `defaultValue` is provided, then the reset will be handled and the
`onChange` will be called with this value.

If no `defaultValue` was provided, we won't handle the `reset`,
otherwise we would call the `onChange` with `undefined` which is
incorrect.

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md             |  1 +
 .../src/components/checkbox/checkbox.tsx            | 13 ++++++++++---
 .../src/components/combobox/combobox.tsx            |  7 +++++--
 .../src/components/listbox/listbox.tsx              |  8 ++++++--
 .../src/components/radio-group/radio-group.tsx      | 10 ++++++----
 .../src/components/switch/switch.tsx                | 13 ++++++++++---
 .../src/hooks/use-default-value.ts                  | 13 +++++++++++++
 7 files changed, 51 insertions(+), 14 deletions(-)
 create mode 100644 packages/@headlessui-react/src/hooks/use-default-value.ts

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 1f6c34774c..52b3be2e45 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure page doesn't scroll down when pressing `Escape` to close the `Dialog` component ([#3218](https://github.com/tailwindlabs/headlessui/pull/3218))
 - Fix crash when toggling between `virtual` and non-virtual mode in `Combobox` component ([#3236](https://github.com/tailwindlabs/headlessui/pull/3236))
 - Ensure tabbing to a portalled `<PopoverPanel>` component moves focus inside (without using `<PortalGroup>`) ([#3239](https://github.com/tailwindlabs/headlessui/pull/3239))
+- Only handle form reset when `defaultValue` is used ([#3240](https://github.com/tailwindlabs/headlessui/pull/3240))
 
 ### Deprecated
 
diff --git a/packages/@headlessui-react/src/components/checkbox/checkbox.tsx b/packages/@headlessui-react/src/components/checkbox/checkbox.tsx
index a8d743ac07..2c7e22a288 100644
--- a/packages/@headlessui-react/src/components/checkbox/checkbox.tsx
+++ b/packages/@headlessui-react/src/components/checkbox/checkbox.tsx
@@ -13,6 +13,7 @@ import React, {
 } from 'react'
 import { useActivePress } from '../../hooks/use-active-press'
 import { useControllable } from '../../hooks/use-controllable'
+import { useDefaultValue } from '../../hooks/use-default-value'
 import { useDisposables } from '../../hooks/use-disposables'
 import { useEvent } from '../../hooks/use-event'
 import { useId } from '../../hooks/use-id'
@@ -85,7 +86,7 @@ function CheckboxFn<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TTyp
     disabled = providedDisabled || false,
     autoFocus = false,
     checked: controlledChecked,
-    defaultChecked = false,
+    defaultChecked: _defaultChecked,
     onChange: controlledOnChange,
     name,
     value,
@@ -94,7 +95,12 @@ function CheckboxFn<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TTyp
     ...theirProps
   } = props
 
-  let [checked, onChange] = useControllable(controlledChecked, controlledOnChange, defaultChecked)
+  let defaultChecked = useDefaultValue(_defaultChecked)
+  let [checked, onChange] = useControllable(
+    controlledChecked,
+    controlledOnChange,
+    defaultChecked ?? false
+  )
 
   let labelledBy = useLabelledBy()
   let describedBy = useDescribedBy()
@@ -166,8 +172,9 @@ function CheckboxFn<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TTyp
   }, [checked, indeterminate, disabled, hover, focus, active, changing, autoFocus])
 
   let reset = useCallback(() => {
+    if (defaultChecked === undefined) return
     return onChange?.(defaultChecked)
-  }, [onChange /* Explicitly ignoring `defaultChecked` */])
+  }, [onChange, defaultChecked])
 
   return (
     <>
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index 7ff520d2c1..b5828b2c09 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -24,6 +24,7 @@ import React, {
 import { useActivePress } from '../../hooks/use-active-press'
 import { useByComparator, type ByComparator } from '../../hooks/use-by-comparator'
 import { useControllable } from '../../hooks/use-controllable'
+import { useDefaultValue } from '../../hooks/use-default-value'
 import { useDisposables } from '../../hooks/use-disposables'
 import { useElementSize } from '../../hooks/use-element-size'
 import { useEvent } from '../../hooks/use-event'
@@ -635,7 +636,7 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
   let providedDisabled = useDisabled()
   let {
     value: controlledValue,
-    defaultValue,
+    defaultValue: _defaultValue,
     onChange: controlledOnChange,
     form,
     name,
@@ -651,6 +652,7 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
     nullable: _nullable,
     ...theirProps
   } = props
+  let defaultValue = useDefaultValue(_defaultValue)
   let [value = multiple ? [] : undefined, theirOnChange] = useControllable<any>(
     controlledValue,
     controlledOnChange,
@@ -887,8 +889,9 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
   let ourProps = ref === null ? {} : { ref }
 
   let reset = useCallback(() => {
+    if (defaultValue === undefined) return
     return theirOnChange?.(defaultValue)
-  }, [theirOnChange /* Explicitly ignoring `defaultValue` */])
+  }, [theirOnChange, defaultValue])
 
   return (
     <LabelProvider
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index 1de94eff9e..9f9ac41940 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -24,6 +24,7 @@ import { useActivePress } from '../../hooks/use-active-press'
 import { useByComparator, type ByComparator } from '../../hooks/use-by-comparator'
 import { useComputed } from '../../hooks/use-computed'
 import { useControllable } from '../../hooks/use-controllable'
+import { useDefaultValue } from '../../hooks/use-default-value'
 import { useDidElementMove } from '../../hooks/use-did-element-move'
 import { useDisposables } from '../../hooks/use-disposables'
 import { useElementSize } from '../../hooks/use-element-size'
@@ -481,7 +482,7 @@ function ListboxFn<
   let providedDisabled = useDisabled()
   let {
     value: controlledValue,
-    defaultValue,
+    defaultValue: _defaultValue,
     form,
     name,
     onChange: controlledOnChange,
@@ -493,9 +494,11 @@ function ListboxFn<
     __demoMode = false,
     ...theirProps
   } = props
+
   const orientation = horizontal ? 'horizontal' : 'vertical'
   let listboxRef = useSyncRefs(ref)
 
+  let defaultValue = useDefaultValue(_defaultValue)
   let [value = multiple ? [] : undefined, theirOnChange] = useControllable<any>(
     controlledValue,
     controlledOnChange,
@@ -660,8 +663,9 @@ function ListboxFn<
   let ourProps = { ref: listboxRef }
 
   let reset = useCallback(() => {
+    if (defaultValue === undefined) return
     return theirOnChange?.(defaultValue)
-  }, [theirOnChange /* Explicitly ignoring `defaultValue` */])
+  }, [theirOnChange, defaultValue])
 
   return (
     <LabelProvider
diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx
index 6d554aadff..7c2130a803 100644
--- a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx
+++ b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx
@@ -17,6 +17,7 @@ import React, {
 } from 'react'
 import { useByComparator, type ByComparator } from '../../hooks/use-by-comparator'
 import { useControllable } from '../../hooks/use-controllable'
+import { useDefaultValue } from '../../hooks/use-default-value'
 import { useEvent } from '../../hooks/use-event'
 import { useId } from '../../hooks/use-id'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
@@ -171,15 +172,14 @@ function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG,
   let {
     id = `headlessui-radiogroup-${internalId}`,
     value: controlledValue,
-    defaultValue,
     form,
     name,
     onChange: controlledOnChange,
     by,
     disabled = providedDisabled || false,
+    defaultValue: _defaultValue,
     ...theirProps
   } = props
-
   let compare = useByComparator(by)
   let [state, dispatch] = useReducer(stateReducer, { options: [] } as StateDefinition<TType>)
   let options = state.options as Option<TType>[]
@@ -188,6 +188,7 @@ function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG,
   let internalRadioGroupRef = useRef<HTMLElement | null>(null)
   let radioGroupRef = useSyncRefs(internalRadioGroupRef, ref)
 
+  let defaultValue = useDefaultValue(_defaultValue)
   let [value, onChange] = useControllable(controlledValue, controlledOnChange, defaultValue)
 
   let firstOption = useMemo(
@@ -304,8 +305,9 @@ function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG,
   let slot = useMemo(() => ({ value }) satisfies RadioGroupRenderPropArg<TType>, [value])
 
   let reset = useCallback(() => {
-    return triggerChange(defaultValue!)
-  }, [triggerChange /* Explicitly ignoring `defaultValue` */])
+    if (defaultValue === undefined) return
+    return triggerChange(defaultValue)
+  }, [triggerChange, defaultValue])
 
   return (
     <DescriptionProvider name="RadioGroup.Description">
diff --git a/packages/@headlessui-react/src/components/switch/switch.tsx b/packages/@headlessui-react/src/components/switch/switch.tsx
index e1080faded..5a17ce0525 100644
--- a/packages/@headlessui-react/src/components/switch/switch.tsx
+++ b/packages/@headlessui-react/src/components/switch/switch.tsx
@@ -17,6 +17,7 @@ import React, {
 } from 'react'
 import { useActivePress } from '../../hooks/use-active-press'
 import { useControllable } from '../../hooks/use-controllable'
+import { useDefaultValue } from '../../hooks/use-default-value'
 import { useDisposables } from '../../hooks/use-disposables'
 import { useEvent } from '../../hooks/use-event'
 import { useId } from '../../hooks/use-id'
@@ -146,7 +147,7 @@ function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
     id = providedId || `headlessui-switch-${internalId}`,
     disabled = providedDisabled || false,
     checked: controlledChecked,
-    defaultChecked = false,
+    defaultChecked: _defaultChecked,
     onChange: controlledOnChange,
     name,
     value,
@@ -162,7 +163,12 @@ function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
     groupContext === null ? null : groupContext.setSwitch
   )
 
-  let [checked, onChange] = useControllable(controlledChecked, controlledOnChange, defaultChecked)
+  let defaultChecked = useDefaultValue(_defaultChecked)
+  let [checked, onChange] = useControllable(
+    controlledChecked,
+    controlledOnChange,
+    defaultChecked ?? false
+  )
 
   let d = useDisposables()
   let [changing, setChanging] = useState(false)
@@ -232,8 +238,9 @@ function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
   )
 
   let reset = useCallback(() => {
+    if (defaultChecked === undefined) return
     return onChange?.(defaultChecked)
-  }, [onChange /* Explicitly ignoring `defaultChecked` */])
+  }, [onChange, defaultChecked])
 
   return (
     <>
diff --git a/packages/@headlessui-react/src/hooks/use-default-value.ts b/packages/@headlessui-react/src/hooks/use-default-value.ts
new file mode 100644
index 0000000000..b7a3ada37d
--- /dev/null
+++ b/packages/@headlessui-react/src/hooks/use-default-value.ts
@@ -0,0 +1,13 @@
+import { useState } from 'react'
+
+/**
+ * Returns a stable value that never changes unless the component is re-mounted.
+ *
+ * This ensures that we can use this value in a dependency array without causing
+ * unnecessary re-renders (because while the incoming `value` can change, the
+ * returned `defaultValue` won't change).
+ */
+export function useDefaultValue<T>(value: T) {
+  let [defaultValue] = useState(value)
+  return defaultValue
+}

From f740050c2a1995a1a1e73d8cff6f46efdacb1f0d Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Sat, 25 May 2024 00:27:24 +0200
Subject: [PATCH 13/14] Use native `fieldset` instead of `div` by default for
 `<Fieldset />` component (#3237)

* improve TypeScript types for `Fieldset` component

* use `fieldset` instead of `div` by default

* only apply `role="group"` when not using a native `fieldset`

* apply `disabled` attribute

This is necessary if we want to make use of the default fieldset tag
(which also disables native form elements)

* adjust tests reflecting new changes

* conditionally apply props based on rendered element

* add `useResolvedTag` hook

This allows us to compute the `tag` name of a component. We can use a
shortcut based on the `props.as` and/or the `DEFAULT_XXX_TAG` of a
component. If this is not known/passed, then we compute it based on the
`ref` instead which requires an actual re-render.

* use `useResolvedTag` hook

* reflect change in `Field` related test

* update changelog

* inline variable
---
 packages/@headlessui-react/CHANGELOG.md       |  4 ++
 .../src/components/field/field.test.tsx       |  2 +-
 .../src/components/fieldset/fieldset.test.tsx | 41 ++++++++++++++++++-
 .../src/components/fieldset/fieldset.tsx      | 29 +++++++++----
 .../src/hooks/use-resolved-tag.ts             | 33 +++++++++++++++
 5 files changed, 97 insertions(+), 12 deletions(-)
 create mode 100644 packages/@headlessui-react/src/hooks/use-resolved-tag.ts

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 52b3be2e45..81a94f32fd 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -19,6 +19,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Mark `SwitchGroup` as deprecated, prefer `Field` instead ([#3232](https://github.com/tailwindlabs/headlessui/pull/3232))
 
+### Changed
+
+- Use native `fieldset` instead of `div` by default for `<Fieldset />` component ([#3237](https://github.com/tailwindlabs/headlessui/pull/3237))
+
 ## [2.0.3] - 2024-05-07
 
 ### Fixed
diff --git a/packages/@headlessui-react/src/components/field/field.test.tsx b/packages/@headlessui-react/src/components/field/field.test.tsx
index d1c8b880f6..cd7bf632a4 100644
--- a/packages/@headlessui-react/src/components/field/field.test.tsx
+++ b/packages/@headlessui-react/src/components/field/field.test.tsx
@@ -55,7 +55,7 @@ describe('Rendering', () => {
     let fieldset = container.firstChild
     let field = fieldset?.firstChild
 
-    expect(fieldset).toHaveAttribute('aria-disabled', 'true')
+    expect(fieldset).toHaveAttribute('disabled')
     expect(field).toHaveAttribute('aria-disabled', 'true')
   })
 })
diff --git a/packages/@headlessui-react/src/components/fieldset/fieldset.test.tsx b/packages/@headlessui-react/src/components/fieldset/fieldset.test.tsx
index b7501fd477..7fbd5715cb 100644
--- a/packages/@headlessui-react/src/components/fieldset/fieldset.test.tsx
+++ b/packages/@headlessui-react/src/components/fieldset/fieldset.test.tsx
@@ -22,10 +22,24 @@ describe('Rendering', () => {
 
     let fieldset = container.firstChild
 
+    expect(fieldset).toBeInstanceOf(HTMLFieldSetElement)
+    expect(fieldset).not.toHaveAttribute('role', 'group')
+  })
+
+  it('should render a `Fieldset` using a custom component', async () => {
+    let { container } = render(
+      <Fieldset as="span">
+        <input />
+      </Fieldset>
+    )
+
+    let fieldset = container.firstChild
+
+    expect(fieldset).toBeInstanceOf(HTMLSpanElement)
     expect(fieldset).toHaveAttribute('role', 'group')
   })
 
-  it('should add an `aria-disabled` attribute when disabling the `Fieldset`', async () => {
+  it('should forward the `disabled` attribute when disabling the `Fieldset`', async () => {
     let { container } = render(
       <Fieldset disabled>
         <input />
@@ -34,10 +48,33 @@ describe('Rendering', () => {
 
     let fieldset = container.firstChild
 
-    expect(fieldset).toHaveAttribute('role', 'group')
+    expect(fieldset).toHaveAttribute('disabled')
+  })
+
+  it('should add an `aria-disabled` attribute when disabling the `Fieldset` when using another element via the `as` prop', async () => {
+    let { container } = render(
+      <Fieldset as="span" disabled>
+        <input />
+      </Fieldset>
+    )
+
+    let fieldset = container.firstChild
+
     expect(fieldset).toHaveAttribute('aria-disabled', 'true')
   })
 
+  it('should make nested inputs disabled when the fieldset is disabled', async () => {
+    let { container } = render(
+      <Fieldset disabled>
+        <input />
+      </Fieldset>
+    )
+
+    let fieldset = container.firstChild
+
+    expect(fieldset?.firstChild).toBeDisabled()
+  })
+
   it('should link a `Fieldset` to a nested `Legend`', async () => {
     let { container } = render(
       <Fieldset>
diff --git a/packages/@headlessui-react/src/components/fieldset/fieldset.tsx b/packages/@headlessui-react/src/components/fieldset/fieldset.tsx
index 81f3972509..e23b1572c4 100644
--- a/packages/@headlessui-react/src/components/fieldset/fieldset.tsx
+++ b/packages/@headlessui-react/src/components/fieldset/fieldset.tsx
@@ -1,15 +1,17 @@
 'use client'
 
 import React, { useMemo, type ElementType, type Ref } from 'react'
+import { useResolvedTag } from '../../hooks/use-resolved-tag'
+import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { DisabledProvider, useDisabled } from '../../internal/disabled'
 import type { Props } from '../../types'
 import { forwardRefWithAs, render, type HasDisplayName } from '../../utils/render'
 import { useLabels } from '../label/label'
 
-let DEFAULT_FIELDSET_TAG = 'div' as const
+let DEFAULT_FIELDSET_TAG = 'fieldset' as const
 
 type FieldsetRenderPropArg = {}
-type FieldsetPropsWeControl = 'aria-controls'
+type FieldsetPropsWeControl = 'aria-labelledby' | 'aria-disabled' | 'role'
 
 export type FieldsetProps<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> = Props<
   TTag,
@@ -27,17 +29,26 @@ function FieldsetFn<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(
   let providedDisabled = useDisabled()
   let { disabled = providedDisabled || false, ...theirProps } = props
 
+  let [tag, resolveTag] = useResolvedTag(props.as ?? DEFAULT_FIELDSET_TAG)
+  let fieldsetRef = useSyncRefs(ref, resolveTag)
+
   let [labelledBy, LabelProvider] = useLabels()
 
   let slot = useMemo(() => ({ disabled }) satisfies FieldsetRenderPropArg, [disabled])
 
-  let ourProps = {
-    ref,
-    role: 'group',
-
-    'aria-labelledby': labelledBy,
-    'aria-disabled': disabled || undefined,
-  }
+  let ourProps =
+    tag === 'fieldset'
+      ? {
+          ref: fieldsetRef,
+          'aria-labelledby': labelledBy,
+          disabled: disabled || undefined,
+        }
+      : {
+          ref: fieldsetRef,
+          role: 'group',
+          'aria-labelledby': labelledBy,
+          'aria-disabled': disabled || undefined,
+        }
 
   return (
     <DisabledProvider value={disabled}>
diff --git a/packages/@headlessui-react/src/hooks/use-resolved-tag.ts b/packages/@headlessui-react/src/hooks/use-resolved-tag.ts
new file mode 100644
index 0000000000..ce090669ca
--- /dev/null
+++ b/packages/@headlessui-react/src/hooks/use-resolved-tag.ts
@@ -0,0 +1,33 @@
+import { useCallback, useState } from 'react'
+
+/**
+ * Resolve the actual rendered tag of a DOM node. If the `tag` provided is
+ * already a string we can use that as-is. This will happen when the `as` prop is
+ * not used or when it's used with a string value.
+ *
+ * If an actual component is used, then we need to do some more work because
+ * then we actually need to render the component to know what the tag name is.
+ */
+export function useResolvedTag<T extends React.ElementType>(tag: T) {
+  let tagName = typeof tag === 'string' ? tag : undefined
+  let [resolvedTag, setResolvedTag] = useState<string | undefined>(tagName)
+
+  return [
+    // The resolved tag name
+    tagName ?? resolvedTag,
+
+    // This callback should be passed to the `ref` of a component
+    useCallback(
+      (ref: any) => {
+        // Tag name is already known and it's a string, no need to re-render
+        if (tagName) return
+
+        if (ref instanceof HTMLElement) {
+          // Tag name is not known yet, render the component to find out
+          setResolvedTag(ref.tagName.toLowerCase())
+        }
+      },
+      [tagName]
+    ),
+  ] as const
+}

From 7be23e5c7e2e71218cdba405ea4f4aca7924acc8 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Sat, 25 May 2024 00:30:50 +0200
Subject: [PATCH 14/14] 2.0.4 - @headlessui/react

---
 packages/@headlessui-react/CHANGELOG.md | 7 ++++++-
 packages/@headlessui-react/package.json | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 81a94f32fd..a6c2822372 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- Nothing yet!
+
+## [2.0.4] - 2024-05-25
+
 ### Fixed
 
 - [internal] Don’t set a focus fallback for Dialog’s in demo mode ([#3194](https://github.com/tailwindlabs/headlessui/pull/3194))
@@ -693,7 +697,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v2.0.3...HEAD
+[unreleased]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v2.0.4...HEAD
+[2.0.4]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v2.0.3...@headlessui/react@v2.0.4
 [2.0.3]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v2.0.2...@headlessui/react@v2.0.3
 [2.0.2]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v2.0.1...@headlessui/react@v2.0.2
 [2.0.1]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v2.0.0...@headlessui/react@v2.0.1
diff --git a/packages/@headlessui-react/package.json b/packages/@headlessui-react/package.json
index 0adb575372..82504cbfdc 100644
--- a/packages/@headlessui-react/package.json
+++ b/packages/@headlessui-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@headlessui/react",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.",
   "main": "dist/index.cjs",
   "typings": "dist/index.d.ts",