@kiwicom/orbit-components/es/ClickOutside/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

import * as React from "react";
import styled from "styled-components";

const Inner = styled.div.withConfig({
  displayName: "ClickOutside__Inner"
})(["width:100%;"]);

class ClickOutside extends React.PureComponent {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.handleClickOutside = ev => {
      const { onClickOutside } = this.props;

      if (onClickOutside && this.node && ev.target instanceof Node && !this.node.contains(ev.target)) {
        onClickOutside(ev);
      }
    }, _temp;
  }

  componentDidMount() {
    document.addEventListener("click", this.handleClickOutside, true);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.handleClickOutside, true);
  }

  render() {
    const { children } = this.props;

    return React.createElement(
      Inner,
      {
        innerRef: node => {
          this.node = node;
        }
      },
      children
    );
  }
}

export default ClickOutside;