1- import { Children , isValidElement , useContext , useRef , useState , useTransition } from 'react' ;
1+ import { Children , isValidElement , useRef , useState , useTransition } from 'react' ;
22
3- import { TabContext } from '../Tab.context' ;
43import { StyledFixedTab , StyledList , StyledScrollableTab } from '../Tabs.style' ;
54import { TabListProps , TabPanelProps , TabProps } from '../Tabs.type' ;
65
@@ -12,15 +11,10 @@ export const useTabs = <TabType extends string>({
1211scrollable ?:boolean ;
1312} ) => {
1413const [ isPending , startTransition ] = useTransition ( ) ;
14+ const [ currentTab , setCurrentTab ] = useState < TabType > ( defaultTab ) ;
1515
1616const Tabs = ( { children} :{ children :React . ReactNode } ) => {
17- const [ currentTab , setCurrentTab ] = useState < string > ( defaultTab ) ;
18-
19- return (
20- < TabContext . Provider value = { { currentTab, setCurrentTab} } >
21- < div > { children } </ div >
22- </ TabContext . Provider >
23- ) ;
17+ return < div > { children } </ div > ;
2418} ;
2519
2620const List = ( { children, size= 'large' , ...props } :TabListProps ) => {
@@ -44,16 +38,11 @@ export const useTabs = <TabType extends string>({
4438} ;
4539
4640const Tab = ( { children, id, onClick, ...props } :TabProps < TabType > ) => {
47- const { currentTab, setCurrentTab} = useContext ( TabContext ) ?? {
48- currentTab :undefined ,
49- setCurrentTab :undefined ,
50- startTransition :undefined ,
51- } ;
5241const isSelected = currentTab === id ;
5342const tabRef = useRef < HTMLButtonElement > ( null ) ;
5443
5544const onClickWrapper = ( event :React . MouseEvent < HTMLButtonElement , MouseEvent > ) => {
56- startTransition ( ( ) => setCurrentTab ?.( id ) ) ;
45+ startTransition ?. ( ( ) => setCurrentTab ?.( id ) ) ;
5746onClick ?.( event ) ;
5847} ;
5948
@@ -113,8 +102,6 @@ export const useTabs = <TabType extends string>({
113102} ;
114103
115104const Panel = ( { children, value, ...props } :TabPanelProps < TabType > ) => {
116- const { currentTab} = useContext ( TabContext ) ?? { currentTab :undefined } ;
117-
118105if ( currentTab !== value ) return ;
119106return (
120107< div role = "tabpanel" aria-labelledby = { value } tabIndex = { 0 } { ...props } >