Expose disabled state on <Tab /> component (#2918)

* expose `disabled` on `<Tab/>` component

This will expose it such that you can use it with `ui-disabled`. In the
Alpha version of React, you can also use `data-[disabled]` because it
will be exposed as `data-disabled` over there as well.

Fixes: #2864

* update changelog

Author: RobinMalfait

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 `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
 
 ## [2.0.0-alpha.4] - 2024-01-03
 

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,
           })
         )
       })

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<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
         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(

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 `<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))
 
+### Fixed
+
+- Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
+
 ## [1.7.17] - 2024-01-08
 
 ### Fixed

packages/@headlessui-vue/src/components/tabs/tabs.test.ts

@@ -463,25 +463,25 @@ describe('Rendering', () => {
       await new Promise<void>(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 })
       )
     })
 

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,