[Flyout System] Add scrollContainerRef prop to EuiFlyoutBody

packages/eui/changelogs/upcoming/9373.md

@@ -0,0 +1,2 @@
+- Added optional `scrollContainerRef` prop to `EuiFlyoutBody` for accessing the flyout's internal scroll container.
+

packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`EuiCollapsibleNavBody renders 1`] = `
 >
   <div
     class="euiFlyoutBody__overflow emotion-euiFlyoutBody__overflow-noBanner"
+    data-test-subj="euiFlyoutBodyOverflow"
     tabindex="-1"
   >
     <div

packages/eui/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`EuiFlyoutBody is rendered 1`] = `
 >
   <div
     class="euiFlyoutBody__overflow emotion-euiFlyoutBody__overflow-noBanner"
+    data-test-subj="euiFlyoutBodyOverflow"
     tabindex="0"
   >
     <div

packages/eui/src/components/flyout/flyout_body.stories.tsx

@@ -13,6 +13,7 @@ import { EuiCallOut } from '../call_out';
 import { EuiFlyout } from './flyout';
 import { EuiFlyoutBody, EuiFlyoutBodyProps } from './flyout_body';
 import { LOKI_SELECTORS } from '../../../.storybook/loki';
+import { disableStorybookControls } from '../../../.storybook/utils';
 
 const meta: Meta<EuiFlyoutBodyProps> = {
   title: 'Layout/EuiFlyout/EuiFlyoutBody',
@@ -32,6 +33,8 @@ const meta: Meta<EuiFlyoutBodyProps> = {
   },
 };
 
+disableStorybookControls(meta, ['scrollContainerRef']);
+
 export default meta;
 type Story = StoryObj<EuiFlyoutBodyProps>;
 

packages/eui/src/components/flyout/flyout_body.test.tsx

@@ -27,4 +27,16 @@ describe('EuiFlyoutBody', () => {
       '-1'
     );
   });
+
+  test('scrollContainerRef', () => {
+    const scrollContainerRef = React.createRef<HTMLDivElement>();
+
+    render(<EuiFlyoutBody scrollContainerRef={scrollContainerRef} />);
+
+    expect(scrollContainerRef.current).toBeInstanceOf(HTMLDivElement);
+    expect(scrollContainerRef.current).toHaveAttribute(
+      'data-test-subj',
+      'euiFlyoutBodyOverflow'
+    );
+  });
 });

packages/eui/src/components/flyout/flyout_body.tsx

@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
+import React, {
+  FunctionComponent,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+} from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 import { useEuiMemoizedStyles } from '../../services';
@@ -29,6 +34,10 @@ export type EuiFlyoutBodyProps = FunctionComponent<
        * to override this default.
        */
       scrollableTabIndex?: number;
+      /**
+       * Use to access the flyout's internal scrollable container.
+       */
+      scrollContainerRef?: Ref<HTMLDivElement>;
     }
 >;
 
@@ -37,6 +46,7 @@ export const EuiFlyoutBody: EuiFlyoutBodyProps = ({
   className,
   banner,
   scrollableTabIndex = 0,
+  scrollContainerRef,
   ...rest
 }) => {
   const classes = classNames('euiFlyoutBody', className);
@@ -53,6 +63,8 @@ export const EuiFlyoutBody: EuiFlyoutBodyProps = ({
         tabIndex={scrollableTabIndex}
         className="euiFlyoutBody__overflow"
         css={overflowCssStyles}
+        ref={scrollContainerRef}
+        data-test-subj="euiFlyoutBodyOverflow"
       >
         {banner && (
           <div