import React__default from 'react';
import '@emotion/core';
import './_commonjsHelpers-f108cd30.js';
import './index-de83aad9.js';
import { _ as __rest, a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import './index-dd80248b.js';
import './index-8cc3b1e4.js';
import { u as useId } from './auto-id.esm-d84df351.js';
import { u as useCustomCss } from './utilities-357c56e6.js';
import 'react-dom';
import './index-9bd84a21.js';
import { FloatingMenu } from './FloatingMenu.js';

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 = __rest(_a, ["label", "placeholder", "onChange", "value", "wrapperProps", "className", "customCss", "offsetTop", "options"]);
    var resolvedCss = useCustomCss(customCss);
    var id = useId(props.id);
    var menuAnchorRef = React__default.useRef();
    var _j = React__default.useState(false), isMenuOpen = _j[0], setIsMenuOpen = _j[1];
    var _k = React__default.useState(), menuAnchor = _k[0], setMenuAnchor = _k[1];
    var selectedOption = React__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 (jsx(Label, __assign({ css: resolvedCss, className: className }, wrapperProps, { children: jsxs(Button, __assign({ id: id, ref: menuAnchorRef, onClick: openMenu, "aria-haspopup": "menu" }, { children: [jsx(LabelSpan, { children: label }, void 0),
                jsx(SelectedItem, { children: selectedOption ? (selectedOption.label) : (jsx(Placeholder, { children: placeholder }, void 0)) }, void 0),
                jsx(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 = styled('span')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 0.875em;\n  font-weight: 600;\n"], ["\n  font-size: 0.875em;\n  font-weight: 600;\n"])));
var Placeholder = styled('span')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: #8b8e96;\n"], ["\n  color: #8b8e96;\n"])));
var Label = styled('label')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  float: left;\n  font-size: 1em;\n"], ["\n  float: left;\n  font-size: 1em;\n"])));
var SelectedItem = styled('div')(templateObject_4 || (templateObject_4 = __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 = styled('button')(templateObject_5 || (templateObject_5 = __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;

export { BoxSelect };
//# sourceMappingURL=BoxSelect.js.map
