Skip to content

Commit 369be39

Browse files
committed
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
1 parent 2b161b3 commit 369be39

File tree

6 files changed

+23
-16
lines changed

6 files changed

+23
-16
lines changed

packages/@headlessui-react/CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1515
### Fixed
1616

1717
- Make sure panels re-register when IDs are calculated in React < 18 ([#2883](https://github.com/tailwindlabs/headlessui/pull/2883))
18+
- Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
1819

1920
## [1.7.18] - 2024-01-08
2021

packages/@headlessui-react/src/components/tabs/tabs.test.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -538,25 +538,25 @@ describe('Rendering', () => {
538538
)
539539

540540
expect(document.querySelector('[data-tab="0"]')).toHaveTextContent(
541-
JSON.stringify({ selected: true })
541+
JSON.stringify({ selected: true, disabled: false })
542542
)
543543
expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
544-
JSON.stringify({ selected: false })
544+
JSON.stringify({ selected: false, disabled: false })
545545
)
546546
expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
547-
JSON.stringify({ selected: false })
547+
JSON.stringify({ selected: false, disabled: false })
548548
)
549549

550550
await click(getTabs()[1])
551551

552552
expect(document.querySelector('[data-tab="0"]')).toHaveTextContent(
553-
JSON.stringify({ selected: false })
553+
JSON.stringify({ selected: false, disabled: false })
554554
)
555555
expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
556-
JSON.stringify({ selected: true })
556+
JSON.stringify({ selected: true, disabled: false })
557557
)
558558
expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
559-
JSON.stringify({ selected: false })
559+
JSON.stringify({ selected: false, disabled: false })
560560
)
561561
})
562562
)

packages/@headlessui-react/src/components/tabs/tabs.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -374,6 +374,7 @@ function ListFn<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(
374374
let DEFAULT_TAB_TAG = 'button' as const
375375
interface TabRenderPropArg {
376376
selected: boolean
377+
disabled: boolean
377378
}
378379
type TabPropsWeControl = 'aria-controls' | 'aria-selected' | 'role' | 'tabIndex'
379380

@@ -382,7 +383,7 @@ export type TabProps<TTag extends ElementType> = Props<
382383
TabRenderPropArg,
383384
TabPropsWeControl
384385
> & {
385-
//
386+
disabled?: boolean
386387
}
387388

388389
function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
@@ -484,7 +485,10 @@ function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
484485
event.preventDefault()
485486
})
486487

487-
let slot = useMemo(() => ({ selected }), [selected])
488+
let slot = useMemo(
489+
() => ({ selected, disabled: props.disabled ?? false }),
490+
[selected, props.disabled]
491+
)
488492

489493
let ourProps = {
490494
ref: tabRef,

packages/@headlessui-vue/CHANGELOG.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10-
- Nothing yet!
10+
### Fixed
11+
12+
- Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
1113

1214
## [1.7.19] - 2024-02-07
1315

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -463,25 +463,25 @@ describe('Rendering', () => {
463463
await new Promise<void>(nextTick)
464464

465465
expect(document.querySelector('[data-tab="0"]')).toHaveTextContent(
466-
JSON.stringify({ selected: true })
466+
JSON.stringify({ selected: true, disabled: false })
467467
)
468468
expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
469-
JSON.stringify({ selected: false })
469+
JSON.stringify({ selected: false, disabled: false })
470470
)
471471
expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
472-
JSON.stringify({ selected: false })
472+
JSON.stringify({ selected: false, disabled: false })
473473
)
474474

475475
await click(getTabs()[1])
476476

477477
expect(document.querySelector('[data-tab="0"]')).toHaveTextContent(
478-
JSON.stringify({ selected: false })
478+
JSON.stringify({ selected: false, disabled: false })
479479
)
480480
expect(document.querySelector('[data-tab="1"]')).toHaveTextContent(
481-
JSON.stringify({ selected: true })
481+
JSON.stringify({ selected: true, disabled: false })
482482
)
483483
expect(document.querySelector('[data-tab="2"]')).toHaveTextContent(
484-
JSON.stringify({ selected: false })
484+
JSON.stringify({ selected: false, disabled: false })
485485
)
486486
})
487487

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -425,7 +425,7 @@ export let Tab = defineComponent({
425425
)
426426

427427
return () => {
428-
let slot = { selected: selected.value }
428+
let slot = { selected: selected.value, disabled: props.disabled ?? false }
429429
let { ...theirProps } = props
430430
let ourProps = {
431431
ref: internalTabRef,

0 commit comments

Comments
 (0)