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,