[NO JIRA]: Make popover hoverable (#3581)

Co-authored-by: James Ronald <[email protected]>
Skyscanner · Nov 29, 2024 · bf0d774 · bf0d774
1 parent f1c97b7
commit bf0d774
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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({