diff --git a/packages/eui/changelogs/upcoming/9373.md b/packages/eui/changelogs/upcoming/9373.md new file mode 100644 index 000000000000..1aabc6db6c5c --- /dev/null +++ b/packages/eui/changelogs/upcoming/9373.md @@ -0,0 +1,2 @@ +- Added optional `scrollContainerRef` prop to `EuiFlyoutBody` for accessing the flyout's internal scroll container. + diff --git a/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap index a5976841b6c1..9a9bebe1fe87 100644 --- a/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap +++ b/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap @@ -8,6 +8,7 @@ exports[`EuiCollapsibleNavBody renders 1`] = ` >
= { 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 && (