[Security Solution] Reposition EuiPopovers on scroll (#69433)
* [Security Solution] Reposition EuiPopovers on scroll * update snapshots Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
patrykkopycinski
GitHub
parent
8a09f247e3
commit
55922cb9a0
|
|
@ -109,6 +109,7 @@ function FilterBarUI(props: Props) {
|
|||
panelPaddingSize="none"
|
||||
ownFocus={true}
|
||||
initialFocus=".filterEditor__hiddenItem"
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<div style={{ width: 400 }}>
|
||||
|
|
|
|||
|
|
@ -167,6 +167,7 @@ class FilterOptionsUI extends Component<Props, State> {
|
|||
anchorPosition="rightUp"
|
||||
panelPaddingSize="none"
|
||||
withTitle
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiPopoverTitle>
|
||||
<FormattedMessage
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@ export function QueryLanguageSwitcher(props: Props) {
|
|||
isOpen={isPopoverOpen}
|
||||
closePopover={() => setIsPopoverOpen(false)}
|
||||
withTitle
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiPopoverTitle>
|
||||
<FormattedMessage
|
||||
|
|
|
|||
|
|
@ -182,6 +182,7 @@ export function SavedQueryManagementComponent({
|
|||
panelPaddingSize="none"
|
||||
buffer={-8}
|
||||
ownFocus
|
||||
repositionOnScroll
|
||||
>
|
||||
<div
|
||||
className="kbnSavedQueryManagement__popover"
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ exports[`RuleActionsOverflow snapshots renders correctly against snapshot 1`] =
|
|||
isOpen={false}
|
||||
ownFocus={true}
|
||||
panelPaddingSize="none"
|
||||
repositionOnScroll={true}
|
||||
>
|
||||
<EuiContextMenuPanel
|
||||
data-test-subj="rules-details-menu-panel"
|
||||
|
|
|
|||
|
|
@ -135,6 +135,7 @@ const RuleActionsOverflowComponent = ({
|
|||
data-test-subj="rules-details-popover"
|
||||
ownFocus={true}
|
||||
panelPaddingSize="none"
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiContextMenuPanel data-test-subj="rules-details-menu-panel" items={actions} />
|
||||
</EuiPopover>
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ export const TagsFilterPopoverComponent = ({
|
|||
isOpen={isTagPopoverOpen}
|
||||
closePopover={() => setIsTagPopoverOpen(!isTagPopoverOpen)}
|
||||
panelPaddingSize="none"
|
||||
repositionOnScroll
|
||||
>
|
||||
<ScrollableDiv>
|
||||
{tags.map((tag, index) => (
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ export const FilterPopoverComponent = ({
|
|||
isOpen={isPopoverOpen}
|
||||
closePopover={setIsPopoverOpenCb}
|
||||
panelPaddingSize="none"
|
||||
repositionOnScroll
|
||||
>
|
||||
<ScrollableDiv>
|
||||
{options.map((option, index) => (
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@ export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActio
|
|||
id="settingsPopover"
|
||||
isOpen={showActions}
|
||||
closePopover={onClosePopover}
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="flexStart"
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@ const ExceptionsViewerPaginationComponent = ({
|
|||
isOpen={isOpen}
|
||||
closePopover={handleClosePerPageMenu}
|
||||
panelPaddingSize="none"
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiContextMenuPanel items={items} />
|
||||
</EuiPopover>
|
||||
|
|
|
|||
|
|
@ -95,6 +95,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
|
|||
onClick={[Function]}
|
||||
ownFocus={false}
|
||||
panelPaddingSize="m"
|
||||
repositionOnScroll={true}
|
||||
>
|
||||
<EuiDescriptionList
|
||||
data-test-subj="anomaly-description-list"
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ export const AnomalyScoreComponent = ({
|
|||
onClick={() => setIsOpen(!isOpen)}
|
||||
closePopover={() => setIsOpen(!isOpen)}
|
||||
button={<Icon type="iInCircle" />}
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiDescriptionList
|
||||
data-test-subj="anomaly-description-list"
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ exports[`GroupsFilterPopover renders correctly against snapshot 1`] = `
|
|||
isOpen={false}
|
||||
ownFocus={true}
|
||||
panelPaddingSize="none"
|
||||
repositionOnScroll={true}
|
||||
>
|
||||
<EuiFilterSelectItem
|
||||
key="0-auditbeat"
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ export const GroupsFilterPopoverComponent = ({
|
|||
isOpen={isGroupPopoverOpen}
|
||||
closePopover={() => setIsGroupPopoverOpen(!isGroupPopoverOpen)}
|
||||
panelPaddingSize="none"
|
||||
repositionOnScroll
|
||||
>
|
||||
{uniqueGroups.map((group, index) => (
|
||||
<EuiFilterSelectItem
|
||||
|
|
|
|||
|
|
@ -122,6 +122,7 @@ export const MlPopover = React.memo(() => {
|
|||
}
|
||||
isOpen={isPopoverOpen}
|
||||
closePopover={() => setIsPopoverOpen(!isPopoverOpen)}
|
||||
repositionOnScroll
|
||||
>
|
||||
<UpgradeContents />
|
||||
</EuiPopover>
|
||||
|
|
@ -147,6 +148,7 @@ export const MlPopover = React.memo(() => {
|
|||
}
|
||||
isOpen={isPopoverOpen}
|
||||
closePopover={() => setIsPopoverOpen(!isPopoverOpen)}
|
||||
repositionOnScroll
|
||||
>
|
||||
<PopoverContentsDiv data-test-subj="ml-popover-contents">
|
||||
<EuiPopoverTitle>{i18n.ML_JOB_SETTINGS}</EuiPopoverTitle>
|
||||
|
|
|
|||
|
|
@ -273,6 +273,7 @@ const PaginatedTableComponent: FC<SiemTables> = ({
|
|||
isOpen={isPopoverOpen}
|
||||
closePopover={closePopover}
|
||||
panelPaddingSize="none"
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiContextMenuPanel items={rowItems} data-test-subj="loadingMorePickSizeRow" />
|
||||
</EuiPopover>
|
||||
|
|
|
|||
|
|
@ -195,6 +195,7 @@ export const PopoverComponent = ({
|
|||
closePopover={() => setIsOpen(!isOpen)}
|
||||
id={`${idPrefix}-popover`}
|
||||
isOpen={isOpen}
|
||||
repositionOnScroll
|
||||
>
|
||||
{children}
|
||||
</EuiPopover>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ const Popover = React.memo<UtilityBarActionProps>(
|
|||
}
|
||||
closePopover={() => setPopoverState(false)}
|
||||
isOpen={popoverState}
|
||||
repositionOnScroll
|
||||
>
|
||||
{popoverContent?.(closePopover)}
|
||||
</EuiPopover>
|
||||
|
|
|
|||
|
|
@ -92,6 +92,7 @@ export const TableRowActions = React.memo<{ items: EuiContextMenuPanelProps['ite
|
|||
}
|
||||
isOpen={isOpen}
|
||||
closePopover={handleCloseMenu}
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiContextMenuPanel items={items} data-test-subj="policyActionsMenu" />
|
||||
</EuiPopover>
|
||||
|
|
|
|||
|
|
@ -215,6 +215,7 @@ const NodeSubMenuComponents = React.memo(
|
|||
button={submenuPopoverButton}
|
||||
isOpen={menuIsOpen}
|
||||
closePopover={closePopover}
|
||||
repositionOnScroll
|
||||
>
|
||||
{menuIsOpen && typeof optionsWithActions === 'object' && (
|
||||
<OptionList isLoading={isMenuLoading} subMenuOptions={optionsWithActions} />
|
||||
|
|
|
|||
|
|
@ -274,6 +274,7 @@ export const DefaultFieldRendererOverflow = React.memo<DefaultFieldRendererOverf
|
|||
}
|
||||
isOpen={isOpen}
|
||||
closePopover={() => setIsOpen(!isOpen)}
|
||||
repositionOnScroll
|
||||
>
|
||||
<MoreContainer
|
||||
idPrefix={idPrefix}
|
||||
|
|
|
|||
|
|
@ -187,6 +187,7 @@ export const EventColumnView = React.memo<Props>(
|
|||
closePopover={closePopover}
|
||||
panelPaddingSize="none"
|
||||
anchorPosition="downLeft"
|
||||
repositionOnScroll
|
||||
>
|
||||
<ContextMenuPanel items={grouped.contextMenu} />
|
||||
</EuiPopover>
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@ export const InsertTimelinePopoverComponent: React.FC<Props> = ({
|
|||
button={insertTimelineButton}
|
||||
isOpen={isPopoverOpen}
|
||||
closePopover={handleClosePopover}
|
||||
repositionOnScroll
|
||||
>
|
||||
<SelectableTimeline
|
||||
hideUntitled={hideUntitled}
|
||||
|
|
|
|||
|
|
@ -138,6 +138,7 @@ const PropertiesRightComponent: React.FC<PropertiesRightComponentProps> = ({
|
|||
id="timelineSettingsPopover"
|
||||
isOpen={showActions}
|
||||
closePopover={onClosePopover}
|
||||
repositionOnScroll
|
||||
>
|
||||
<EuiFlexGroup alignItems="flexStart" direction="column" gutterSize="none">
|
||||
{capabilitiesCanUserCRUD && (
|
||||
|
|
|
|||
Loading…
Reference in a new issue