import React from 'react';
import 'react-dom';
import { c as _slicedToArray, f as _inherits, g as _createClass, h as _classCallCheck, _ as _defineProperty, n as _assertThisInitialized, i as _getPrototypeOf, j as _possibleConstructorReturn } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import 'styled-components';
import { P as Portal } from '../index-930c2100.js';
import useActivify from '../hooks/useActivify.js';
import './tooltip.js';
import '../key_codes-a5a2b85e.js';
import { u as useEscapeKey } from '../index-6b96e57a.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import Icon from '../ui/icon.js';
import '../info-fc9c81b4.js';
import '../close-cd95ea58.js';
import '../close-v2-118f2b87.js';
import '../file_placeholder-51e080e8.js';
import '../arrow-e522a0cc.js';
import '../tick-ee41abaf.js';
import '../angle-down-4038e060.js';
import '../checkmark-b6f07b8e.js';
import '../search-da5a95f5.js';
import './withTooltip.js';
import '../index-91504e81.js';
import '../generic-2d73c3aa.js';
import Button from '../ui/button.js';

function usePositioner(attachTo, contextMenuDOM, offset) {
  var _React$useState = React.useState({}),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      position = _React$useState2[0],
      setPosition = _React$useState2[1];

  React.useEffect(function () {
    if (!attachTo || !contextMenuDOM.current) return;
    var rect = attachTo.current ? attachTo.current.getBoundingClientRect() : attachTo.getBoundingClientRect();
    var contextMenuRect = contextMenuDOM.current.getBoundingClientRect();
    var position = {
      top: rect.top + offset.top,
      left: offset.xMode === 'LEFT' ? rect.left + offset.left : rect.right + offset.left
    };
    var diff = window.innerWidth - (rect.right + contextMenuRect.width);

    if (diff < 0) {
      position.left += diff;
    } else {
      diff = 0;
    }

    setPosition(position);
  }, [contextMenuDOM.current]);
  return position;
}

var css = ".ContextMenuPortal_contextMenuWrapper__1iLzp {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1099999999999; }\n\n.ContextMenuPortal_contextMenuOverlay__3JH68 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%; }\n\n.ContextMenuPortal_contextMenu__2C5Kq {\n  opacity: 0;\n  position: absolute;\n  z-index: 2;\n  background-color: #fff;\n  border-radius: 8px;\n  outline: none;\n  filter: drop-shadow(rgba(0, 0, 0, 0.2) 3px 0px 12px);\n  transition: 0.1s ease-in-out;\n  transform: translate3d(0, -5px, 0);\n  overflow: hidden; }\n  .ContextMenuPortal_contextMenu__2C5Kq * {\n    font-family: 'Roboto', sans-serif; }\n  .ContextMenuPortal_contextMenu__2C5Kq.ContextMenuPortal_contextMenuActive__2H-Tk {\n    opacity: 1 !important;\n    transform: translate3d(0, 0px, 0) !important; }\n\n.ContextMenuPortal_contextMenuContent__3gEAb {\n  max-width: 550px;\n  overflow-y: auto; }\n";
var styles = {"contextMenuWrapper":"ContextMenuPortal_contextMenuWrapper__1iLzp","contextMenuOverlay":"ContextMenuPortal_contextMenuOverlay__3JH68","contextMenu":"ContextMenuPortal_contextMenu__2C5Kq","contextMenuActive":"ContextMenuPortal_contextMenuActive__2H-Tk","contextMenuContent":"ContextMenuPortal_contextMenuContent__3gEAb"};
styleInject(css);

var ContextMenuPortal = function ContextMenuPortal(_ref) {
  var active = _ref.active,
      className = _ref.className,
      onClose = _ref.onClose,
      children = _ref.children,
      maxHeight = _ref.maxHeight,
      attachTo = _ref.attachTo,
      offset = _ref.offset,
      prefixClassName = _ref.prefixClassName;
  var contextMenuDOM = React.useRef();

  var _useActivify = useActivify(active),
      enabled = _useActivify.enabled,
      visible = _useActivify.visible;

  var activeClassName = visible ? styles.contextMenuActive : "";
  var position = usePositioner(attachTo, contextMenuDOM, offset);
  useEscapeKey(onClose);
  if (!enabled) return null;
  return React.createElement(Portal, null, React.createElement("div", {
    "data-testid": "context-menu",
    className: "".concat(styles.contextMenuWrapper, " ").concat(className, " ").concat(prefixClassName)
  }, React.createElement("div", {
    className: "".concat(styles.contextMenuOverlay, " ").concat(prefixClassName, "-overlay"),
    onClick: onClose
  }), React.createElement("div", {
    className: "".concat(activeClassName, " ").concat(styles.contextMenu, " ").concat(prefixClassName, "-context-menu"),
    ref: function ref(DOMNode) {
      if (DOMNode && active) DOMNode.focus();
      contextMenuDOM.current = DOMNode;
    },
    style: position
  }, React.createElement("div", {
    className: "".concat(styles.contextMenuContent, " ").concat(prefixClassName, "-context-menu-content"),
    style: {
      maxHeight: maxHeight || "300px"
    }
  }, children))));
};

