import { useContext , createContext } from 'react' ; import type { ReactElement , ComponentType , SVGAttributes } from 'react' ; import styles from './ToggleGroup.module.css' ; interface ToggleGroupProps { role : 'tablist' | 'radiogroup' ; value : string ; disabled ? : boolean ; onChange : ( val : string ) => void ; } const ToggleGroupContext = createContext < ToggleGroupProps | undefined > ( undefined ) ; function useToggleGroupProps ( ) { const context = useContext ( ToggleGroupContext ) ; if ( ! context ) { throw new Error ( 'Missing Toggle Group provider.' ) ; } return context ; } interface BtnProps { label : string ; value : string ; icon ? : ComponentType < SVGAttributes < SVGElement > > ; iconOnly ? : boolean ; disabled ? : boolean ; } function Btn ( props ) { const { label , value , icon : Icon , iconOnly , disabled = false } = props ; const { role , value : selectedValue , disabled : isGroupDisabled , onChange , } = useToggleGroupProps ( ) ; return ( < button disabled = { disabled || isGroupDisabled } className = { styles . btn } type = "button" title = { iconOnly ? label : undefined } role = { role === 'tablist' ? 'tab' : 'radio' } data - raised aria - label = { iconOnly ? label : undefined } aria - checked = { value === selectedValue } onClick = { ( ) => { onChange ( value ) ; } } > < span className = { styles . btnLike } > { Icon && < Icon className = { styles . icon } />} { ! iconOnly && < span className = { styles . label } > { label } < /span>} < /span> < /button>); } interface Props extends ToggleGroupProps { ariaLabel ? : string ; children : ReactElement < BtnProps > [ ] ; } function ToggleGroup ( props ) { const { role , ariaLabel , value , disabled , onChange , children } = props ; return ( < ToggleGroupContext . Provider value = { { role , value , disabled , onChange } } > < div className = { styles . group } role = { role } aria - label = { ariaLabel } > { children } < /div> < /ToggleGroupContext.Provider>); } ToggleGroup . Btn = Btn ; export default ToggleGroup ;