import React , { useState , ReactElement } from 'react' ; import { i18n } from '@kbn/i18n' ; interface ChildrenProps { toggle : ( ) => void ; isHidden : boolean ; hiddenText : React . ReactNode ; } interface Props { text : string ; children ( props ) : ReactElement ; } export const HiddenText = ( { text , children } ) => { const [ isHidden , toggleIsHidden ] = useState ( true ) ; const hiddenLabel = i18n . translate ( 'xpack.enterpriseSearch.hiddenText' , { defaultMessage : 'Hidden text' , } ) ; const hiddenText = isHidden ? ( < span aria - label = { hiddenLabel } > < span aria - hidden > { text . replace ( /./g , '•' ) } < /span> < /span>) : (text); return children ( { hiddenText , isHidden , toggle : ( ) => toggleIsHidden ( ! isHidden ) , } ) ; } ;