ContextMenuPortal.propTypes = {
  active: PropTypes.bool,
  children: PropTypes.node,
  className: PropTypes.string,
  prefixClassName: PropTypes.string,
  attachTo: PropTypes.object,
  maxHeight: PropTypes.number,
  onClose: PropTypes.func,
  offset: PropTypes.shape({
    left: PropTypes.number,
    top: PropTypes.number
  })
};
ContextMenuPortal.defaultProps = {
  offset: {
    left: 0,
    top: 0
  },
  onClose: function onClose() {}
};
ContextMenuPortal.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ContextMenuPortal",
  "props": {
    "offset": {
      "defaultValue": {
        "value": "{\n  left: 0,\n  top: 0,\n}",
        "computed": false
      },
      "type": {
        "name": "shape",
        "value": {
          "left": {
            "name": "number",
            "required": false
          },
          "top": {
            "name": "number",
            "required": false
          }
        }
      },
      "required": false,
      "description": ""
    },
    "onClose": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "active": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "attachTo": {
      "type": {
        "name": "object"
      },
      "required": false,
      "description": ""
    },
    "maxHeight": {
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    }
  }
};

var css$1 = ".ContextMenuItem_contextMenuItem__2syqN {\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid #eee;\n  padding: 10px;\n  min-width: 100px;\n  cursor: pointer;\n  transition: 0.2s ease-out;\n  text-decoration: none !important;\n  color: #222 !important; }\n  .ContextMenuItem_contextMenuItem__2syqN:last-child {\n    border-bottom: none; }\n  .ContextMenuItem_contextMenuItem__2syqN:hover {\n    background-color: #f5f5f5; }\n  .ContextMenuItem_contextMenuItem__2syqN.ContextMenuItem_disabled__3ZvLm {\n    pointer-events: none; }\n    .ContextMenuItem_contextMenuItem__2syqN.ContextMenuItem_disabled__3ZvLm .ContextMenuItem_contextMenuItemIcon__1sQmw {\n      opacity: 0.3; }\n    .ContextMenuItem_contextMenuItem__2syqN.ContextMenuItem_disabled__3ZvLm .ContextMenuItem_contextMenuItemText__3dEoQ {\n      opacity: 0.3; }\n\n.ContextMenuItem_contextMenuItemIcon__1sQmw {\n  width: 18px;\n  height: 18px;\n  border-radius: 8px;\n  margin-right: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n  .ContextMenuItem_contextMenuItemIcon__1sQmw svg {\n    width: 100%;\n    height: 100%; }\n\n.ContextMenuItem_contextMenuItemText__3dEoQ {\n  font-size: 12px; }\n  .ContextMenuItem_contextMenuItemText__3dEoQ.ContextMenuItem_big__3jkq3 {\n    font-size: 14px; }\n";
var styles$1 = {"contextMenuItem":"ContextMenuItem_contextMenuItem__2syqN","disabled":"ContextMenuItem_disabled__3ZvLm","contextMenuItemIcon":"ContextMenuItem_contextMenuItemIcon__1sQmw","contextMenuItemText":"ContextMenuItem_contextMenuItemText__3dEoQ","big":"ContextMenuItem_big__3jkq3"};
styleInject(css$1);

