@gravity-ui/uikit/build/esm/components/controls/PasswordInput/PasswordInput.js

Gravity UI base styling and components

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Eye, EyeSlash } from '@gravity-ui/icons';
import { useControlledState } from "../../../hooks/index.js";
import { ActionTooltip } from "../../ActionTooltip/index.js";
import { Button } from "../../Button/index.js";
import { ClipboardButton } from "../../ClipboardButton/index.js";
import { Icon } from "../../Icon/index.js";
import { block } from "../../utils/cn.js";
import { TextInput } from "../TextInput/index.js";
import { PasswordInputQa } from "./constants.js";
import { i18n } from "./i18n/index.js";
import { getActionButtonSizeAndIconSize } from "./utils.js";
import "./PasswordInput.css";
const b = block('password-input');
export const PasswordInput = (props) => {
    const { autoComplete, controlProps, endContent, hideCopyButton = false, hideRevealButton = false, showCopyTooltip = false, showRevealTooltip = false, size = 'm', } = props;
    const [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue ?? '', props.onUpdate);
    const [revealValue, setRevealValue] = useControlledState(props.revealValue, false, props.onRevealValueUpdate);
    const { actionButtonSize, iconSize } = getActionButtonSizeAndIconSize(size);
    const additionalEndContent = (_jsxs(React.Fragment, { children: [endContent, inputValue && !hideCopyButton && !props.disabled ? (_jsx(ClipboardButton, { view: "flat-secondary", text: inputValue, hasTooltip: showCopyTooltip, size: actionButtonSize, className: b('copy-button'), qa: PasswordInputQa.copyButton })) : null, hideRevealButton ? null : (_jsx(ActionTooltip, { disabled: !showRevealTooltip, title: revealValue ? i18n('label_hide-password') : i18n('label_show-password'), children: _jsx(Button, { qa: PasswordInputQa.revealButton, view: "flat-secondary", disabled: props.disabled, onClick: () => setRevealValue(!revealValue), size: actionButtonSize, onMouseDown: (event) => event.preventDefault(), "aria-label": revealValue ? i18n('label_hide-password') : i18n('label_show-password'), children: _jsx(Icon, { data: revealValue ? EyeSlash : Eye, size: iconSize }) }) }))] }));
    return (_jsx(TextInput, { ...props, type: revealValue ? 'text' : 'password', endContent: additionalEndContent, autoComplete: autoComplete ? autoComplete : 'new-password', controlProps: {
            ...controlProps,
            className: b('input-control', controlProps?.className),
        }, value: inputValue, onUpdate: setInputValue }));
};
//# sourceMappingURL=PasswordInput.js.map