[EuiPopover] Remove hasDragDrop deprecated prop

packages/eui/changelogs/upcoming/8256.md

@@ -0,0 +1,3 @@
+**Breaking changes**
+
+- Removed `EuiPopover`'s deprecated `hasDragDrop` prop. Use `usePortal` on any child `EuiDraggable` instead

packages/eui/src/components/popover/input_popover.stories.tsx

@@ -37,7 +37,6 @@ const meta: Meta<EuiInputPopoverProps> = {
     panelMinWidth: 0,
     offset: undefined,
     buffer: undefined,
-    hasDragDrop: false,
     panelClassName: '',
     popoverScreenReaderText: '',
   },
@@ -50,7 +49,6 @@ moveStorybookControlsToCategory(
     'closePopover',
     'disableFocusTrap',
     'display',
-    'hasDragDrop',
     'isOpen',
     'offset',
     'onPositionChange',

packages/eui/src/components/popover/popover.stories.tsx

@@ -41,7 +41,6 @@ const meta: Meta<EuiPopoverProps> = {
     // adding defaults for quicker/easier QA
     arrowChildren: '',
     attachToAnchor: false,
-    hasDragDrop: false,
     panelClassName: '',
     popoverScreenReaderText: '',
   },

packages/eui/src/components/popover/popover.tsx

@@ -174,13 +174,6 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps {
    * @default true
    */
   repositionToCrossAxis?: boolean;
-  /**
-   * Must be set to true if using `EuiDragDropContext` within a popover,
-   * otherwise your nested drag & drop will have incorrect positioning
-   *
-   * @deprecated - use `usePortal` prop on children `EuiDraggable` components instead.
-   */
-  hasDragDrop?: boolean;
   /**
    * By default, popover content inherits the z-index of the anchor
    * component; pass `zIndex` to override
@@ -635,7 +628,6 @@ export class EuiPopover extends Component<Props, State> {
       arrowChildren,
       repositionOnScroll,
       repositionToCrossAxis,
-      hasDragDrop,
       zIndex,
       attachToAnchor,
       display,
@@ -730,7 +722,6 @@ export class EuiPopover extends Component<Props, State> {
               position={this.state.arrowPosition}
               isAttached={attachToAnchor}
               className={classNames(panelClassName, panelProps?.className)}
-              hasDragDrop={hasDragDrop}
               hasShadow={false}
               paddingSize={panelPaddingSize}
               tabIndex={tabIndex}

packages/eui/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap

@@ -9,13 +9,6 @@ exports[`EuiPopoverPanel is rendered 1`] = `
 />
 `;
 
-exports[`EuiPopoverPanel props hasDragDrop is rendered 1`] = `
-<div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-hasDragDrop"
-  data-popover-panel="true"
-/>
-`;
-
 exports[`EuiPopoverPanel props isAttached is rendered 1`] = `
 <div
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-isOpen-hasTransform"

packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts

@@ -12,7 +12,6 @@ import {
   euiShadowFlat,
   euiShadowMedium,
 } from '../../../themes/amsterdam/global_styling/mixins';
-import { getShadowColor } from '../../../themes/amsterdam/global_styling/functions';
 import { UseEuiTheme, tint } from '../../../services';
 import {
   euiCanAnimate,
@@ -30,7 +29,7 @@ export const openAnimationTiming = 'slow';
  */
 
 export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
   const translateDistance = euiTheme.size.s;
   const animationSpeed = euiTheme.animation[openAnimationTiming];
@@ -119,49 +118,5 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
         return this.bottom;
       },
     },
-
-    // Has an arrow, but cannot have transform or filter CSS - they create a
-    // stacking context that messes up the drag/drop fixed positioning
-    hasDragDrop: {
-      hasDragDrop: css`
-        ${euiShadowMedium(euiThemeContext, { property: 'box-shadow' })}
-
-        ${euiCanAnimate} {
-          transition: ${opacityTransition}; /* 2 */
-        }
-      `,
-      // The offset transforms must be recreated in margins
-      top: css`
-        margin-block-start: ${translateDistance};
-        /* Existing box-shadow of the popover is sufficient to see the arrow */
-      `,
-      bottom: css`
-        margin-block-start: -${translateDistance};
-
-        .euiPopover__arrow {
-          filter: drop-shadow(
-            0 -6px 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)}
-          );
-        }
-      `,
-      left: css`
-        margin-inline-start: ${translateDistance};
-
-        .euiPopover__arrow {
-          filter: drop-shadow(
-            6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)}
-          );
-        }
-      `,
-      right: css`
-        margin-inline-start: -${translateDistance};
-
-        .euiPopover__arrow {
-          filter: drop-shadow(
-            -6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)}
-          );
-        }
-      `,
-    },
   };
 };

packages/eui/src/components/popover/popover_panel/_popover_panel.test.tsx

@@ -36,12 +36,6 @@ describe('EuiPopoverPanel', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
 
-    test('hasDragDrop is rendered', () => {
-      const { container } = render(<EuiPopoverPanel hasDragDrop />);
-
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
     describe('position', () => {
       POSITIONS.forEach((position) => {
         test(`${position} is rendered`, () => {

packages/eui/src/components/popover/popover_panel/_popover_panel.tsx

@@ -28,7 +28,6 @@ type EuiPopoverPanelInternalProps = {
   isOpen?: boolean;
   isAttached?: boolean;
   position?: EuiPopoverArrowPositions | null;
-  hasDragDrop?: boolean;
 };
 
 /**
@@ -37,15 +36,7 @@ type EuiPopoverPanelInternalProps = {
  */
 export const EuiPopoverPanel: FunctionComponent<
   EuiPopoverPanelProps & EuiPopoverPanelInternalProps
-> = ({
-  children,
-  className,
-  isOpen,
-  isAttached,
-  hasDragDrop,
-  position,
-  ...rest
-}) => {
+> = ({ children, className, isOpen, isAttached, position, ...rest }) => {
   const classes = classNames('euiPopover__panel', className);
 
   const euiThemeContext = useEuiTheme();
@@ -61,13 +52,6 @@ export const EuiPopoverPanel: FunctionComponent<
       isOpen && styles.isOpen,
     ];
 
-    if (hasDragDrop) {
-      return [
-        ...sharedStyles,
-        styles.hasDragDrop.hasDragDrop,
-        position && styles.hasDragDrop[position],
-      ];
-    }
     if (isAttached) {
       return [
         ...sharedStyles,
@@ -80,7 +64,7 @@ export const EuiPopoverPanel: FunctionComponent<
       styles.hasTransform.hasTransform,
       isOpen && position && styles.hasTransform[position],
     ];
-  }, [euiThemeContext, isOpen, position, isAttached, hasDragDrop]);
+  }, [euiThemeContext, isOpen, position, isAttached]);
 
   return (
     <EuiPopoverPanelContext.Provider