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
tailwindlabs · Apr 15, 2024 · 369be39 · 369be39
1 parent 2b161b3
commit 369be39
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 16 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Make sure panels re-register when IDs are calculated in React < 18 ([#2883](https://github.com/tailwindlabs/headlessui/pull/2883))
+- Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
 
 ## [1.7.18] - 2024-01-08
 

diff --git a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
@@ -538,25 +538,25 @@ describe('Rendering', () => {
         )
 
         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-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx
@@ -374,6 +374,7 @@ function ListFn<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(
 let DEFAULT_TAB_TAG = 'button' as const
 interface TabRenderPropArg {
   selected: boolean
+  disabled: boolean
 }
 type TabPropsWeControl = 'aria-controls' | 'aria-selected' | 'role' | 'tabIndex'
 
@@ -382,7 +383,7 @@ export type TabProps<TTag extends ElementType> = Props<
   TabRenderPropArg,
   TabPropsWeControl
 > & {
-  //
+  disabled?: boolean
 }
 
 function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
@@ -484,7 +485,10 @@ function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
     event.preventDefault()
   })
 
-  let slot = useMemo(() => ({ selected }), [selected])
+  let slot = useMemo(
+    () => ({ selected, disabled: props.disabled ?? false }),
+    [selected, props.disabled]
+  )
 
   let ourProps = {
     ref: tabRef,

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/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))
 
 ## [1.7.19] - 2024-02-07
 

diff --git 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<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 })
       )
     })
 

diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts
@@ -425,7 +425,7 @@ export let Tab = defineComponent({
     )
 
     return () => {
-      let slot = { selected: selected.value }
+      let slot = { selected: selected.value, disabled: props.disabled ?? false }
       let { ...theirProps } = props
       let ourProps = {
         ref: internalTabRef,