import React from 'react' ; import PropTypes from 'prop-types' ; import { css , cx } from '@leafygreen-ui/emotion' ; import Size from './Size' ; import { HTMLElementProps } from '@leafygreen-ui/lib' ; import { useIdAllocator } from '@leafygreen-ui/hooks' ; import { Provider } from './context' ; const baseGroupStyle = css `
  display: flex;
` ; interface RadioBoxGroupProps extends HTMLElementProps < 'div' , never > { /**
     * Content that will appear inside of RadioBoxGroup component.
     */ children ? : React . ReactNode ; /**
     * Callback to be executed when a RadioBox is selected.
     */ onChange ? : React . ChangeEventHandler < HTMLInputElement > ; /**
     * Name passed to each RadioBox belonging to the RadioGroup.
     */ name ? : string ; /**
     * Determines what RadioBox will be checked on default. Component will be controlled if this prop is used.
     */ value ? : string | number ; /**
     * Determines size of RadioBox components ['default', 'compact', 'full'].
     */ size ? : Size ; /**
     * className supplied to RadioBoxGroup container.
     */ className ? : string ; } param props . children param props . onChange param props . name param props . value param props . className param props . size function RadioBoxGroup ( { children , className , size = Size . Default , onChange = ( ) => { } , name , value : controlledValue , ... rest } ) { const [ uncontrolledValue , setUncontrolledValue ] = React . useState < string | number | undefined > ( ) ; const defaultName = useIdAllocator ( { prefix : 'radio-box-group' , id : name , } ) ; const handleChange = ( e ) => { if ( onChange ) { e . stopPropagation ( ) ; onChange ( e ) ; } if ( ! controlledValue ) { setUncontrolledValue ( e . target . value ) ; } } ; return ( < Provider value = { { value : controlledValue ?? uncontrolledValue , name : defaultName , size , onChange : handleChange , } } > < div { ... rest } className = { cx ( baseGroupStyle , className ) } role = "group" aria - label = { name } > { children } < /div> < /Provider>); } RadioBoxGroup . displayName = 'RadioBoxGroup' ; RadioBoxGroup . propTypes = { children : PropTypes . node , onChange : PropTypes . func , name : PropTypes . string , value : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . number ] ) , size : PropTypes . oneOf ( [ 'compact' , 'default' , 'full' ] ) , className : PropTypes . string , } ; export default RadioBoxGroup ;