diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index faa061ee05..1b7359e1c0 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
+
+- Expose `disabled` state on `` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
## [2.0.0-alpha.4] - 2024-01-03
diff --git a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
index 679a4cb63d..9cb78f274c 100644
--- a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
+++ b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
@@ -544,6 +544,7 @@ describe('Rendering', () => {
active: false,
focus: false,
autofocus: false,
+ disabled: false,
})
)
expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
@@ -553,6 +554,7 @@ describe('Rendering', () => {
active: false,
focus: false,
autofocus: false,
+ disabled: false,
})
)
expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
@@ -562,6 +564,7 @@ describe('Rendering', () => {
active: false,
focus: false,
autofocus: false,
+ disabled: false,
})
)
@@ -574,6 +577,7 @@ describe('Rendering', () => {
active: false,
focus: false,
autofocus: false,
+ disabled: false,
})
)
expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
@@ -583,6 +587,7 @@ describe('Rendering', () => {
active: false,
focus: false,
autofocus: false,
+ disabled: false,
})
)
expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
@@ -592,6 +597,7 @@ describe('Rendering', () => {
active: false,
focus: false,
autofocus: false,
+ disabled: false,
})
)
})
diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx
index 24ea4983b7..e4de17faa5 100644
--- a/packages/@headlessui-react/src/components/tabs/tabs.tsx
+++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx
@@ -388,6 +388,7 @@ type TabRenderPropArg = {
active: boolean
autofocus: boolean
selected: boolean
+ disabled: boolean
}
type TabPropsWeControl = 'aria-controls' | 'aria-selected' | 'role' | 'tabIndex'
@@ -512,8 +513,9 @@ function TabFn(
active,
focus,
autofocus: props.autoFocus ?? false,
+ disabled: props.disabled ?? false,
}) satisfies TabRenderPropArg,
- [selected, hover, focus, active, props.autoFocus]
+ [selected, hover, focus, active, props.autoFocus, props.disabled]
)
let ourProps = mergeProps(
diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
index a372c352f5..5ac8cff7d3 100644
--- a/packages/@headlessui-vue/CHANGELOG.md
+++ b/packages/@headlessui-vue/CHANGELOG.md
@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Add `immediate` prop to `` 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))
+### Fixed
+
+- Expose `disabled` state on `` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
+
## [1.7.17] - 2024-01-08
### Fixed
diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.test.ts b/packages/@headlessui-vue/src/components/tabs/tabs.test.ts
index 96a152e6ff..28a5896b6d 100644
--- a/packages/@headlessui-vue/src/components/tabs/tabs.test.ts
+++ b/packages/@headlessui-vue/src/components/tabs/tabs.test.ts
@@ -463,25 +463,25 @@ describe('Rendering', () => {
await new Promise(nextTick)
expect(document.querySelector('[data-tab="0"]')).toHaveTextContent(
- JSON.stringify({ selected: true })
+ JSON.stringify({ selected: true, disabled: false })
)
expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
- JSON.stringify({ selected: false })
+ JSON.stringify({ selected: false, disabled: false })
)
expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
- JSON.stringify({ selected: false })
+ JSON.stringify({ selected: false, disabled: false })
)
await click(getTabs()[1])
expect(document.querySelector('[data-tab="0"]')).toHaveTextContent(
- JSON.stringify({ selected: false })
+ JSON.stringify({ selected: false, disabled: false })
)
expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
- JSON.stringify({ selected: true })
+ JSON.stringify({ selected: true, disabled: false })
)
expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
- JSON.stringify({ selected: false })
+ JSON.stringify({ selected: false, disabled: false })
)
})
diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts
index 4e5156e0e7..591c92c436 100644
--- a/packages/@headlessui-vue/src/components/tabs/tabs.ts
+++ b/packages/@headlessui-vue/src/components/tabs/tabs.ts
@@ -423,7 +423,7 @@ export let Tab = defineComponent({
)
return () => {
- let slot = { selected: selected.value }
+ let slot = { selected: selected.value, disabled: props.disabled ?? false }
let { id, ...theirProps } = props
let ourProps = {
ref: internalTabRef,