@atlaskit/pragmatic-drag-and-drop 0.18.2 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # @atlaskit/pragmatic-drag-and-drop
 
+## 0.20.0
+
+### Minor Changes
+
+- [`554a6d8cc34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/554a6d8cc34) - ### Stickiness algorithm improvement
+
+  We have made some improvements to the drop target stickiness algorithm to allow sticky drop targets that are no longer dragged over to cancel their stickiness.
+
+  Stickiness is no longer maintained when a sticky drop target states it cannot be dropped on
+
+  > Scenario: `[A(sticky)]` → `[]` + `A:canDrop()` returns `false`
+  > Result: `[]`
+
+  Stickiness is no longer maintained when a sticky drop start states it is no longer sticky
+
+  > Scenario: `[A(sticky)]` → `[]` + `A:getIsSticky()` returns `false`
+  > Result: `[]`
+
+  Stickiness is no longer maintained when a sticky drop start is unmounted
+
+  > Scenario: `[A(sticky)]` → `[]` + `A` is unmounted
+  > Result: `[]`
+
+  To help facilitate this change:
+
+  - `getIsSticky()` is now only called when an _drop target_ is a potential candidate for stickiness (previously it was called repeatedly)
+  - `getIsSticky()` and `canDrop()` are called on _drop targets_ that are no longer being dragged over, but are candidates for stickiness
+
+  ### Change to `DropTargetRecord` `type`
+
+  Previously, the `DropTargetRecord` type had a property called `sticky` which would represent whether the _drop target_ was registering itself as sticky via `getIsSticky()`. Knowing `sticky` is not overly helpful given that we now regularly recompute stickiness and a _drop target_ can change disable stickiness after it is applied.
+
+  What is helpful, is knowing whether a _drop target_ is active _because_ of stickiness. So we have removed `sticky` and added `isActiveDueToStickiness` to the `DropTargetRecord` type.
+
+  ```diff
+  type DropTargetRecord = {
+    element: Element;
+    data: Record<string | symbol, unknown>;
+    dropEffect: DataTransfer['dropEffect'];
+  -  sticky: boolean;
+  +  isActiveDueToStickiness: boolean;
+  };
+  ```
+
+## 0.19.0
+
+### Minor Changes
+
+- [`8c301a251e4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8c301a251e4) - We have changed the API of `setCustomNativeDragPreview()` to allow increased control and slightly lower bundles as well.
+
+  We have removed the `placement` argument, and replaced it with `getOffset()`.
+
+  ```diff
+  - placement: { type: 'center' } | { type: 'offset-from-pointer'; x: CSSValue; y: CSSValue };
+  + getOffset: (args: { container: HTMLElement }) => {x: number, y: number}
+  ```
+
+  `getOffset()` allows unlimited control over how to place the custom native drag preview relative to the users pointer. Please see our updated documentation for detailed information about the new `getOffset()` API. Our new `getOffset()` approach means that we also no longer need to bake in all `placement` options into the bundle - consumers now only pay for what they use!
+
+  `placement: { type: 'offset-from-pointer' }` has been replaced by `offsetFromPointer()`
+
+  ```diff
+  import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+  + import { offsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer;
+
+  draggable({
+    element: myElement,
+    onGenerateDragPreview: ({ nativeSetDragImage }) => {
+      setCustomNativeDragPreview({
+  -      placement: { type: 'offset-from-pointer', x: '16px', y: '8px' }
+  +      getOffset: offsetFromPointer({x: '16px', y: '8px'}),
+        render: function render({ container }) {
+          ReactDOM.render(<Preview item={item} />, container);
+          return function cleanup() {
+            ReactDOM.unmountComponentAtNode(container);
+          };
+        },
+        nativeSetDragImage,
+      });
+    },
+  });
+  ```
+
+  `placement: { type: 'center' }` has been replaced by `centerUnderPointer()`
+
+  ```diff
+  import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+  + import { centerUnderPointer } from '@atlaskit/pragmatic-drag-and-drop/util/center-under-pointer-pointer;
+
+  draggable({
+    element: myElement,
+    onGenerateDragPreview: ({ nativeSetDragImage }) => {
+      setCustomNativeDragPreview({
+  -      placement: { type: 'center' }
+  +      getOffset: centerUnderPointer,
+        render: function render({ container }) {
+          ReactDOM.render(<Preview item={item} />, container);
+          return function cleanup() {
+            ReactDOM.unmountComponentAtNode(container);
+          };
+        },
+        nativeSetDragImage,
+      });
+    },
+  });
+  ```
+
 ## 0.18.2
 
 ### Patch Changes

