@atlaskit/pragmatic-drag-and-drop 1.7.10 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/pragmatic-drag-and-drop
 
+## 1.8.0
+
+### Minor Changes
+
+- [`28c6a19284541`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28c6a19284541) -
+  Moving to `popover="manual"` for "on top" rendering logic. Elements that need to render above all
+  other content (honey pot fix, custom native drag previews) now use the browser's top layer via the
+  Popover API instead of `z-index: 2147483647`.
+
+  Falls back to the previous `z-index` approach when the Popover API is not available.
+
+  Minimum browser versions with `popover="manual"` support:
+  - Chrome 114+
+  - Edge 114+
+  - Firefox 125+
+  - Safari 17+
+
 ## 1.7.10
 
 ### Patch Changes

package/dist/cjs/honey-pot-fix/make-honey-pot-fix.js

@@ -8,6 +8,8 @@ exports.makeHoneyPotFix = makeHoneyPotFix;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _bindEventListener = require("bind-event-listener");
 var _maxZIndex = require("../util/max-z-index");
+var _popoverResetStyles = require("../util/popover-reset-styles");
+var _supportsPopover = require("../util/supports-popover");
 var _honeyPotDataAttribute = require("./honey-pot-data-attribute");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -136,33 +138,48 @@ function mountHoneyPot(_ref4) {
   var element = document.createElement('div');
   element.setAttribute(_honeyPotDataAttribute.honeyPotDataAttribute, 'true');
 
+  // Using popover="manual" to place the element in the browser's top layer.
+  // This ensures the honey pot is visually on top of everything else,
+  // including elements using z-index and other stacking contexts.
+  // "manual" means no light dismiss — we manage the lifecycle ourselves.
+  // Falls back to position:fixed + maxZIndex when the popover API is not available.
+  if ((0, _supportsPopover.supportsPopover)()) {
+    element.setAttribute('popover', 'manual');
+  }
+
   // can shift during the drag thanks to Firefox
   var clientRect = getHoneyPotRectFor({
     client: initial
   });
   Object.assign(element.style, _objectSpread(_objectSpread({
+    position: 'fixed'
+  }, (0, _supportsPopover.supportsPopover)() ?
+  // needs to come first as it has 'inset: unset' which
+  // needs to be overridden by our top / left values
+  _popoverResetStyles.popoverResetUserAgentStyles : {
+    // Fallback: using maximum possible z-index so that this element
+    // will always be on top of other positioned content.
+    zIndex: _maxZIndex.maxZIndex
+  }), {}, {
     // Setting a background color explicitly to avoid any inherited styles.
     // Looks like this could be `opacity: 0`, but worried that _might_
     // cause the element to be ignored on some platforms.
     // When debugging, set backgroundColor to something like "red".
     backgroundColor: 'transparent',
-    position: 'fixed',
     // Being explicit to avoid inheriting styles
     padding: 0,
     margin: 0,
-    boxSizing: 'border-box'
-  }, getRectStyles({
-    clientRect: clientRect
-  })), {}, {
+    boxSizing: 'border-box',
     // We want this element to absorb pointer events,
     // it's kind of the whole point 😉
-    pointerEvents: 'auto',
-    // Want to make sure the honey pot is top of everything else.
-    // Don't need to worry about native drag previews, as they will
-    // have been rendered (and removed) before the honey pot is rendered
-    zIndex: _maxZIndex.maxZIndex
-  }));
+    pointerEvents: 'auto'
+  }, getRectStyles({
+    clientRect: clientRect
+  })));
   document.body.appendChild(element);
+  if ((0, _supportsPopover.supportsPopover)()) {
+    element.showPopover();
+  }
 
   /**
    *  🦊 In firefox we can get `"pointermove"` events after the drag

package/dist/cjs/public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.js

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setCustomNativeDragPreview = setCustomNativeDragPreview;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _elementAdapter = require("../../../adapter/element-adapter");
 var _isSafari = require("../../../util/is-safari");
 var _maxZIndex = require("../../../util/max-z-index");
+var _popoverResetStyles = require("../../../util/popover-reset-styles");
+var _supportsPopover = require("../../../util/supports-popover");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
  */
