diff --git a/CHANGELOG.md b/CHANGELOG.md index 85c7bbe03c2..ec90aef2999 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Updated `EuiRangeLevel` `color` property to accept CSS color values ([#5171](https://github.com/elastic/eui/pull/5171)) - Added optional visual line highlighting to `EuiCodeBlock` ([#5207](https://github.com/elastic/eui/pull/5207)) +- Added `popoverProps` to `EuiSuperSelect` and deprecated `popoverClassName` & `repositionOnScroll` ([#5214](https://github.com/elastic/eui/pull/5214)) **Bug fixes** diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap index 70e22522b7b..b210918e653 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap @@ -703,6 +703,233 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = ` `; +exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover 1`] = ` + + + } + isOpen={false} + panelClassName="goes-on-popover-panel" + panelPaddingSize="none" + repositionOnScroll={true} + > + + [Function] + + } + buttonRef={[Function]} + className="euiInputPopover euiSuperSelect goes-on-outermost-wrapper" + closePopover={[Function]} + display="block" + hasArrow={true} + isOpen={false} + ownFocus={false} + panelClassName="goes-on-popover-panel" + panelPaddingSize="none" + panelRef={[Function]} + repositionOnScroll={true} + > + +
+
+ +
+ + + +
+
+ + + + Select an option: Option #2, is selected + + + + + +
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + exports[`EuiSuperSelect props select component is rendered 1`] = `
{ expect(takeMountedSnapshot(component)).toMatchSnapshot(); }); + + test('renders popoverProps on the underlying EuiPopover', () => { + const component = mount( + {}} + popoverProps={{ + className: 'goes-on-outermost-wrapper', + panelClassName: 'goes-on-popover-panel', + repositionOnScroll: true, + }} + /> + ); + + expect(component).toMatchSnapshot(); + }); }); }); diff --git a/src/components/form/super_select/super_select.tsx b/src/components/form/super_select/super_select.tsx index 19bb918f84c..2f91b0e1253 100644 --- a/src/components/form/super_select/super_select.tsx +++ b/src/components/form/super_select/super_select.tsx @@ -17,7 +17,7 @@ import { EuiSuperSelectControlProps, EuiSuperSelectOption, } from './super_select_control'; -import { EuiInputPopover } from '../../popover'; +import { EuiInputPopover, EuiPopoverProps } from '../../popover'; import { EuiContextMenuItem, EuiContextMenuItemLayoutAlignment, @@ -69,20 +69,34 @@ export type EuiSuperSelectProps = CommonProps & itemLayoutAlign?: EuiContextMenuItemLayoutAlignment; /** - * Applied to the outermost wrapper (popover) + * Controls whether the options are shown. Default: false */ - popoverClassName?: string; + isOpen?: boolean; /** - * Controls whether the options are shown. Default: false + * Optional props to pass to the underlying [EuiPopover](/#/layout/popover). + * Allows fine-grained control of the popover dropdown menu, including + * `repositionOnScroll` for EuiSuperSelects used within scrollable containers, + * and customizing popover panel styling. + * + * Does not accept a nested `popoverProps.isOpen` property - use the top level + * `isOpen` API instead. */ - isOpen?: boolean; + popoverProps?: Partial>; + + /** + * Applied to the outermost wrapper (popover) + * + * **DEPRECATED: Use `popoverProps.className` instead (will take precedence over this prop if set).** + */ + popoverClassName?: string; /** * When `true`, the popover's position is re-calculated when the user - * scrolls, this supports having fixed-position popover anchors. This value is passed - * to the EuiInputPopover component. When nesting an `EuiSuperSelect` in a scrollable container, + * scrolls. When nesting an `EuiSuperSelect` in a scrollable container, * `repositionOnScroll` should be `true` + * + * **DEPRECATED: Use `popoverProps.repositionOnScroll` instead (will take precedence over this prop if set).** */ repositionOnScroll?: boolean; }; @@ -259,12 +273,16 @@ export class EuiSuperSelect extends Component< itemLayoutAlign, fullWidth, popoverClassName, + popoverProps, compressed, repositionOnScroll, ...rest } = this.props; - const popoverClasses = classNames('euiSuperSelect', popoverClassName); + const popoverClasses = classNames( + 'euiSuperSelect', + popoverProps?.className ?? popoverClassName + ); const buttonClasses = classNames( { @@ -321,13 +339,14 @@ export class EuiSuperSelect extends Component< return (