@atlaskit/pragmatic-drag-and-drop 1.1.12 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/pragmatic-drag-and-drop
 
+## 1.2.0
+
+### Minor Changes
+
+- [#116572](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116572)
+  [`98c65e7ff719c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/98c65e7ff719c) -
+  🍯 Introducing "the honey pot fix" which is an improved workaround for a
+  [painful browser bug](https://issues.chromium.org/issues/41129937).
+
+  **Background**
+
+  The browser bug causes the browser to think the users pointer is continually depressed at the
+  point that the user started a drag. This could lead to incorrect events being triggered, and
+  incorrect styles being applied to elements that the user is not currently over during a drag.
+
+  **Outcomes**
+
+  - Elements will no longer receive `MouseEvent`s (eg `"mouseenter"` and `"mouseleave"`) during a
+    drag (which is a violation of the
+    [drag and drop specification](https://html.spec.whatwg.org/multipage/dnd.html#drag-and-drop-processing-model))
+  - Elements will no longer apply `:hover` or `:active` styles during a drag. Previously consumers
+    would need to disable these style rules during a drag to prevent these styles being applied.
+  - Dramatically improved post drop performance. Our prior solution could require a noticeable delay
+    due to a large style recalculation after a drop.
+
 ## 1.1.12
 
 ### Patch Changes

package/dist/cjs/adapter/element-adapter.js

@@ -8,6 +8,8 @@ exports.draggable = draggable;
 exports.monitorForElements = exports.dropTargetForElements = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _bindEventListener = require("bind-event-listener");
+var _getElementFromPointWithoutHoneyPot = require("../honey-pot-fix/get-element-from-point-without-honey-pot");
+var _makeHoneyPotFix = require("../honey-pot-fix/make-honey-pot-fix");
 var _makeAdapter = require("../make-adapter/make-adapter");
 var _combine = require("../public-utils/combine");
 var _addAttribute = require("../util/add-attribute");
@@ -23,6 +25,7 @@ function addToRegistry(args) {
     draggableRegistry.delete(args.element);
   };
 }
+var honeyPotFix = (0, _makeHoneyPotFix.makeHoneyPotFix)();
 var adapter = (0, _makeAdapter.makeAdapter)({
   typeKey: 'element',
   defaultDropEffect: 'move',
@@ -32,7 +35,7 @@ var adapter = (0, _makeAdapter.makeAdapter)({
      * `document` is the first `EventTarget` under `window`
      * https://twitter.com/alexandereardon/status/1604658588311465985
      */
-    return (0, _bindEventListener.bind)(document, {
+    return (0, _combine.combine)(honeyPotFix.bindEvents(), (0, _bindEventListener.bind)(document, {
       type: 'dragstart',
       listener: function listener(event) {
         var _entry$dragHandle, _entry$getInitialData, _entry$getInitialData2, _entry$dragHandle2, _entry$getInitialData3, _entry$getInitialData4;
@@ -95,7 +98,13 @@ var adapter = (0, _makeAdapter.makeAdapter)({
 
         // Check: is there a drag handle and is the user using it?
         if (entry.dragHandle) {
-          var over = document.elementFromPoint(input.clientX, input.clientY);
+          // technically don't need this util, but just being
+          // consistent with how we look up what is under the users
+          // cursor.
+          var over = (0, _getElementFromPointWithoutHoneyPot.getElementFromPointWithoutHoneypot)({
+            x: input.clientX,
+            y: input.clientY
+          });
 
           // if we are not dragging from the drag handle (or something inside the drag handle)
           // then we will cancel the active drag
@@ -185,7 +194,7 @@ var adapter = (0, _makeAdapter.makeAdapter)({
           dragType: dragType
         });
       }
-    });
+    }));
   },
   dispatchEventToSource: function dispatchEventToSource(_ref) {
     var _draggableRegistry$ge, _draggableRegistry$ge2;
@@ -202,7 +211,8 @@ var adapter = (0, _makeAdapter.makeAdapter)({
     // TS doesn't seem to like that one event can need `nativeSetDragImage`
     // @ts-expect-error
     payload);
-  }
+  },
+  onPostDispatch: honeyPotFix.getOnPostDispatch()
 });
 var dropTargetForElements = exports.dropTargetForElements = adapter.dropTarget;
 var monitorForElements = exports.monitorForElements = adapter.monitor;

package/dist/cjs/adapter/text-selection-adapter.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.dropTargetForTextSelection = dropTargetForTextSelection;
 exports.monitorForTextSelection = monitorForTextSelection;
 var _bindEventListener = require("bind-event-listener");
+var _makeHoneyPotFix = require("../honey-pot-fix/make-honey-pot-fix");
 var _makeAdapter = require("../make-adapter/make-adapter");
+var _combine = require("../public-utils/combine");
 var _isSafari = require("../util/is-safari");
 var _htmlMediaType = require("../util/media-types/html-media-type");
 var _textMediaType = require("../util/media-types/text-media-type");
@@ -56,6 +58,7 @@ function findTextNode(event) {
   });
   return text !== null && text !== void 0 ? text : null;
 }
+var honeyPotFix = (0, _makeHoneyPotFix.makeHoneyPotFix)();
 var adapter = (0, _makeAdapter.makeAdapter)({
   typeKey: 'text-selection',
   // for text selection, we will usually be making a copy of the text
@@ -64,7 +67,7 @@ var adapter = (0, _makeAdapter.makeAdapter)({
     // Binding to the `window` so that the element adapter has a
     // chance to get in first on the `document`.
     // We are giving preference to the element adapter.
-    return (0, _bindEventListener.bindAll)(window, [{
+    return (0, _combine.combine)(honeyPotFix.bindEvents(), (0, _bindEventListener.bind)(window, {
       type: 'dragstart',
       listener: function listener(event) {
         // If the "dragstart" event is cancelled, then a drag won't start
@@ -116,8 +119,9 @@ var adapter = (0, _makeAdapter.makeAdapter)({
           }
         });
       }
-    }]);
-  }
+    }));
+  },
+  onPostDispatch: honeyPotFix.getOnPostDispatch()
 });
 
 // The `onGenerateDragPreview` does not make sense to publish for text selection

package/dist/cjs/entry-point/private/get-element-from-point-without-honey-pot.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getElementFromPointWithoutHoneypot", {
+  enumerable: true,
+  get: function get() {
+    return _getElementFromPointWithoutHoneyPot.getElementFromPointWithoutHoneypot;
+  }
+});
+var _getElementFromPointWithoutHoneyPot = require("../../honey-pot-fix/get-element-from-point-without-honey-pot");

package/dist/cjs/honey-pot-fix/get-element-from-point-without-honey-pot.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getElementFromPointWithoutHoneypot = getElementFromPointWithoutHoneypot;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _isHoneyPotElement = require("./is-honey-pot-element");
+function getElementFromPointWithoutHoneypot(client) {
+  // eslint-disable-next-line no-restricted-syntax
+  var _document$elementsFro = document.elementsFromPoint(client.x, client.y),
+    _document$elementsFro2 = (0, _slicedToArray2.default)(_document$elementsFro, 2),
+    top = _document$elementsFro2[0],
+    second = _document$elementsFro2[1];
+  if (!top) {
+    return null;
+  }
+  if ((0, _isHoneyPotElement.isHoneyPotElement)(top)) {
+    return second !== null && second !== void 0 ? second : null;
+  }
+  return top;
+}

package/dist/cjs/honey-pot-fix/honey-pot-data-attribute.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.honeyPotDataAttribute = void 0;
+// pulling this into a separate file so adapter(s) that don't
+// need the honey pot can pay as little as possible for it.
+var honeyPotDataAttribute = exports.honeyPotDataAttribute = 'data-pdnd-honey-pot';

package/dist/cjs/honey-pot-fix/is-honey-pot-element.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isHoneyPotElement = isHoneyPotElement;
+var _honeyPotDataAttribute = require("./honey-pot-data-attribute");
+function isHoneyPotElement(target) {
+  return target instanceof Element && target.hasAttribute(_honeyPotDataAttribute.honeyPotDataAttribute);
+}

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

@@ -0,0 +1,315 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _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; }
+var honeyPotSize = 2;
+var halfHoneyPotSize = honeyPotSize / 2;
+
+/**
+ * `clientX` and `clientY` can be in sub pixels (eg `2.332`)
+ * However, browser hitbox testing is commonly do to the closest pixel.
+ *
+ * → https://issues.chromium.org/issues/40940531
+ *
+ * To be sure that the honey pot will be over the `client` position,
+ * we `.floor()` `clientX` and`clientY` and then make it `2px` in size.
+ **/
+function floorToClosestPixel(point) {
+  return {
+    x: Math.floor(point.x),
+    y: Math.floor(point.y)
+  };
+}
+
+/**
+ * We want to make sure the honey pot sits around the users position.
+ * This seemed to be the most resilient while testing.
+ */
+function pullBackByHalfHoneyPotSize(point) {
+  return {
+    x: point.x - halfHoneyPotSize,
+    y: point.y - halfHoneyPotSize
+  };
+}
+
+/**
+ * Prevent the honey pot from changing the window size.
+ * This is super unlikely to occur, but just being safe.
+ */
+function preventGoingBackwardsOffScreen(point) {
+  return {
+    x: Math.max(point.x, 0),
+    y: Math.max(point.y, 0)
+  };
+}
+
+/**
+ * Prevent the honey pot from changing the window size.
+ * This is super unlikely to occur, but just being safe.
+ */
+function preventGoingForwardsOffScreen(point) {
+  return {
+    x: Math.min(point.x, window.innerWidth - honeyPotSize),
+    y: Math.min(point.y, window.innerHeight - honeyPotSize)
+  };
+}
+
+/**
+ * Create a `2x2` `DOMRect` around the `client` position
+ */
+function getHoneyPotRectFor(_ref) {
+  var client = _ref.client;
+  var point = preventGoingForwardsOffScreen(preventGoingBackwardsOffScreen(pullBackByHalfHoneyPotSize(floorToClosestPixel(client))));
+
+  // When debugging, it is helpful to
+  // make this element a bit bigger
+  return DOMRect.fromRect({
+    x: point.x,
+    y: point.y,
+    width: honeyPotSize,
+    height: honeyPotSize
+  });
+}
+function getRectStyles(_ref2) {
+  var clientRect = _ref2.clientRect;
+  return {
+    left: "".concat(clientRect.left, "px"),
+    top: "".concat(clientRect.top, "px"),
+    width: "".concat(clientRect.width, "px"),
+    height: "".concat(clientRect.height, "px")
+  };
+}
+function isWithin(_ref3) {
+  var client = _ref3.client,
+    clientRect = _ref3.clientRect;
+  return (
+    // is within horizontal bounds
+    client.x >= clientRect.x && client.x <= clientRect.x + clientRect.width &&
+    // is within vertical bounds
+    client.y >= clientRect.y && client.y <= clientRect.y + clientRect.height
+  );
+}
+/**
+ * The honey pot fix is designed to get around a painful bug in all browsers.
+ *
+ * [Overview](https://www.youtube.com/watch?v=udE9qbFTeQg)
+ *
+ * **Background**
+ *
+ * When a drag starts, browsers incorrectly think that the users pointer is
+ * still depressed where the drag started. Any element that goes under this position
+ * will be entered into, causing `"mouseenter"` events and `":hover"` styles to be applied.
+ *
+ * _This is a violation of the spec_
+ *
+ * > "From the moment that the user agent is to initiate the drag-and-drop operation,
+ * > until the end 	of the drag-and-drop operation, device input events
+ * > (e.g. mouse and keyboard events) must be suppressed."
+ * >
+ * > - https://html.spec.whatwg.org/multipage/dnd.html#drag-and-drop-processing-model
+ *
+ * _Some impacts_
+ *
+ * - `":hover"` styles being applied where they shouldn't (looks messy)
+ * - components such as tooltips responding to `"mouseenter"` can show during a drag,
+ *   and on an element the user isn't even over
+ *
+ * Bug: https://issues.chromium.org/issues/41129937
+ *
+ * **Honey pot fix**
+ *
+ * 1. Create an element where the browser thinks the depressed pointer is
+ *    to absorb the incorrect pointer events
+ * 2. Remove that element when it is no longer needed
+ */
+function mountHoneyPot(_ref4) {
+  var initial = _ref4.initial;
+  var element = document.createElement('div');
+  element.setAttribute(_honeyPotDataAttribute.honeyPotDataAttribute, 'true');
+
+  // can shift during the drag thanks to Firefox
+  var clientRect = getHoneyPotRectFor({
+    client: initial
+  });
+  Object.assign(element.style, _objectSpread(_objectSpread({
+    // 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
+  })), {}, {
+    // 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
+  }));
+  document.body.appendChild(element);
+
+  /**
+   *  🦊 In firefox we can get `"pointermove"` events after the drag
+   * has started, which is a spec violation.
+   * The final `"pointermove"` will reveal where the "depressed" position
+   * is for our honey pot fix.
+   */
+  var unbindPointerMove = (0, _bindEventListener.bind)(window, {
+    type: 'pointermove',
+    listener: function listener(event) {
+      var client = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      clientRect = getHoneyPotRectFor({
+        client: client
+      });
+      Object.assign(element.style, getRectStyles({
+        clientRect: clientRect
+      }));
+    },
+    // using capture so we are less likely to be impacted by event stopping
+    options: {
+      capture: true
+    }
+  });
+  return function finish(_ref5) {
+    var current = _ref5.current;
+    // Don't need this any more
+    unbindPointerMove();
+
+    // If the user is hover the honey pot, we remove it
+    // so that the user can continue to interact with the page normally.
+    if (isWithin({
+      client: current,
+      clientRect: clientRect
+    })) {
+      element.remove();
+      return;
+    }
+    function cleanup() {
+      unbindPostDragEvents();
+      element.remove();
+    }
+    var unbindPostDragEvents = (0, _bindEventListener.bindAll)(window, [{
+      type: 'pointerdown',
+      listener: cleanup
+    }, {
+      type: 'pointermove',
+      listener: cleanup
+    }, {
+      type: 'focusin',
+      listener: cleanup
+    }, {
+      type: 'focusout',
+      listener: cleanup
+    },
+    // a 'pointerdown' should happen before 'dragstart', but just being super safe
+    {
+      type: 'dragstart',
+      listener: cleanup
+    },
+    // if the user has dragged something out of the window
+    // and then is dragging something back into the window
+    // the first events we will see are "dragenter" (and then "dragover").
+    // So if we see any of these we need to clear the post drag fix.
+    {
+      type: 'dragenter',
+      listener: cleanup
+    }, {
+      type: 'dragover',
+      listener: cleanup
+    }
+
+    // Not adding a "wheel" event listener, as "wheel" by itself does not
+    // resolve the bug.
+    ], {
+      // Using `capture` so less likely to be impacted by other code stopping events
+      capture: true
+    });
+  };
+}
+function makeHoneyPotFix() {
+  var latestPointerMove = null;
+  function bindEvents() {
+    // For sanity, only collecting this value from when events are first bound.
+    // This prevents the case where a super old "pointermove" could be used
+    // from a prior interaction.
+    latestPointerMove = null;
+    return (0, _bindEventListener.bind)(window, {
+      type: 'pointermove',
+      listener: function listener(event) {
+        latestPointerMove = {
+          x: event.clientX,
+          y: event.clientY
+        };
+      },
+      // listening for pointer move in capture phase
+      // so we are less likely to be impacted by events being stopped.
+      options: {
+        capture: true
+      }
+    });
+  }
+  function getOnPostDispatch() {
+    var finish = null;
+    return function onPostEvent(_ref6) {
+      var eventName = _ref6.eventName,
+        payload = _ref6.payload;
+      // We are adding the honey pot `onDragStart` so we don't
+      // impact the creation of the native drag preview.
+      if (eventName === 'onDragStart') {
+        var _latestPointerMove;
+        var input = payload.location.initial.input;
+
+        // Sometimes there will be no latest "pointermove" (eg iOS).
+        // In which case, we use the start position of the drag.
+        var initial = (_latestPointerMove = latestPointerMove) !== null && _latestPointerMove !== void 0 ? _latestPointerMove : {
+          x: input.clientX,
+          y: input.clientY
+        };
+
+        // Don't need to defensively call `finish()` as `onDrop` from
+        // one interaction is guaranteed to be called before `onDragStart`
+        // of the next.
+        finish = mountHoneyPot({
+          initial: initial
+        });
+      }
+      if (eventName === 'onDrop') {
+        var _finish;
+        var _input = payload.location.current.input;
+        (_finish = finish) === null || _finish === void 0 || _finish({
+          current: {
+            x: _input.clientX,
+            y: _input.clientY
+          }
+        });
+        finish = null;
+        // this interaction is finished, we want to use
+        // the latest "pointermove" for each interaction
+        latestPointerMove = null;
+      }
+    };
+  }
+  return {
+    bindEvents: bindEvents,
+    getOnPostDispatch: getOnPostDispatch
+  };
+}

package/dist/cjs/ledger/lifecycle-manager.js

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.lifecycle = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _bindEventListener = require("bind-event-listener");
+var _getElementFromPointWithoutHoneyPot = require("../honey-pot-fix/get-element-from-point-without-honey-pot");
+var _isHoneyPotElement = require("../honey-pot-fix/is-honey-pot-element");
 var _isLeavingWindow = require("../util/changing-window/is-leaving-window");
 var _detectBrokenDrag = require("../util/detect-broken-drag");
-var _fixPostDragPointerBug = require("../util/fix-post-drag-pointer-bug");
 var _getInput = require("../util/get-input");
 var _dispatchConsumerEvent = require("./dispatch-consumer-event");
 var globalState = {
@@ -69,7 +70,7 @@ function start(_ref2) {
     dispatchEvent: dispatchEvent,
     initial: initial
   });
-  function updateDropTargets(next) {
+  function updateState(next) {
     // only looking at whether hierarchy has changed to determine whether something as 'changed'
     var hasChanged = hasHierarchyChanged({
       current: state.current.dropTargets,
@@ -88,8 +89,15 @@ function start(_ref2) {
   }
   function onUpdateEvent(event) {
     var input = (0, _getInput.getInput)(event);
+
+    // If we are over the honey pot, we need to get the element
+    // that the user would have been over if not for the honey pot
+    var target = (0, _isHoneyPotElement.isHoneyPotElement)(event.target) ? (0, _getElementFromPointWithoutHoneyPot.getElementFromPointWithoutHoneypot)({
+      x: input.clientX,
+      y: input.clientY
+    }) : event.target;
     var nextDropTargets = getDropTargetsOver({
-      target: event.target,
+      target: target,
       input: input,
       source: dragType.payload,
       current: state.current.dropTargets
@@ -102,7 +110,7 @@ function start(_ref2) {
         current: nextDropTargets
       });
     }
-    updateDropTargets({
+    updateState({
       dropTargets: nextDropTargets,
       input: input
     });
@@ -117,7 +125,7 @@ function start(_ref2) {
     // will have already cleared the dropTargets to `[]` (as that particular "dragleave" has a `relatedTarget` of `null`)
 
     if (state.current.dropTargets.length) {
-      updateDropTargets({
+      updateState({
         dropTargets: [],
         input: state.current.input
       });
@@ -210,7 +218,7 @@ function start(_ref2) {
        * - [Bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1429937)
        **/
 
-      updateDropTargets({
+      updateState({
         input: state.current.input,
         dropTargets: []
       });
@@ -222,6 +230,14 @@ function start(_ref2) {
     // A "drop" can only happen if the browser allowed the drop
     type: 'drop',
     listener: function listener(event) {
+      // Capture the final input.
+      // We are capturing the final `input` for the
+      // most accurate honey pot experience
+      state.current = {
+        dropTargets: state.current.dropTargets,
+        input: (0, _getInput.getInput)(event)
+      };
+
       /** If there are no drop targets, then we will get
        * a "drop" event if:
        * - `preventUnhandled()` is being used
@@ -234,7 +250,6 @@ function start(_ref2) {
 
       if (!state.current.dropTargets.length) {
         cancel();
-        // not applying our post drop fix as we are not managing the drop
         return;
       }
       event.preventDefault();
@@ -251,14 +266,6 @@ function start(_ref2) {
         updatedSourcePayload: dragType.type === 'external' ? dragType.getDropPayload(event) : null
       });
       finish();
-
-      // Applying this fix after `dispatch.drop` so that frameworks have the opportunity
-      // to update UI in response to a "onDrop".
-      if (dragType.startedFrom === 'internal') {
-        (0, _fixPostDragPointerBug.fixPostDragPointerBug)({
-          current: state.current
-        });
-      }
     }
   }, {
     // "dragend" fires when on the drag source (eg a draggable element)
@@ -269,17 +276,18 @@ function start(_ref2) {
 
     // This "dragend" listener will not fire if there was a successful drop
     // as we will have already removed the event listener
+
     type: 'dragend',
     listener: function listener(event) {
+      // In firefox, the position of the "dragend" event can
+      // be a bit different to the last "dragover" event.
+      // Updating the input so we can get the best possible
+      // information for the honey pot.
+      state.current = {
+        dropTargets: state.current.dropTargets,
+        input: (0, _getInput.getInput)(event)
+      };
       cancel();
-
-      // Applying this fix after `dispatch.drop` so that frameworks have the opportunity
-      // to update UI in response to a "onDrop".
-      if (dragType.startedFrom === 'internal') {
-        (0, _fixPostDragPointerBug.fixPostDragPointerBug)({
-          current: state.current
-        });
-      }
     }
   }].concat((0, _toConsumableArray2.default)((0, _detectBrokenDrag.getBindingsForBrokenDrags)({
     onDragEnd: cancel

package/dist/cjs/make-adapter/make-adapter.js

@@ -12,6 +12,7 @@ function makeAdapter(_ref) {
   var typeKey = _ref.typeKey,
     mount = _ref.mount,
     dispatchEventToSource = _ref.dispatchEventToSource,
+    onPostDispatch = _ref.onPostDispatch,
     defaultDropEffect = _ref.defaultDropEffect;
   var monitorAPI = (0, _makeMonitor.makeMonitor)();
   var dropTargetAPI = (0, _makeDropTarget.makeDropTarget)({
@@ -27,6 +28,9 @@ function makeAdapter(_ref) {
 
     // 3. forward event to monitors
     monitorAPI.dispatchEvent(args);
+
+    // 4. post consumer dispatch (used for honey pot fix)
+    onPostDispatch === null || onPostDispatch === void 0 || onPostDispatch(args);
   }
   function start(_ref2) {
     var event = _ref2.event,

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.setCustomNativeDragPreview = setCustomNativeDragPreview;
 var _elementAdapter = require("../../../adapter/element-adapter");
 var _isSafari = require("../../../util/is-safari");
+var _maxZIndex = require("../../../util/max-z-index");
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
  */
@@ -64,7 +65,7 @@ function setCustomNativeDragPreview(_ref) {
     //    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: 2147483647,
+    zIndex: _maxZIndex.maxZIndex,
     // Avoiding any additional events caused by the new element (being super safe)
     pointerEvents: 'none'
   });

package/dist/cjs/util/max-z-index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.maxZIndex = void 0;
+// Maximum possible z-index
+// https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index
+var maxZIndex = exports.maxZIndex = 2147483647;