@@ -42,12 +48,33 @@ function setCustomNativeDragPreview(_ref) {
     _ref$getOffset = _ref.getOffset,
     getOffset = _ref$getOffset === void 0 ? defaultOffset : _ref$getOffset;
   var container = document.createElement('div');
-  Object.assign(container.style, {
+
+  // Using popover="manual" to place the element in the browser's top layer.
+  // This ensures the drag preview container is visually on top of everything else,
+  // including elements using z-index and other stacking contexts.
+  // "manual" means no light dismiss — we manage the lifecycle ourselves.
+  // This element is only created for a single frame for the browser to take a
+  // photo of it, and then it is destroyed.
+  // Falls back to position:fixed + maxZIndex when the popover API is not available.
+  // Note: the popover attribute must be set before the element is in the DOM.
+  // `.showPopover()` is called further below after the element is appended to the body.
+  if ((0, _supportsPopover.supportsPopover)()) {
+    container.setAttribute('popover', 'manual');
+  }
+  Object.assign(container.style, _objectSpread(_objectSpread({
     // Ensuring we don't cause reflow when adding the element to the page
     // Using `position:fixed` rather than `position:absolute` so we are
     // positioned on the current viewport.
     // `position:fixed` also creates a new stacking context, so we don't need to do that here
-    position: 'fixed',
+    position: 'fixed'
+  }, (0, _supportsPopover.supportsPopover)() ?
+  // needs to come first as it has 'inset: unset' which
+  // needs to be overridden by our top / left values
+  _popoverResetStyles.popoverResetUserAgentStyles : {
+    // Fallback: using maximum possible z-index so that this element
+    // will always be on top of other positioned content.
+    zIndex: _maxZIndex.maxZIndex
+  }), {}, {
     // According to `mdn`, the element can be offscreen:
     // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage#imgelement
     //
@@ -57,19 +84,15 @@ function setCustomNativeDragPreview(_ref) {
     // If the element is _completely_ offscreen, Safari@17.1 will cancel the drag
     top: 0,
     left: 0,
-    // Using maximum possible z-index so that this element will always be on top
-    // https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index
-    // Did not use `layers` in `@atlaskit/theme` because:
-    // 1. This element is not a 'layer' in the conventional sense, as this element
-    //    is only created for a single frame for the browser to take a photo of it,
-    //    and then it is destroyed
-    // 2. Did not want to add a dependency onto `@atlaskit/theme`
-    // 3. Want to always be on top of product UI which might have higher z-index's
-    zIndex: _maxZIndex.maxZIndex,
     // Avoiding any additional events caused by the new element (being super safe)
     pointerEvents: 'none'
-  });
+  }));
   document.body.append(container);
+
+  // `.showPopover()` must be called after the element is in the DOM.
+  if ((0, _supportsPopover.supportsPopover)()) {
+    container.showPopover();
+  }
   var unmount = render({
     container: container
   });
@@ -107,6 +130,10 @@ function setCustomNativeDragPreview(_ref) {
      * Adding a parent element of the `container` with a background color (eg "white")
      * → Wrecks the opacity of the drag preview element
      */
+    /**
+     * Update: this bug fix is no longer needed in `Safari@26.4` (and maybe earlier)
+     * We can remove it in a future release
+     */
     if ((0, _isSafari.isSafari)()) {
       var rect = container.getBoundingClientRect();
 
@@ -119,6 +146,8 @@ function setCustomNativeDragPreview(_ref) {
     nativeSetDragImage === null || nativeSetDragImage === void 0 || nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   });
   function cleanup() {
+    // No need to call `.hidePopover()`.
+    // Removing the element from the DOM dismisses the popover
     unbindMonitor();
     unmount === null || unmount === void 0 || unmount();
     document.body.removeChild(container);

package/dist/cjs/util/popover-reset-styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.popoverResetUserAgentStyles = void 0;
+/**
+ * Resets user agent styles for `[popover]` elements.
+ *
+ * Browsers apply these defaults to popovers (per the WHATWG HTML spec rendering section):
+ * - `inset: 0` + `margin: auto` → centers the popover in the viewport
+ * - `border: solid` → visible border
+ * - `padding: 0.25em` → internal spacing
+ * - `overflow: auto` → scrollbars when content overflows
+ * - `color: CanvasText` + `background-color: Canvas` → system theme colors
+ *
+ * This object neutralizes those defaults so the popover behaves like a plain
+ * positioned element. `width` and `height` (UA default: `fit-content`) are not
+ * reset here because consumers set their own dimensions.
+ */
+var popoverResetUserAgentStyles = exports.popoverResetUserAgentStyles = {
+  inset: 'unset',
+  border: 'none',
+  padding: 0,
+  margin: 0,
+  overflow: 'visible',
+  color: 'inherit',
+  background: 'transparent'
+};

package/dist/cjs/util/supports-popover.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.supportsPopover = void 0;
+var _once = require("../public-utils/once");
+// Using `once` as the value won't change in a browser
+
+/**
+ * Returns `true` if the browser supports the Popover API (top-layer).
+ *
+ * When supported, elements with `popover="manual"` can be promoted to the
+ * browser's top layer via `element.showPopover()`, which is more reliable
+ * than `z-index` for ensuring an element renders above everything else.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ */
+var supportsPopover = exports.supportsPopover = (0, _once.once)(function supportsPopover() {
+  return typeof HTMLElement !== 'undefined' && typeof HTMLElement.prototype.showPopover === 'function';
+});

package/dist/es2019/honey-pot-fix/make-honey-pot-fix.js

@@ -1,5 +1,7 @@
 import { bind, bindAll } from 'bind-event-listener';
 import { maxZIndex } from '../util/max-z-index';
+import { popoverResetUserAgentStyles } from '../util/popover-reset-styles';
+import { supportsPopover } from '../util/supports-popover';
 import { honeyPotDataAttribute } from './honey-pot-data-attribute';
 const honeyPotSize = 2;
 const halfHoneyPotSize = honeyPotSize / 2;
@@ -130,33 +132,49 @@ function mountHoneyPot({
   const element = document.createElement('div');
   element.setAttribute(honeyPotDataAttribute, 'true');
 
+  // Using popover="manual" to place the element in the browser's top layer.
+  // This ensures the honey pot is visually on top of everything else,
+  // including elements using z-index and other stacking contexts.
+  // "manual" means no light dismiss — we manage the lifecycle ourselves.
+  // Falls back to position:fixed + maxZIndex when the popover API is not available.
+  if (supportsPopover()) {
+    element.setAttribute('popover', 'manual');
+  }
+
   // can shift during the drag thanks to Firefox
   let clientRect = getHoneyPotRectFor({
     client: initial
   });
   Object.assign(element.style, {
+    position: 'fixed',
+    ...(supportsPopover() ?
+    // needs to come first as it has 'inset: unset' which
+    // needs to be overridden by our top / left values
+    popoverResetUserAgentStyles : {
+      // Fallback: using maximum possible z-index so that this element
+      // will always be on top of other positioned content.
+      zIndex: maxZIndex
+    }),
     // Setting a background color explicitly to avoid any inherited styles.
     // Looks like this could be `opacity: 0`, but worried that _might_
     // cause the element to be ignored on some platforms.
     // When debugging, set backgroundColor to something like "red".
     backgroundColor: 'transparent',
-    position: 'fixed',
     // Being explicit to avoid inheriting styles
     padding: 0,
     margin: 0,
     boxSizing: 'border-box',
-    ...getRectStyles({
-      clientRect
-    }),
     // We want this element to absorb pointer events,
     // it's kind of the whole point 😉
     pointerEvents: 'auto',
-    // Want to make sure the honey pot is top of everything else.
-    // Don't need to worry about native drag previews, as they will
-    // have been rendered (and removed) before the honey pot is rendered
-    zIndex: maxZIndex
+    ...getRectStyles({
+      clientRect
+    })
   });
   document.body.appendChild(element);
+  if (supportsPopover()) {
+    element.showPopover();
+  }
 
   /**
    *  🦊 In firefox we can get `"pointermove"` events after the drag

package/dist/es2019/public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.js

@@ -1,6 +1,8 @@
 import { monitorForElements } from '../../../adapter/element-adapter';
 import { isSafari } from '../../../util/is-safari';
 import { maxZIndex } from '../../../util/max-z-index';
+import { popoverResetUserAgentStyles } from '../../../util/popover-reset-styles';
+import { supportsPopover } from '../../../util/supports-popover';
 
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
@@ -37,12 +39,33 @@ export function setCustomNativeDragPreview({
   getOffset = defaultOffset
 }) {
   const container = document.createElement('div');
+
+  // Using popover="manual" to place the element in the browser's top layer.
+  // This ensures the drag preview container is visually on top of everything else,
+  // including elements using z-index and other stacking contexts.
+  // "manual" means no light dismiss — we manage the lifecycle ourselves.
+  // This element is only created for a single frame for the browser to take a
+  // photo of it, and then it is destroyed.
+  // Falls back to position:fixed + maxZIndex when the popover API is not available.
+  // Note: the popover attribute must be set before the element is in the DOM.
+  // `.showPopover()` is called further below after the element is appended to the body.
+  if (supportsPopover()) {
+    container.setAttribute('popover', 'manual');
+  }
   Object.assign(container.style, {
     // Ensuring we don't cause reflow when adding the element to the page
     // Using `position:fixed` rather than `position:absolute` so we are
     // positioned on the current viewport.
     // `position:fixed` also creates a new stacking context, so we don't need to do that here
     position: 'fixed',
+    ...(supportsPopover() ?
+    // needs to come first as it has 'inset: unset' which
+    // needs to be overridden by our top / left values
+    popoverResetUserAgentStyles : {
+      // Fallback: using maximum possible z-index so that this element
+      // will always be on top of other positioned content.
+      zIndex: maxZIndex
+    }),
     // According to `mdn`, the element can be offscreen:
     // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage#imgelement
     //
@@ -52,19 +75,15 @@ export function setCustomNativeDragPreview({
     // If the element is _completely_ offscreen, Safari@17.1 will cancel the drag
     top: 0,
     left: 0,
-    // Using maximum possible z-index so that this element will always be on top
-    // https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index
-    // Did not use `layers` in `@atlaskit/theme` because:
-    // 1. This element is not a 'layer' in the conventional sense, as this element
-    //    is only created for a single frame for the browser to take a photo of it,
-    //    and then it is destroyed
-    // 2. Did not want to add a dependency onto `@atlaskit/theme`
-    // 3. Want to always be on top of product UI which might have higher z-index's
-    zIndex: maxZIndex,
     // Avoiding any additional events caused by the new element (being super safe)
     pointerEvents: 'none'
   });
   document.body.append(container);
+
+  // `.showPopover()` must be called after the element is in the DOM.
+  if (supportsPopover()) {
+    container.showPopover();
+  }
   const unmount = render({
     container
   });
@@ -102,6 +121,10 @@ export function setCustomNativeDragPreview({
      * Adding a parent element of the `container` with a background color (eg "white")
      * → Wrecks the opacity of the drag preview element
      */
+    /**
+     * Update: this bug fix is no longer needed in `Safari@26.4` (and maybe earlier)
+     * We can remove it in a future release
+     */
     if (isSafari()) {
       const rect = container.getBoundingClientRect();
 
@@ -114,6 +137,8 @@ export function setCustomNativeDragPreview({
     nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   });
   function cleanup() {
+    // No need to call `.hidePopover()`.
+    // Removing the element from the DOM dismisses the popover
     unbindMonitor();
     unmount === null || unmount === void 0 ? void 0 : unmount();
     document.body.removeChild(container);

package/dist/es2019/util/popover-reset-styles.js

@@ -0,0 +1,23 @@
+/**
+ * Resets user agent styles for `[popover]` elements.
+ *
+ * Browsers apply these defaults to popovers (per the WHATWG HTML spec rendering section):
+ * - `inset: 0` + `margin: auto` → centers the popover in the viewport
+ * - `border: solid` → visible border
+ * - `padding: 0.25em` → internal spacing
+ * - `overflow: auto` → scrollbars when content overflows
+ * - `color: CanvasText` + `background-color: Canvas` → system theme colors
+ *
+ * This object neutralizes those defaults so the popover behaves like a plain
+ * positioned element. `width` and `height` (UA default: `fit-content`) are not
+ * reset here because consumers set their own dimensions.
+ */
+export const popoverResetUserAgentStyles = {
+  inset: 'unset',
+  border: 'none',
+  padding: 0,
+  margin: 0,
+  overflow: 'visible',
+  color: 'inherit',
+  background: 'transparent'
+};

package/dist/es2019/util/supports-popover.js

@@ -0,0 +1,16 @@
+import { once } from '../public-utils/once';
+
+// Using `once` as the value won't change in a browser
+
+/**
+ * Returns `true` if the browser supports the Popover API (top-layer).
+ *
+ * When supported, elements with `popover="manual"` can be promoted to the
+ * browser's top layer via `element.showPopover()`, which is more reliable
+ * than `z-index` for ensuring an element renders above everything else.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ */
+export const supportsPopover = once(function supportsPopover() {
+  return typeof HTMLElement !== 'undefined' && typeof HTMLElement.prototype.showPopover === 'function';
+});

package/dist/esm/honey-pot-fix/make-honey-pot-fix.js

@@ -3,6 +3,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { bind, bindAll } from 'bind-event-listener';
 import { maxZIndex } from '../util/max-z-index';
+import { popoverResetUserAgentStyles } from '../util/popover-reset-styles';
+import { supportsPopover } from '../util/supports-popover';
 import { honeyPotDataAttribute } from './honey-pot-data-attribute';
 var honeyPotSize = 2;
 var halfHoneyPotSize = honeyPotSize / 2;
@@ -129,33 +131,48 @@ function mountHoneyPot(_ref4) {
   var element = document.createElement('div');
   element.setAttribute(honeyPotDataAttribute, 'true');
 
+  // Using popover="manual" to place the element in the browser's top layer.
+  // This ensures the honey pot is visually on top of everything else,
+  // including elements using z-index and other stacking contexts.
+  // "manual" means no light dismiss — we manage the lifecycle ourselves.
+  // Falls back to position:fixed + maxZIndex when the popover API is not available.
+  if (supportsPopover()) {
+    element.setAttribute('popover', 'manual');
+  }
+
   // can shift during the drag thanks to Firefox
   var clientRect = getHoneyPotRectFor({
     client: initial
   });
   Object.assign(element.style, _objectSpread(_objectSpread({
+    position: 'fixed'
+  }, supportsPopover() ?
+  // needs to come first as it has 'inset: unset' which
+  // needs to be overridden by our top / left values
+  popoverResetUserAgentStyles : {
+    // Fallback: using maximum possible z-index so that this element
+    // will always be on top of other positioned content.
+    zIndex: maxZIndex
+  }), {}, {
     // Setting a background color explicitly to avoid any inherited styles.
     // Looks like this could be `opacity: 0`, but worried that _might_
     // cause the element to be ignored on some platforms.
     // When debugging, set backgroundColor to something like "red".
     backgroundColor: 'transparent',
-    position: 'fixed',
     // Being explicit to avoid inheriting styles
     padding: 0,
     margin: 0,
-    boxSizing: 'border-box'
-  }, getRectStyles({
-    clientRect: clientRect
-  })), {}, {
+    boxSizing: 'border-box',
     // We want this element to absorb pointer events,
     // it's kind of the whole point 😉
-    pointerEvents: 'auto',
-    // Want to make sure the honey pot is top of everything else.
-    // Don't need to worry about native drag previews, as they will
-    // have been rendered (and removed) before the honey pot is rendered
-    zIndex: maxZIndex
-  }));
+    pointerEvents: 'auto'
+  }, getRectStyles({
+    clientRect: clientRect
+  })));
   document.body.appendChild(element);
+  if (supportsPopover()) {
+    element.showPopover();
+  }
 
   /**
    *  🦊 In firefox we can get `"pointermove"` events after the drag

package/dist/esm/public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.js

@@ -1,6 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { monitorForElements } from '../../../adapter/element-adapter';
 import { isSafari } from '../../../util/is-safari';
 import { maxZIndex } from '../../../util/max-z-index';
+import { popoverResetUserAgentStyles } from '../../../util/popover-reset-styles';
+import { supportsPopover } from '../../../util/supports-popover';
 
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
@@ -37,12 +42,33 @@ export function setCustomNativeDragPreview(_ref) {
     _ref$getOffset = _ref.getOffset,
     getOffset = _ref$getOffset === void 0 ? defaultOffset : _ref$getOffset;
   var container = document.createElement('div');
-  Object.assign(container.style, {
+
+  // Using popover="manual" to place the element in the browser's top layer.
+  // This ensures the drag preview container is visually on top of everything else,
+  // including elements using z-index and other stacking contexts.
+  // "manual" means no light dismiss — we manage the lifecycle ourselves.
+  // This element is only created for a single frame for the browser to take a
+  // photo of it, and then it is destroyed.
+  // Falls back to position:fixed + maxZIndex when the popover API is not available.
+  // Note: the popover attribute must be set before the element is in the DOM.
+  // `.showPopover()` is called further below after the element is appended to the body.
+  if (supportsPopover()) {
+    container.setAttribute('popover', 'manual');
+  }
+  Object.assign(container.style, _objectSpread(_objectSpread({
     // Ensuring we don't cause reflow when adding the element to the page
     // Using `position:fixed` rather than `position:absolute` so we are
     // positioned on the current viewport.
     // `position:fixed` also creates a new stacking context, so we don't need to do that here
-    position: 'fixed',
+    position: 'fixed'
+  }, supportsPopover() ?
+  // needs to come first as it has 'inset: unset' which
+  // needs to be overridden by our top / left values
+  popoverResetUserAgentStyles : {
+    // Fallback: using maximum possible z-index so that this element
+    // will always be on top of other positioned content.
+    zIndex: maxZIndex
+  }), {}, {
     // According to `mdn`, the element can be offscreen:
     // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage#imgelement
     //
@@ -52,19 +78,15 @@ export function setCustomNativeDragPreview(_ref) {
     // If the element is _completely_ offscreen, Safari@17.1 will cancel the drag
     top: 0,
     left: 0,
-    // Using maximum possible z-index so that this element will always be on top
-    // https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index
-    // Did not use `layers` in `@atlaskit/theme` because:
-    // 1. This element is not a 'layer' in the conventional sense, as this element
-    //    is only created for a single frame for the browser to take a photo of it,
-    //    and then it is destroyed
-    // 2. Did not want to add a dependency onto `@atlaskit/theme`
-    // 3. Want to always be on top of product UI which might have higher z-index's
-    zIndex: maxZIndex,
     // Avoiding any additional events caused by the new element (being super safe)
     pointerEvents: 'none'
-  });
+  }));
   document.body.append(container);
+
+  // `.showPopover()` must be called after the element is in the DOM.
+  if (supportsPopover()) {
+    container.showPopover();
+  }
   var unmount = render({
     container: container
   });
@@ -102,6 +124,10 @@ export function setCustomNativeDragPreview(_ref) {
      * Adding a parent element of the `container` with a background color (eg "white")
      * → Wrecks the opacity of the drag preview element
      */
+    /**
+     * Update: this bug fix is no longer needed in `Safari@26.4` (and maybe earlier)
+     * We can remove it in a future release
+     */
     if (isSafari()) {
       var rect = container.getBoundingClientRect();
 
@@ -114,6 +140,8 @@ export function setCustomNativeDragPreview(_ref) {
     nativeSetDragImage === null || nativeSetDragImage === void 0 || nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   });
   function cleanup() {
+    // No need to call `.hidePopover()`.
+    // Removing the element from the DOM dismisses the popover
     unbindMonitor();
     unmount === null || unmount === void 0 || unmount();
     document.body.removeChild(container);

package/dist/esm/util/popover-reset-styles.js

@@ -0,0 +1,23 @@
+/**
+ * Resets user agent styles for `[popover]` elements.
+ *
+ * Browsers apply these defaults to popovers (per the WHATWG HTML spec rendering section):
+ * - `inset: 0` + `margin: auto` → centers the popover in the viewport
+ * - `border: solid` → visible border
+ * - `padding: 0.25em` → internal spacing
+ * - `overflow: auto` → scrollbars when content overflows
+ * - `color: CanvasText` + `background-color: Canvas` → system theme colors
+ *
+ * This object neutralizes those defaults so the popover behaves like a plain
+ * positioned element. `width` and `height` (UA default: `fit-content`) are not
+ * reset here because consumers set their own dimensions.
+ */
+export var popoverResetUserAgentStyles = {
+  inset: 'unset',
+  border: 'none',
+  padding: 0,
+  margin: 0,
+  overflow: 'visible',
+  color: 'inherit',
+  background: 'transparent'
+};

package/dist/esm/util/supports-popover.js

@@ -0,0 +1,16 @@
+import { once } from '../public-utils/once';
+
+// Using `once` as the value won't change in a browser
+
+/**
+ * Returns `true` if the browser supports the Popover API (top-layer).
+ *
+ * When supported, elements with `popover="manual"` can be promoted to the
+ * browser's top layer via `element.showPopover()`, which is more reliable
+ * than `z-index` for ensuring an element renders above everything else.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ */
+export var supportsPopover = once(function supportsPopover() {
+  return typeof HTMLElement !== 'undefined' && typeof HTMLElement.prototype.showPopover === 'function';
+});

package/dist/types/util/popover-reset-styles.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+/**
+ * Resets user agent styles for `[popover]` elements.
+ *
+ * Browsers apply these defaults to popovers (per the WHATWG HTML spec rendering section):
+ * - `inset: 0` + `margin: auto` → centers the popover in the viewport
+ * - `border: solid` → visible border
+ * - `padding: 0.25em` → internal spacing
+ * - `overflow: auto` → scrollbars when content overflows
+ * - `color: CanvasText` + `background-color: Canvas` → system theme colors
+ *
+ * This object neutralizes those defaults so the popover behaves like a plain
+ * positioned element. `width` and `height` (UA default: `fit-content`) are not
+ * reset here because consumers set their own dimensions.
+ */
+export declare const popoverResetUserAgentStyles: CSSProperties;

package/dist/types/util/supports-popover.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns `true` if the browser supports the Popover API (top-layer).
+ *
+ * When supported, elements with `popover="manual"` can be promoted to the
+ * browser's top layer via `element.showPopover()`, which is more reliable
+ * than `z-index` for ensuring an element renders above everything else.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ */
+export declare const supportsPopover: () => boolean;

package/dist/types-ts4.5/util/popover-reset-styles.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+/**
+ * Resets user agent styles for `[popover]` elements.
+ *
+ * Browsers apply these defaults to popovers (per the WHATWG HTML spec rendering section):
+ * - `inset: 0` + `margin: auto` → centers the popover in the viewport
+ * - `border: solid` → visible border
+ * - `padding: 0.25em` → internal spacing
+ * - `overflow: auto` → scrollbars when content overflows
+ * - `color: CanvasText` + `background-color: Canvas` → system theme colors
+ *
+ * This object neutralizes those defaults so the popover behaves like a plain
+ * positioned element. `width` and `height` (UA default: `fit-content`) are not
+ * reset here because consumers set their own dimensions.
+ */
+export declare const popoverResetUserAgentStyles: CSSProperties;

package/dist/types-ts4.5/util/supports-popover.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns `true` if the browser supports the Popover API (top-layer).
+ *
+ * When supported, elements with `popover="manual"` can be promoted to the
+ * browser's top layer via `element.showPopover()`, which is more reliable
+ * than `z-index` for ensuring an element renders above everything else.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ */
+export declare const supportsPopover: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/pragmatic-drag-and-drop",
-	"version": "1.7.10",
+	"version": "1.8.0",
 	"description": "The core package for Pragmatic drag and drop - enabling fast drag and drop for any experience on any tech stack",
 	"repository": "https://github.com/atlassian/pragmatic-drag-and-drop",
 	"author": "Atlassian Pty Ltd",
@@ -42,8 +42,8 @@
 	},
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
-		"@atlaskit/link": "^3.3.0",
-		"@atlassian/a11y-jest-testing": "^0.10.0",
+		"@atlaskit/link": "^3.4.0",
+		"@atlassian/a11y-jest-testing": "^0.11.0",
 		"@emotion/react": "^11.7.1",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^16.3.0",