import { ButtonGroup , ButtonGroupProps , Tab } from '@mui/material' ; import { useTabContext , getPanelId , getTabId } from '@mui/lab/TabContext' ; import { forwardRef , cloneElement , Children , isValidElement } from 'react' ; import { ButtonTab } from './ButtonGroupTab' ; export interface ButtonGroupTabListProps extends React . PropsWithChildren < Pick < ButtonGroupProps , 'classes' | 'disabled' | 'fullWidth' | 'size' > > { onChange ( event , value ) : void ; 'aria-label' : string ; } example export const ButtonGroupTabList = forwardRef < HTMLDivElement , ButtonGroupTabListProps > ( ( props , ref ) => { const context = useTabContext ( ) ; if ( context === null ) throw new TypeError ( 'No TabContext provided' ) ; const children = Children . map ( props . children , ( child ) => { if ( ! isValidElement ( child ) ) return child ; const extra = { 'aria-controls' : getPanelId ( context , child . props . value ) , id : getTabId ( context , child . props . value ) , selected : child . props . value === context . value , onChange : props . onChange , } ; if ( child . type === Tab ) { return ( < ButtonTab value = { child . props . value } { ... extra } > { child . props . label } < /ButtonTab>); } return cloneElement ( child , extra ) ; } ) ; const { onChange , ... rest } = props ; return ( < ButtonGroup { ... rest } ref = { ref } role = "tablist" > { children } < /ButtonGroup>); } ) ;