import React , { memo , forwardRef } from 'react' ; import type { IButtonGroupProps } from './types' ; import { usePropsResolution } from '../../../hooks/useThemeProps' ; import { Stack } from '../Stack' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; export default memo ( forwardRef ( ( { children , divider , ... props } , ref ? ) => { const { space , direction , variant , size , colorScheme , isDisabled , isAttached , ... newProps } = usePropsResolution ( 'ButtonGroup' , props ) ; const { borderRadius } = usePropsResolution ( 'Button' , props ) ; let computedChildren ; if ( Array . isArray ( children ) ) { computedChildren = React . Children . map ( children , ( child , index ) => { return React . cloneElement ( child , { key : `button-group-child-${ index }` , variant , size , colorScheme , isDisabled , ... ( isAttached ? { borderRadius : 0 } : { } ) , ... ( isAttached && index === 0 ? direction === 'column' ? { borderTopRadius : borderRadius } : { borderLeftRadius : borderRadius } : { } ) , ... ( isAttached && index === children ?. length - 1 ? direction === 'column' ? { borderBottomRadius : borderRadius } : { borderRightRadius : borderRadius } : { } ) , ... ( isAttached && index !== 0 ? direction === 'column' ? { borderTopWidth : 0 } : { borderLeftWidth : 0 } : { } ) , ... child . props , } ) ; } ) ; } else { computedChildren = React . Children . map ( children , ( child , index ) => { return React . cloneElement ( child , { key : `button-group-child-${ index }` , variant , size , colorScheme , isDisabled , ... child . props , } ) ; } ) ; } if ( useHasResponsiveProps ( props ) ) { return null ; } return ( < Stack divider = { divider } space = { isAttached ? 0 : space } direction = { direction } { ... newProps } ref = { ref } > { computedChildren } < /Stack>); } ) ) ;