import React from 'react' ; import { createComponent , useDefaultModel } from '@workday/canvas-kit-react/common' ; import { Menu } from './menu' ; import { TabsItem } from './TabsItem' ; import { TabsList } from './TabsList' ; import { TabsPanel } from './TabsPanel' ; import { useTabsModel , TabsModel , TabsModelConfig } from './useTabsModel' ; import { TabsOverflowButton } from './TabsOverflowButton' ; import { TabsMenuPopper } from './TabsMenuPopper' ; import { TabsPanels } from './TabsPanels' ; export const TabsModelContext = React . createContext < TabsModel > ( { } as any ) ; export interface TabsProps < T = any > extends TabsModelConfig < T > { /**
     * The contents of the Tabs. Can be `Tabs` children or any valid elements.
     */ children : React . ReactNode ; default model ? : TabsModel < T > ; } export const Tabs = createComponent ( ) ( { displayName : 'Tabs' , Component : ( { children , model , ... config } ) => { const value = useDefaultModel ( model , config , useTabsModel ) ; return ( < TabsModelContext . Provider value = { value } > < Menu model = { value . menu } > { children } < /Menu> < /TabsModelContext.Provider>); } , subComponents : { List : TabsList , Item : TabsItem , Panel : TabsPanel , Panels : TabsPanels , OverflowButton : TabsOverflowButton , MenuPopper : TabsMenuPopper , example Menu , } , } ) ;