From b708ebc4d50352c882cdd2b3c709009157b4cd82 Mon Sep 17 00:00:00 2001
From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com>
Date: Thu, 11 Jul 2024 15:25:51 +0100
Subject: [PATCH] [NO JIRA][BpkPopover]: Reinstate renderTarget prop for
 rendering in DOM at specific location (#3527)

---
 examples/bpk-component-popover/examples.js        | 10 +++++++++-
 examples/bpk-component-popover/stories.js         |  2 ++
 packages/bpk-component-popover/src/BpkPopover.tsx |  5 ++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/examples/bpk-component-popover/examples.js b/examples/bpk-component-popover/examples.js
index 156178a97f..e93e26e267 100644
--- a/examples/bpk-component-popover/examples.js
+++ b/examples/bpk-component-popover/examples.js
@@ -144,6 +144,13 @@ const DefaultExample = () => (
   </Spacer>
 );
 
+const WithCustomRenderTargetExample = () => (
+  <Spacer>
+    <div id="my-target" />
+    <PopoverContainer id="my-popover-1" renderTarget={() => document.getElementById('my-target')} />
+  </Spacer>
+);
+
 const WithoutArrowExample = () => (
   <Spacer>
     <PopoverContainer id="my-popover-2" displayArrow={false} />
@@ -176,7 +183,7 @@ const InputTriggerExample = () => (
 
 const WithActionButtonExample = () => (
   <Spacer>
-    <PopoverContainer id="my-popover" actionText="Action" onAction={() => {}} />
+    <PopoverContainer id="my-popover" actionText="Action" onAction={() => { }} />
   </Spacer>
 );
 
@@ -188,6 +195,7 @@ const VisualExample = () => (
 
 export {
   DefaultExample,
+  WithCustomRenderTargetExample,
   WithoutArrowExample,
   WithLabelAsTitleExample,
   WithNoCloseButtonIconExample,
diff --git a/examples/bpk-component-popover/stories.js b/examples/bpk-component-popover/stories.js
index 065e0311b8..2104f9ce98 100644
--- a/examples/bpk-component-popover/stories.js
+++ b/examples/bpk-component-popover/stories.js
@@ -21,6 +21,7 @@ import BpkPopover from '../../packages/bpk-component-popover';
 
 import {
   DefaultExample,
+  WithCustomRenderTargetExample,
   WithoutArrowExample,
   WithLabelAsTitleExample,
   OnTheSideExample,
@@ -36,6 +37,7 @@ export default {
 };
 
 export const Default = DefaultExample;
+export const WithCustomRenderTarget = WithCustomRenderTargetExample;
 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 ce4395b4ff..16df209c1a 100644
--- a/packages/bpk-component-popover/src/BpkPopover.tsx
+++ b/packages/bpk-component-popover/src/BpkPopover.tsx
@@ -107,6 +107,7 @@ export type Props = CloseButtonProps & {
   closeButtonLabel?: string;
   actionText?: string;
   onAction?: () => void;
+  renderTarget?: () => HTMLElement | HTMLElement | null;
 };
 
 const BpkPopover = ({
@@ -125,6 +126,7 @@ const BpkPopover = ({
   onClose,
   padded = true,
   placement = 'bottom',
+  renderTarget = () => null,
   showArrow = true,
   target,
   ...rest
@@ -186,12 +188,13 @@ const BpkPopover = ({
   const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
 
   const labelId = `bpk-popover-label-${id}`;
+  const renderElement = typeof renderTarget === 'function' ? renderTarget() : renderTarget;
 
   return (
     <>
       {targetElement}
       {isOpenState && (
-        <FloatingPortal>
+        <FloatingPortal root={renderElement}>
           <FloatingFocusManager context={context}>
             <div
               className={getClassName('bpk-popover--container')}