import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { HelpMark, Hotkey, Icon, Select, } from '@gravity-ui/uikit';
import { cn } from "../../classname.js";
import { isFunction } from "../../lodash.js";
import "./ToolbarSelect.css";
const b = cn('toolbar-select');
export const ToolbarSelect = ({ disablePortal, className, editor, focus, onClick, items, }) => {
    const activeItem = items.find((item) => item.isActive(editor));
    return (_jsx(_Fragment, { children: _jsx(Select, { size: "m", view: "clear", className: className, disablePortal: disablePortal, onOpenChange: focus, value: activeItem ? [activeItem.id] : undefined, options: items.map((item) => ({
                data: item,
                value: item.id,
                text: isFunction(item.title) ? item.title() : item.title,
            })), renderOption: ({ text, data }) => {
                const { icon, hotkey, hint } = data;
                const hintText = isFunction(hint) ? hint() : hint;
                return (_jsxs("div", { "aria-label": text, className: b('item'), children: [_jsx("div", { className: b('item-icon'), children: _jsx(Icon, { data: icon.data, size: Number(icon.size ?? 16) + 2 }) }), _jsxs("div", { className: b('item-content'), children: [text, _jsxs("div", { className: b('item-extra'), children: [hotkey && _jsx(Hotkey, { value: hotkey }), hintText && (_jsx(HelpMark, { popoverProps: { modal: false }, className: b('item-hint'), children: hintText }))] })] })] }));
            }, onUpdate: ([id]) => {
                items.find((item) => item.id === id)?.exec(editor);
                onClick?.(id);
                focus();
            } }) }));
};
//# sourceMappingURL=ToolbarSelect.js.map
