[NO JIRA][BpkPopover]: Reinstate renderTarget prop for rendering in D…

…OM at specific location (#3527)
Skyscanner · Jul 11, 2024 · b708ebc · b708ebc
1 parent 78bcf0b
commit b708ebc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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')}