var ContextMenuItem = function ContextMenuItem(_ref) {
  var title = _ref.title,
      icon = _ref.icon,
      iconType = _ref.iconType,
      iconSize = _ref.iconSize,
      onClick = _ref.onClick,
      disabled = _ref.disabled,
      children = _ref.children,
      size = _ref.size,
      href = _ref.href,
      className = _ref.className,
      prefixClassName = _ref.prefixClassName;
  var bigClassName = size === "big" ? styles$1.big : "";
  var Tag = href ? "a" : "div";
  return React.createElement(Tag, {
    "data-testid": "context-menu-item",
    href: href,
    target: "_blank",
    onClick: onClick,
    className: "".concat(styles$1.contextMenuItem, " ").concat(disabled ? styles$1.disabled : "", " ").concat(className, " ").concat(prefixClassName)
  }, React.createElement(Icon, {
    size: iconSize,
    className: "".concat(styles$1.contextMenuItemIcon, " ").concat(prefixClassName, "-icon"),
    src: iconType || icon
  }), React.createElement("span", {
    className: "".concat(styles$1.contextMenuItemText, " ").concat(bigClassName, " ").concat(prefixClassName, "-text")
  }, title || children));
};

ContextMenuItem.propTypes = {
  /** The name of the context menu item (display text) */
  title: PropTypes.string,

  /** The icon to display next to the display text */
  icon: PropTypes.node,

  /** If using a pre-existing icon */
  iconType: PropTypes.string,

  /** The size of the icon */
  iconSize: PropTypes.number,

  /** onClick callback */
  onClick: PropTypes.func,

  /** Whether the item is disabled or not */
  disabled: PropTypes.bool,

  /** Display text (same as the title prop) */
  children: PropTypes.node,

  /** The size of the item (big/small) */
  size: PropTypes.string,

  /** If the context menu item should be a link instead */
  href: PropTypes.string,

  /** Outermost className */
  className: PropTypes.string,

  /** className appended to each of the elements */
  prefixClassName: PropTypes.string
};
ContextMenuItem.defaultProps = {
  title: "",
  iconType: "",
  className: "",
  prefixClassName: "",
  icon: null,
  iconSize: 24,
  onClick: function onClick() {},
  disabled: false,
  children: null,
  size: "small",
  href: null
};
ContextMenuItem.classNames = {
  $prefix: "Outermost element",
  "$prefix-icon": "The icon",
  "$prefix-text": "The text"
};
ContextMenuItem.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ContextMenuItem",
  "props": {
    "title": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The name of the context menu item (display text)"
    },
    "iconType": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "If using a pre-existing icon"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Outermost className"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "className appended to each of the elements"
    },
    "icon": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "The icon to display next to the display text"
    },
    "iconSize": {
      "defaultValue": {
        "value": "24",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "The size of the icon"
    },
    "onClick": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onClick callback"
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Whether the item is disabled or not"
    },
    "children": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "Display text (same as the title prop)"
    },
    "size": {
      "defaultValue": {
        "value": "\"small\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The size of the item (big/small)"
    },
    "href": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "If the context menu item should be a link instead"
    }
  }
};

var css$2 = ".ContextMenuButton_contextMenuButtonIcon__3wa4Q {\n  position: relative;\n  width: 14px;\n  height: 14px;\n  margin-left: 8px;\n  display: flex;\n  align-items: center;\n  top: 2px; }\n";
var styles$2 = {"contextMenuButtonIcon":"ContextMenuButton_contextMenuButtonIcon__3wa4Q"};
styleInject(css$2);

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

var ContextMenuButton =
/*#__PURE__*/
function (_React$Component) {
  _inherits(ContextMenuButton, _React$Component);

  var _super = _createSuper(ContextMenuButton);

  function ContextMenuButton() {
    var _this;

    _classCallCheck(this, ContextMenuButton);

    _this = _super.call(this);

    _defineProperty(_assertThisInitialized(_this), "_handleClick", function (e) {
      e.preventDefault();
      e.stopPropagation();

      _this.setState({
        active: true
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleClose", function (e) {
      e.preventDefault();
      e.stopPropagation();

      _this.setState({
        active: false
      });
    });

    _this.state = {
      active: false
    };
    return _this;
  }

  _createClass(ContextMenuButton, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          className = _this$props.className,
          offset = _this$props.offset,
          children = _this$props.children,
          title = _this$props.title,
          size = _this$props.size,
          type = _this$props.type,
          prefixClassName = _this$props.prefixClassName;
      return React.createElement(React.Fragment, null, React.createElement(ContextMenuPortal, {
        active: this.state.active,
        attachTo: this._contextMenuIcon,
        offset: offset,
        onClose: this.handleClose,
        prefixClassName: "".concat(prefixClassName, "-portal")
      }, typeof children === "function" ? children(this.handleClose) : children), React.createElement(Button, {
        type: type,
        size: size,
        style: {
          cursor: "pointer"
        },
        onClick: this._handleClick,
        className: "".concat(prefixClassName, " ").concat(className),
        innerRef: function innerRef(DOMElement) {
          _this2._contextMenuIcon = DOMElement;
        }
      }, title, React.createElement(Icon, {
        prefixClassName: "".concat(prefixClassName, "-icon"),
        className: styles$2.contextMenuButtonIcon,
        src: "angle-down"
      })));
    }
  }]);

  return ContextMenuButton;
}(React.Component);

