"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ArduinoSelect = void 0;
var React = require("react");
var react_select_1 = require("react-select");
var ArduinoSelect = /** @class */ (function (_super) {
    __extends(ArduinoSelect, _super);
    function ArduinoSelect(props) {
        return _super.call(this, props) || this;
    }
    ArduinoSelect.prototype.render = function () {
        var controlHeight = 27; // from `monitor.css` -> `.serial-monitor-container .head` (`height: 27px;`)
        var styles = {
            control: function (styles) { return (__assign(__assign({}, styles), { minWidth: 120, color: 'var(--theia-foreground)' })); },
            dropdownIndicator: function (styles) { return (__assign(__assign({}, styles), { padding: 0 })); },
            indicatorSeparator: function () { return ({
                display: 'none'
            }); },
            indicatorsContainer: function () { return ({
                padding: '0px 5px'
            }); },
            menu: function (styles) { return (__assign(__assign({}, styles), { marginTop: 0 })); }
        };
        var theme = function (theme) { return (__assign(__assign({}, theme), { borderRadius: 0, spacing: {
                controlHeight: controlHeight,
                baseUnit: 2,
                menuGutter: 4
            }, colors: __assign(__assign({}, theme.colors), { 
                // `primary50`??? it's crazy but apparently, without this, we would get a light-blueish
                // color when selecting an option in the select by clicking and then not releasing the button.
                // https://react-select.com/styles#overriding-the-theme
                primary50: 'var(--theia-list-activeSelectionBackground)' }) })); };
        var DropdownIndicator = function () { return React.createElement("span", { className: 'fa fa-caret-down caret' }); };
        return React.createElement(react_select_1.default, __assign({}, this.props, { className: 'theia-select', components: { DropdownIndicator: DropdownIndicator }, theme: theme, styles: styles, classNamePrefix: 'arduino-select', isSearchable: false }));
    };
    return ArduinoSelect;
}(react_select_1.default));
exports.ArduinoSelect = ArduinoSelect;
//# sourceMappingURL=arduino-select.js.map