import { useToggle } from '@rocket.chat/fuselage-hooks' ; import React , { ComponentProps , forwardRef , Ref } from 'react' ; import { Icon } from '../Icon' ; import { InputBox } from '../InputBox' ; type PasswordInputProps = Omit < ComponentProps < typeof InputBox > , 'type' > ; const PasswordInput = forwardRef ( function PasswordInput ( props , ref ) { const [ hidden , toggle ] = useToggle ( true ) ; const handleAddonClick = ( ) => { toggle ( ) ; } ; return ( < InputBox type = { hidden ? 'password' : 'text' } addon = { < Icon name = { hidden ? 'eye-off' : 'eye' } size = { 20 } onClick = { handleAddonClick } / > } ref = { ref } { ... props } / > ) ; } ) ; export default PasswordInput ;