ContextMenuButton.propTypes = {
  /** Outermost className */
  className: PropTypes.string,

  /** className appended to each of the elements */
  prefixClassName: PropTypes.string,

  /** What needs to be rendered inside the context menu */
  children: PropTypes.node,

  /** Offset prop to adjust the element's position */
  offset: PropTypes.shape({
    left: PropTypes.number,
    top: PropTypes.number
  }),

  /** The size of the button */
  size: PropTypes.number,

  /** The title of the button */
  title: PropTypes.string,

  /** The type of button */
  type: PropTypes.string
};
ContextMenuButton.defaultProps = {
  className: "",
  prefixClassName: "",
  offset: null,
  size: 0,
  title: ""
};
ContextMenuButton.classNames = {
  $prefix: "Outermost className (button)",
  "$prefix-icon": "the down arrow on the button",
  "$prefix-portal": "className for the portal",
  "$prefix-portal-overlay": "overlay",
  "$prefix-portal-context-menu": "wrapping content div",
  "$prefix-portal-context-menu-content": "the actual content div"
};
ContextMenuButton.__docgenInfo = {
  "description": "",
  "methods": [{
    "name": "_handleClick",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "e",
      "type": null
    }],
    "returns": null
  }, {
    "name": "handleClose",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "e",
      "type": null
    }],
    "returns": null
  }],
  "displayName": "ContextMenuButton",
  "props": {
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Outermost className"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "className appended to each of the elements"
    },
    "offset": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "shape",
        "value": {
          "left": {
            "name": "number",
            "required": false
          },
          "top": {
            "name": "number",
            "required": false
          }
        }
      },
      "required": false,
      "description": "Offset prop to adjust the element's position"
    },
    "size": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "The size of the button"
    },
    "title": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The title of the button"
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "What needs to be rendered inside the context menu"
    },
    "type": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The type of button"
    }
  }
};

function _createSuper$1(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

var ContextMenuIcon =
/*#__PURE__*/
function (_React$Component) {
  _inherits(ContextMenuIcon, _React$Component);

  var _super = _createSuper$1(ContextMenuIcon);

  function ContextMenuIcon() {
    var _this;

    _classCallCheck(this, ContextMenuIcon);

    _this = _super.call(this);

    _defineProperty(_assertThisInitialized(_this), "_handleClick", function (e) {
      e.preventDefault();
      e.stopPropagation();

      _this.setState({
        active: true
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_handleOverlayClick", function (e) {
      e.preventDefault();
      e.stopPropagation();

      _this.setState({
        active: false
      });
    });

    _this.state = {
      active: false
    };
    return _this;
  }

  _createClass(ContextMenuIcon, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          className = _this$props.className,
          offset = _this$props.offset,
          children = _this$props.children,
          iconType = _this$props.iconType,
          iconComponent = _this$props.iconComponent,
          maxHeight = _this$props.maxHeight,
          prefixClassName = _this$props.prefixClassName;
      return React.createElement(React.Fragment, null, iconComponent ? React.cloneElement(iconComponent, {
        onClick: this._handleClick,
        ref: function ref(DOMElement) {
          _this2._contextMenuIcon = DOMElement;
        }
      }) : React.createElement(Icon, {
        prefixClassName: "".concat(prefixClassName),
        style: {
          cursor: "pointer"
        },
        onClick: this._handleClick,
        src: iconType,
        className: className,
        innerRef: function innerRef(DOMElement) {
          _this2._contextMenuIcon = DOMElement;
        }
      }), React.createElement(ContextMenuPortal, {
        active: this.state.active,
        attachTo: this._contextMenuIcon,
        offset: offset,
        onClose: this._handleOverlayClick,
        maxHeight: maxHeight,
        prefixClassName: "".concat(prefixClassName, "-portal")
      }, typeof children === "function" ? children(this._handleOverlayClick) : children));
    }
  }]);

  return ContextMenuIcon;
}(React.Component);

