feat(popover): render pop-over at component DOM-level

Adds a prop `inline` to pop-over
component, that when true, will render
the pop-over at the component DOM-level
and not in the root layer which is by default.

Author: danielkaxis

.yarn/cache/fsevents-patch-3340e2eb10-8.zip

@@ -544,6 +544,7 @@ export const BaseMenu = memo<BaseMenuProps>(
     disabled = false,
     components,
     onBlur,
+    inline,
     ...props
   }) => {
     const [menuVisible, openMenu, hideMenu] = useBoolean(false)
@@ -761,6 +762,7 @@ export const BaseMenu = memo<BaseMenuProps>(
             horizontalAlignment={align}
             anchorEl={anchorRef.current}
             onScroll={hideAndBlurMenu}
+            inline={inline}
           >
             <MenuList onEscape={hideMenu} onClick={hideAndBlurMenu}>
               {components.map((component, index) => {

packages/core/src/Menu/BaseMenu.tsx

@@ -6,6 +6,7 @@ import {
   HTMLAttributes,
   FC,
   ReactNode,
+  useMemo,
 } from 'react'
 import ReactDOM from 'react-dom'
 import styled from 'styled-components'
@@ -40,6 +41,13 @@ export interface PopOverProps extends BaseProps {
    * The element to anchor the pop-over to.
    */
   readonly anchorEl: HTMLElement | null
+  /**
+   * Renders the pop-over at the same DOM-level as the
+   * anchorEl, not at the root layer which is by default.
+   *
+   * Default: `false`
+   */
+  readonly inline?: boolean
   /**
    * The horizontal position of the pop-over relative to the anchor.
    *
@@ -89,6 +97,7 @@ export interface PopOverProps extends BaseProps {
 
 export const PopOver: FC<PopOverProps> = ({
   anchorEl,
+  inline = false,
   horizontalPosition = 'left',
   verticalPosition = 'bottom',
   horizontalAlignment = 'left',
@@ -146,15 +155,24 @@ export const PopOver: FC<PopOverProps> = ({
     position()
   }, [position, popOverContainer])
 
+  const popOverElement = useMemo(
+    () => (
+      <PopOverContainer ref={setPopOverContainer} {...props}>
+        {children}
+      </PopOverContainer>
+    ),
+    [children, props]
+  )
+
   // When the layer element is not available, there is no layer yet.
   if (layerRoot === null) {
     return null
   }
 
-  return ReactDOM.createPortal(
-    <PopOverContainer ref={setPopOverContainer} {...props}>
-      {children}
-    </PopOverContainer>,
-    layerRoot
-  )
+  // Render the pop-over at the same DOM-level as anchorEl
+  if (inline && anchorEl !== null) {
+    return popOverElement
+  }
+
+  return ReactDOM.createPortal(popOverElement, layerRoot)
 }

packages/core/src/PopOver/index.tsx

@@ -433,6 +433,7 @@ export function BaseSelect<V extends string = string>({
   align = 'left',
   error = '',
   noOptionsLabel,
+  inline,
   ...props
 }: BaseSelectProps<V>): JSX.Element {
   const { compact: compactFromTheme, selectMarker: selectMarkerFromTheme } =
@@ -631,6 +632,7 @@ export function BaseSelect<V extends string = string>({
         itemRefs={itemRefs}
         listRef={listRef}
         noOptionsLabel={noOptionsLabel}
+        inline={inline}
       />
     </SelectContainer>
   )