@atlaskit/pragmatic-drag-and-drop - npm Package Compare versions

Comparing version 0.19.0 to 0.20.0

CHANGELOG.md

 # @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
@@ -4,0 +48,0 @@

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

@@ -50,3 +50,3 @@ "use strict";
   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,
@@ -89,5 +89,6 @@ target = _ref2.target,
     }
+
+    // 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 = {
@@ -97,3 +98,5 @@ data: data,
       dropEffect: dropEffect,
-      sticky: sticky
+      // we are collecting _actual_ drop targets, so these are
+      // being applied _not_ due to stickiness
+      isActiveDueToStickiness: false
     };
@@ -225,2 +228,3 @@ return getActualDropTargets({
     for (var index = 0; index < lastCaptureOrdered.length; index++) {
+      var _argsForLast$getIsSti;
       var last = lastCaptureOrdered[index];
@@ -239,12 +243,2 @@ var fresh = actualCaptureOrdered[index];
 
-      // 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`
@@ -255,10 +249,42 @@ // (the parent might be a drop target that was sticky)
 
-      // 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;
       }
-      // parents are not the same, we can exit our search
-      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;
+      }
+      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
+      }));
     }
@@ -265,0 +291,0 @@

dist/cjs/version.json

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

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

@@ -40,3 +40,3 @@ import { addAttribute } from '../util/add-attribute';
   }) {
-    var _args$getData, _args$getData2, _args$getDropEffect, _args$getDropEffect2, _args$getIsSticky;
+    var _args$getData, _args$getData2, _args$getDropEffect, _args$getDropEffect2;
     if (!(target instanceof Element)) {
@@ -74,5 +74,6 @@ return 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 = {
@@ -82,3 +83,5 @@ data,
       dropEffect,
-      sticky
+      // we are collecting _actual_ drop targets, so these are
+      // being applied _not_ due to stickiness
+      isActiveDueToStickiness: false
     };
@@ -187,2 +190,3 @@ return getActualDropTargets({
     for (let index = 0; index < lastCaptureOrdered.length; index++) {
+      var _argsForLast$getIsSti;
       const last = lastCaptureOrdered[index];
@@ -201,12 +205,2 @@ const fresh = actualCaptureOrdered[index];
 
-      // 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`
@@ -217,10 +211,43 @@ // (the parent might be a drop target that was sticky)
 
-      // 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;
       }
-      // parents are not the same, we can exit our search
-      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;
+      }
+      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
+      });
     }
@@ -227,0 +254,0 @@

dist/es2019/version.json

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

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

@@ -43,3 +43,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
   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,
@@ -82,5 +82,6 @@ target = _ref2.target,
     }
+
+    // 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 = {
@@ -90,3 +91,5 @@ data: data,
       dropEffect: dropEffect,
-      sticky: sticky
+      // we are collecting _actual_ drop targets, so these are
+      // being applied _not_ due to stickiness
+      isActiveDueToStickiness: false
     };
@@ -218,2 +221,3 @@ return getActualDropTargets({
     for (var index = 0; index < lastCaptureOrdered.length; index++) {
+      var _argsForLast$getIsSti;
       var last = lastCaptureOrdered[index];
@@ -232,12 +236,2 @@ var fresh = actualCaptureOrdered[index];
 
-      // 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`
@@ -248,10 +242,42 @@ // (the parent might be a drop target that was sticky)
 
-      // 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;
       }
-      // parents are not the same, we can exit our search
-      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;
+      }
+      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
+      }));
     }
@@ -258,0 +284,0 @@

dist/esm/version.json

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

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

@@ -23,7 +23,5 @@ export type CleanupFn = () => void;
     /**
-     * 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;
 };
@@ -30,0 +28,0 @@ export type Position = {

dist/types/internal-types.d.ts

@@ -23,7 +23,5 @@ export type CleanupFn = () => void;
     /**
-     * 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;
 };
@@ -30,0 +28,0 @@ export type Position = {

package.json

 {
   "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.",
@@ -59,3 +59,2 @@ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "devDependencies": {
-    "@atlaskit/tokens": "^1.6.0",
     "@atlaskit/visual-regression": "*",
@@ -62,0 +61,0 @@ "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

287171

increased by1.64%

Dev dependency count

11

decreased by-8.33%

Lines of code

6523

increased by0.88%

No dependency changes