function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';
import { omit } from 'lodash';
import { EventOverlay } from "./..";
/**
 * MenuOverlay is container component which contains MenuContent and Menu
 * @category containers
 * @component MenuOverlay
 * @variations collab-ui-react
 */

var MenuOverlay =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(MenuOverlay, _React$Component);

  function MenuOverlay() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      isOpen: false
    };

    _this.getChildContext = function () {
      return {
        onSelect: _this.onSelect
      };
    };

    _this.verifyChildren = function () {
      var children = _this.props.children;
      var status = React.Children.toArray(children).reduce(function (status, child) {
        return status && child.type && (child.type.displayName === 'MenuContent' || child.type.displayName === 'Menu');
      }, true);

      if (!status) {
        throw new Error('MenuOverlay should only contain Menu or MenuContent as children');
      }
    };

    _this.onSelect = function (e, menuIndex, menuItem) {
      var onSelect = _this.props.onSelect;
      var _menuItem$props = menuItem.props,
          children = _menuItem$props.children,
          keepMenuOpen = _menuItem$props.keepMenuOpen;
      onSelect && onSelect(e, menuIndex, menuItem);
      !children && !keepMenuOpen && _this.handleClose();
    };

    _this.handleClose = function () {
      _this.setState({
        isOpen: false
      });
    };

    return _this;
  }

  var _proto = MenuOverlay.prototype;

  _proto.componentWillMount = function componentWillMount() {
    this.verifyChildren();
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        children = _this$props.children,
        className = _this$props.className,
        menuTrigger = _this$props.menuTrigger,
        showArrow = _this$props.showArrow,
        props = _objectWithoutProperties(_this$props, ["children", "className", "menuTrigger", "showArrow"]);

    var isOpen = this.state.isOpen;
    var otherProps = omit(_extends({}, props), ['onSelect']);

    var setMenuTrigger = function setMenuTrigger() {
      return React.cloneElement(menuTrigger, {
        onClick: function onClick() {
          return _this2.setState({
            isOpen: !isOpen
          });
        },
        ref: function ref(_ref) {
          return _this2.anchorNode = _ref;
        }
      });
    };

    return React.createElement("div", {
      className: 'cui-menu-overlay-wrapper' + ("" + (className && " " + className || ''))
    }, setMenuTrigger(), React.createElement(EventOverlay, _extends({
      allowClickAway: true,
      anchorNode: this.anchorNode,
      className: "cui-menu-overlay",
      close: this.handleClose,
      isOpen: isOpen,
      showArrow: showArrow
    }, otherProps), children));
  };

  return MenuOverlay;
}(React.Component);

MenuOverlay.displayName = 'MenuOverlay';
MenuOverlay.childContextTypes = {
  onSelect: PropTypes.func
};
MenuOverlay.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  direction: PropTypes.string,
  menuTrigger: PropTypes.element.isRequired,
  onSelect: PropTypes.func,
  showArrow: PropTypes.bool
};
MenuOverlay.defaultProps = {
  children: null,
  className: '',
  direction: 'bottom-left',
  onSelect: null,
  showArrow: true
};
export default MenuOverlay;
/**
* @name MenuOverlay
*
* @category containers
* @component menu-overlay
* @section default
*
* @js
*

import { MenuItem, Button, Menu, MenuContent } from '@collab-ui/react';

export default class MenuOverlayDefault extends React.PureComponent {
  render() {
    return(
      <div>
        <MenuOverlay
          menuTrigger={<Button ariaLabel='Show Menu'>Show Menu</Button>}
        >
          <MenuContent>Content</MenuContent>
          <Menu>
            <MenuItem
              key="0"
              selectedValue="Out of office until 2:00pm"
              label="Status"
            >
              <MenuItem key="0" isHeader label="Set Do Not Disturb:"/>
              <MenuItem key="1" disabled label="1 hour"/>
              <MenuItem key="2" keepMenuOpen label="5 hour"/>
              <MenuItem key="3" keepMenuOpen label="8 hour"/>
            </MenuItem>
            <MenuItem
              key="1"
              selectedValue="English"
              label="Language"
            >
              <MenuItem key="0" label="English"/>
              <MenuItem key="1" label="Spanish"/>
            </MenuItem>
            <MenuItem
              key="2"
              label="Settings"
            />
          </Menu>
        </MenuOverlay>
        <br></br>
        <br></br>
        <br></br>
        <br></br>
        <br></br>
      </div>
    );
  }
}
**/