package/constellation/index/about.mdx

@@ -4,8 +4,6 @@ order: 0
 
 import SectionMessage from '@atlaskit/section-message';
 
-<!-- I'd like to change this section to be called Drag-and-drop or something, not Core, but still mulling it over. -->
-
 This package contains the essential pieces of the system, and is not tied to any JavaScript framework.
 
 - The [element adapter](/components/pragmatic-drag-and-drop/adapter/element-adapter) powers drag operations of elements.
@@ -176,10 +174,6 @@ You can use `setCustomNativeDragPreview` to mount a new element to the page to b
 
 `setCustomNativeDragPreview` has been designed to work with any view abstraction
 
-```ts
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
-```
-
 #### Usage example: `react` portals
 
 This technique requires your component to be re-rendered, but maintains the current `react` `context`
@@ -234,7 +228,6 @@ function Item() {
 
 This technique requires no re-rendering of your component, but does not maintain the current `react` `context`
 
-
 ```tsx
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 
@@ -254,12 +247,33 @@ draggable({
 });
 ```
 
-#### Placement
+#### Offset
+
+You can control where the custom native drag preview is placed by using the `getOffset()` argument.
+
+You can return an `{x: number, y: number}` object from `getOffset()` which will control where the native drag preview is rendered relative to the users pointer. `{x: 0, y: 0}` represents having the users pointer user the top left corner of the drag preview.
+
+For clarity:
+
+> `const rect = container.getBoundingClientRect()`
+
+- `{x: 0, y: 0}` → top left of the `container` will be under the users pointer **(default)**
+- `{x: rect.width, y: 0}` top right of the `container` will be under the users pointer
+- `{x: rect.width, y: rect.height}` bottom right of the `container` will be under the users pointer
+- `{x: 0, y: rect.height}` bottom left of the `container` will be under the users pointer
+
+
+```ts
+type GetOffsetFn = (args: { container: HTMLElement }) => {x: number, y: number};
+```
+
+Notes:
 
-You can control where the custom native drag preview is placed by using the `placement` argument:
+- `GetOffsetFn` needs to return `x` and `y` as numbers as that is what the platform requires
+- You cannot use negative values (not supported by browsers). If you want to push the drag preview away from the users pointer, use `offsetFromPointer` (see below)
+- The max offset value for an axis is the `border-box`. Values greater than the `border-box` get trimmed to be the `border-box` value
 
-- `type: 'center'`: Place the center of the drag preview user the users pointer
-- `type: 'offset-from-pointer'`: Shift the drag preview away from the users pointer
+`{x: rect.width + 1, y: rect.height + 1}` effectively becomes `{x: rect.width, y: rect.height}`.
 
 ```tsx
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
@@ -268,7 +282,11 @@ draggable({
   element: myElement,
   onGenerateDragPreview: ({ nativeSetDragImage }) => {
     setCustomNativeDragPreview({
-      placement: { type: 'offset-from-pointer', x: '16px', y: '8px' },
+      // place the (near) top middle of the `container` under the users pointer
+      getOffset: () => {
+        const rect = container.getBoundingClientRect();
+        return { x: rect.width / 2, y: 16 };
+      },
       render: function render({ container }) {
         ReactDOM.render(<Preview item={item} />, container);
         return function cleanup() {
@@ -281,6 +299,51 @@ draggable({
 });
 ```
 
+We have `getOffset()` helpers for `setCustomnativeDragPreview()`:
+
+1. `centerUnderPointer`: centers the custom native drag preview under the users cursor
+
+```ts
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+import { centerUnderPointer } from '@atlaskit/pragmatic-drag-and-drop/util/center-under-pointer';
+
+draggable({
+  element: myElement,
+  onGenerateDragPreview: ({ nativeSetDragImage }) => {
+    setCustomNativeDragPreview({
+      getOffset: centerUnderPointer,
+      render: function render({ container }) {
+        /* ... */
+      },
+      nativeSetDragImage,
+    });
+  },
+});
+```
+
+2. `offsetFromPointer`: a cross browser mechanism to push the drag preview away from the users pointer
+
+```ts
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+import { offsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer';
+
+draggable({
+  element: myElement,
+  onGenerateDragPreview: ({ nativeSetDragImage }) => {
+    setCustomNativeDragPreview({
+      // `x` and `y` can be any CSS value
+      getOffset: offsetFromPointer({ x: '8px', y: 'calc(var(--grid) * 2)' }),
+      render: function render({ container }) {
+        /* ... */
+      },
+      nativeSetDragImage,
+    });
+  },
+});
+```
+
+Note: if you are using css variables inside of your `getOffset()` you need to be sure your css variables are available at the `<body>` element, as the `container` is temporarily mounted as a child of `<body>`
+
 ### Disable native drag preview
 
 In some situations, you might want to disable the native drag preview. The `disableNativeDragPreview` utility does this for all supported browsers and platforms.

package/dist/cjs/entry-point/util/center-under-pointer.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "centerUnderPointer", {
+  enumerable: true,
+  get: function get() {
+    return _centerUnderPointer.centerUnderPointer;
+  }
+});
+var _centerUnderPointer = require("../../util/custom-native-drag-preview/center-under-pointer");

