From edbcb81ead08682ac309f8999a9abf20e5a78e49 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 31 Jan 2024 13:29:50 +0100
Subject: [PATCH] Add `hidden` attribute to internal `<Hidden />` component
 when the `Features.Hidden` feature is used (#2955)

* add `hidden` attribute for `<Hidden features={Features.Hidden}>`

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md            | 1 +
 packages/@headlessui-react/src/internal/hidden.tsx | 1 +
 packages/@headlessui-vue/CHANGELOG.md              | 1 +
 packages/@headlessui-vue/src/internal/hidden.ts    | 1 +
 4 files changed, 4 insertions(+)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 52d371aab..3f7311655 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
 - Prevent default behaviour when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
 - Use `isFocused` instead of `isFocusVisible` for `Input` and `Textarea` components ([#2940](https://github.com/tailwindlabs/headlessui/pull/2940))
 - Ensure `children` prop of `Field` component can be a render prop ([#2941](https://github.com/tailwindlabs/headlessui/pull/2941))
+- Add `hidden` attribute to internal `<Hidden />` component when the `Features.Hidden` feature is used ([#2955](https://github.com/tailwindlabs/headlessui/pull/2955))
 
 ## [2.0.0-alpha.4] - 2024-01-03
 
diff --git a/packages/@headlessui-react/src/internal/hidden.tsx b/packages/@headlessui-react/src/internal/hidden.tsx
index 2f9edab1d..6cf4ee55b 100644
--- a/packages/@headlessui-react/src/internal/hidden.tsx
+++ b/packages/@headlessui-react/src/internal/hidden.tsx
@@ -35,6 +35,7 @@ function VisuallyHidden<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDE
       (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable
         ? true
         : theirProps['aria-hidden'] ?? undefined,
+    hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : undefined,
     style: {
       position: 'fixed',
       top: 1,
diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
index 8c5d8fc19..bbcd06ef7 100644
--- a/packages/@headlessui-vue/CHANGELOG.md
+++ b/packages/@headlessui-vue/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
 - Prevent default behaviour when clicking outside of a `DialogPanel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
 - Don’t override explicit `disabled` prop for components inside `<MenuItem>` ([#2929](https://github.com/tailwindlabs/headlessui/pull/2929))
+- Add `hidden` attribute to internal `<Hidden />` component when the `Features.Hidden` feature is used ([#2955](https://github.com/tailwindlabs/headlessui/pull/2955))
 
 ## [1.7.17] - 2024-01-08
 
diff --git a/packages/@headlessui-vue/src/internal/hidden.ts b/packages/@headlessui-vue/src/internal/hidden.ts
index f28fbab88..46565e17c 100644
--- a/packages/@headlessui-vue/src/internal/hidden.ts
+++ b/packages/@headlessui-vue/src/internal/hidden.ts
@@ -27,6 +27,7 @@ export let Hidden = defineComponent({
             ? true
             : // @ts-ignore
               theirProps['aria-hidden'] ?? undefined,
+        hidden: (features & Features.Hidden) === Features.Hidden ? true : undefined,
         style: {
           position: 'fixed',
           top: 1,