import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import { ChevronsExpandUpRight, Xmark } from '@gravity-ui/icons';
import { Button, ButtonIcon, Card, Icon, Tooltip, sp, } from '@gravity-ui/uikit';
import { cn } from "../../../classname.js";
import { i18n } from "../../../i18n/search/index.js";
import { useAutoFocus } from "../../../react-utils/useAutoFocus.js";
import { SearchQA } from "../qa.js";
import { SearchTextInput } from "./SearchTextInput.js";
import "./SearchCompactView.css";
const b = cn('search-compact');
export const SeachCompactView = function SearchCompactView({ value, counter, onChange, onFindNext, onFindPrevious, onExpand, onClose, qa, style, className, }) {
    const inputRef = useRef(null);
    useAutoFocus(inputRef, [], 200);
    return (_jsxs(Card, { spacing: { pr: 1 }, "data-qa": qa, style: style, className: b(null, className), children: [_jsx(SearchTextInput, { counter: counter, onFindNext: onFindNext, onFindPrevious: onFindPrevious, value: value, view: "clear", delay: 300, onUpdate: onChange, controlRef: inputRef, placeholder: i18n('search_placeholder'), className: sp({ pl: 3 }) }), _jsx("div", { className: sp({ mr: 1 }), style: {
                    flexShrink: 0,
                    background: 'var(--g-color-line-generic-solid)',
                    height: '36px',
                    width: '1px',
                } }), _jsx(Tooltip, { content: i18n('action_expand'), role: "label", children: (props, ref) => (_jsx(Button, { ...props, size: "m", view: "flat-secondary", onClick: onExpand, qa: SearchQA.ExpandBtn, ref: ref, "aria-label": i18n('action_expand'), children: _jsx(ButtonIcon, { children: _jsx(Icon, { data: ChevronsExpandUpRight }) }) })) }), _jsx(Button, { size: "m", view: "flat-secondary", onClick: onClose, className: sp({ ml: 1 }), "aria-label": i18n('action_close'), qa: SearchQA.CloseBtn, children: _jsx(ButtonIcon, { children: _jsx(Icon, { data: Xmark }) }) })] }));
};
//# sourceMappingURL=SearchCompactView.js.map
