import React from 'react' ; import Box from '../../primitives/Box' ; import { AccordionContext , AccordionItemContext } from './Context' ; import type { IAccordionItemProps , IAccordionContextProps } from './types' ; import { useThemeProps } from '../../../hooks' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; const AccordionItem = ( { children , index : pIndex = 0 , isDisabled , ... props } , ref ? ) => { const { index : cIndex , changeHandler , } = React . useContext ( AccordionContext ) ; const { ... newProps } = useThemeProps ( 'AccordionItem' , props ) ; const isOpen = cIndex ?. includes ( pIndex ) ; const onClose = ( cb ? ) => { changeHandler && changeHandler ( false , pIndex ) ; cb && cb ( ) ; } ; const onOpen = ( cb ? ) => { changeHandler && changeHandler ( true , pIndex ) ; cb && cb ( ) ; } ; const childSetter = ( ) => { if ( typeof children === 'function' ) return children ( { isExpanded : isOpen , isDisabled } ) ; return children ; } ; if ( useHasResponsiveProps ( props ) ) { return null ; } return ( < AccordionItemContext . Provider value = { { index : pIndex , isOpen , isDisabled , onClose , onOpen , } } > < Box { ... newProps } ref = { ref } > { childSetter ( ) } < /Box> < /AccordionItemContext.Provider>); } ; export default React . memo ( React . forwardRef ( AccordionItem ) ) ;