'use strict';

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

var React = require('react');
require('./_rollupPluginBabelHelpers-988dd35a.js');
require('@emotion/core');
require('./_commonjsHelpers-aa8da8cd.js');
require('./index-fb98497c.js');
var _tslib = require('./_tslib-9c546438.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@emotion/styled');
var react = require('@emotion/react');
var css = require('./css-203af057.js');
require('./index-cfc055a4.js');
require('./index-2472d70b.js');
var autoId_esm = require('./auto-id.esm-f9c7d71b.js');
var utilities = require('./utilities-d51a0c2d.js');
require('react-dom');
var index = require('./index-7e39b598.js');

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

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

var getAnimationDirection = function (animationDirection, closing) {
    if (closing === void 0) { closing = false; }
    if (closing) {
        return animationDirection === 'right'
            ? 'materialZoomOutRight'
            : 'materialZoomOut';
    }
    else {
        return animationDirection === 'right'
            ? 'materialZoomInRight'
            : 'materialZoomIn';
    }
};
var FloatingMenu = function (_a) {
    var _b = _a.options, options = _b === void 0 ? [] : _b, alignTo = _a.alignTo, align = _a.align, alignScreenRight = _a.alignScreenRight, animationDirection = _a.animationDirection, isOpen = _a.isOpen, onRequestClose = _a.onRequestClose, className = _a.className, _c = _a.offsetTop, offsetTop = _c === void 0 ? 0 : _c, _d = _a.offsetRight, offsetRight = _d === void 0 ? 0 : _d, _e = _a.customCss, customCss = _e === void 0 ? '' : _e, onChange = _a.onChange, _f = _a.wrapperProps, wrapperProps = _f === void 0 ? {} : _f;
    var rawId = autoId_esm.useId();
    var _g = React__default['default'].useState(0), menuBodyWidth = _g[0], setMenuBodyWidth = _g[1];
    var id = 'menu-wrapper-' + rawId;
    var _h = React__default['default'].useState(getAnimationDirection(animationDirection)), animation = _h[0], setAnimation = _h[1];
    var _j = React__default['default'].useState(false), closing = _j[0], setClosing = _j[1];
    var resolvedCss = utilities.useCustomCss(customCss);
    var menuBodyRef = React__default['default'].useRef();
    React__default['default'].useLayoutEffect(function () {
        if (isOpen) {
            setAnimation(getAnimationDirection(animationDirection));
            setClosing(false);
        }
    }, [isOpen, animationDirection]);
    var requestClose = React__default['default'].useCallback(function () {
        setAnimation(getAnimationDirection(animationDirection, true));
        setClosing(true);
    }, [animationDirection]);
    var handleMenuClose = function () {
        onRequestClose && onRequestClose();
        setAnimation(getAnimationDirection(animationDirection, false));
        setClosing(false);
    };
    var alignElement = alignTo ? alignTo.getBoundingClientRect() : null;
    var menuStyle = alignElement
        ? {
            left: alignScreenRight
                ? 'auto'
                : align === 'right'
                    ? alignElement.right - menuBodyWidth
                    : alignElement.left,
            right: alignScreenRight ? 0 + offsetRight : 'auto',
            top: alignElement.top + offsetTop,
        }
        : {};
    return isOpen ? (jsxRuntime.jsx(index.lib.Portal, { children: jsxRuntime.jsx(MenuBody, { animation: animation, options: options, className: className, menuStyle: menuStyle, requestClose: requestClose, onMenuClosed: handleMenuClose, closing: closing, ref: menuBodyRef, resolvedCss: resolvedCss, parentId: id, setMenuBodyWidth: setMenuBodyWidth, wrapperProps: wrapperProps, onChange: onChange }, void 0) }, void 0)) : null;
};
var MenuBody = React__default['default'].forwardRef(function (_a, menuBodyRef) {
    var menuStyle = _a.menuStyle, options = _a.options, animation = _a.animation, requestClose = _a.requestClose, resolvedCss = _a.resolvedCss, parentId = _a.parentId, setMenuBodyWidth = _a.setMenuBodyWidth, wrapperProps = _a.wrapperProps, onChange = _a.onChange, closing = _a.closing, onMenuClosed = _a.onMenuClosed;
    React__default['default'].useLayoutEffect(function () {
        var _a;
        if ((_a = menuBodyRef) === null || _a === void 0 ? void 0 : _a.current)
            setMenuBodyWidth(menuBodyRef.current
                .offsetWidth);
    }, [menuBodyRef, setMenuBodyWidth]);
    React__default['default'].useEffect(function () {
        function handleClickOutside(event) {
            if (!menuBodyRef.current.contains(event.target)) {
                requestClose();
            }
        }
        document.addEventListener('click', handleClickOutside);
        return function () { return document.removeEventListener('click', handleClickOutside); };
    }, [menuBodyRef, requestClose]);
    var handleAnimationEnd = function () {
        if (closing) {
            onMenuClosed();
        }
    };
    var onItemClick = function (option) {
        if (option.onClick) {
            option.onClick(option);
        }
        if (onChange) {
            onChange(option);
        }
        requestClose();
    };
    var unfocusAll = function () {
        menuBodyRef.current.focus();
    };
    var handleKeyDown = function (e) {
        var setItemFocus = function (direction) {
            var activeDocElement = document.activeElement;
            var curIndex = parseInt(activeDocElement.dataset.graniteUiMenuItemIndex || '0', 10);
            if (options[curIndex + direction]) {
                var activeMenuItem = document.querySelector("#" + parentId + " [data-granite-ui-menu-item-index=\"" + (curIndex + direction) + "\"]");
                if (activeMenuItem) {
                    activeMenuItem.focus();
                }
            }
            else if (curIndex === 0) {
                var activeMenuItem = document.querySelector("#" + parentId + " [data-granite-ui-menu-item-index=\"" + (options.length - 1) + "\"]");
                if (activeMenuItem) {
                    activeMenuItem.focus();
                }
            }
            else {
                var activeMenuItem = document.querySelector("#" + parentId + " [data-granite-ui-menu-item-index=\"0\"]");
                if (activeMenuItem) {
                    activeMenuItem.focus();
                }
            }
        };
        switch (e.keyCode) {
            case 27:
                requestClose();
                break;
            case 37:
            case 38:
                setItemFocus(-1);
                break;
            case 39:
            case 40:
                setItemFocus(1);
                break;
        }
    };
    var handleMenuBlur = function () {
        setTimeout(function () {
            if (menuBodyRef.current &&
                !menuBodyRef.current.contains(document.activeElement)) {
                requestClose();
            }
        });
    };
    return (jsxRuntime.jsx(StyledMenuBody, _tslib.__assign({ animation: animation, onAnimationEnd: handleAnimationEnd, style: menuStyle, onKeyDown: handleKeyDown, ref: menuBodyRef, role: "menu", css: resolvedCss, id: parentId, onBlur: handleMenuBlur, tabIndex: -1 }, wrapperProps, { children: options.map(function (option, i) { return (react.createElement(MenuItem, _tslib.__assign({}, option, { onMouseEnter: unfocusAll, onClick: function () {
                onItemClick(option);
            }, index: i, key: i }))); }) }), void 0));
});
var MenuItem = function (_a) {
    var _b = _a.label, label = _b === void 0 ? '' : _b, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, href = _a.href, target = _a.target, index = _a.index, badgeText = _a.badgeText, alignRight = _a.alignRight;
    var menuItemRef = React__default['default'].useRef();
    React__default['default'].useEffect(function () {
        var _a;
        if (index === 0) {
            (_a = menuItemRef === null || menuItemRef === void 0 ? void 0 : menuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
        }
    }, [index]);
    return href ? (jsxRuntime.jsx(StyledMenuItemLink, _tslib.__assign({ href: href, onMouseEnter: onMouseEnter, target: target, id: "floating-menu-index-" + index, role: "menuitem", ref: menuItemRef, "data-granite-ui-menu-item-index": index, tabIndex: -1 }, { children: badgeText ? jsxRuntime.jsxs("div", _tslib.__assign({ style: { display: 'flex', float: 'left', flexFlow: alignRight ? 'row-reverse' : 'row', justifyContent: alignRight ? 'space-between' : 'flex-start', width: '100%' } }, { children: [jsxRuntime.jsx(Badge, _tslib.__assign({ alignRight: alignRight }, { children: badgeText }), void 0),
                jsxRuntime.jsx("div", { children: label }, void 0)] }), void 0) : label }), void 0)) : (jsxRuntime.jsx(StyledMenuItem, _tslib.__assign({ onClick: onClick, onMouseEnter: onMouseEnter, id: "floating-menu-index-" + index, role: "menuitem", ref: menuItemRef, "data-granite-ui-menu-item-index": index, tabIndex: -1 }, { children: badgeText ? jsxRuntime.jsxs("div", _tslib.__assign({ style: { display: 'flex', float: 'left', flexFlow: alignRight ? 'row-reverse' : 'row', justifyContent: alignRight ? 'space-between' : 'flex-start', width: '100%' } }, { children: [jsxRuntime.jsx(Badge, _tslib.__assign({ alignRight: alignRight }, { children: badgeText }), void 0),
                jsxRuntime.jsx("div", { children: label }, void 0)] }), void 0) : label }), void 0));
};
var StyledMenuBody = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 15px;\n  left: 15px;\n  z-index: 99999;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\n  outline: none;\n  animation: ", ";\n"], ["\n  position: fixed;\n  top: 15px;\n  left: 15px;\n  z-index: 99999;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\n  outline: none;\n  animation: ",
    ";\n"])), function (_a) {
    var animation = _a.animation;
    return css.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n      ", " ", " 250ms\n    "], ["\n      ", " ", " 250ms\n    "])), animations[animation].animation, animations[animation].timing);
});
var Badge = css.styled('div')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  color: #fff;\n  border-radius: 7px;\n  background: ", ";\n  font-size: 0.625em;\n  font-weight: bold;\n  min-width: 14px;\n  height: 14px;\n  padding: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ", ";\n"], ["\n  color: #fff;\n  border-radius: 7px;\n  background: ", ";\n  font-size: 0.625em;\n  font-weight: bold;\n  min-width: 14px;\n  height: 14px;\n  padding: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, function (_a) {
    var alignRight = _a.alignRight;
    return alignRight ? "margin-left: 10px" : "margin-right: 10px";
});
var StyledMenuItem = css.styled('button')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  background: #fff;\n  padding: 15px;\n  font-size: 1rem;\n  border: none;\n  border-top: 1px solid #eee;\n  cursor: pointer;\n  transition: background 150ms;\n  outline: none;\n  line-height: 1;\n  white-space: nowrap;\n  text-decoration: none;\n  color: inherit;\n  &:hover {\n    background: #eee;\n  }\n  &:focus-visible {\n    background: #eee;\n  }\n  &:first-of-type {\n    border-top: none;\n  }\n  .svg-icon {\n    width: 20px;\n    margin-right: 6px;\n  }\n"], ["\n  background: #fff;\n  padding: 15px;\n  font-size: 1rem;\n  border: none;\n  border-top: 1px solid #eee;\n  cursor: pointer;\n  transition: background 150ms;\n  outline: none;\n  line-height: 1;\n  white-space: nowrap;\n  text-decoration: none;\n  color: inherit;\n  &:hover {\n    background: #eee;\n  }\n  &:focus-visible {\n    background: #eee;\n  }\n  &:first-of-type {\n    border-top: none;\n  }\n  .svg-icon {\n    width: 20px;\n    margin-right: 6px;\n  }\n"])));
var StyledMenuItemLink = StyledMenuItem.withComponent('a');
var materialZoomIn = css.keyframes(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  0% {\n    transform: scale(0.5) translate(-30%, -50%);\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1) translate(0px, 0px);\n    opacity: 1;\n  }\n"], ["\n  0% {\n    transform: scale(0.5) translate(-30%, -50%);\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1) translate(0px, 0px);\n    opacity: 1;\n  }\n"])));
var materialZoomInRight = css.keyframes(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  0% {\n    transform: scale(0.5) translate(30%, -50%);\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1) translate(0px, 0px);\n    opacity: 1;\n  }\n"], ["\n  0% {\n    transform: scale(0.5) translate(30%, -50%);\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1) translate(0px, 0px);\n    opacity: 1;\n  }\n"])));
var materialZoomOut = css.keyframes(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n0% {\n  transform: scale(1) translate(0px, 0px);\n  opacity: 1;\n}\n50% {\n  opacity: 0;\n}\n100% {\n  transform: scale(0.5) translate(-30%, -50%);\n  opacity: 0;\n}\n"], ["\n0% {\n  transform: scale(1) translate(0px, 0px);\n  opacity: 1;\n}\n50% {\n  opacity: 0;\n}\n100% {\n  transform: scale(0.5) translate(-30%, -50%);\n  opacity: 0;\n}\n"])));
var materialZoomOutRight = css.keyframes(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n0% {\n  transform: scale(1) translate(0px, 0px);\n  opacity: 1;\n}\n50% {\n  opacity: 0;\n}\n100% {\n  transform: scale(0.5) translate(30%, -50%);\n  opacity: 0;\n}\n"], ["\n0% {\n  transform: scale(1) translate(0px, 0px);\n  opacity: 1;\n}\n50% {\n  opacity: 0;\n}\n100% {\n  transform: scale(0.5) translate(30%, -50%);\n  opacity: 0;\n}\n"])));
var animations = {
    materialZoomIn: {
        animation: materialZoomIn,
        timing: 'cubic-bezier(0, 0.92, 0.22, 1.08)',
    },
    materialZoomInRight: {
        animation: materialZoomInRight,
        timing: 'cubic-bezier(0, 0.92, 0.22, 1.08)',
    },
    materialZoomOut: {
        animation: materialZoomOut,
        timing: 'cubic-bezier(0.1, 0.81, 0.43, 0.93)',
    },
    materialZoomOutRight: {
        animation: materialZoomOutRight,
        timing: 'cubic-bezier(0.1, 0.81, 0.43, 0.93)',
    },
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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