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