feat(Popover.jsx): Add close functionality when clicks on elements ot…

…her than the popover

components/Popover/Popover.jsx

@@ -16,6 +16,7 @@ const TriggerBlock = styled.div`
 const Popover = ({
   visible = false,
   inverted = false,
+  closeOnClickOut = false,
   onClose = () => {},
   skin = 'neutral',
   placement = 'top',
@@ -40,13 +41,21 @@ const Popover = ({
           placement={placement}
           onPopoverClose={() => handleVisible(false)}
           inverted={inverted}
+          closeOnClickOut={closeOnClickOut}
           skin={skin}
           {...rest}
         >
           {children}
         </Content>
       )}
-      <TriggerBlock onClick={() => handleVisible(true)}>{trigger}</TriggerBlock>
+      <TriggerBlock
+        onClick={(event) => {
+          event.stopPropagation();
+          handleVisible(true);
+        }}
+      >
+        {trigger}
+      </TriggerBlock>
     </Wrapper>
   );
 };
@@ -64,6 +73,7 @@ Popover.propTypes = {
   skin: oneOf(['neutral', 'primary', 'success', 'warning', 'error']),
   trigger: PropTypes.node.isRequired,
   onClose: PropTypes.func,
+  closeOnClickOut: PropTypes.bool,
 };
 
 export default Popover;

components/Popover/sub-components/Content.jsx

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 
+import { useEffect, useRef } from 'react';
 import { components, spacing, colors, breakpoints } from '../../shared/theme';
 import getArrow from '../arrowProperties';
 import Button from '../../Button';
@@ -131,24 +132,48 @@ const Content = ({
   },
   skin = 'neutral',
   inverted = false,
+  closeOnClickOut = false,
   ...rest
-}) => (
-  <PopoverContent
-    theme={theme}
-    inverted={inverted}
-    placement={placement}
-    skin={skin}
-    {...rest}
-  >
-    <PopoverChildren>{children}</PopoverChildren>
-    <CloseButton
-      skin={skin}
+}) => {
+  const popoverRef = useRef(null);
+
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (closeOnClickOut) {
+      const onClickOutside = (event) => {
+        const element = event.target;
+
+        if (popoverRef.current && !popoverRef.current.contains(element)) {
+          onPopoverClose();
+        }
+      };
+
+      window.addEventListener('click', onClickOutside);
+      return () => {
+        window.removeEventListener('click', onClickOutside);
+      };
+    }
+  }, []);
+
+  return (
+    <PopoverContent
       theme={theme}
       inverted={inverted}
-      onClick={onPopoverClose}
-    />
-  </PopoverContent>
-);
+      placement={placement}
+      skin={skin}
+      ref={popoverRef}
+      {...rest}
+    >
+      <PopoverChildren>{children}</PopoverChildren>
+      <CloseButton
+        skin={skin}
+        theme={theme}
+        inverted={inverted}
+        onClick={onPopoverClose}
+      />
+    </PopoverContent>
+  );
+};
 
 CloseButton.displayName = 'CloseButton';
 PopoverChildren.displayName = 'PopoverChildren';