'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
require('@emotion/core');
require('./_commonjsHelpers-aa8da8cd.js');
require('./index-b3d32439.js');
var _tslib = require('./_tslib-9c546438.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@emotion/styled');
require('@emotion/react');
var css = require('./css-203af057.js');
require('./index-28fec324.js');
require('./index-99ba58e3.js');
var autoId_esm = require('./auto-id.esm-3b4575a4.js');
var utilities = require('./utilities-d51a0c2d.js');
require('react-dom');
require('./index-dfadbc00.js');
var FloatingMenu = require('./FloatingMenu.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var BoxSelect = function (_a) {
    var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '[Choose an option]' : _c, onChange = _a.onChange, value = _a.value, _d = _a.wrapperProps, wrapperProps = _d === void 0 ? {} : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.customCss, customCss = _f === void 0 ? '' : _f, _g = _a.offsetTop, offsetTop = _g === void 0 ? 60 : _g, _h = _a.options, options = _h === void 0 ? [] : _h, props = _tslib.__rest(_a, ["label", "placeholder", "onChange", "value", "wrapperProps", "className", "customCss", "offsetTop", "options"]);
    var resolvedCss = utilities.useCustomCss(customCss);
    var id = autoId_esm.useId(props.id);
    var menuAnchorRef = React__default['default'].useRef();
    var _j = React__default['default'].useState(false), isMenuOpen = _j[0], setIsMenuOpen = _j[1];
    var _k = React__default['default'].useState(), menuAnchor = _k[0], setMenuAnchor = _k[1];
    var selectedOption = React__default['default'].useMemo(function () {
        return options.find(function (option) { return option.value === value; });
    }, [value, options]);
    var openMenu = function () {
        if (isMenuOpen === true) {
            setIsMenuOpen(false);
        }
        else {
            setIsMenuOpen(true);
            setMenuAnchor(menuAnchorRef.current);
        }
    };
    return (jsxRuntime.jsx(Label, _tslib.__assign({ css: resolvedCss, className: className }, wrapperProps, { children: jsxRuntime.jsxs(Button, _tslib.__assign({ id: id, ref: menuAnchorRef, onClick: openMenu, "aria-haspopup": "menu" }, { children: [jsxRuntime.jsx(LabelSpan, { children: label }, void 0),
                jsxRuntime.jsx(SelectedItem, { children: selectedOption ? (selectedOption.label) : (jsxRuntime.jsx(Placeholder, { children: placeholder }, void 0)) }, void 0),
                jsxRuntime.jsx(FloatingMenu.FloatingMenu, { onChange: onChange, offsetTop: offsetTop, options: options, isOpen: isMenuOpen, alignTo: menuAnchor, onRequestClose: function () { return setIsMenuOpen(false); }, customCss: menuCss }, void 0)] }), void 0) }), void 0));
};
var menuCss = "\n  button{\n    font-size: 1.125em;\n    font-weight: 600;\n    color: #4C4E5A;\n  }\n  *{\n    text-align: left;\n  }\n";
var LabelSpan = css.styled('span')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  font-size: 0.875em;\n  font-weight: 600;\n"], ["\n  font-size: 0.875em;\n  font-weight: 600;\n"])));
var Placeholder = css.styled('span')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  color: #8b8e96;\n"], ["\n  color: #8b8e96;\n"])));
var Label = css.styled('label')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  float: left;\n  font-size: 1em;\n"], ["\n  float: left;\n  font-size: 1em;\n"])));
var SelectedItem = css.styled('div')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 1.5em;\n  font-weight: 600;\n  color: #282c39;\n  &:after {\n    content: '';\n    margin-top: 5px;\n    margin-left: 10px;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 5px solid #282c39;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 1.5em;\n  font-weight: 600;\n  color: #282c39;\n  &:after {\n    content: '';\n    margin-top: 5px;\n    margin-left: 10px;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 5px solid #282c39;\n  }\n"])));
var Button = css.styled('button')(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  color: #8b8e96;\n  font-weight: 600;\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  width: auto;\n  font-size: 1em;\n  font-family: 'Open Sans', sans-serif;\n  border: none;\n  border-radius: 6px;\n  padding: 6px;\n  background: transparent;\n  transition: background 300ms;\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n  &:hover {\n    background: rgba(255, 255, 255, 0.3);\n  }\n"], ["\n  color: #8b8e96;\n  font-weight: 600;\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  width: auto;\n  font-size: 1em;\n  font-family: 'Open Sans', sans-serif;\n  border: none;\n  border-radius: 6px;\n  padding: 6px;\n  background: transparent;\n  transition: background 300ms;\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n  &:hover {\n    background: rgba(255, 255, 255, 0.3);\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

exports.BoxSelect = BoxSelect;
//# sourceMappingURL=BoxSelect.js.map
