@atlaskit/pragmatic-drag-and-drop 1.1.4 → 1.1.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/pragmatic-drag-and-drop
 
+## 1.1.6
+
+### Patch Changes
+
+- [#94759](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94759) [`140fc0d20c02`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/140fc0d20c02) - Fixing our Safari workaround in `setCustomNativeDragPreview()` for a [Safari drag preview bug](https://bugs.webkit.org/show_bug.cgi?id=266025) so that it works correctly for `react@18+` usage.
+
+## 1.1.5
+
+### Patch Changes
+
+- [#94316](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94316) [`35fd5ed8e1d7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35fd5ed8e1d7) - Upgrading internal dependency `bind-event-listener` to `@^3.0.0`
+
 ## 1.1.4
 
 ### Patch Changes

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

@@ -81,6 +81,7 @@ function setCustomNativeDragPreview(_ref) {
    * 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.
+   * Bug: https://bugs.webkit.org/show_bug.cgi?id=266025
    *
    * **Fix**
    * We push the drag preview so it is _almost_ completely offscreen so that
@@ -98,8 +99,23 @@ function setCustomNativeDragPreview(_ref) {
    * → 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");
+    /**
+     *  For some frameworks (eg `react@18+` with `ReactDOM.createRoot().render()`) the rendering
+     *  inside the `container` does not occur until after a microtask.
+     *
+     *  Notes:
+     *    - This will run before the browser takes it's picture of the element
+     *    - This will run before the animation frame that removes `container`.
+     **/
+    queueMicrotask(function () {
+      var rect = container.getBoundingClientRect();
+
+      // We cannot apply this fix if nothing has been rendered into the `container`
+      if (rect.width === 0) {
+        return;
+      }
+      container.style.left = "-".concat(rect.width - 0.0001, "px");
+    });
   }
   nativeSetDragImage === null || nativeSetDragImage === void 0 || nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   function cleanup() {

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

@@ -76,6 +76,7 @@ export function setCustomNativeDragPreview({
    * 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.
+   * Bug: https://bugs.webkit.org/show_bug.cgi?id=266025
    *
    * **Fix**
    * We push the drag preview so it is _almost_ completely offscreen so that
@@ -93,8 +94,23 @@ export function setCustomNativeDragPreview({
    * → Wrecks the opacity of the drag preview element
    */
   if (isSafari()) {
-    const rect = container.getBoundingClientRect();
-    container.style.left = `-${rect.width - 0.0001}px`;
+    /**
+     *  For some frameworks (eg `react@18+` with `ReactDOM.createRoot().render()`) the rendering
+     *  inside the `container` does not occur until after a microtask.
+     *
+     *  Notes:
+     *    - This will run before the browser takes it's picture of the element
+     *    - This will run before the animation frame that removes `container`.
+     **/
+    queueMicrotask(() => {
+      const rect = container.getBoundingClientRect();
+
+      // We cannot apply this fix if nothing has been rendered into the `container`
+      if (rect.width === 0) {
+        return;
+      }
+      container.style.left = `-${rect.width - 0.0001}px`;
+    });
   }
   nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   function cleanup() {

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

@@ -76,6 +76,7 @@ export function setCustomNativeDragPreview(_ref) {
    * 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.
+   * Bug: https://bugs.webkit.org/show_bug.cgi?id=266025
    *
    * **Fix**
    * We push the drag preview so it is _almost_ completely offscreen so that
@@ -93,8 +94,23 @@ export function setCustomNativeDragPreview(_ref) {
    * → Wrecks the opacity of the drag preview element
    */
   if (isSafari()) {
-    var rect = container.getBoundingClientRect();
-    container.style.left = "-".concat(rect.width - 0.0001, "px");
+    /**
+     *  For some frameworks (eg `react@18+` with `ReactDOM.createRoot().render()`) the rendering
+     *  inside the `container` does not occur until after a microtask.
+     *
+     *  Notes:
+     *    - This will run before the browser takes it's picture of the element
+     *    - This will run before the animation frame that removes `container`.
+     **/
+    queueMicrotask(function () {
+      var rect = container.getBoundingClientRect();
+
+      // We cannot apply this fix if nothing has been rendered into the `container`
+      if (rect.width === 0) {
+        return;
+      }
+      container.style.left = "-".concat(rect.width - 0.0001, "px");
+    });
   }
   nativeSetDragImage === null || nativeSetDragImage === void 0 || nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   function cleanup() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pragmatic-drag-and-drop",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "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",
@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "bind-event-listener": "^2.1.1",
+    "bind-event-listener": "^3.0.0",
     "raf-schd": "^4.0.3"
   },
   "devDependencies": {