package/dist/cjs/entry-point/util/offset-from-pointer.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "offsetFromPointer", {
+  enumerable: true,
+  get: function get() {
+    return _offsetFromPointer.offsetFromPointer;
+  }
+});
+var _offsetFromPointer = require("../../util/custom-native-drag-preview/offset-from-pointer");

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

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "setCustomNativeDragPreview", {
     return _setCustomNativeDragPreview.setCustomNativeDragPreview;
   }
 });
-var _setCustomNativeDragPreview = require("../../util/set-custom-native-drag-preview");
+var _setCustomNativeDragPreview = require("../../util/custom-native-drag-preview/set-custom-native-drag-preview");

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

@@ -47,7 +47,7 @@ function makeDropTarget(_ref) {
     }), addToRegistry(args));
   }
   function getActualDropTargets(_ref2) {
-    var _args$getData, _args$getData2, _args$getDropEffect, _args$getDropEffect2, _args$getIsSticky;
+    var _args$getData, _args$getData2, _args$getDropEffect, _args$getDropEffect2;
     var source = _ref2.source,
       target = _ref2.target,
       input = _ref2.input,
@@ -85,14 +85,17 @@ function makeDropTarget(_ref) {
         result: result
       });
     }
+
+    // calculate our new record
     var data = (_args$getData = (_args$getData2 = args.getData) === null || _args$getData2 === void 0 ? void 0 : _args$getData2.call(args, feedback)) !== null && _args$getData !== void 0 ? _args$getData : {};
     var dropEffect = (_args$getDropEffect = (_args$getDropEffect2 = args.getDropEffect) === null || _args$getDropEffect2 === void 0 ? void 0 : _args$getDropEffect2.call(args, feedback)) !== null && _args$getDropEffect !== void 0 ? _args$getDropEffect : defaultDropEffect;
