import { AbstractTextInputProps , TextInput } from "./TextInput" ; import { ChangeEvent , ComponentProps , forwardRef } from "react" ; import { EyeIcon , PrivacyIcon } from "../../icons" ; import { IconButton } from "../../button" ; import { OmitInternalProps , mergeProps , useControllableState , useEventCallback } from "../../shared" ; import { useInputGroupTextInputProps } from "../../input-group" ; import { useState } from "react" ; import { wrappedInputPropsAdapter } from "../../input" ; const DefaultElement = "input" ; export type InnerPasswordInputProps = AbstractTextInputProps < typeof DefaultElement > ; export function InnerPasswordInput ( props ) { const [ inputGroupProps ] = useInputGroupTextInputProps ( ) ; const { as = DefaultElement , defaultValue , forwardedRef , value , wrapperProps , ... rest } = mergeProps ( props , wrappedInputPropsAdapter ( inputGroupProps ) ) ; const [ inputValue , setValue ] = useControllableState ( value , defaultValue , "" ) ; const [ isHidden , setIsHidden ] = useState ( true ) ; const handleChange = useEventCallback ( ( event ) => { setValue ( event . target . value ) ; } ) ; const handleShowValue = useEventCallback ( ( ) => { setIsHidden ( x => ! x ) ; } ) ; const showButtonMarkup = ( < IconButton aria - label = "Toggle password visibility" className = "o-ui-password-input-show-button" onClick = { handleShowValue } title = "Toggle password visibility" variant = "tertiary" > { isHidden ? < EyeIcon / > : < PrivacyIcon />} < /IconButton>); return ( < TextInput { ... mergeProps ( rest , { as , button : showButtonMarkup , onChange : handleChange , ref : forwardedRef , type : isHidden ? "password" as const : "text" as const , value : inputValue , wrapperProps : mergeProps ( wrapperProps ?? { } , { className : "o-ui-password-input" } ) } ) } / > ) ; } InnerPasswordInput . defaultElement = DefaultElement ; export const PasswordInput = forwardRef < HTMLInputElement , OmitInternalProps < InnerPasswordInputProps > > ( ( props , ref ) => ( < InnerPasswordInput { ... props } forwardedRef = { ref } / > ) ) ; export type PasswordInputProps = ComponentProps < typeof PasswordInput > ;