@atlaskit/pragmatic-drag-and-drop 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/pragmatic-drag-and-drop
 
+## 0.25.0
+
+### Minor Changes
+
+- [#59458](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59458) [`7d6a69cfa61c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7d6a69cfa61c) - Adding workaround for Safari bug.
+
+  In Safari (and iOS) if the element used for generating a native drag preview has opacity applied, then the native drag preview can include elements underneath the drag preview element.
+
+  Pragmatic drag and drop now includes a workaround for this Safari bug.
+
 ## 0.24.0
 
 ### Minor Changes

package/dist/cjs/util/custom-native-drag-preview/set-custom-native-drag-preview.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setCustomNativeDragPreview = setCustomNativeDragPreview;
 var _elementAdapter = require("../../adapter/element-adapter");
+var _isSafari = require("../is-safari");
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
  */
@@ -46,6 +47,13 @@ function setCustomNativeDragPreview(_ref) {
     // positioned on the current viewport.
     // `position:fixed` also creates a new stacking context, so we don't need to do that here
     position: 'fixed',
+    // According to `mdn`, the element can be offscreen:
+    // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage#imgelement
+    //
+    // However, that  information does not appear in the specs:
+    // https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdragimage-dev
+    //
+    // 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
@@ -67,6 +75,32 @@ function setCustomNativeDragPreview(_ref) {
   var previewOffset = getOffset({
     container: container
   });
+
+  /**
+   * **Problem**
+   * On `Safari@17.1` if a drag preview element has some opacity,
+   * Safari will include elements behind the drag preview element
+   * in the drag preview.
+   *
+   * **Fix**
+   * We push the drag preview so it is _almost_ completely offscreen so that
+   * there won't be any elements behind the drag preview element.
+   * If the element is _completely_ offscreen, then the drag is cancelled by Safari.
+   *
+   * Using `-0.0001` so that any potential "see through" on the drag preview element
+   * is effectively invisible 👻
+   *
+   * **Unsuccessful alternatives**
+   * Setting a background color (eg "white") on the `container`
+   * → Wrecks the opacity of the drag preview element
+   *
+   * Adding a parent element of the `container` with a background color (eg "white")
+   * → Wrecks the opacity of the drag preview element
+   */
+  if ((0, _isSafari.isSafari)()) {
+    var rect = container.getBoundingClientRect();
+    container.style.left = "-".concat(rect.width - 0.0001, "px");
+  }
   nativeSetDragImage === null || nativeSetDragImage === void 0 || nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   function cleanup() {
     unbindMonitor();

package/dist/cjs/util/entering-and-leaving-the-window.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.isEnteringWindow = isEnteringWindow;
 exports.isLeavingWindow = isLeavingWindow;
 var _bindEventListener = require("bind-event-listener");
+var _isSafari = require("./is-safari");
 // *Usually* to detect if you are entering / leaving a window you can
 // use the `event.relatedTarget` property:
 
@@ -75,10 +76,7 @@ function isLeavingWindow(_ref2) {
   if (process.env.NODE_ENV === 'test') {
     return;
   }
-  var _navigator = navigator,
-    userAgent = _navigator.userAgent;
-  var isSafari = userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
-  if (!isSafari) {
+  if (!(0, _isSafari.isSafari)()) {
     return;
   }
   safariFix.isSafari = true;

package/dist/cjs/util/is-safari.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSafari = isSafari;
+// Once we know we are in Safari or not, we don't need to do the check again
+var cache = null;
+
+/**
+ * Returns `true` if a `Safari` browser.
+ * Returns `true` if the browser is running on iOS (they are all Safari).
+ * */
+function isSafari() {
+  if (typeof cache === 'boolean') {
+    return cache;
+  }
+  var _navigator = navigator,
+    userAgent = _navigator.userAgent;
+  cache = userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
+  return cache;
+}

package/dist/es2019/util/custom-native-drag-preview/set-custom-native-drag-preview.js

@@ -1,4 +1,5 @@
 import { monitorForElements } from '../../adapter/element-adapter';
+import { isSafari } from '../is-safari';
 
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
@@ -41,6 +42,13 @@ export function setCustomNativeDragPreview({
     // positioned on the current viewport.
     // `position:fixed` also creates a new stacking context, so we don't need to do that here
     position: 'fixed',
+    // According to `mdn`, the element can be offscreen:
+    // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage#imgelement
+    //
+    // However, that  information does not appear in the specs:
+    // https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdragimage-dev
+    //
+    // 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
@@ -62,6 +70,32 @@ export function setCustomNativeDragPreview({
   const previewOffset = getOffset({
     container
   });
+
+  /**
+   * **Problem**
+   * On `Safari@17.1` if a drag preview element has some opacity,
+   * Safari will include elements behind the drag preview element
+   * in the drag preview.
+   *
+   * **Fix**
+   * We push the drag preview so it is _almost_ completely offscreen so that
+   * there won't be any elements behind the drag preview element.
+   * If the element is _completely_ offscreen, then the drag is cancelled by Safari.
+   *
+   * Using `-0.0001` so that any potential "see through" on the drag preview element
+   * is effectively invisible 👻
+   *
+   * **Unsuccessful alternatives**
+   * Setting a background color (eg "white") on the `container`
+   * → Wrecks the opacity of the drag preview element
+   *
+   * Adding a parent element of the `container` with a background color (eg "white")
+   * → Wrecks the opacity of the drag preview element
+   */
+  if (isSafari()) {
+    const rect = container.getBoundingClientRect();
+    container.style.left = `-${rect.width - 0.0001}px`;
+  }
   nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   function cleanup() {
     unbindMonitor();

package/dist/es2019/util/entering-and-leaving-the-window.js

@@ -1,4 +1,5 @@
 import { bindAll } from 'bind-event-listener';
+import { isSafari } from './is-safari';
 
 // *Usually* to detect if you are entering / leaving a window you can
 // use the `event.relatedTarget` property:
@@ -71,11 +72,7 @@ export function isLeavingWindow({
   if (process.env.NODE_ENV === 'test') {
     return;
   }
-  const {
-    userAgent
-  } = navigator;
-  const isSafari = userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
-  if (!isSafari) {
+  if (!isSafari()) {
     return;
   }
   safariFix.isSafari = true;

package/dist/es2019/util/is-safari.js

@@ -0,0 +1,17 @@
+// Once we know we are in Safari or not, we don't need to do the check again
+let cache = null;
+
+/**
+ * Returns `true` if a `Safari` browser.
+ * Returns `true` if the browser is running on iOS (they are all Safari).
+ * */
+export function isSafari() {
+  if (typeof cache === 'boolean') {
+    return cache;
+  }
+  const {
+    userAgent
+  } = navigator;
+  cache = userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
+  return cache;
+}

package/dist/esm/util/custom-native-drag-preview/set-custom-native-drag-preview.js

@@ -1,4 +1,5 @@
 import { monitorForElements } from '../../adapter/element-adapter';
+import { isSafari } from '../is-safari';
 
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
@@ -41,6 +42,13 @@ export function setCustomNativeDragPreview(_ref) {
     // positioned on the current viewport.
     // `position:fixed` also creates a new stacking context, so we don't need to do that here
     position: 'fixed',
+    // According to `mdn`, the element can be offscreen:
+    // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage#imgelement
+    //
+    // However, that  information does not appear in the specs:
+    // https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdragimage-dev
+    //
+    // 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
@@ -62,6 +70,32 @@ export function setCustomNativeDragPreview(_ref) {
   var previewOffset = getOffset({
     container: container
   });
+
+  /**
+   * **Problem**
+   * On `Safari@17.1` if a drag preview element has some opacity,
+   * Safari will include elements behind the drag preview element
+   * in the drag preview.
+   *
+   * **Fix**
+   * We push the drag preview so it is _almost_ completely offscreen so that
+   * there won't be any elements behind the drag preview element.
+   * If the element is _completely_ offscreen, then the drag is cancelled by Safari.
+   *
+   * Using `-0.0001` so that any potential "see through" on the drag preview element
+   * is effectively invisible 👻
+   *
+   * **Unsuccessful alternatives**
+   * Setting a background color (eg "white") on the `container`
+   * → Wrecks the opacity of the drag preview element
+   *
+   * Adding a parent element of the `container` with a background color (eg "white")
+   * → Wrecks the opacity of the drag preview element
+   */
+  if (isSafari()) {
+    var rect = container.getBoundingClientRect();
+    container.style.left = "-".concat(rect.width - 0.0001, "px");
+  }
   nativeSetDragImage === null || nativeSetDragImage === void 0 || nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   function cleanup() {
     unbindMonitor();

package/dist/esm/util/entering-and-leaving-the-window.js

@@ -1,4 +1,5 @@
 import { bindAll } from 'bind-event-listener';
+import { isSafari } from './is-safari';
 
 // *Usually* to detect if you are entering / leaving a window you can
 // use the `event.relatedTarget` property:
@@ -69,10 +70,7 @@ export function isLeavingWindow(_ref2) {
   if (process.env.NODE_ENV === 'test') {
     return;
   }
-  var _navigator = navigator,
-    userAgent = _navigator.userAgent;
-  var isSafari = userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
-  if (!isSafari) {
+  if (!isSafari()) {
     return;
   }
   safariFix.isSafari = true;

package/dist/esm/util/is-safari.js

@@ -0,0 +1,16 @@
+// Once we know we are in Safari or not, we don't need to do the check again
+var cache = null;
+
+/**
+ * Returns `true` if a `Safari` browser.
+ * Returns `true` if the browser is running on iOS (they are all Safari).
+ * */
+export function isSafari() {
+  if (typeof cache === 'boolean') {
+    return cache;
+  }
+  var _navigator = navigator,
+    userAgent = _navigator.userAgent;
+  cache = userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
+  return cache;
+}

package/dist/types/util/is-safari.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns `true` if a `Safari` browser.
+ * Returns `true` if the browser is running on iOS (they are all Safari).
+ * */
+export declare function isSafari(): boolean;

package/dist/types-ts4.5/util/is-safari.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns `true` if a `Safari` browser.
+ * Returns `true` if the browser is running on iOS (they are all Safari).
+ * */
+export declare function isSafari(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pragmatic-drag-and-drop",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "The core Pragmatic drag and drop framework, enabling flexible and fast drag and drop for any experience on any tech stack",
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",

package/tmp/api-report-tmp.d.ts

@@ -1,13 +0,0 @@
-## API Report File for "@atlaskit/pragmatic-drag-and-drop"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-// @public (undocumented)
-const _default: {};
-export default _default;
-
-// (No @packageDocumentation comment for this package)
-
-```