@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration - npm Package Compare versions

Comparing version 0.12.0 to 0.13.0

CHANGELOG.md

 # @atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration
 
+## 0.13.0
+
+### Minor Changes
+
+- [`5e58af07ce8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5e58af07ce8) - [ux] Entering a droppable from the start will now target the first index instead of the last.
+
 ## 0.12.0
@@ -4,0 +10,0 @@

dist/cjs/drag-drop-context/draggable-location.js

@@ -15,3 +15,4 @@ "use strict";
 var _findAllDraggables = require("../utils/find-all-draggables");
-var _excluded = ["droppableId", "getIndex"];
+var _excluded = ["droppableId", "getIndex"],
+  _excluded2 = ["contextId", "droppableId"];
 /**
@@ -61,7 +62,9 @@ * Derives the `DraggableLocation` of a `<Draggable>`.
  *
- * This corresponds to the last index in the list.
+ * This corresponds to the first or last index of the list,
+ * depending on where the user is hovering.
  */
 function getDraggableLocationFromDroppableData(_ref2) {
   var contextId = _ref2.contextId,
-    droppableId = _ref2.droppableId;
+    droppableId = _ref2.droppableId,
+    data = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var draggables = (0, _findAllDraggables.findAllDraggables)({
@@ -81,2 +84,20 @@ contextId: contextId,
   }
+  var closestEdge = (0, _closestEdge.extractClosestEdge)(data);
+  /**
+   * Whether the user is closer to the start of the droppable.
+   *
+   * For a vertical list it is the top half,
+   * while for a horizontal list it is the left half.
+   */
+  var isCloserToStart = closestEdge === 'top' || closestEdge === 'left';
+  if (isCloserToStart) {
+    /**
+     * If the user is closer to the start of the list, we will target the
+     * first (0th) index.
+     */
+    return {
+      droppableId: droppableId,
+      index: 0
+    };
+  }
 
@@ -83,0 +104,0 @@ /**

dist/cjs/droppable/index.js

@@ -14,2 +14,3 @@ "use strict";
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
@@ -82,7 +83,12 @@ var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
       element: element,
-      getData: function getData() {
-        return data;
+      getData: function getData(_ref2) {
+        var input = _ref2.input;
+        return (0, _closestEdge.attachClosestEdge)(data, {
+          element: element,
+          input: input,
+          allowedEdges: direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right']
+        });
       },
-      canDrop: function canDrop(_ref2) {
-        var source = _ref2.source;
+      canDrop: function canDrop(_ref3) {
+        var source = _ref3.source;
         if (!(0, _data.isDraggableData)(source.data)) {
@@ -108,4 +114,4 @@ // not dragging something from the migration layer
     return monitorForLifecycle({
-      onPendingDragStart: function onPendingDragStart(_ref3) {
-        var start = _ref3.start;
+      onPendingDragStart: function onPendingDragStart(_ref4) {
+        var start = _ref4.start;
         dispatch({
@@ -119,5 +125,5 @@ type: 'DRAG_START',
       },
-      onPendingDragUpdate: function onPendingDragUpdate(_ref4) {
-        var targetLocation = _ref4.targetLocation,
-          update = _ref4.update;
+      onPendingDragUpdate: function onPendingDragUpdate(_ref5) {
+        var targetLocation = _ref5.targetLocation,
+          update = _ref5.update;
         dispatch({
@@ -124,0 +130,0 @@ type: 'DRAG_UPDATE',

dist/cjs/version.json

 {
 	"name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-	"version": "0.12.0",
+	"version": "0.13.0",
 	"sideEffects": false
 }

dist/es2019/drag-drop-context/draggable-location.js

@@ -52,7 +52,9 @@ import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
  *
- * This corresponds to the last index in the list.
+ * This corresponds to the first or last index of the list,
+ * depending on where the user is hovering.
  */
 function getDraggableLocationFromDroppableData({
   contextId,
-  droppableId
+  droppableId,
+  ...data
 }) {
@@ -73,2 +75,20 @@ const draggables = findAllDraggables({
   }
+  const closestEdge = extractClosestEdge(data);
+  /**
+   * Whether the user is closer to the start of the droppable.
+   *
+   * For a vertical list it is the top half,
+   * while for a horizontal list it is the left half.
+   */
+  const isCloserToStart = closestEdge === 'top' || closestEdge === 'left';
+  if (isCloserToStart) {
+    /**
+     * If the user is closer to the start of the list, we will target the
+     * first (0th) index.
+     */
+    return {
+      droppableId,
+      index: 0
+    };
+  }
 
@@ -75,0 +95,0 @@ /**

dist/es2019/droppable/index.js

 import React, { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import invariant from 'tiny-invariant';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
@@ -77,4 +78,10 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
       element,
-      getData() {
-        return data;
+      getData({
+        input
+      }) {
+        return attachClosestEdge(data, {
+          element,
+          input,
+          allowedEdges: direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right']
+        });
       },
@@ -81,0 +88,0 @@ canDrop({

dist/es2019/version.json

 {
 	"name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-	"version": "0.12.0",
+	"version": "0.13.0",
 	"sideEffects": false
 }

dist/esm/drag-drop-context/draggable-location.js

 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["droppableId", "getIndex"];
+var _excluded = ["droppableId", "getIndex"],
+  _excluded2 = ["contextId", "droppableId"];
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
@@ -53,7 +54,9 @@ import { isDraggableData } from '../draggable/data';
  *
- * This corresponds to the last index in the list.
+ * This corresponds to the first or last index of the list,
+ * depending on where the user is hovering.
  */
 function getDraggableLocationFromDroppableData(_ref2) {
   var contextId = _ref2.contextId,
-    droppableId = _ref2.droppableId;
+    droppableId = _ref2.droppableId,
+    data = _objectWithoutProperties(_ref2, _excluded2);
   var draggables = findAllDraggables({
@@ -73,2 +76,20 @@ contextId: contextId,
   }
+  var closestEdge = extractClosestEdge(data);
+  /**
+   * Whether the user is closer to the start of the droppable.
+   *
+   * For a vertical list it is the top half,
+   * while for a horizontal list it is the left half.
+   */
+  var isCloserToStart = closestEdge === 'top' || closestEdge === 'left';
+  if (isCloserToStart) {
+    /**
+     * If the user is closer to the start of the list, we will target the
+     * first (0th) index.
+     */
+    return {
+      droppableId: droppableId,
+      index: 0
+    };
+  }
 
@@ -75,0 +96,0 @@ /**

dist/esm/droppable/index.js

@@ -6,2 +6,3 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import invariant from 'tiny-invariant';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
@@ -72,7 +73,12 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
       element: element,
-      getData: function getData() {
-        return data;
+      getData: function getData(_ref2) {
+        var input = _ref2.input;
+        return attachClosestEdge(data, {
+          element: element,
+          input: input,
+          allowedEdges: direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right']
+        });
       },
-      canDrop: function canDrop(_ref2) {
-        var source = _ref2.source;
+      canDrop: function canDrop(_ref3) {
+        var source = _ref3.source;
         if (!isDraggableData(source.data)) {
@@ -98,4 +104,4 @@ // not dragging something from the migration layer
     return monitorForLifecycle({
-      onPendingDragStart: function onPendingDragStart(_ref3) {
-        var start = _ref3.start;
+      onPendingDragStart: function onPendingDragStart(_ref4) {
+        var start = _ref4.start;
         dispatch({
@@ -109,5 +115,5 @@ type: 'DRAG_START',
       },
-      onPendingDragUpdate: function onPendingDragUpdate(_ref4) {
-        var targetLocation = _ref4.targetLocation,
-          update = _ref4.update;
+      onPendingDragUpdate: function onPendingDragUpdate(_ref5) {
+        var targetLocation = _ref5.targetLocation,
+          update = _ref5.update;
         dispatch({
@@ -114,0 +120,0 @@ type: 'DRAG_UPDATE',

dist/esm/version.json

 {
 	"name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-	"version": "0.12.0",
+	"version": "0.13.0",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Migration layer for quickly moving from react-beautiful-dnd to @atlaskit/pragmatic-drag-and-drop.",
@@ -5,0 +5,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

1080712

increased by0.71%

Number of package files

497

increased by0.2%

Lines of code

30269

increased by0.75%

No dependency changes