ContextMenuIcon.propTypes = {
  /** Outermost className */
  className: PropTypes.string,

  /** className appended to each of the elements */
  prefixClassName: PropTypes.string,

  /** What needs to be rendered inside the context menu */
  children: PropTypes.node,

  /** Offset prop to adjust the element's position */
  offset: PropTypes.shape({
    left: PropTypes.number,
    top: PropTypes.number
  }),

  /** The size of the button */
  maxHeight: PropTypes.number,

  /** The icon type (string) */
  iconType: PropTypes.string,

  /** The icon component in case some other component needs to be rendered */
  iconComponent: PropTypes.string
};
ContextMenuIcon.defaultProps = {
  offset: {
    left: 0,
    top: 0
  },
  children: null,
  className: "",
  prefixClassName: "",
  maxHeight: 200,
  iconType: "circle-more",
  iconComponent: null
};
ContextMenuIcon.classNames = {
  $prefix: "Outermost className (icon)",
  "$prefix-portal": "className for the portal",
  "$prefix-portal-overlay": "overlay",
  "$prefix-portal-context-menu": "wrapping content div",
  "$prefix-portal-context-menu-content": "the actual content div"
};
ContextMenuIcon.__docgenInfo = {
  "description": "",
  "methods": [{
    "name": "_handleClick",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "e",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_handleOverlayClick",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "e",
      "type": null
    }],
    "returns": null
  }],
  "displayName": "ContextMenuIcon",
  "props": {
    "offset": {
      "defaultValue": {
        "value": "{\n  left: 0,\n  top: 0,\n}",
        "computed": false
      },
      "type": {
        "name": "shape",
        "value": {
          "left": {
            "name": "number",
            "required": false
          },
          "top": {
            "name": "number",
            "required": false
          }
        }
      },
      "required": false,
      "description": "Offset prop to adjust the element's position"
    },
    "children": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "What needs to be rendered inside the context menu"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Outermost className"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "className appended to each of the elements"
    },
    "maxHeight": {
      "defaultValue": {
        "value": "200",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "The size of the button"
    },
    "iconType": {
      "defaultValue": {
        "value": "\"circle-more\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The icon type (string)"
    },
    "iconComponent": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The icon component in case some other component needs to be rendered"
    }
  }
};

var ContextMenu = function ContextMenu(props) {
  // it warrants it here since this is just a wrapper
  // eslint-disable-next-line react/jsx-props-no-spreading
  return React.createElement(ContextMenuPortal, props);
};

ContextMenu.Item = ContextMenuItem;
ContextMenu.Button = ContextMenuButton;
ContextMenu.Icon = ContextMenuIcon;
ContextMenu.propTypes = {
  /** Whether the context menu is active or not */
  active: PropTypes.bool,

  /** What needs to be rendered inside the context menu */
  children: PropTypes.node,

  /** Outermost className */
  className: PropTypes.string,

  /** className appended to each of the elements */
  prefixClassName: PropTypes.string,

  /** The DOM Element to attach the context menu to */
  attachTo: PropTypes.object,

  /** The onClose callback */
  onClose: PropTypes.func,

  /** Offset prop to adjust the element's position */
  offset: PropTypes.shape({
    left: PropTypes.number,
    top: PropTypes.number
  })
};
ContextMenu.defaultProps = {
  active: false,
  className: "",
  prefixClassName: "",
  attachTo: {},
  onClose: function onClose() {},
  offset: null
};
ContextMenu.classNames = {
  $prefix: "portal element",
  "$prefix-overlay": "overlay",
  "$prefix-context-menu": "wrapping content div",
  "$prefix-context-menu-content": "the actual content div"
};
ContextMenu.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ContextMenu",
  "props": {
    "active": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Whether the context menu is active or not"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Outermost className"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "className appended to each of the elements"
    },
    "attachTo": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": "The DOM Element to attach the context menu to"
    },
    "onClose": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "The onClose callback"
    },
    "offset": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "shape",
        "value": {
          "left": {
            "name": "number",
            "required": false
          },
          "top": {
            "name": "number",
            "required": false
          }
        }
      },
      "required": false,
      "description": "Offset prop to adjust the element's position"
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "What needs to be rendered inside the context menu"
    }
  }
};

export default ContextMenu;
