@@ -177,7 +177,7 @@ exports[`EuiPopover props buffer 1`] = `
tabindex="0"
>
@@ -236,7 +236,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
tabindex="0"
>
@@ -308,7 +308,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
tabindex="0"
>
@@ -380,7 +380,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
tabindex="0"
>
@@ -439,7 +439,7 @@ exports[`EuiPopover props offset with arrow 1`] = `
tabindex="0"
>
@@ -552,7 +552,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
tabindex="0"
>
@@ -608,7 +608,7 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
>
@@ -661,7 +661,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
tabindex="0"
>
@@ -720,7 +720,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
tabindex="0"
>
@@ -780,7 +780,7 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
tabindex="0"
>
@@ -837,7 +837,7 @@ exports[`EuiPopover props popoverScreenReaderText 1`] = `
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
>
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 6f6f8685c04..56b59c4e729 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -167,6 +167,11 @@ export interface EuiPopoverProps extends CommonProps {
* an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true`
*/
repositionOnScroll?: boolean;
+ /**
+ * Must be set to true if using `EuiDragDropContext` within a popover,
+ * otherwise your nested drag & drop will have incorrect positioning
+ */
+ hasDragDrop?: boolean;
/**
* By default, popover content inherits the z-index of the anchor
* component; pass `zIndex` to override
@@ -613,6 +618,7 @@ export class EuiPopover extends Component
{
hasArrow,
arrowChildren,
repositionOnScroll,
+ hasDragDrop,
zIndex,
attachToAnchor,
display,
@@ -709,6 +715,7 @@ export class EuiPopover extends Component {
position={this.state.arrowPosition}
isAttached={attachToAnchor}
className={classNames(panelClassName, panelProps?.className)}
+ hasDragDrop={hasDragDrop}
hasShadow={false}
paddingSize={panelPaddingSize}
tabIndex={tabIndex}
diff --git a/src/components/popover/popover_arrow/_popover_arrow.tsx b/src/components/popover/popover_arrow/_popover_arrow.tsx
index 8d788d6637f..6bcdffa01bd 100644
--- a/src/components/popover/popover_arrow/_popover_arrow.tsx
+++ b/src/components/popover/popover_arrow/_popover_arrow.tsx
@@ -29,7 +29,12 @@ export const EuiPopoverArrow: FunctionComponent = ({
const cssStyles = [styles.euiPopoverArrow, styles[position]];
return (
-
+
{children}
);
diff --git a/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap b/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap
index e95d89846c7..c36915f0282 100644
--- a/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap
+++ b/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap
@@ -9,6 +9,13 @@ exports[`EuiPopoverPanel is rendered 1`] = `
/>
`;
+exports[`EuiPopoverPanel props hasDragDrop is rendered 1`] = `
+
+`;
+
exports[`EuiPopoverPanel props isAttached is rendered 1`] = `
{
- const { euiTheme } = euiThemeContext;
+ const { euiTheme, colorMode } = euiThemeContext;
return {
// Base
@@ -91,5 +92,49 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
left: css``,
right: css``,
},
+
+ // Overrides for drag & drop contexts within popovers. This is required because
+ // the fixed positions of drag and drop don't work inside of transformed elements
+ hasDragDrop: {
+ hasDragDrop: css`
+ transform: none;
+ // Filter also causes a stacking context that interferes with the positioned children,
+ // so we disable it and recreate the shadow via box-shadow instead
+ filter: none;
+ ${euiShadowMedium(euiThemeContext, { property: 'box-shadow' })};
+ `,
+ // The offset transforms must be recreated in margins
+ top: css`
+ margin-block-start: ${euiTheme.size[translateDistance]};
+ // Existing box-shadow of the popover is sufficient to see the arrow
+ `,
+ bottom: css`
+ margin-block-start: -${euiTheme.size[translateDistance]};
+
+ .euiPopover__arrow {
+ filter: drop-shadow(
+ 0 -6px 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)}
+ );
+ }
+ `,
+ left: css`
+ margin-inline-start: ${euiTheme.size[translateDistance]};
+
+ .euiPopover__arrow {
+ filter: drop-shadow(
+ 6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)}
+ );
+ }
+ `,
+ right: css`
+ margin-inline-start: -${euiTheme.size[translateDistance]};
+
+ .euiPopover__arrow {
+ filter: drop-shadow(
+ -6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)}
+ );
+ }
+ `,
+ },
};
};
diff --git a/src/components/popover/popover_panel/_popover_panel.test.tsx b/src/components/popover/popover_panel/_popover_panel.test.tsx
index 4cb72ba62af..6822097b3e9 100644
--- a/src/components/popover/popover_panel/_popover_panel.test.tsx
+++ b/src/components/popover/popover_panel/_popover_panel.test.tsx
@@ -36,6 +36,12 @@ describe('EuiPopoverPanel', () => {
expect(component).toMatchSnapshot();
});
+ test('hasDragDrop is rendered', () => {
+ const component = render(
);
+
+ expect(component).toMatchSnapshot();
+ });
+
describe('position', () => {
POSITIONS.forEach((position) => {
test(`${position} is rendered`, () => {
diff --git a/src/components/popover/popover_panel/_popover_panel.tsx b/src/components/popover/popover_panel/_popover_panel.tsx
index b63db6fc91e..7e39c5f2afd 100644
--- a/src/components/popover/popover_panel/_popover_panel.tsx
+++ b/src/components/popover/popover_panel/_popover_panel.tsx
@@ -28,6 +28,7 @@ type EuiPopoverPanelInternalProps = {
isOpen?: boolean;
isAttached?: boolean;
position?: EuiPopoverArrowPositions | null;
+ hasDragDrop?: boolean;
};
/**
@@ -36,7 +37,15 @@ type EuiPopoverPanelInternalProps = {
*/
export const EuiPopoverPanel: FunctionComponent<
EuiPopoverPanelProps & EuiPopoverPanelInternalProps
-> = ({ children, className, isOpen, isAttached, position, ...rest }) => {
+> = ({
+ children,
+ className,
+ isOpen,
+ isAttached,
+ hasDragDrop,
+ position,
+ ...rest
+}) => {
const panelContext = useContext(EuiPopoverPanelContext);
if (rest.paddingSize) panelContext.paddingSize = rest.paddingSize;
@@ -59,6 +68,14 @@ export const EuiPopoverPanel: FunctionComponent<
];
}
+ if (hasDragDrop) {
+ panelCSS = [
+ ...panelCSS,
+ styles.hasDragDrop.hasDragDrop,
+ position && styles.hasDragDrop[position],
+ ];
+ }
+
return (
@@ -155,7 +155,7 @@ exports[`EuiTourStep can have subtitle 1`] = `
style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
>
@@ -263,7 +263,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
>
@@ -355,7 +355,7 @@ exports[`EuiTourStep can turn off the beacon 1`] = `
style="top: -22px; left: -16px; will-change: transform, opacity; z-index: 2000;"
>
@@ -453,7 +453,7 @@ exports[`EuiTourStep is rendered 1`] = `
style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
>
diff --git a/upcoming_changelogs/6329.md b/upcoming_changelogs/6329.md
new file mode 100644
index 00000000000..6ce91b5d41f
--- /dev/null
+++ b/upcoming_changelogs/6329.md
@@ -0,0 +1,5 @@
+- Added the `hasDragDrop` prop to `EuiPopover`. Use this prop if your popover contains `EuiDragDropContext`.
+
+**Bug fixes**
+
+- Fixed buggy drag & drop behavior within `EuiDataGrid`'s columns & sorting toolbar popovers