[EuiPopover] Add new configurable repositionToCrossAxis prop

src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap

@@ -48,6 +48,7 @@ exports[`CollapsedItemActions render with href and _target provided 1`] = `
   ownFocus={true}
   panelPaddingSize="none"
   popoverRef={[Function]}
+  repositionToCrossAxis={true}
 >
   <EuiContextMenuPanel
     items={

src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap

@@ -57,6 +57,7 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
         token="euiDataGridHeaderCell.actionsPopoverScreenReaderText"
       />
     }
+    repositionToCrossAxis={true}
   >
     <EuiListGroup
       data-test-subj="dataGridHeaderCellActionGroup-someColumn"

src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap

@@ -30,6 +30,7 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop
     ownFocus={true}
     panelClassName="euiDataGrid__displayPopoverPanel"
     panelPaddingSize="s"
+    repositionToCrossAxis={true}
   >
     <EuiI18n
       defaults={

src/components/popover/input_popover.tsx

@@ -128,6 +128,7 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
   return (
     <EuiPopover
       css={css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth))}
+      repositionToCrossAxis={false}
       ownFocus={false}
       button={
         <EuiResizeObserver onResize={onResize}>

src/components/popover/popover.spec.tsx

@@ -166,4 +166,44 @@ describe('EuiPopover', () => {
       });
     });
   });
+
+  describe('repositionToCrossAxis', () => {
+    beforeEach(() => {
+      // Set a forced viewport with not enough room to render the popover vertically
+      cy.viewport(500, 50);
+    });
+
+    it('allows the popover to reposition to the cross/secondary axis if there is not enough room on the primary axis', () => {
+      cy.mount(
+        <PopoverComponent anchorPosition="downCenter">Test</PopoverComponent>
+      );
+      cy.get('[data-test-subj="togglePopover"]').click();
+
+      // Assert that the popover rendered horizontally and not vertically
+      cy.get('[data-popover-panel]')
+        .invoke('offset')
+        .then(({ top, left }) => {
+          expect(left).to.be.gt(top);
+        });
+    });
+
+    it('does not reposition to the cross axis if set to false', () => {
+      cy.mount(
+        <PopoverComponent
+          anchorPosition="downCenter"
+          repositionToCrossAxis={false}
+        >
+          Test
+        </PopoverComponent>
+      );
+      cy.get('[data-test-subj="togglePopover"]').click();
+
+      // Assert that the popover vertically and not horizontally
+      cy.get('[data-popover-panel]')
+        .invoke('offset')
+        .then(({ top, left }) => {
+          expect(top).to.be.gt(left);
+        });
+    });
+  });
 });

src/components/popover/popover.tsx

@@ -163,6 +163,18 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps {
    * an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true`
    */
   repositionOnScroll?: boolean;
+  /**
+   * By default, popovers will attempt to position themselves along the initial
+   * axis specified. If there is not enough room either vertically or horizontally
+   * however, the popover will attempt to reposition itself along the secondary
+   * cross axis if there is room there instead.
+   *
+   * If you do not not want this repositioning to occur (and it is acceptable for
+   * the popover to appear offscreen), set this to false to disable this behavior.
+   *
+   * @default true
+   */
+  repositionToCrossAxis?: boolean;
   /**
    * Must be set to true if using `EuiDragDropContext` within a popover,
    * otherwise your nested drag & drop will have incorrect positioning
@@ -281,6 +293,7 @@ export class EuiPopover extends Component<Props, State> {
   static defaultProps: Partial<PropsWithDefaults> = {
     isOpen: false,
     ownFocus: true,
+    repositionToCrossAxis: true,
     anchorPosition: 'downCenter',
     panelPaddingSize: 'm',
     hasArrow: true,
@@ -517,7 +530,7 @@ export class EuiPopover extends Component<Props, State> {
         arrowBuffer: 10,
       },
       returnBoundingBox: this.props.attachToAnchor,
-      allowCrossAxis: !this.props.attachToAnchor,
+      allowCrossAxis: this.props.repositionToCrossAxis,
       buffer: this.props.buffer,
     });
 
@@ -607,6 +620,7 @@ export class EuiPopover extends Component<Props, State> {
       hasArrow,
       arrowChildren,
       repositionOnScroll,
+      repositionToCrossAxis,
       hasDragDrop,
       zIndex,
       attachToAnchor,

upcoming_changelogs/7211.md

@@ -1,3 +1,5 @@
+- Updated `EuiPopover` with a new configurable `repositionToCrossAxis` prop
+
 **Bug fixes**
 
 - Fixed `EuiPopover`'s missing animations on popover close