feat(AIR-59342): add ability to render under certain element (#1416)

* feat(AIR-59342): add ability to render under certain element

* feat(AIR-59342): added change log

* feat(AIR-59342): Added fallback state

common/changes/pcln-popover/AIR-59342_2023-11-16-20-32.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-popover",
+      "comment": "Added ability to render popover under a certain element",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-popover"
+}

packages/popover/src/Popover/Popover.stories.jsx

@@ -282,6 +282,24 @@ const OpenAndCloseTemplate = (args) => (
   </Popover>
 )
 
+const OpenAndCloseTemplate2 = (args) => (
+  <>
+    <div id='popover-portal'>Should render here</div>
+    <Popover
+      querySelectorPortal='#popover-portal'
+      {...args}
+      renderContent={({ handleClose }) => (
+        <Box p={2}>
+          <p>Hello there!</p>
+          <Button onClick={handleClose}>Click me to close!</Button>
+        </Box>
+      )}
+    >
+      <Button>Open popover</Button>
+    </Popover>
+  </>
+)
+
 export const OpensOnClick = {
   name: 'Tests / Opens on click',
   render: OpenAndCloseTemplate.bind({}),
@@ -293,3 +311,15 @@ export const OpensOnClick = {
     await new Promise((resolve) => setTimeout(resolve, 2000))
   },
 }
+
+export const RendersOnSpecificArea = {
+  name: 'Renders on specific area',
+  render: OpenAndCloseTemplate2.bind({}),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const triggerBtn = canvas.getByText('Open popover')
+    expect(triggerBtn).toBeInTheDocument()
+    await userEvent.click(triggerBtn)
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+  },
+}

packages/popover/src/PopoverContent/PopoverContent.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react'
 import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 import styled, { ThemeConsumer } from 'styled-components'
@@ -44,6 +44,7 @@ function PopoverContent({
   styles,
   width,
   zIndex,
+  querySelectorPortal,
   ...props
 }) {
   const handleKeyUp = useCallback(
@@ -57,13 +58,22 @@ function PopoverContent({
     [onCloseRequest]
   )
 
+  const [portalSelector, setPortalSelector] = useState(querySelectorPortal)
+
   useEffect(() => {
     window.addEventListener('keyup', handleKeyUp, false)
     return () => {
       window.removeEventListener('keyup', handleKeyUp, false)
     }
   }, [handleKeyUp])
 
+  // Fallback when cannot find an element
+  useLayoutEffect(() => {
+    if (!document.querySelector(portalSelector)) {
+      setPortalSelector('body')
+    }
+  }, [querySelectorPortal])
+
   const getBorderColorName = (color, borderColor) => {
     let borderColorName = borderColor
 
@@ -142,7 +152,7 @@ function PopoverContent({
       )}
     </>,
     // Append each instance of the Popover as portal directly to the body
-    document.querySelector('body')
+    document.querySelector(portalSelector)
   )
 }
 
@@ -164,13 +174,15 @@ PopoverContent.propTypes = {
   trapFocus: PropTypes.bool,
   hideArrow: PropTypes.bool,
   hideOverlay: PropTypes.bool,
+  querySelectorPortal: PropTypes.string,
 }
 
 PopoverContent.defaultProps = {
   p: 2,
   placement: 'top',
   zIndex: 102,
   width: 400,
+  querySelectorPortal: 'body',
 }
 
 export default PopoverContent