import type { ReactElement } from 'react' ; import Measure from 'react-measure' ; import styles from './Toolbar.module.css' ; interface Props { children : ReactElement ; knownWidth : number | undefined ; onMeasure : ( width : number ) => void ; } function MeasuredControl ( props ) { const { children : child , knownWidth , onMeasure } = props ; return ( < Measure onResize = { ( { entry } ) => { if ( entry && entry . width > ( knownWidth || 0 ) ) { onMeasure ( entry . width ) ; } } } > { ( { measureRef } ) => ( < div className = { styles . controlWrapper } data - measured = { knownWidth !== undefined } > < div ref = { measureRef } className = { styles . control } > { child } < /div> < /div>)} < /Measure>); } export default MeasuredControl ;