text: import * as tslib_1 from "tslib";
  import * as React from "react";
  import * as ReactDOM from "react-dom";
  import { Manager, Reference, Popper } from "react-popper";
  import { observer } from "mobx-react";
  import { DomNodeProxy } from "../util/react/DomNodeProxy";
  import styled, { css } from "../styled-components";
  const getArrowStyle = (placement, arrowSize, arrowColor) => {
      let neutralBorder = arrowSize + "px solid transparent";
      let colorBorder = arrowSize + "px solid " + arrowColor;
      if (!placement) {
          return ``;
      }
      if (placement.startsWith("top")) {
          return css `
              transform: translateX(-50%);
              border-left: ${neutralBorder};
              border-right: ${neutralBorder};
              border-top: ${colorBorder};
          `;
      }
      else if (placement.startsWith("bottom")) {
          return css `
              transform: translateX(-50%);
              top: -${arrowSize}px;
              border-left: ${neutralBorder};
              border-right: ${neutralBorder};
              border-bottom: ${colorBorder};
          `;
      }
      else if (placement.startsWith("left")) {
          return css `
              transform: translateY(-50%);
              right: -${arrowSize}px;
              border-top: ${neutralBorder};
              border-left: ${colorBorder};
              border-bottom: ${neutralBorder};
          `;
      }
      else if (placement.startsWith("right")) {
          return css `
              transform: translateY(-50%);
              left: -${arrowSize}px;
              border-top: ${neutralBorder};
              border-right: ${colorBorder};
              border-bottom: ${neutralBorder};
          `;
      }
      else {
          return ``;
      }
  };
  const getArrowPosition = (placement) => {
      if (!placement) {
          return ``;
      }
      if (placement.startsWith("bottom")) {
          return css `
              top: 0;
          `;
      }
      else if (placement.startsWith("left")) {
          return css `
              right: 0;
          `;
      }
      else {
          return ``;
      }
  };
  const Arrow = styled("div").withConfig({ displayName: "Arrow", componentId: "sc-1pz3uns" }) `
      position: absolute;
      ${props => getArrowPosition(props.placement)}
  
      &:before, &:after {
          content: "";
          position: absolute;
      }
      &:before {
          ${props => props.borderColor ? getArrowStyle(props.placement, 6, props.borderColor) : ``}
      }
      &:after {
          ${props => getArrowStyle(props.placement, 5, props.backgroundColor)}
      }
  `;
  let Popover = class Popover extends React.Component {
      render() {
          return (React.createElement(Manager, null,
              React.createElement(Reference, null, ({ ref }) => React.createElement(DomNodeProxy, { onMount: el => ref(el), onUnmount: el => ref(null) }, this.props.children)),
              this.props.visible ?
                  ReactDOM.createPortal(React.createElement(Popper, Object.assign({ placement: this.props.placement, modifiers: Object.assign({ offset: {
                              offset: `${this.props.alignmentOffset + "px" || 0}, ${this.props.offset}px`
                          } }, (this.props.noFlip ? { flip: { enabled: false } } : {})) }, (this.props.referenceElement ? { referenceElement: this.createReferenceObject() } : {})), ({ ref, style, placement, arrowProps }) => (React.createElement("div", { ref: ref, onClick: e => e.stopPropagation(), style: Object.assign({}, style, { background: this.props.backgroundColor, boxShadow: "0 2px 6px 0 rgba(0, 0, 0, .08)", border: this.props.borderColor ? "1px solid " + this.props.borderColor : void 0, boxSizing: "border-box", pointerEvents: this.props.nonInteractive ? "none" : void 0 }, this.props.style), "data-placement": placement },
                      this.props.content,
                      !this.props.noArrow ?
                          React.createElement(Arrow, { placement: placement, backgroundColor: this.props.backgroundColor, borderColor: this.props.borderColor, innerRef: arrowProps.ref, style: arrowProps.style })
                          : null))), document.body)
                  : null));
      }
      createReferenceObject() {
          let referenceEl = this.props.referenceElement;
          if (typeof referenceEl !== "function") {
              return referenceEl;
          }
          const getWrapperEl = referenceEl;
          return {
              getBoundingClientRect() {
                  return getWrapperEl() ? getWrapperEl().getBoundingClientRect() :
                      { bottom: 0, left: 0, right: 0, top: 0, height: 0, width: 0 };
              },
              get clientWidth() {
                  return getWrapperEl() ? getWrapperEl().clientWidth : 0;
              },
              get clientHeight() {
                  return getWrapperEl() ? getWrapperEl().clientHeight : 0;
              }
          };
      }
  };
  Popover.defaultProps = {
      backgroundColor: "#fff",
      placement: "top",
      offset: 0
  };
  Popover = tslib_1.__decorate([
      observer
  ], Popover);
  export { Popover };
  //# sourceMappingURL=Popover.js.map