-    var sticky = Boolean((_args$getIsSticky = args.getIsSticky) === null || _args$getIsSticky === void 0 ? void 0 : _args$getIsSticky.call(args, feedback));
     var record = {
       data: data,
       element: args.element,
       dropEffect: dropEffect,
-      sticky: sticky
+      // we are collecting _actual_ drop targets, so these are
+      // being applied _not_ due to stickiness
+      isActiveDueToStickiness: false
     };
     return getActualDropTargets({
       source: source,
@@ -219,6 +222,7 @@ function makeDropTarget(_ref) {
     var actualCaptureOrdered = copyReverse(actual);
     var resultCaptureOrdered = [];
     for (var index = 0; index < lastCaptureOrdered.length; index++) {
+      var _argsForLast$getIsSti;
       var last = lastCaptureOrdered[index];
       var fresh = actualCaptureOrdered[index];
 
@@ -232,29 +236,51 @@ function makeDropTarget(_ref) {
       // At this point we have no drop target in the old spot
       // Check to see if we can use a previous sticky drop target
 
-      // stickiness is based on relationships to a parent
-      // so if we hit a drop target that is not sticky we
-      // can finish our search
-      if (!last.sticky) {
-        break;
-      }
-
-      // We only want the previous sticky item to 'stick' if
-      // the parent of the sticky item is unchanged
-
       // The "parent" is the one inside of `resultCaptureOrdered`
       // (the parent might be a drop target that was sticky)
       var parent = resultCaptureOrdered[index - 1];
       var lastParent = lastCaptureOrdered[index - 1];
 
-      // parents are the same (might both be undefined for index == 0)
-      // we can add the last entry and keep searching
-      if ((parent === null || parent === void 0 ? void 0 : parent.element) === (lastParent === null || lastParent === void 0 ? void 0 : lastParent.element)) {
-        resultCaptureOrdered.push(last);
-        continue;
+      // Stickiness is based on parent relationships, so if the parent relationship has change
+      // then we can stop our search
+      if ((parent === null || parent === void 0 ? void 0 : parent.element) !== (lastParent === null || lastParent === void 0 ? void 0 : lastParent.element)) {
+        break;
+      }
+
+      // We need to check whether the old drop target can still be dropped on
+
+      var argsForLast = registry.get(last.element);
+
+      // We cannot drop on a drop target that is no longer mounted
+      if (!argsForLast) {
+        break;
       }
-      // parents are not the same, we can exit our search
-      break;
+      var feedback = {
+        input: input,
+        source: source,
+        element: argsForLast.element
+      };
+
+      // We cannot drop on a drop target that no longer allows being dropped on
+      if (argsForLast.canDrop && !argsForLast.canDrop(feedback)) {
+        break;
+      }
+
+      // We cannot drop on a drop target that is no longer sticky
+      if (!((_argsForLast$getIsSti = argsForLast.getIsSticky) !== null && _argsForLast$getIsSti !== void 0 && _argsForLast$getIsSti.call(argsForLast, feedback))) {
+        break;
+      }
+
+      // Note: intentionally not recollecting `getData()` or `getDropEffect()`
+      // Previous values for `data` and `dropEffect` will be borrowed
+      // This is to prevent things like the 'closest edge' changing when
+      // no longer over a drop target.
+      // We could change our mind on this behaviour in the future
+
+      resultCaptureOrdered.push(_objectSpread(_objectSpread({}, last), {}, {
+        // making it clear to consumers this drop target is active due to stickiness
+        isActiveDueToStickiness: true
+      }));
     }
 
     // return bubble ordered result

package/dist/cjs/util/custom-native-drag-preview/center-under-pointer.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.centerUnderPointer = void 0;
+var centerUnderPointer = function centerUnderPointer(_ref) {
+  var container = _ref.container;
+  var rect = container.getBoundingClientRect();
+  return {
+    x: rect.width / 2,
+    y: rect.height / 2
+  };
+};
+exports.centerUnderPointer = centerUnderPointer;

package/dist/cjs/util/custom-native-drag-preview/offset-from-pointer.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.offsetFromPointer = offsetFromPointer;
+/** Any valid CSS string value
+ * @example `calc(var(--grid) * 2)
+ */
+
+function offsetFromPointer(point) {
+  return function (_ref) {
+    var container = _ref.container;
+    // Only reliable cross browser technique found to push a
+    // drag preview away from the cursor is to use transparent borders on the container
+    Object.assign(container.style, {
+      borderLeft: "".concat(point.x, " solid transparent"),
+      borderTop: "".concat(point.y, " solid transparent")
+    });
+    return {
+      x: 0,
+      y: 0
+    };
+  };
+}

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

@@ -4,46 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setCustomNativeDragPreview = setCustomNativeDragPreview;
-var _elementAdapter = require("../adapter/element-adapter");
+var _elementAdapter = require("../../adapter/element-adapter");
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
  */
 
 /** A function that will render a preview element into a `container` `HTMLElement` */
 
-/** Any valid CSS string value
- * @example `calc(var(--grid) * 2)
- */
-
-/**
- * Where to place the custom drag preview
- *
- * `type: 'center'`: Place the center of the drag preview user the users pointer
- *
- * `type: 'offset-from-pointer'`: Shift the drag preview away from the users pointer
- */
-
-function setImage(_ref) {
-  var container = _ref.container,
-    placement = _ref.placement,
-    nativeSetDragImage = _ref.nativeSetDragImage;
-  if ((placement === null || placement === void 0 ? void 0 : placement.type) === 'center') {
-    var box = container.getBoundingClientRect();
-    nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, box.width / 2, box.height / 2);
-    return;
-  }
-  if ((placement === null || placement === void 0 ? void 0 : placement.type) === 'offset-from-pointer') {
-    // Using a transparent border to push the drag preview away
-    // from the user's pointer.
-    // In Chrome and Safari we could use `padding`:
-    // padding: 'var(--grid)',
-    // But it does not work in Firefox which trims the padding (or inner margin)
-    Object.assign(container.style, {
-      borderLeft: "".concat(placement.x, " solid transparent"),
-      borderTop: "".concat(placement.y, " solid transparent")
-    });
-  }
-  nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, 0, 0);
+/** By default we use the build in values for the native drag preview: {x: 0, y: 0} */
+function defaultOffset() {
+  return {
+    x: 0,
+    y: 0
+  };
 }
 
 /** This function provides the ability to mount an element for it to be used as the native drag preview
@@ -61,10 +34,11 @@ function setImage(_ref) {
  *    },
  * });
  */
-function setCustomNativeDragPreview(_ref2) {
-  var render = _ref2.render,
-    nativeSetDragImage = _ref2.nativeSetDragImage,
-    placement = _ref2.placement;
+function setCustomNativeDragPreview(_ref) {
+  var render = _ref.render,
+    nativeSetDragImage = _ref.nativeSetDragImage,
+    _ref$getOffset = _ref.getOffset,
+    getOffset = _ref$getOffset === void 0 ? defaultOffset : _ref$getOffset;
   var container = document.createElement('div');
   Object.assign(container.style, {
     // Ensuring we don't cause reflow when adding the element to the page
@@ -90,11 +64,10 @@ function setCustomNativeDragPreview(_ref2) {
   var unmount = render({
     container: container
   });
-  setImage({
-    container: container,
-    placement: placement,
-    nativeSetDragImage: nativeSetDragImage
+  var previewOffset = getOffset({
+    container: container
   });
+  nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   function cleanup() {
     unbindMonitor();
     unmount === null || unmount === void 0 ? void 0 : unmount();

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pragmatic-drag-and-drop",
-	"version": "0.18.2",
+	"version": "0.20.0",
 	"sideEffects": false
 }

package/dist/es2019/entry-point/util/center-under-pointer.js

@@ -0,0 +1 @@
+export { centerUnderPointer } from '../../util/custom-native-drag-preview/center-under-pointer';

package/dist/es2019/entry-point/util/offset-from-pointer.js

@@ -0,0 +1 @@
+export { offsetFromPointer } from '../../util/custom-native-drag-preview/offset-from-pointer';

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

@@ -1 +1 @@
-export { setCustomNativeDragPreview } from '../../util/set-custom-native-drag-preview';
+export { setCustomNativeDragPreview } from '../../util/custom-native-drag-preview/set-custom-native-drag-preview';

package/dist/es2019/make-adapter/make-drop-target.js

@@ -37,7 +37,7 @@ export function makeDropTarget({
     input,
     result = []
   }) {
-    var _args$getData, _args$getData2, _args$getDropEffect, _args$getDropEffect2, _args$getIsSticky;
+    var _args$getData, _args$getData2, _args$getDropEffect, _args$getDropEffect2;
     if (!(target instanceof Element)) {
       return result;
     }
@@ -70,14 +70,17 @@ export function makeDropTarget({
         result
       });
     }
+
+    // calculate our new record
     const data = (_args$getData = (_args$getData2 = args.getData) === null || _args$getData2 === void 0 ? void 0 : _args$getData2.call(args, feedback)) !== null && _args$getData !== void 0 ? _args$getData : {};
     const dropEffect = (_args$getDropEffect = (_args$getDropEffect2 = args.getDropEffect) === null || _args$getDropEffect2 === void 0 ? void 0 : _args$getDropEffect2.call(args, feedback)) !== null && _args$getDropEffect !== void 0 ? _args$getDropEffect : defaultDropEffect;
-    const sticky = Boolean((_args$getIsSticky = args.getIsSticky) === null || _args$getIsSticky === void 0 ? void 0 : _args$getIsSticky.call(args, feedback));
     const record = {
       data,
       element: args.element,
       dropEffect,
-      sticky
+      // we are collecting _actual_ drop targets, so these are
+      // being applied _not_ due to stickiness
+      isActiveDueToStickiness: false
     };
     return getActualDropTargets({
       source,
@@ -181,6 +184,7 @@ export function makeDropTarget({
     const actualCaptureOrdered = copyReverse(actual);
     const resultCaptureOrdered = [];
     for (let index = 0; index < lastCaptureOrdered.length; index++) {
+      var _argsForLast$getIsSti;
       const last = lastCaptureOrdered[index];
       const fresh = actualCaptureOrdered[index];
 
@@ -194,29 +198,52 @@ export function makeDropTarget({
       // At this point we have no drop target in the old spot
       // Check to see if we can use a previous sticky drop target
 
-      // stickiness is based on relationships to a parent
-      // so if we hit a drop target that is not sticky we
-      // can finish our search
-      if (!last.sticky) {
-        break;
-      }
-
-      // We only want the previous sticky item to 'stick' if
-      // the parent of the sticky item is unchanged
-
       // The "parent" is the one inside of `resultCaptureOrdered`
       // (the parent might be a drop target that was sticky)
       const parent = resultCaptureOrdered[index - 1];
       const lastParent = lastCaptureOrdered[index - 1];
 
-      // parents are the same (might both be undefined for index == 0)
-      // we can add the last entry and keep searching
-      if ((parent === null || parent === void 0 ? void 0 : parent.element) === (lastParent === null || lastParent === void 0 ? void 0 : lastParent.element)) {
-        resultCaptureOrdered.push(last);
-        continue;
+      // Stickiness is based on parent relationships, so if the parent relationship has change
+      // then we can stop our search
+      if ((parent === null || parent === void 0 ? void 0 : parent.element) !== (lastParent === null || lastParent === void 0 ? void 0 : lastParent.element)) {
+        break;
+      }
+
+      // We need to check whether the old drop target can still be dropped on
+
+      const argsForLast = registry.get(last.element);
+
+      // We cannot drop on a drop target that is no longer mounted
+      if (!argsForLast) {
+        break;
       }
-      // parents are not the same, we can exit our search
-      break;
+      const feedback = {
+        input,
+        source,
+        element: argsForLast.element
+      };
+
+      // We cannot drop on a drop target that no longer allows being dropped on
+      if (argsForLast.canDrop && !argsForLast.canDrop(feedback)) {
+        break;
+      }
+
+      // We cannot drop on a drop target that is no longer sticky
+      if (!((_argsForLast$getIsSti = argsForLast.getIsSticky) !== null && _argsForLast$getIsSti !== void 0 && _argsForLast$getIsSti.call(argsForLast, feedback))) {
+        break;
+      }
+
+      // Note: intentionally not recollecting `getData()` or `getDropEffect()`
+      // Previous values for `data` and `dropEffect` will be borrowed
+      // This is to prevent things like the 'closest edge' changing when
+      // no longer over a drop target.
+      // We could change our mind on this behaviour in the future
+
+      resultCaptureOrdered.push({
+        ...last,
+        // making it clear to consumers this drop target is active due to stickiness
+        isActiveDueToStickiness: true
+      });
     }
 
     // return bubble ordered result

package/dist/es2019/util/custom-native-drag-preview/center-under-pointer.js

@@ -0,0 +1,9 @@
+export const centerUnderPointer = function centerUnderPointer({
+  container
+}) {
+  const rect = container.getBoundingClientRect();
+  return {
+    x: rect.width / 2,
+    y: rect.height / 2
+  };
+};