File tree Expand file tree Collapse file tree 6 files changed +23
-16
lines changed Expand file tree Collapse file tree 6 files changed +23
-16
lines changed Original file line number Diff line number Diff line change @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
15
15
### Fixed
16
16
17
17
- 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 ) )
18
19
19
20
## [ 1.7.18] - 2024-01-08
20
21
Original file line number Diff line number Diff line change @@ -538,25 +538,25 @@ describe('Rendering', () => {
538
538
)
539
539
540
540
expect ( document . querySelector ( '[data-tab="0"]' ) ) . toHaveTextContent (
541
- JSON . stringify ( { selected : true } )
541
+ JSON . stringify ( { selected : true , disabled : false } )
542
542
)
543
543
expect ( document . querySelector ( '[data-tab="1"]' ) ) . toHaveTextContent (
544
- JSON . stringify ( { selected : false } )
544
+ JSON . stringify ( { selected : false , disabled : false } )
545
545
)
546
546
expect ( document . querySelector ( '[data-tab="2"]' ) ) . toHaveTextContent (
547
- JSON . stringify ( { selected : false } )
547
+ JSON . stringify ( { selected : false , disabled : false } )
548
548
)
549
549
550
550
await click ( getTabs ( ) [ 1 ] )
551
551
552
552
expect ( document . querySelector ( '[data-tab="0"]' ) ) . toHaveTextContent (
553
- JSON . stringify ( { selected : false } )
553
+ JSON . stringify ( { selected : false , disabled : false } )
554
554
)
555
555
expect ( document . querySelector ( '[data-tab="1"]' ) ) . toHaveTextContent (
556
- JSON . stringify ( { selected : true } )
556
+ JSON . stringify ( { selected : true , disabled : false } )
557
557
)
558
558
expect ( document . querySelector ( '[data-tab="2"]' ) ) . toHaveTextContent (
559
- JSON . stringify ( { selected : false } )
559
+ JSON . stringify ( { selected : false , disabled : false } )
560
560
)
561
561
} )
562
562
)
Original file line number Diff line number Diff line change @@ -374,6 +374,7 @@ function ListFn<TTag extends ElementType = typeof DEFAULT_LIST_TAG>(
374
374
let DEFAULT_TAB_TAG = 'button' as const
375
375
interface TabRenderPropArg {
376
376
selected : boolean
377
+ disabled : boolean
377
378
}
378
379
type TabPropsWeControl = 'aria-controls' | 'aria-selected' | 'role' | 'tabIndex'
379
380
@@ -382,7 +383,7 @@ export type TabProps<TTag extends ElementType> = Props<
382
383
TabRenderPropArg ,
383
384
TabPropsWeControl
384
385
> & {
385
- //
386
+ disabled ?: boolean
386
387
}
387
388
388
389
function TabFn < TTag extends ElementType = typeof DEFAULT_TAB_TAG > (
@@ -484,7 +485,10 @@ function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
484
485
event . preventDefault ( )
485
486
} )
486
487
487
- let slot = useMemo ( ( ) => ( { selected } ) , [ selected ] )
488
+ let slot = useMemo (
489
+ ( ) => ( { selected, disabled : props . disabled ?? false } ) ,
490
+ [ selected , props . disabled ]
491
+ )
488
492
489
493
let ourProps = {
490
494
ref : tabRef ,
Original file line number Diff line number Diff line change @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
8
8
## [ Unreleased]
9
9
10
- - Nothing yet!
10
+ ### Fixed
11
+
12
+ - Expose ` disabled ` state on ` <Tab /> ` component ([ #2918 ] ( https://github.com/tailwindlabs/headlessui/pull/2918 ) )
11
13
12
14
## [ 1.7.19] - 2024-02-07
13
15
Original file line number Diff line number Diff line change @@ -463,25 +463,25 @@ describe('Rendering', () => {
463
463
await new Promise < void > ( nextTick )
464
464
465
465
expect ( document . querySelector ( '[data-tab="0"]' ) ) . toHaveTextContent (
466
- JSON . stringify ( { selected : true } )
466
+ JSON . stringify ( { selected : true , disabled : false } )
467
467
)
468
468
expect ( document . querySelector ( '[data-tab="1"]' ) ) . toHaveTextContent (
469
- JSON . stringify ( { selected : false } )
469
+ JSON . stringify ( { selected : false , disabled : false } )
470
470
)
471
471
expect ( document . querySelector ( '[data-tab="2"]' ) ) . toHaveTextContent (
472
- JSON . stringify ( { selected : false } )
472
+ JSON . stringify ( { selected : false , disabled : false } )
473
473
)
474
474
475
475
await click ( getTabs ( ) [ 1 ] )
476
476
477
477
expect ( document . querySelector ( '[data-tab="0"]' ) ) . toHaveTextContent (
478
- JSON . stringify ( { selected : false } )
478
+ JSON . stringify ( { selected : false , disabled : false } )
479
479
)
480
480
expect ( document . querySelector ( '[data-tab="1"]' ) ) . toHaveTextContent (
481
- JSON . stringify ( { selected : true } )
481
+ JSON . stringify ( { selected : true , disabled : false } )
482
482
)
483
483
expect ( document . querySelector ( '[data-tab="2"]' ) ) . toHaveTextContent (
484
- JSON . stringify ( { selected : false } )
484
+ JSON . stringify ( { selected : false , disabled : false } )
485
485
)
486
486
} )
487
487
Original file line number Diff line number Diff line change @@ -425,7 +425,7 @@ export let Tab = defineComponent({
425
425
)
426
426
427
427
return ( ) => {
428
- let slot = { selected : selected . value }
428
+ let slot = { selected : selected . value , disabled : props . disabled ?? false }
429
429
let { ...theirProps } = props
430
430
let ourProps = {
431
431
ref : internalTabRef ,
You can’t perform that action at this time.
0 commit comments