|
|
|
@@ -60,6 +60,7 @@ export const MaskedTextInput = React.forwardRef< |
|
|
|
style, |
|
|
|
length, |
|
|
|
disabled, |
|
|
|
onKeyUp, |
|
|
|
...etcProps |
|
|
|
}: MaskedTextInputProps, |
|
|
|
forwardedRef, |
|
|
|
@@ -70,6 +71,17 @@ export const MaskedTextInput = React.forwardRef< |
|
|
|
const id = idProp ?? defaultId; |
|
|
|
const [visible, setVisible] = React.useState(false); |
|
|
|
|
|
|
|
const handleKeyUp: React.KeyboardEventHandler<MaskedTextInputDerivedElement> = React.useCallback((e) => { |
|
|
|
if (e.ctrlKey && e.code === 'Space') { |
|
|
|
setVisible((prev) => !prev); |
|
|
|
} |
|
|
|
onKeyUp?.(e); |
|
|
|
}, [onKeyUp]); |
|
|
|
|
|
|
|
const handleToggleVisible = React.useCallback(() => { |
|
|
|
setVisible((prev) => !prev); |
|
|
|
}, []); |
|
|
|
|
|
|
|
return ( |
|
|
|
<div |
|
|
|
className={clsx( |
|
|
|
@@ -121,6 +133,7 @@ export const MaskedTextInput = React.forwardRef< |
|
|
|
aria-labelledby={labelId} |
|
|
|
type={!visible ? 'password' : 'text'} |
|
|
|
data-testid="input" |
|
|
|
onKeyUp={handleKeyUp} |
|
|
|
className={clsx( |
|
|
|
'bg-negative rounded-inherit w-full peer block font-inherit', |
|
|
|
'focus:outline-0', |
|
|
|
@@ -188,6 +201,7 @@ export const MaskedTextInput = React.forwardRef< |
|
|
|
disabled={disabled} |
|
|
|
type="button" |
|
|
|
data-testid="indicator" |
|
|
|
tabIndex={-1} |
|
|
|
className={clsx( |
|
|
|
'text-center z-[1] focus:outline-0 flex items-center justify-center aspect-square absolute bottom-0 right-0 select-none text-primary group-focus-within:text-secondary', |
|
|
|
{ |
|
|
|
@@ -196,7 +210,7 @@ export const MaskedTextInput = React.forwardRef< |
|
|
|
'w-16': size === 'large', |
|
|
|
}, |
|
|
|
)} |
|
|
|
onClick={() => { setVisible((b) => !b); }} |
|
|
|
onClick={handleToggleVisible} |
|
|
|
> |
|
|
|
<svg |
|
|
|
className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round" |
|
|
|
|
