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

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @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

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/version.json

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

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/version.json

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

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

@@ -40,7 +40,7 @@ export 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,
@@ -78,14 +78,17 @@ export 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,
@@ -212,6 +215,7 @@ export 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];
 
@@ -225,29 +229,51 @@ export 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/esm/version.json

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

package/dist/types/internal-types.d.ts

@@ -20,11 +20,9 @@ export type DropTargetRecord = {
      */
     dropEffect: DataTransfer['dropEffect'];
     /**
-     * Whether or not the drop target is sticky
-     *
-     * (Collected by `getIsSticky()`)
+     * Whether or not the drop target is active due to _stickiness_
      */
-    sticky: boolean;
+    isActiveDueToStickiness: boolean;
 };
 export type Position = {
     x: number;

package/dist/types-ts4.5/internal-types.d.ts

@@ -20,11 +20,9 @@ export type DropTargetRecord = {
      */
     dropEffect: DataTransfer['dropEffect'];
     /**
-     * Whether or not the drop target is sticky
-     *
-     * (Collected by `getIsSticky()`)
+     * Whether or not the drop target is active due to _stickiness_
      */
-    sticky: boolean;
+    isActiveDueToStickiness: boolean;
 };
 export type Position = {
     x: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pragmatic-drag-and-drop",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "The core Pragmatic drag and drop framework, optimized for performance.",
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
@@ -56,7 +56,6 @@
     "raf-schd": "^4.0.3"
   },
   "devDependencies": {
-    "@atlaskit/tokens": "^1.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@emotion/react": "^11.7.1",