import * as React from 'react' ; import { commonColors } from '@workday/canvas-kit-react/tokens' ; import { composeHooks , createComponent , createHook , ExtractProps , useModelContext , } from '@workday/canvas-kit-react/common' ; import { Stack } from '@workday/canvas-kit-labs-react/layout' ; import { useOverflowMeasureContainer } from './overflow' ; import { useRenderItems } from './list' ; import { useResetCursorOnBlur } from './selection' ; import { TabsModelContext } from './Tabs' ; import { TabsModel } from './useTabsModel' ; export interface TabListProps < T = unknown > extends Partial < ExtractProps < typeof Stack , never > > { example children : ( ( item : T ) => React . ReactNode ) | React . ReactNode ; /**
     * Optionally pass a model directly to this component. Default is to implicitly use the same
     * model as the container component which uses React context. Only use this for advanced use-cases.
     */ model ? : TabsModel < T > ; overflowButton ? : React . ReactNode ; } export const TabsList = createComponent ( 'div' ) ( { displayName : 'Tabs.List' , Component : ( { children , model , overflowButton , ... elemProps } , ref , Element ) => { const localModel = useModelContext ( TabsModelContext , model ) ; const props = useTabsList ( localModel , elemProps , ref ) ; return ( < Stack as = { Element } position = "relative" borderBottom = { `1px solid ${ commonColors . divider }` } marginX = "m" spacing = "xxxs" { ... props } > { useRenderItems ( localModel , children ) } { overflowButton } < /Stack>); } , } ) ; export const useTabsList = composeHooks ( createHook ( ( _ ) => { return { role : 'tablist' } ; } ) , useOverflowMeasureContainer , useResetCursorOnBlur ) ;