From 369be39d19aacadb3d3fc00895b24dab80476457 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 9 Jan 2024 15:45:30 +0100 Subject: [PATCH] Expose `disabled` state on `` component (#2918) * expose `disabled` on `` 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 --- packages/@headlessui-react/CHANGELOG.md | 1 + .../src/components/tabs/tabs.test.tsx | 12 ++++++------ .../@headlessui-react/src/components/tabs/tabs.tsx | 8 ++++++-- packages/@headlessui-vue/CHANGELOG.md | 4 +++- .../@headlessui-vue/src/components/tabs/tabs.test.ts | 12 ++++++------ packages/@headlessui-vue/src/components/tabs/tabs.ts | 2 +- 6 files changed, 23 insertions(+), 16 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index c4c866f9b9..8e4485ac92 100644 --- 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 `` 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 index 5ba3e39df5..0af031b7ff 100644 --- 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 index e25eb2b41e..116f28d928 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.tsx +++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx @@ -374,6 +374,7 @@ function ListFn( 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 = Props< TabRenderPropArg, TabPropsWeControl > & { - // + disabled?: boolean } function TabFn( @@ -484,7 +485,10 @@ function TabFn( 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 index 10fc979c18..d13eb92644 100644 --- 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 `` 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 index 5e97ea01dc..798645cff0 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 5916e865fb..12b95d2c57 100644 --- 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,