import { Box } from '@rocket.chat/fuselage' ; import * as UiKit from '@rocket.chat/ui-kit' ; import React , { memo , ReactElement , useMemo } from 'react' ; import { BlockProps } from '../utils/BlockProps' ; import Item from './ContextBlock.Item' ; type ContextBlockProps = BlockProps < UiKit . ContextBlock > ; const ContextBlock = ( { className , block , surfaceRenderer , } ) : ReactElement => { const itemElements = useMemo ( ( ) => block . elements . map ( ( element ) => ( { ... element , appId : block . appId , blockId : block . blockId , } ) ) , [ block . appId , block . blockId , block . elements ] ) ; return ( < Box className = { className } display = 'flex' alignItems = 'center' margin = { - 4 } > { itemElements . map ( ( element , i ) => ( < Item key = { i } block = { element } surfaceRenderer = { surfaceRenderer } index = { i } / > ) ) } < /Box>); } ; export default memo ( ContextBlock ) ;