[EuiPopover] Allow adjusting buffer for individual window sides.

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added support for adjusting `buffer` for individual window sides of `EuiPopover`. ([#4417](https://github.com/elastic/eui/pull/4417))
 - Added `'full'` option to the `height` prop of `EuiMarkdownEditor`. Added `autoExpandPreview` and `maxHeight` props to `EuiMarkdownEditor` ([#4245](https://github.com/elastic/eui/pull/4245))
 
 ## [`31.1.0`](https://github.com/elastic/eui/tree/v31.1.0)

src/components/popover/popover.tsx

@@ -167,9 +167,10 @@ export interface EuiPopoverProps {
   offset?: number;
   /**
    * Minimum distance between the popover and the bounding container;
+   * Pass an array of 4 values to adjust each side differently: `[top, right, bottom, left]`
    * Default is 16
    */
-  buffer?: number;
+  buffer?: number | number[];
   /**
    * Element to pass as the child element of the arrow;
    * Use case is typically limited to an accompanying `EuiBeacon`

src/services/popover/popover_positioning.ts

@@ -81,7 +81,7 @@ interface FindPopoverPositionArgs {
   align?: EuiPopoverPosition;
   position: EuiPopoverPosition;
   forcePosition?: boolean;
-  buffer?: number;
+  buffer?: number | number[];
   offset?: number;
   allowCrossAxis?: boolean;
   container?: HTMLElement;
@@ -98,6 +98,14 @@ interface FindPopoverPositionResult {
   anchorBoundingBox?: EuiClientRect;
 }
 
+const getBufferValues = (buffer: number | number[]): number[] => {
+  if (Array.isArray(buffer)) {
+    const [topBuffer, rightBuffer, bottomBuffer, leftBuffer] = buffer;
+    return [topBuffer, rightBuffer, bottomBuffer, leftBuffer];
+  }
+  return [buffer, buffer, buffer, buffer];
+};
+
 /**
  * Calculates the absolute positioning (relative to document.body) to place a popover element
  *
@@ -259,7 +267,7 @@ interface GetPopoverScreenCoordinatesArgs {
   containerBoundingBox: EuiClientRect;
   arrowConfig?: { arrowWidth: number; arrowBuffer: number };
   offset?: number;
-  buffer?: number;
+  buffer?: number | number[];
 }
 
 interface GetPopoverScreenCoordinatesResult {
@@ -339,6 +347,10 @@ export function getPopoverScreenCoordinates({
   const crossAxisSecondSide = positionComplements[crossAxisFirstSide]; // "left" -> "right"
   const crossAxisDimension = relatedDimension[crossAxisFirstSide]; // "left" -> "width"
 
+  const [topBuffer, rightBuffer, bottomBuffer, leftBuffer] = getBufferValues(
+    buffer
+  );
+
   const { crossAxisPosition, crossAxisArrowPosition } = getCrossAxisPosition({
     crossAxisFirstSide,
     crossAxisSecondSide,
@@ -383,10 +395,10 @@ export function getPopoverScreenCoordinates({
 
   // shrink the visible bounding box by `buffer`
   // to compute a fit value
-  combinedBoundingBox.top += buffer;
-  combinedBoundingBox.right -= buffer;
-  combinedBoundingBox.bottom -= buffer;
-  combinedBoundingBox.left += buffer;
+  combinedBoundingBox.top += topBuffer;
+  combinedBoundingBox.right -= rightBuffer;
+  combinedBoundingBox.bottom -= bottomBuffer;
+  combinedBoundingBox.left += leftBuffer;
 
   const fit = getVisibleFit(
     {
@@ -422,7 +434,7 @@ interface GetCrossAxisPositionArgs {
   crossAxisDimension: Dimension;
   position: EuiPopoverPosition;
   align?: EuiPopoverPosition;
-  buffer: number;
+  buffer: number | number[];
   offset: number;
   windowBoundingBox: EuiClientRect;
   containerBoundingBox: EuiClientRect;
@@ -638,30 +650,33 @@ export function getElementBoundingBox(element: HTMLElement): EuiClientRect {
 export function getAvailableSpace(
   anchorBoundingBox: BoundingBox,
   containerBoundingBox: BoundingBox,
-  buffer: number,
+  buffer: number | number[],
   offset: number,
   offsetSide: EuiPopoverPosition
 ): BoundingBox {
+  const [topBuffer, rightBuffer, bottomBuffer, leftBuffer] = getBufferValues(
+    buffer
+  );
   return {
     top:
       anchorBoundingBox.top -
       containerBoundingBox.top -
-      buffer -
+      topBuffer -
       (offsetSide === 'top' ? offset : 0),
     right:
       containerBoundingBox.right -
       anchorBoundingBox.right -
-      buffer -
+      rightBuffer -
       (offsetSide === 'right' ? offset : 0),
     bottom:
       containerBoundingBox.bottom -
       anchorBoundingBox.bottom -
-      buffer -
+      bottomBuffer -
       (offsetSide === 'bottom' ? offset : 0),
     left:
       anchorBoundingBox.left -
       containerBoundingBox.left -
-      buffer -
+      leftBuffer -
       (offsetSide === 'left' ? offset : 0),
   };
 }