From 7b499e2c0703420cdf1079482a1c30d0477236f4 Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Fri, 7 Jun 2024 18:44:39 +0100
Subject: [PATCH] [NO JIRA]: Make popover hoverable

---
 examples/bpk-component-popover/examples.js       |  7 +++++++
 examples/bpk-component-popover/stories.js        |  2 ++
 .../bpk-component-popover/src/BpkPopover.tsx     | 16 ++++++++++++----
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/examples/bpk-component-popover/examples.js b/examples/bpk-component-popover/examples.js
index e93e26e267..50ce8cb274 100644
--- a/examples/bpk-component-popover/examples.js
+++ b/examples/bpk-component-popover/examples.js
@@ -151,6 +151,12 @@ const WithCustomRenderTargetExample = () => (
   </Spacer>
 );
 
+const HoverExample = () => (
+  <Spacer>
+    <PopoverContainer id="my-popover-1" hoverable />
+  </Spacer>
+);
+
 const WithoutArrowExample = () => (
   <Spacer>
     <PopoverContainer id="my-popover-2" displayArrow={false} />
@@ -196,6 +202,7 @@ const VisualExample = () => (
 export {
   DefaultExample,
   WithCustomRenderTargetExample,
+  HoverExample,
   WithoutArrowExample,
   WithLabelAsTitleExample,
   WithNoCloseButtonIconExample,
diff --git a/examples/bpk-component-popover/stories.js b/examples/bpk-component-popover/stories.js
index 2104f9ce98..6971b59527 100644
--- a/examples/bpk-component-popover/stories.js
+++ b/examples/bpk-component-popover/stories.js
@@ -22,6 +22,7 @@ import BpkPopover from '../../packages/bpk-component-popover';
 import {
   DefaultExample,
   WithCustomRenderTargetExample,
+  HoverExample,
   WithoutArrowExample,
   WithLabelAsTitleExample,
   OnTheSideExample,
@@ -38,6 +39,7 @@ export default {
 
 export const Default = DefaultExample;
 export const WithCustomRenderTarget = WithCustomRenderTargetExample;
+export const Hover = HoverExample;
 export const WithoutArrow = WithoutArrowExample;
 export const WithLabelAsTitle = WithLabelAsTitleExample;
 export const WithNoCloseButtonIcon =
diff --git a/packages/bpk-component-popover/src/BpkPopover.tsx b/packages/bpk-component-popover/src/BpkPopover.tsx
index 16df209c1a..60bf5c5e42 100644
--- a/packages/bpk-component-popover/src/BpkPopover.tsx
+++ b/packages/bpk-component-popover/src/BpkPopover.tsx
@@ -37,6 +37,8 @@ import {
   arrow,
   FloatingArrow,
   shift,
+  useHover,
+  safePolygon,
 } from '@floating-ui/react';
 
 import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
@@ -98,6 +100,7 @@ export type Props = CloseButtonProps & {
   className?: string | null;
   closeButtonIcon?: boolean;
   closeButtonProps?: Object;
+  hoverable?: boolean;
   isOpen?: boolean;
   labelAsTitle?: boolean;
   padded?: boolean;
@@ -118,6 +121,7 @@ const BpkPopover = ({
   closeButtonLabel,
   closeButtonProps = {},
   closeButtonText,
+  hoverable = false,
   id,
   isOpen = false,
   label,
@@ -155,12 +159,16 @@ const BpkPopover = ({
 
   const click = useClick(context);
   const dismiss = useDismiss(context);
+  const hover = useHover(context, {
+    enabled: hoverable,
+    mouseOnly: true,
+    handleClose: safePolygon({
+      requireIntent: false,
+    }),
+  });
 
   // Merge all the interactions into prop getters
-  const { getFloatingProps, getReferenceProps } = useInteractions([
-    click,
-    dismiss,
-  ]);
+  const { getFloatingProps, getReferenceProps } = useInteractions([click, dismiss, hover]);
 
   const targetClick = target?.props?.onClick;
   const referenceProps = targetClick ? getReferenceProps({