= {
title: 'Layout/EuiFlyout/EuiFlyoutBody',
@@ -32,6 +33,8 @@ const meta: Meta
= {
},
};
+disableStorybookControls(meta, ['scrollContainerRef']);
+
export default meta;
type Story = StoryObj;
diff --git a/packages/eui/src/components/flyout/flyout_body.test.tsx b/packages/eui/src/components/flyout/flyout_body.test.tsx
index 81c26448768d..63019f04434c 100644
--- a/packages/eui/src/components/flyout/flyout_body.test.tsx
+++ b/packages/eui/src/components/flyout/flyout_body.test.tsx
@@ -27,4 +27,16 @@ describe('EuiFlyoutBody', () => {
'-1'
);
});
+
+ test('scrollContainerRef', () => {
+ const scrollContainerRef = React.createRef();
+
+ render();
+
+ expect(scrollContainerRef.current).toBeInstanceOf(HTMLDivElement);
+ expect(scrollContainerRef.current).toHaveAttribute(
+ 'data-test-subj',
+ 'euiFlyoutBodyOverflow'
+ );
+ });
});
diff --git a/packages/eui/src/components/flyout/flyout_body.tsx b/packages/eui/src/components/flyout/flyout_body.tsx
index 414ab737ae6f..93cf31b3af60 100644
--- a/packages/eui/src/components/flyout/flyout_body.tsx
+++ b/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;
}
>;
@@ -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 && (