fix: popover not closed when clicked outside

When the isOpen property is used in the Popover, even though hideOnClick
is true, clicking outside the popover doesn't close the popover, because
the isOpen boolean is static and not manageable by the Popover itself.

Replaced hideOnClick with onClickOutside to take control of what happens
when you click outside the popover.

Closes #424

src/core/Popover/Popover.stories.tsx

@@ -53,11 +53,38 @@ storiesOf('core|Popover', module)
         <Row className="my-3">
           <Col className="d-flex justify-content-around align-items-center">
             Status: {isOpen ? 'opened' : 'closed'}
-            <Popover isOpen={isOpen} hideOnClick={false} target="Open">
+            <Popover isOpen={isOpen} target="Open">
               <TinyCrud />
             </Popover>
             <Button onClick={() => setIsOpen(!isOpen)}>Show / hide</Button>
           </Col>
+          <Col>
+            <p>
+              Note: you can take complete controll over the Popover by using the{' '}
+              <pre className="d-inline text-info">isOpen</pre> prop. Once you
+              make it <pre className="d-inline text-info">true</pre> or{' '}
+              <pre className="d-inline text-info">false</pre> the hover behavior
+              will be disabled.
+            </p>
+          </Col>
+        </Row>
+      </div>
+    );
+  })
+
+  .add('on click outside', () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="d-flex flex-column">
+        <Row className="my-3">
+          <Col className="d-flex justify-content-around align-items-center">
+            Status: {isOpen ? 'opened' : 'closed'}
+            <Popover isOpen={isOpen} onClickOutside={() => setIsOpen(false)} target="Open">
+              <NiceCard />
+            </Popover>
+            <Button onClick={() => setIsOpen(!isOpen)}>Show / hide</Button>
+          </Col>
           <Col>
             <p>
               Note: you can take complete controll over the Popover by using the{' '}
@@ -68,10 +95,9 @@ storiesOf('core|Popover', module)
             </p>
 
             <p>
-              In combination with a{' '}
-              <pre className="d-inline text-info">hideOnClick</pre> with the
-              value <pre className="d-inline text-info">false</pre> you can even
-              prevent the popover from closing when the modal is opened.
+              In combination with{' '}
+              <pre className="d-inline text-info">onClickOutside</pre> you can
+              close the popover when clicked anywhere outside the popover.
             </p>
           </Col>
         </Row>

src/core/Popover/Popover.test.tsx

@@ -48,7 +48,7 @@ describe('Component: Popover', () => {
           isOpen={true}
           distance={10}
           placement="bottom"
-          hideOnClick={false}
+          onClickOutside={jest.fn()}
           target={
             <div>The popover should be wrapped around this div, in a div</div>
           }

src/core/Popover/Popover.tsx

@@ -14,11 +14,10 @@ interface Props {
   isOpen?: boolean;
 
   /**
-   * Optionally whether or not the popover should hide on outside click,
-   * by default this is `true`. Is useful for when wanting to take
-   * complete control over the popover.
+   * Optionally callback that gets triggered when clicked outside the popover.
+   * Is useful for when wanting to take complete control over the popover.
    */
-  hideOnClick?: boolean;
+  onClickOutside?: () => void;
 
   /**
    * Content shown inside of the popover.
@@ -80,15 +79,15 @@ export default function Popover({
   tag = 'span',
   className,
   isOpen,
-  hideOnClick = true,
+  onClickOutside,
   style
 }: Props) {
   const Tag = tag;
 
   return (
     <Tippy
       visible={isOpen}
-      hideOnClick={hideOnClick}
+      onClickOutside={onClickOutside}
       className="border-0 tippy-popover"
       content={<>{children}</>}
       placement={placement}

src/core/Popover/__snapshots__/Popover.test.tsx.snap

@@ -8,7 +8,6 @@ exports[`Component: Popover ui default: Component: Popover => ui => default 1`]
       Popover content
     </React.Fragment>
   }
-  hideOnClick={true}
   interactive={true}
   offset={
     Array [
@@ -37,7 +36,6 @@ exports[`Component: Popover ui with custom tag: Component: Popover => ui => with
       Popover content
     </React.Fragment>
   }
-  hideOnClick={true}
   interactive={true}
   offset={
     Array [
@@ -64,14 +62,14 @@ exports[`Component: Popover ui with optional properties: Component: Popover => u
       Popover content
     </React.Fragment>
   }
-  hideOnClick={false}
   interactive={true}
   offset={
     Array [
       0,
       10,
     ]
   }
+  onClickOutside={[MockFunction]}
   placement="bottom"
   visible={true}
   zIndex={1049}