svelte-dnd-action 0.9.20 → 0.9.21

package/dist/index.mjs

@@ -1,16 +1,13 @@
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
-
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
     enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
     })), keys.push.apply(keys, symbols);
   }
-
   return keys;
 }
-
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
@@ -20,10 +17,8 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
-
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -33,7 +28,6 @@ function _typeof(obj) {
     return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
   }, _typeof(obj);
 }
-
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -45,35 +39,26 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
-
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
-
   var target = _objectWithoutPropertiesLoose(source, excluded);
-
   var key, i;
-
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
     for (i = 0; i < sourceSymbolKeys.length; i++) {
       key = sourceSymbolKeys[i];
       if (excluded.indexOf(key) >= 0) continue;
@@ -81,44 +66,33 @@ function _objectWithoutProperties(source, excluded) {
       target[key] = source[key];
     }
   }
-
   return target;
 }
-
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
-
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
-
 function _arrayWithoutHoles(arr) {
   if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
-
 function _iterableToArray(iter) {
   if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-
 function _iterableToArrayLimit(arr, i) {
   var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
   if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-
   var _s, _e;
-
   try {
     for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
-
       if (i && _arr.length === i) break;
     }
   } catch (err) {
@@ -131,10 +105,8 @@ function _iterableToArrayLimit(arr, i) {
       if (_d) throw _e;
     }
   }
-
   return _arr;
 }
-
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -143,33 +115,24 @@ function _unsupportedIterableToArray(o, minLen) {
   if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
   return arr2;
 }
-
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-
   if (!it) {
     if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
       if (it) o = it;
       var i = 0;
-
       var F = function () {};
-
       return {
         s: F,
         n: function () {
@@ -187,13 +150,11 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
         f: F
       };
     }
-
     throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
-
   var normalCompletion = true,
-      didErr = false,
-      err;
+    didErr = false,
+    err;
   return {
     s: function () {
       it = it.call(o);
@@ -220,6 +181,7 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
 // external events
 var FINALIZE_EVENT_NAME = "finalize";
 var CONSIDER_EVENT_NAME = "consider";
+
 /**
  * @typedef {Object} Info
  * @property {string} trigger
@@ -229,7 +191,6 @@ var CONSIDER_EVENT_NAME = "consider";
  * @param {Array} items
  * @param {Info} info
  */
-
 function dispatchFinalizeEvent(el, items, info) {
   el.dispatchEvent(new CustomEvent(FINALIZE_EVENT_NAME, {
     detail: {
@@ -238,13 +199,13 @@ function dispatchFinalizeEvent(el, items, info) {
     }
   }));
 }
+
 /**
  * Dispatches a consider event
  * @param {Node} el
  * @param {Array} items
  * @param {Info} info
  */
-
 function dispatchConsiderEvent(el, items, info) {
   el.dispatchEvent(new CustomEvent(CONSIDER_EVENT_NAME, {
     detail: {
@@ -252,8 +213,9 @@ function dispatchConsiderEvent(el, items, info) {
       info: info
     }
   }));
-} // internal events
+}
 
+// internal events
 var DRAGGED_ENTERED_EVENT_NAME = "draggedEntered";
 var DRAGGED_LEFT_EVENT_NAME = "draggedLeft";
 var DRAGGED_OVER_INDEX_EVENT_NAME = "draggedOverIndex";
@@ -270,12 +232,12 @@ function dispatchDraggedElementEnteredContainer(containerEl, indexObj, draggedEl
     }
   }));
 }
+
 /**
  * @param containerEl - the dropzone the element left
  * @param draggedEl - the dragged element
  * @param theOtherDz - the new dropzone the element entered
  */
-
 function dispatchDraggedElementLeftContainerForAnother(containerEl, draggedEl, theOtherDz) {
   containerEl.dispatchEvent(new CustomEvent(DRAGGED_LEFT_EVENT_NAME, {
     detail: {
@@ -338,25 +300,22 @@ function decrementActiveDropZoneCount() {
   if (activeDndZoneCount === 0) {
     throw new Error("Bug! trying to decrement when there are no dropzones");
   }
-
   activeDndZoneCount--;
 }
+
 /**
  * Allows using another key instead of "id" in the items data. This is global and applies to all dndzones.
  * Has to be called when there are no rendered dndzones whatsoever.
  * @param {String} newKeyName
  * @throws {Error} if it was called when there are rendered dndzones or if it is given the wrong type (not a string)
  */
-
 function overrideItemIdKeyNameBeforeInitialisingDndZones(newKeyName) {
   if (activeDndZoneCount > 0) {
     throw new Error("can only override the id key before initialising any dndzone");
   }
-
   if (typeof newKeyName !== "string") {
     throw new Error("item id key has to be a string");
   }
-
   printDebug(function () {
     return ["overriding item id key name", newKeyName];
   });
@@ -364,17 +323,16 @@ function overrideItemIdKeyNameBeforeInitialisingDndZones(newKeyName) {
 }
 var isOnServer = typeof window === "undefined";
 var printDebug = function printDebug() {};
+
 /**
  * Allows the user to show/hide console debug output
  * * @param {Boolean} isDebug
  */
-
 function setDebugMode(isDebug) {
   if (isDebug) {
     printDebug = function printDebug(generateMessage) {
       var logFunction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : console.debug;
       var message = generateMessage();
-
       if (Array.isArray(message)) {
         logFunction.apply(void 0, _toConsumableArray(message));
       } else {
@@ -388,7 +346,6 @@ function setDebugMode(isDebug) {
 
 // This is based off https://stackoverflow.com/questions/27745438/how-to-compute-getboundingclientrect-without-considering-transforms/57876601#57876601
 // It removes the transforms that are potentially applied by the flip animations
-
 /**
  * Gets the bounding rect but removes transforms (ex: flip animation)
  * @param {HTMLElement} el
@@ -399,10 +356,8 @@ function getBoundingRectNoTransforms(el) {
   var rect = el.getBoundingClientRect();
   var style = getComputedStyle(el);
   var tx = style.transform;
-
   if (tx) {
     var sx, sy, dx, dy;
-
     if (tx.startsWith("matrix3d(")) {
       ta = tx.slice(9, -1).split(/, /);
       sx = +ta[0];
@@ -418,7 +373,6 @@ function getBoundingRectNoTransforms(el) {
     } else {
       return rect;
     }
-
     var to = style.transformOrigin;
     var x = rect.x - dx - (1 - sx) * parseFloat(to);
     var y = rect.y - dy - (1 - sy) * parseFloat(to.slice(to.indexOf(" ") + 1));
@@ -438,12 +392,12 @@ function getBoundingRectNoTransforms(el) {
     return rect;
   }
 }
+
 /**
  * Gets the absolute bounding rect (accounts for the window's scroll position and removes transforms)
  * @param {HTMLElement} el
  * @return {{top: number, left: number, bottom: number, right: number}}
  */
-
 function getAbsoluteRectNoTransforms(el) {
   var rect = getBoundingRectNoTransforms(el);
   return {
@@ -453,12 +407,12 @@ function getAbsoluteRectNoTransforms(el) {
     right: rect.right + window.scrollX
   };
 }
+
 /**
  * Gets the absolute bounding rect (accounts for the window's scroll position)
  * @param {HTMLElement} el
  * @return {{top: number, left: number, bottom: number, right: number}}
  */
-
 function getAbsoluteRect(el) {
   var rect = el.getBoundingClientRect();
   return {
@@ -468,6 +422,7 @@ function getAbsoluteRect(el) {
     right: rect.right + window.scrollX
   };
 }
+
 /**
  * finds the center :)
  * @typedef {Object} Rect
@@ -478,13 +433,13 @@ function getAbsoluteRect(el) {
  * @param {Rect} rect
  * @return {{x: number, y: number}}
  */
-
 function findCenter(rect) {
   return {
     x: (rect.left + rect.right) / 2,
     y: (rect.top + rect.bottom) / 2
   };
 }
+
 /**
  * @typedef {Object} Point
  * @property {number} x
@@ -493,74 +448,70 @@ function findCenter(rect) {
  * @param {Point} pointB
  * @return {number}
  */
-
 function calcDistance(pointA, pointB) {
   return Math.sqrt(Math.pow(pointA.x - pointB.x, 2) + Math.pow(pointA.y - pointB.y, 2));
 }
+
 /**
  * @param {Point} point
  * @param {Rect} rect
  * @return {boolean|boolean}
  */
-
-
 function isPointInsideRect(point, rect) {
   return point.y <= rect.bottom && point.y >= rect.top && point.x >= rect.left && point.x <= rect.right;
 }
+
 /**
  * find the absolute coordinates of the center of a dom element
  * @param el {HTMLElement}
  * @returns {{x: number, y: number}}
  */
-
 function findCenterOfElement(el) {
   return findCenter(getAbsoluteRect(el));
 }
+
 /**
  * @param {HTMLElement} elA
  * @param {HTMLElement} elB
  * @return {boolean}
  */
-
 function isCenterOfAInsideB(elA, elB) {
   var centerOfA = findCenterOfElement(elA);
   var rectOfB = getAbsoluteRectNoTransforms(elB);
   return isPointInsideRect(centerOfA, rectOfB);
 }
+
 /**
  * @param {HTMLElement|ChildNode} elA
  * @param {HTMLElement|ChildNode} elB
  * @return {number}
  */
-
 function calcDistanceBetweenCenters(elA, elB) {
   var centerOfA = findCenterOfElement(elA);
   var centerOfB = findCenterOfElement(elB);
   return calcDistance(centerOfA, centerOfB);
 }
+
 /**
  * @param {HTMLElement} el - the element to check
  * @returns {boolean} - true if the element in its entirety is off screen including the scrollable area (the normal dom events look at the mouse rather than the element)
  */
-
 function isElementOffDocument(el) {
   var rect = getAbsoluteRect(el);
   return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
 }
+
 /**
  * If the point is inside the element returns its distances from the sides, otherwise returns null
  * @param {Point} point
  * @param {HTMLElement} el
  * @return {null|{top: number, left: number, bottom: number, right: number}}
  */
-
 function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
   var rect = getAbsoluteRect(el);
-
   if (!isPointInsideRect(point, rect)) {
     return null;
   }
-
   return {
     top: point.y - rect.top,
     bottom: rect.bottom - point.y,
@@ -571,10 +522,10 @@ function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
 }
 
 var dzToShadowIndexToRect;
+
 /**
  * Resets the cache that allows for smarter "would be index" resolution. Should be called after every drag operation
  */
-
 function resetIndexesCache() {
   printDebug(function () {
     return "resetting indexes cache";
@@ -582,75 +533,68 @@ function resetIndexesCache() {
   dzToShadowIndexToRect = new Map();
 }
 resetIndexesCache();
+
 /**
  * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
  * @param {HTMLElement} dz
  */
-
 function resetIndexesCacheForDz(dz) {
   printDebug(function () {
     return "resetting indexes cache for dz";
   });
   dzToShadowIndexToRect["delete"](dz);
 }
+
 /**
  * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
  * Helpful in order to determine "would be index" more effectively
  * @param {HTMLElement} dz
  * @return {number} - the shadow element index
  */
-
 function cacheShadowRect(dz) {
   var shadowElIndex = Array.from(dz.children).findIndex(function (child) {
     return child.getAttribute(SHADOW_ELEMENT_ATTRIBUTE_NAME);
   });
-
   if (shadowElIndex >= 0) {
     if (!dzToShadowIndexToRect.has(dz)) {
       dzToShadowIndexToRect.set(dz, new Map());
     }
-
     dzToShadowIndexToRect.get(dz).set(shadowElIndex, getAbsoluteRectNoTransforms(dz.children[shadowElIndex]));
     return shadowElIndex;
   }
-
   return undefined;
 }
+
 /**
  * @typedef {Object} Index
  * @property {number} index - the would be index
  * @property {boolean} isProximityBased - false if the element is actually over the index, true if it is not over it but this index is the closest
  */
-
 /**
  * Find the index for the dragged element in the list it is dragged over
  * @param {HTMLElement} floatingAboveEl
  * @param {HTMLElement} collectionBelowEl
  * @returns {Index|null} -  if the element is over the container the Index object otherwise null
  */
-
-
 function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
   if (!isCenterOfAInsideB(floatingAboveEl, collectionBelowEl)) {
     return null;
   }
-
-  var children = collectionBelowEl.children; // the container is empty, floating element should be the first
-
+  var children = collectionBelowEl.children;
+  // the container is empty, floating element should be the first
   if (children.length === 0) {
     return {
       index: 0,
       isProximityBased: true
     };
   }
+  var shadowElIndex = cacheShadowRect(collectionBelowEl);
 
-  var shadowElIndex = cacheShadowRect(collectionBelowEl); // the search could be more efficient but keeping it simple for now
+  // the search could be more efficient but keeping it simple for now
   // a possible improvement: pass in the lastIndex it was found in and check there first, then expand from there
-
   for (var i = 0; i < children.length; i++) {
     if (isCenterOfAInsideB(floatingAboveEl, children[i])) {
       var cachedShadowRect = dzToShadowIndexToRect.has(collectionBelowEl) && dzToShadowIndexToRect.get(collectionBelowEl).get(i);
-
       if (cachedShadowRect) {
         if (!isPointInsideRect(findCenterOfElement(floatingAboveEl), cachedShadowRect)) {
           return {
@@ -659,28 +603,24 @@ function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
           };
         }
       }
-
       return {
         index: i,
         isProximityBased: false
       };
     }
-  } // this can happen if there is space around the children so the floating element has
+  }
+  // this can happen if there is space around the children so the floating element has
   //entered the container but not any of the children, in this case we will find the nearest child
-
-
   var minDistanceSoFar = Number.MAX_VALUE;
-  var indexOfMin = undefined; // we are checking all of them because we don't know whether we are dealing with a horizontal or vertical container and where the floating element entered from
-
+  var indexOfMin = undefined;
+  // we are checking all of them because we don't know whether we are dealing with a horizontal or vertical container and where the floating element entered from
   for (var _i = 0; _i < children.length; _i++) {
     var distance = calcDistanceBetweenCenters(floatingAboveEl, children[_i]);
-
     if (distance < minDistanceSoFar) {
       minDistanceSoFar = distance;
       indexOfMin = _i;
     }
   }
-
   return {
     index: indexOfMin,
     isProximityBased: true
@@ -690,21 +630,18 @@ function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
 var SCROLL_ZONE_PX = 25;
 function makeScroller() {
   var scrollingInfo;
-
   function resetScrolling() {
     scrollingInfo = {
       directionObj: undefined,
       stepPx: 0
     };
   }
-
-  resetScrolling(); // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
-
+  resetScrolling();
+  // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
   function scrollContainer(containerEl) {
     var _scrollingInfo = scrollingInfo,
-        directionObj = _scrollingInfo.directionObj,
-        stepPx = _scrollingInfo.stepPx;
-
+      directionObj = _scrollingInfo.directionObj,
+      stepPx = _scrollingInfo.stepPx;
     if (directionObj) {
       containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
       window.requestAnimationFrame(function () {
@@ -712,33 +649,28 @@ function makeScroller() {
       });
     }
   }
-
   function calcScrollStepPx(distancePx) {
     return SCROLL_ZONE_PX - distancePx;
   }
+
   /**
    * If the pointer is next to the sides of the element to scroll, will trigger scrolling
    * Can be called repeatedly with updated pointer and elementToScroll values without issues
    * @return {boolean} - true if scrolling was needed
    */
-
-
   function scrollIfNeeded(pointer, elementToScroll) {
     if (!elementToScroll) {
       return false;
     }
-
     var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
-
     if (distances === null) {
       resetScrolling();
       return false;
     }
-
     var isAlreadyScrolling = !!scrollingInfo.directionObj;
     var scrollingVertically = false,
-        scrollingHorizontally = false; // vertical
-
+      scrollingHorizontally = false;
+    // vertical
     if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
       if (distances.bottom < SCROLL_ZONE_PX) {
         scrollingVertically = true;
@@ -755,14 +687,12 @@ function makeScroller() {
         };
         scrollingInfo.stepPx = calcScrollStepPx(distances.top);
       }
-
       if (!isAlreadyScrolling && scrollingVertically) {
         scrollContainer(elementToScroll);
         return true;
       }
-    } // horizontal
-
-
+    }
+    // horizontal
     if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
       if (distances.right < SCROLL_ZONE_PX) {
         scrollingHorizontally = true;
@@ -779,17 +709,14 @@ function makeScroller() {
         };
         scrollingInfo.stepPx = calcScrollStepPx(distances.left);
       }
-
       if (!isAlreadyScrolling && scrollingHorizontally) {
         scrollContainer(elementToScroll);
         return true;
       }
     }
-
     resetScrolling();
     return false;
   }
-
   return {
     scrollIfNeeded: scrollIfNeeded,
     resetScrolling: resetScrolling
@@ -803,110 +730,98 @@ function makeScroller() {
 function toString(object) {
   return JSON.stringify(object, null, 2);
 }
+
 /**
  * Finds the depth of the given node in the DOM tree
  * @param {HTMLElement} node
  * @return {number} - the depth of the node
  */
-
 function getDepth(node) {
   if (!node) {
     throw new Error("cannot get depth of a falsy node");
   }
-
   return _getDepth(node, 0);
 }
-
 function _getDepth(node) {
   var countSoFar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
   if (!node.parentElement) {
     return countSoFar - 1;
   }
-
   return _getDepth(node.parentElement, countSoFar + 1);
 }
+
 /**
  * A simple util to shallow compare objects quickly, it doesn't validate the arguments so pass objects in
  * @param {Object} objA
  * @param {Object} objB
  * @return {boolean} - true if objA and objB are shallow equal
  */
-
-
 function areObjectsShallowEqual(objA, objB) {
   if (Object.keys(objA).length !== Object.keys(objB).length) {
     return false;
   }
-
   for (var keyA in objA) {
     if (!{}.hasOwnProperty.call(objB, keyA) || objB[keyA] !== objA[keyA]) {
       return false;
     }
   }
-
   return true;
 }
+
 /**
  * Shallow compares two arrays
  * @param arrA
  * @param arrB
  * @return {boolean} - whether the arrays are shallow equal
  */
-
 function areArraysShallowEqualSameOrder(arrA, arrB) {
   if (arrA.length !== arrB.length) {
     return false;
   }
-
   for (var i = 0; i < arrA.length; i++) {
     if (arrA[i] !== arrB[i]) {
       return false;
     }
   }
-
   return true;
 }
 
 var INTERVAL_MS = 200;
 var TOLERANCE_PX = 10;
-
 var _makeScroller = makeScroller(),
-    scrollIfNeeded = _makeScroller.scrollIfNeeded,
-    resetScrolling = _makeScroller.resetScrolling;
-
+  scrollIfNeeded = _makeScroller.scrollIfNeeded,
+  resetScrolling = _makeScroller.resetScrolling;
 var next;
+
 /**
  * Tracks the dragged elements and performs the side effects when it is dragged over a drop zone (basically dispatching custom-events scrolling)
  * @param {Set<HTMLElement>} dropZones
  * @param {HTMLElement} draggedEl
  * @param {number} [intervalMs = INTERVAL_MS]
  */
-
 function observe(draggedEl, dropZones) {
   var intervalMs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INTERVAL_MS;
   // initialization
   var lastDropZoneFound;
   var lastIndexFound;
   var lastIsDraggedInADropZone = false;
-  var lastCentrePositionOfDragged; // We are sorting to make sure that in case of nested zones of the same type the one "on top" is considered first
-
+  var lastCentrePositionOfDragged;
+  // We are sorting to make sure that in case of nested zones of the same type the one "on top" is considered first
   var dropZonesFromDeepToShallow = Array.from(dropZones).sort(function (dz1, dz2) {
     return getDepth(dz2) - getDepth(dz1);
   });
+
   /**
    * The main function in this module. Tracks where everything is/ should be a take the actions
    */
-
   function andNow() {
     var currentCenterOfDragged = findCenterOfElement(draggedEl);
-    var scrolled = scrollIfNeeded(currentCenterOfDragged, lastDropZoneFound); // we only want to make a new decision after the element was moved a bit to prevent flickering
-
+    var scrolled = scrollIfNeeded(currentCenterOfDragged, lastDropZoneFound);
+    // we only want to make a new decision after the element was moved a bit to prevent flickering
     if (!scrolled && lastCentrePositionOfDragged && Math.abs(lastCentrePositionOfDragged.x - currentCenterOfDragged.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - currentCenterOfDragged.y) < TOLERANCE_PX) {
       next = window.setTimeout(andNow, intervalMs);
       return;
     }
-
     if (isElementOffDocument(draggedEl)) {
       printDebug(function () {
         return "off document";
@@ -914,28 +829,23 @@ function observe(draggedEl, dropZones) {
       dispatchDraggedLeftDocument(draggedEl);
       return;
     }
-
-    lastCentrePositionOfDragged = currentCenterOfDragged; // this is a simple algorithm, potential improvement: first look at lastDropZoneFound
-
+    lastCentrePositionOfDragged = currentCenterOfDragged;
+    // this is a simple algorithm, potential improvement: first look at lastDropZoneFound
     var isDraggedInADropZone = false;
-
     var _iterator = _createForOfIteratorHelper(dropZonesFromDeepToShallow),
-        _step;
-
+      _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var dz = _step.value;
         if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
         var indexObj = findWouldBeIndex(draggedEl, dz);
-
         if (indexObj === null) {
           // it is not inside
           continue;
         }
-
         var index = indexObj.index;
-        isDraggedInADropZone = true; // the element is over a container
-
+        isDraggedInADropZone = true;
+        // the element is over a container
         if (dz !== lastDropZoneFound) {
           lastDropZoneFound && dispatchDraggedElementLeftContainerForAnother(lastDropZoneFound, draggedEl, dz);
           dispatchDraggedElementEnteredContainer(dz, indexObj, draggedEl);
@@ -943,18 +853,16 @@ function observe(draggedEl, dropZones) {
         } else if (index !== lastIndexFound) {
           dispatchDraggedElementIsOverIndex(dz, indexObj, draggedEl);
           lastIndexFound = index;
-        } // we handle looping with the 'continue' statement above
-
-
+        }
+        // we handle looping with the 'continue' statement above
         break;
-      } // the first time the dragged element is not in any dropzone we need to notify the last dropzone it was in
-
+      }
+      // the first time the dragged element is not in any dropzone we need to notify the last dropzone it was in
     } catch (err) {
       _iterator.e(err);
     } finally {
       _iterator.f();
     }
-
     if (!isDraggedInADropZone && lastIsDraggedInADropZone && lastDropZoneFound) {
       dispatchDraggedElementLeftContainerForNone(lastDropZoneFound, draggedEl);
       lastDropZoneFound = undefined;
@@ -963,13 +871,12 @@ function observe(draggedEl, dropZones) {
     } else {
       lastIsDraggedInADropZone = true;
     }
-
     next = window.setTimeout(andNow, intervalMs);
   }
-
   andNow();
-} // assumption - we can only observe one dragged element at a time, this could be changed in the future
+}
 
+// assumption - we can only observe one dragged element at a time, this could be changed in the future
 function unobserve() {
   printDebug(function () {
     return "unobserving";
@@ -981,12 +888,12 @@ function unobserve() {
 
 var INTERVAL_MS$1 = 300;
 var mousePosition;
+
 /**
  * Do not use this! it is visible for testing only until we get over the issue Cypress not triggering the mousemove listeners
  * // TODO - make private (remove export)
  * @param {{clientX: number, clientY: number}} e
  */
-
 function updateMousePosition(e) {
   var c = e.touches ? e.touches[0] : e;
   mousePosition = {
@@ -994,26 +901,21 @@ function updateMousePosition(e) {
     y: c.clientY
   };
 }
-
 var _makeScroller$1 = makeScroller(),
-    scrollIfNeeded$1 = _makeScroller$1.scrollIfNeeded,
-    resetScrolling$1 = _makeScroller$1.resetScrolling;
-
+  scrollIfNeeded$1 = _makeScroller$1.scrollIfNeeded,
+  resetScrolling$1 = _makeScroller$1.resetScrolling;
 var next$1;
-
 function loop() {
   if (mousePosition) {
     var scrolled = scrollIfNeeded$1(mousePosition, document.documentElement);
     if (scrolled) resetIndexesCache();
   }
-
   next$1 = window.setTimeout(loop, INTERVAL_MS$1);
 }
+
 /**
  * will start watching the mouse pointer and scroll the window if it goes next to the edges
  */
-
-
 function armWindowScroller() {
   printDebug(function () {
     return "arming window scroller";
@@ -1022,10 +924,10 @@ function armWindowScroller() {
   window.addEventListener("touchmove", updateMousePosition);
   loop();
 }
+
 /**
  * will stop watching the mouse pointer and won't scroll the window anymore
  */
-
 function disarmWindowScroller() {
   printDebug(function () {
     return "disarming window scroller";
@@ -1051,10 +953,8 @@ function svelteNodeClone(el) {
   var values = [];
   var elIsSelect = el.tagName === "SELECT";
   var selects = elIsSelect ? [el] : _toConsumableArray(el.querySelectorAll('select'));
-
   var _iterator = _createForOfIteratorHelper(selects),
-      _step;
-
+    _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var _select = _step.value;
@@ -1065,33 +965,28 @@ function svelteNodeClone(el) {
   } finally {
     _iterator.f();
   }
-
   if (selects.length <= 0) {
     return cloned;
   }
-
   var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll('select'));
-
   for (var i = 0; i < clonedSelects.length; i++) {
     var select = clonedSelects[i];
     var value = values[i];
     var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
-
     if (optionEl) {
       optionEl.setAttribute('selected', true);
     }
   }
-
   return cloned;
 }
 
 var TRANSITION_DURATION_SECONDS = 0.2;
+
 /**
  * private helper function - creates a transition string for a property
  * @param {string} property
  * @return {string} - the transition string
  */
-
 function trs(property) {
   return "".concat(property, " ").concat(TRANSITION_DURATION_SECONDS, "s ease");
 }
@@ -1101,8 +996,6 @@ function trs(property) {
  * @param {Point} [positionCenterOnXY]
  * @return {Node} - the cloned, styled element
  */
-
-
 function createDraggedElementFrom(originalElement, positionCenterOnXY) {
   var rect = originalElement.getBoundingClientRect();
   var draggedEl = svelteNodeClone(originalElement);
@@ -1113,7 +1006,6 @@ function createDraggedElementFrom(originalElement, positionCenterOnXY) {
   var elLeftPx = rect.left;
   draggedEl.style.top = "".concat(elTopPx, "px");
   draggedEl.style.left = "".concat(elLeftPx, "px");
-
   if (positionCenterOnXY) {
     var center = findCenter(rect);
     elTopPx -= center.y - positionCenterOnXY.y;
@@ -1123,14 +1015,13 @@ function createDraggedElementFrom(originalElement, positionCenterOnXY) {
       draggedEl.style.left = "".concat(elLeftPx, "px");
     }, 0);
   }
-
-  draggedEl.style.margin = "0"; // we can't have relative or automatic height and width or it will break the illusion
-
+  draggedEl.style.margin = "0";
+  // we can't have relative or automatic height and width or it will break the illusion
   draggedEl.style.boxSizing = "border-box";
   draggedEl.style.height = "".concat(rect.height, "px");
   draggedEl.style.width = "".concat(rect.width, "px");
-  draggedEl.style.transition = "".concat(trs("top"), ", ").concat(trs("left"), ", ").concat(trs("background-color"), ", ").concat(trs("opacity"), ", ").concat(trs("color"), " "); // this is a workaround for a strange browser bug that causes the right border to disappear when all the transitions are added at the same time
-
+  draggedEl.style.transition = "".concat(trs("top"), ", ").concat(trs("left"), ", ").concat(trs("background-color"), ", ").concat(trs("opacity"), ", ").concat(trs("color"), " ");
+  // this is a workaround for a strange browser bug that causes the right border to disappear when all the transitions are added at the same time
   window.setTimeout(function () {
     return draggedEl.style.transition += ", ".concat(trs("width"), ", ").concat(trs("height"));
   }, 0);
@@ -1138,29 +1029,28 @@ function createDraggedElementFrom(originalElement, positionCenterOnXY) {
   draggedEl.style.cursor = "grabbing";
   return draggedEl;
 }
+
 /**
  * styles the dragged element to a 'dropped' state
  * @param {HTMLElement} draggedEl
  */
-
 function moveDraggedElementToWasDroppedState(draggedEl) {
   draggedEl.style.cursor = "grab";
 }
+
 /**
  * Morphs the dragged element style, maintains the mouse pointer within the element
  * @param {HTMLElement} draggedEl
  * @param {HTMLElement} copyFromEl - the element the dragged element should look like, typically the shadow element
  * @param {number} currentMouseX
  * @param {number} currentMouseY
- * @param {function} transformDraggedElement - function to transform the dragged element, does nothing by default.
  */
-
-function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX, currentMouseY, transformDraggedElement) {
+function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX, currentMouseY) {
+  copyStylesFromTo(copyFromEl, draggedEl);
   var newRect = copyFromEl.getBoundingClientRect();
   var draggedElRect = draggedEl.getBoundingClientRect();
   var widthChange = newRect.width - draggedElRect.width;
   var heightChange = newRect.height - draggedElRect.height;
-
   if (widthChange || heightChange) {
     var relativeDistanceOfMousePointerFromDraggedSides = {
       left: (currentMouseX - draggedElRect.left) / draggedElRect.width,
@@ -1170,17 +1060,13 @@ function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX, curre
     draggedEl.style.width = "".concat(newRect.width, "px");
     draggedEl.style.left = "".concat(parseFloat(draggedEl.style.left) - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange, "px");
     draggedEl.style.top = "".concat(parseFloat(draggedEl.style.top) - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange, "px");
-  } /// other properties
-
-
-  copyStylesFromTo(copyFromEl, draggedEl);
-  transformDraggedElement();
+  }
 }
+
 /**
  * @param {HTMLElement} copyFromEl
  * @param {HTMLElement} copyToEl
  */
-
 function copyStylesFromTo(copyFromEl, copyToEl) {
   var computedStyle = window.getComputedStyle(copyFromEl);
   Array.from(computedStyle).filter(function (s) {
@@ -1189,20 +1075,17 @@ function copyStylesFromTo(copyFromEl, copyToEl) {
     return copyToEl.style.setProperty(s, computedStyle.getPropertyValue(s), computedStyle.getPropertyPriority(s));
   });
 }
+
 /**
  * makes the element compatible with being draggable
  * @param {HTMLElement} draggableEl
  * @param {boolean} dragDisabled
  */
-
-
 function styleDraggable(draggableEl, dragDisabled) {
   draggableEl.draggable = false;
-
   draggableEl.ondragstart = function () {
     return false;
   };
-
   if (!dragDisabled) {
     draggableEl.style.userSelect = "none";
     draggableEl.style.WebkitUserSelect = "none";
@@ -1213,41 +1096,41 @@ function styleDraggable(draggableEl, dragDisabled) {
     draggableEl.style.cursor = "";
   }
 }
+
 /**
  * Hides the provided element so that it can stay in the dom without interrupting
  * @param {HTMLElement} dragTarget
  */
-
 function hideElement(dragTarget) {
   dragTarget.style.display = "none";
   dragTarget.style.position = "fixed";
   dragTarget.style.zIndex = "-5";
 }
+
 /**
  * styles the shadow element
  * @param {HTMLElement} shadowEl
  */
-
 function decorateShadowEl(shadowEl) {
   shadowEl.style.visibility = "hidden";
   shadowEl.setAttribute(SHADOW_ELEMENT_ATTRIBUTE_NAME, "true");
 }
+
 /**
  * undo the styles the shadow element
  * @param {HTMLElement} shadowEl
  */
-
 function unDecorateShadowElement(shadowEl) {
   shadowEl.style.visibility = "";
   shadowEl.removeAttribute(SHADOW_ELEMENT_ATTRIBUTE_NAME);
 }
+
 /**
  * will mark the given dropzones as visually active
  * @param {Array<HTMLElement>} dropZones
  * @param {Function} getStyles - maps a dropzone to a styles object (so the styles can be removed)
  * @param {Function} getClasses - maps a dropzone to a classList
  */
-
 function styleActiveDropZones(dropZones) {
   var getStyles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
   var getClasses = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
@@ -1263,13 +1146,13 @@ function styleActiveDropZones(dropZones) {
     });
   });
 }
+
 /**
  * will remove the 'active' styling from given dropzones
  * @param {Array<HTMLElement>} dropZones
  * @param {Function} getStyles - maps a dropzone to a styles object
  * @param {Function} getClasses - maps a dropzone to a classList
  */
-
 function styleInactiveDropZones(dropZones) {
   var getStyles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
   var getClasses = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
@@ -1285,12 +1168,12 @@ function styleInactiveDropZones(dropZones) {
     });
   });
 }
+
 /**
  * will prevent the provided element from shrinking by setting its minWidth and minHeight to the current width and height values
  * @param {HTMLElement} el
  * @return {function(): void} - run this function to undo the operation and restore the original values
  */
-
 function preventShrinking(el) {
   var originalMinHeight = el.style.minHeight;
   el.style.minHeight = window.getComputedStyle(el).getPropertyValue("height");
@@ -1322,51 +1205,45 @@ var isWorkingOnPreviousDrag = false;
 var finalizingPreviousDrag = false;
 var unlockOriginDzMinDimensions;
 var isDraggedOutsideOfAnyDz = false;
-var scheduledForRemovalAfterDrop = []; // a map from type to a set of drop-zones
-
-var typeToDropZones = new Map(); // important - this is needed because otherwise the config that would be used for everyone is the config of the element that created the event listeners
-
-var dzToConfig = new Map(); // this is needed in order to be able to cleanup old listeners and avoid stale closures issues (as the listener is defined within each zone)
+var scheduledForRemovalAfterDrop = [];
 
+// a map from type to a set of drop-zones
+var typeToDropZones = new Map();
+// important - this is needed because otherwise the config that would be used for everyone is the config of the element that created the event listeners
+var dzToConfig = new Map();
+// this is needed in order to be able to cleanup old listeners and avoid stale closures issues (as the listener is defined within each zone)
 var elToMouseDownListener = new WeakMap();
-/* drop-zones registration management */
 
+/* drop-zones registration management */
 function registerDropZone(dropZoneEl, type) {
   printDebug(function () {
     return "registering drop-zone if absent";
   });
-
   if (!typeToDropZones.has(type)) {
     typeToDropZones.set(type, new Set());
   }
-
   if (!typeToDropZones.get(type).has(dropZoneEl)) {
     typeToDropZones.get(type).add(dropZoneEl);
     incrementActiveDropZoneCount();
   }
 }
-
 function unregisterDropZone(dropZoneEl, type) {
   typeToDropZones.get(type)["delete"](dropZoneEl);
   decrementActiveDropZoneCount();
-
   if (typeToDropZones.get(type).size === 0) {
     typeToDropZones["delete"](type);
   }
 }
-/* functions to manage observing the dragged element and trigger custom drag-events */
-
 
+/* functions to manage observing the dragged element and trigger custom drag-events */
 function watchDraggedElement() {
   printDebug(function () {
     return "watching dragged element";
   });
   armWindowScroller();
   var dropZones = typeToDropZones.get(draggedElType);
-
   var _iterator = _createForOfIteratorHelper(dropZones),
-      _step;
-
+    _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var dz = _step.value;
@@ -1379,25 +1256,21 @@ function watchDraggedElement() {
   } finally {
     _iterator.f();
   }
-
-  window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop); // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
-
+  window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
+  // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
   var observationIntervalMs = Math.max.apply(Math, [MIN_OBSERVATION_INTERVAL_MS].concat(_toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
     return dzToConfig.get(dz).dropAnimationDurationMs;
   }))));
   observe(draggedEl, dropZones, observationIntervalMs * 1.07);
 }
-
 function unWatchDraggedElement() {
   printDebug(function () {
     return "unwatching dragged element";
   });
   disarmWindowScroller();
   var dropZones = typeToDropZones.get(draggedElType);
-
   var _iterator2 = _createForOfIteratorHelper(dropZones),
-      _step2;
-
+    _step2;
   try {
     for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
       var dz = _step2.value;
@@ -1410,52 +1283,45 @@ function unWatchDraggedElement() {
   } finally {
     _iterator2.f();
   }
-
   window.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
   unobserve();
-} // finds the initial placeholder that is placed there on drag start
-
+}
 
+// finds the initial placeholder that is placed there on drag start
 function findShadowPlaceHolderIdx(items) {
   return items.findIndex(function (item) {
     return item[ITEM_ID_KEY] === SHADOW_PLACEHOLDER_ITEM_ID;
   });
 }
-
 function findShadowElementIdx(items) {
   // checking that the id is not the placeholder's for Dragula like usecases
   return items.findIndex(function (item) {
     return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item[ITEM_ID_KEY] !== SHADOW_PLACEHOLDER_ITEM_ID;
   });
 }
-/* custom drag-events handlers */
-
 
+/* custom drag-events handlers */
 function handleDraggedEntered(e) {
   printDebug(function () {
     return ["dragged entered", e.currentTarget, e.detail];
   });
-
   var _dzToConfig$get = dzToConfig.get(e.currentTarget),
-      items = _dzToConfig$get.items,
-      dropFromOthersDisabled = _dzToConfig$get.dropFromOthersDisabled;
-
+    items = _dzToConfig$get.items,
+    dropFromOthersDisabled = _dzToConfig$get.dropFromOthersDisabled;
   if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
     printDebug(function () {
       return "ignoring dragged entered because drop is currently disabled";
     });
     return;
   }
-
-  isDraggedOutsideOfAnyDz = false; // this deals with another race condition. in rare occasions (super rapid operations) the list hasn't updated yet
-
+  isDraggedOutsideOfAnyDz = false;
+  // this deals with another race condition. in rare occasions (super rapid operations) the list hasn't updated yet
   items = items.filter(function (item) {
     return item[ITEM_ID_KEY] !== shadowElData[ITEM_ID_KEY];
   });
   printDebug(function () {
     return "dragged entered items ".concat(toString(items));
   });
-
   if (originDropZone !== e.currentTarget) {
     var originZoneItems = dzToConfig.get(originDropZone).items;
     var newOriginZoneItems = originZoneItems.filter(function (item) {
@@ -1468,7 +1334,6 @@ function handleDraggedEntered(e) {
     });
   } else {
     var shadowPlaceHolderIdx = findShadowPlaceHolderIdx(items);
-
     if (shadowPlaceHolderIdx !== -1) {
       // only happens right after drag start, on the first drag entered event
       printDebug(function () {
@@ -1477,10 +1342,9 @@ function handleDraggedEntered(e) {
       items.splice(shadowPlaceHolderIdx, 1);
     }
   }
-
   var _e$detail$indexObj = e.detail.indexObj,
-      index = _e$detail$indexObj.index,
-      isProximityBased = _e$detail$indexObj.isProximityBased;
+    index = _e$detail$indexObj.index,
+    isProximityBased = _e$detail$indexObj.isProximityBased;
   var shadowElIdx = isProximityBased && index === e.currentTarget.children.length - 1 ? index + 1 : index;
   shadowElDropZone = e.currentTarget;
   items.splice(shadowElIdx, 0, shadowElData);
@@ -1490,32 +1354,27 @@ function handleDraggedEntered(e) {
     source: SOURCES.POINTER
   });
 }
-
 function handleDraggedLeft(e) {
   // dealing with a rare race condition on extremely rapid clicking and dropping
   if (!isWorkingOnPreviousDrag) return;
   printDebug(function () {
     return ["dragged left", e.currentTarget, e.detail];
   });
-
   var _dzToConfig$get2 = dzToConfig.get(e.currentTarget),
-      items = _dzToConfig$get2.items,
-      dropFromOthersDisabled = _dzToConfig$get2.dropFromOthersDisabled;
-
+    items = _dzToConfig$get2.items,
+    dropFromOthersDisabled = _dzToConfig$get2.dropFromOthersDisabled;
   if (dropFromOthersDisabled && e.currentTarget !== originDropZone && e.currentTarget !== shadowElDropZone) {
     printDebug(function () {
       return "drop is currently disabled";
     });
     return;
   }
-
   var shadowElIdx = findShadowElementIdx(items);
   var shadowItem = items.splice(shadowElIdx, 1)[0];
   shadowElDropZone = undefined;
   var _e$detail = e.detail,
-      type = _e$detail.type,
-      theOtherDz = _e$detail.theOtherDz;
-
+    type = _e$detail.type,
+    theOtherDz = _e$detail.theOtherDz;
   if (type === DRAGGED_LEFT_TYPES.OUTSIDE_OF_ANY || type === DRAGGED_LEFT_TYPES.LEFT_FOR_ANOTHER && theOtherDz !== originDropZone && dzToConfig.get(theOtherDz).dropFromOthersDisabled) {
     printDebug(function () {
       return "dragged left all, putting shadow element back in the origin dz";
@@ -1529,32 +1388,27 @@ function handleDraggedLeft(e) {
       id: draggedElData[ITEM_ID_KEY],
       source: SOURCES.POINTER
     });
-  } // for the origin dz, when the dragged is outside of any, this will be fired in addition to the previous. this is for simplicity
-
-
+  }
+  // for the origin dz, when the dragged is outside of any, this will be fired in addition to the previous. this is for simplicity
   dispatchConsiderEvent(e.currentTarget, items, {
     trigger: TRIGGERS.DRAGGED_LEFT,
     id: draggedElData[ITEM_ID_KEY],
     source: SOURCES.POINTER
   });
 }
-
 function handleDraggedIsOverIndex(e) {
   printDebug(function () {
     return ["dragged is over index", e.currentTarget, e.detail];
   });
-
   var _dzToConfig$get3 = dzToConfig.get(e.currentTarget),
-      items = _dzToConfig$get3.items,
-      dropFromOthersDisabled = _dzToConfig$get3.dropFromOthersDisabled;
-
+    items = _dzToConfig$get3.items,
+    dropFromOthersDisabled = _dzToConfig$get3.dropFromOthersDisabled;
   if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
     printDebug(function () {
       return "drop is currently disabled";
     });
     return;
   }
-
   isDraggedOutsideOfAnyDz = false;
   var index = e.detail.indexObj.index;
   var shadowElIdx = findShadowElementIdx(items);
@@ -1565,9 +1419,9 @@ function handleDraggedIsOverIndex(e) {
     id: draggedElData[ITEM_ID_KEY],
     source: SOURCES.POINTER
   });
-} // Global mouse/touch-events handlers
-
+}
 
+// Global mouse/touch-events handlers
 function handleMouseMove(e) {
   e.preventDefault();
   var c = e.touches ? e.touches[0] : e;
@@ -1577,47 +1431,41 @@ function handleMouseMove(e) {
   };
   draggedEl.style.transform = "translate3d(".concat(currentMousePosition.x - dragStartMousePosition.x, "px, ").concat(currentMousePosition.y - dragStartMousePosition.y, "px, 0)");
 }
-
 function handleDrop() {
   printDebug(function () {
     return "dropped";
   });
-  finalizingPreviousDrag = true; // cleanup
-
+  finalizingPreviousDrag = true;
+  // cleanup
   window.removeEventListener("mousemove", handleMouseMove);
   window.removeEventListener("touchmove", handleMouseMove);
   window.removeEventListener("mouseup", handleDrop);
   window.removeEventListener("touchend", handleDrop);
   unWatchDraggedElement();
   moveDraggedElementToWasDroppedState(draggedEl);
-
   if (!shadowElDropZone) {
     printDebug(function () {
       return "element was dropped right after it left origin but before entering somewhere else";
     });
     shadowElDropZone = originDropZone;
   }
-
   printDebug(function () {
     return ["dropped in dz", shadowElDropZone];
   });
-
   var _dzToConfig$get4 = dzToConfig.get(shadowElDropZone),
-      items = _dzToConfig$get4.items,
-      type = _dzToConfig$get4.type;
-
+    items = _dzToConfig$get4.items,
+    type = _dzToConfig$get4.type;
   styleInactiveDropZones(typeToDropZones.get(type), function (dz) {
     return dzToConfig.get(dz).dropTargetStyle;
   }, function (dz) {
     return dzToConfig.get(dz).dropTargetClasses;
   });
-  var shadowElIdx = findShadowElementIdx(items); // the handler might remove the shadow element, ex: dragula like copy on drag
-
+  var shadowElIdx = findShadowElementIdx(items);
+  // the handler might remove the shadow element, ex: dragula like copy on drag
   if (shadowElIdx === -1) shadowElIdx = originIndex;
   items = items.map(function (item) {
     return item[SHADOW_ITEM_MARKER_PROPERTY_NAME] ? draggedElData : item;
   });
-
   function finalizeWithinZone() {
     unlockOriginDzMinDimensions();
     dispatchFinalizeEvent(shadowElDropZone, items, {
@@ -1625,7 +1473,6 @@ function handleDrop() {
       id: draggedElData[ITEM_ID_KEY],
       source: SOURCES.POINTER
     });
-
     if (shadowElDropZone !== originDropZone) {
       // letting the origin drop zone know the element was permanently taken away
       dispatchFinalizeEvent(originDropZone, dzToConfig.get(originDropZone).items, {
@@ -1634,31 +1481,26 @@ function handleDrop() {
         source: SOURCES.POINTER
       });
     }
-
     unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
     cleanupPostDrop();
   }
-
   animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
-} // helper function for handleDrop
-
+}
 
+// helper function for handleDrop
 function animateDraggedToFinalPosition(shadowElIdx, callback) {
   var shadowElRect = getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]);
   var newTransform = {
     x: shadowElRect.left - parseFloat(draggedEl.style.left),
     y: shadowElRect.top - parseFloat(draggedEl.style.top)
   };
-
   var _dzToConfig$get5 = dzToConfig.get(shadowElDropZone),
-      dropAnimationDurationMs = _dzToConfig$get5.dropAnimationDurationMs;
-
+    dropAnimationDurationMs = _dzToConfig$get5.dropAnimationDurationMs;
   var transition = "transform ".concat(dropAnimationDurationMs, "ms ease");
   draggedEl.style.transition = draggedEl.style.transition ? draggedEl.style.transition + "," + transition : transition;
   draggedEl.style.transform = "translate3d(".concat(newTransform.x, "px, ").concat(newTransform.y, "px, 0)");
   window.setTimeout(callback, dropAnimationDurationMs);
 }
-
 function scheduleDZForRemovalAfterDrop(dz, destroy) {
   scheduledForRemovalAfterDrop.push({
     dz: dz,
@@ -1670,25 +1512,21 @@ function scheduleDZForRemovalAfterDrop(dz, destroy) {
   });
 }
 /* cleanup */
-
-
 function cleanupPostDrop() {
   draggedEl.remove();
   originalDragTarget.remove();
-
   if (scheduledForRemovalAfterDrop.length) {
     printDebug(function () {
       return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
     });
     scheduledForRemovalAfterDrop.forEach(function (_ref) {
       var dz = _ref.dz,
-          destroy = _ref.destroy;
+        destroy = _ref.destroy;
       destroy();
       dz.remove();
     });
     scheduledForRemovalAfterDrop = [];
   }
-
   draggedEl = undefined;
   originalDragTarget = undefined;
   draggedElData = undefined;
@@ -1704,7 +1542,6 @@ function cleanupPostDrop() {
   unlockOriginDzMinDimensions = undefined;
   isDraggedOutsideOfAnyDz = false;
 }
-
 function dndzone(node, options) {
   var initialized = false;
   var config = {
@@ -1725,7 +1562,6 @@ function dndzone(node, options) {
     }];
   });
   var elToIdx = new Map();
-
   function addMaybeListeners() {
     window.addEventListener("mousemove", handleMouseMoveMaybeDragStart, {
       passive: false
@@ -1741,21 +1577,18 @@ function dndzone(node, options) {
       passive: false
     });
   }
-
   function removeMaybeListeners() {
     window.removeEventListener("mousemove", handleMouseMoveMaybeDragStart);
     window.removeEventListener("touchmove", handleMouseMoveMaybeDragStart);
     window.removeEventListener("mouseup", handleFalseAlarm);
     window.removeEventListener("touchend", handleFalseAlarm);
   }
-
   function handleFalseAlarm() {
     removeMaybeListeners();
     originalDragTarget = undefined;
     dragStartMousePosition = undefined;
     currentMousePosition = undefined;
   }
-
   function handleMouseMoveMaybeDragStart(e) {
     e.preventDefault();
     var c = e.touches ? e.touches[0] : e;
@@ -1763,13 +1596,11 @@ function dndzone(node, options) {
       x: c.clientX,
       y: c.clientY
     };
-
     if (Math.abs(currentMousePosition.x - dragStartMousePosition.x) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX || Math.abs(currentMousePosition.y - dragStartMousePosition.y) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX) {
       removeMaybeListeners();
       handleDragStart();
     }
   }
-
   function handleMouseDown(e) {
     // on safari clicking on a select element doesn't fire mouseup at the end of the click and in general this makes more sense
     if (e.target !== e.currentTarget && (e.target.value !== undefined || e.target.isContentEditable)) {
@@ -1777,23 +1608,20 @@ function dndzone(node, options) {
         return "won't initiate drag on a nested input element";
       });
       return;
-    } // prevents responding to any button but left click which equals 0 (which is falsy)
-
-
+    }
+    // prevents responding to any button but left click which equals 0 (which is falsy)
     if (e.button) {
       printDebug(function () {
         return "ignoring none left click button: ".concat(e.button);
       });
       return;
     }
-
     if (isWorkingOnPreviousDrag) {
       printDebug(function () {
         return "cannot start a new drag before finalizing previous one";
       });
       return;
     }
-
     e.stopPropagation();
     var c = e.touches ? e.touches[0] : e;
     dragStartMousePosition = {
@@ -1804,36 +1632,35 @@ function dndzone(node, options) {
     originalDragTarget = e.currentTarget;
     addMaybeListeners();
   }
-
   function handleDragStart() {
     printDebug(function () {
       return ["drag start config: ".concat(toString(config)), originalDragTarget];
     });
-    isWorkingOnPreviousDrag = true; // initialising globals
+    isWorkingOnPreviousDrag = true;
 
+    // initialising globals
     var currentIdx = elToIdx.get(originalDragTarget);
     originIndex = currentIdx;
     originDropZone = originalDragTarget.parentElement;
     /** @type {ShadowRoot | HTMLDocument} */
-
     var rootNode = originDropZone.getRootNode();
     var originDropZoneRoot = rootNode.body || rootNode;
     var items = config.items,
-        type = config.type,
-        centreDraggedOnCursor = config.centreDraggedOnCursor;
+      type = config.type,
+      centreDraggedOnCursor = config.centreDraggedOnCursor;
     draggedElData = _objectSpread2({}, items[currentIdx]);
     draggedElType = type;
-    shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, _defineProperty({}, SHADOW_ITEM_MARKER_PROPERTY_NAME, true)); // The initial shadow element. We need a different id at first in order to avoid conflicts and timing issues
-
-    var placeHolderElData = _objectSpread2(_objectSpread2({}, shadowElData), {}, _defineProperty({}, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID)); // creating the draggable element
-
-
-    draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition); // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
+    shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, _defineProperty({}, SHADOW_ITEM_MARKER_PROPERTY_NAME, true));
+    // The initial shadow element. We need a different id at first in order to avoid conflicts and timing issues
+    var placeHolderElData = _objectSpread2(_objectSpread2({}, shadowElData), {}, _defineProperty({}, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID));
 
+    // creating the draggable element
+    draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
+    // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
     function keepOriginalElementInDom() {
       if (!draggedEl.parentElement) {
-        originDropZoneRoot.appendChild(draggedEl); // to prevent the outline from disappearing
-
+        originDropZoneRoot.appendChild(draggedEl);
+        // to prevent the outline from disappearing
         draggedEl.focus();
         watchDraggedElement();
         hideElement(originalDragTarget);
@@ -1842,7 +1669,6 @@ function dndzone(node, options) {
         window.requestAnimationFrame(keepOriginalElementInDom);
       }
     }
-
     window.requestAnimationFrame(keepOriginalElementInDom);
     styleActiveDropZones(Array.from(typeToDropZones.get(config.type)).filter(function (dz) {
       return dz === originDropZone || !dzToConfig.get(dz).dropFromOthersDisabled;
@@ -1850,16 +1676,18 @@ function dndzone(node, options) {
       return dzToConfig.get(dz).dropTargetStyle;
     }, function (dz) {
       return dzToConfig.get(dz).dropTargetClasses;
-    }); // removing the original element by removing its data entry
+    });
 
+    // removing the original element by removing its data entry
     items.splice(currentIdx, 1, placeHolderElData);
     unlockOriginDzMinDimensions = preventShrinking(originDropZone);
     dispatchConsiderEvent(originDropZone, items, {
       trigger: TRIGGERS.DRAG_STARTED,
       id: draggedElData[ITEM_ID_KEY],
       source: SOURCES.POINTER
-    }); // handing over to global handlers - starting to watch the element
+    });
 
+    // handing over to global handlers - starting to watch the element
     window.addEventListener("mousemove", handleMouseMove, {
       passive: false
     });
@@ -1874,42 +1702,40 @@ function dndzone(node, options) {
       passive: false
     });
   }
-
   function configure(_ref2) {
     var _ref2$items = _ref2.items,
-        items = _ref2$items === void 0 ? undefined : _ref2$items,
-        _ref2$flipDurationMs = _ref2.flipDurationMs,
-        dropAnimationDurationMs = _ref2$flipDurationMs === void 0 ? 0 : _ref2$flipDurationMs,
-        _ref2$type = _ref2.type,
-        newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref2$type,
-        _ref2$dragDisabled = _ref2.dragDisabled,
-        dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
-        _ref2$morphDisabled = _ref2.morphDisabled,
-        morphDisabled = _ref2$morphDisabled === void 0 ? false : _ref2$morphDisabled,
-        _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
-        dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
-        _ref2$dropTargetStyle = _ref2.dropTargetStyle,
-        dropTargetStyle = _ref2$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref2$dropTargetStyle,
-        _ref2$dropTargetClass = _ref2.dropTargetClasses,
-        dropTargetClasses = _ref2$dropTargetClass === void 0 ? [] : _ref2$dropTargetClass,
-        _ref2$transformDragge = _ref2.transformDraggedElement,
-        transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
-        _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
-        centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn;
+      items = _ref2$items === void 0 ? undefined : _ref2$items,
+      _ref2$flipDurationMs = _ref2.flipDurationMs,
+      dropAnimationDurationMs = _ref2$flipDurationMs === void 0 ? 0 : _ref2$flipDurationMs,
+      _ref2$type = _ref2.type,
+      newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref2$type,
+      _ref2$dragDisabled = _ref2.dragDisabled,
+      dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
+      _ref2$morphDisabled = _ref2.morphDisabled,
+      morphDisabled = _ref2$morphDisabled === void 0 ? false : _ref2$morphDisabled,
+      _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
+      dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
+      _ref2$dropTargetStyle = _ref2.dropTargetStyle,
+      dropTargetStyle = _ref2$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref2$dropTargetStyle,
+      _ref2$dropTargetClass = _ref2.dropTargetClasses,
+      dropTargetClasses = _ref2$dropTargetClass === void 0 ? [] : _ref2$dropTargetClass,
+      _ref2$transformDragge = _ref2.transformDraggedElement,
+      transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
+      _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
+      centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn;
     config.dropAnimationDurationMs = dropAnimationDurationMs;
-
     if (config.type && newType !== config.type) {
       unregisterDropZone(node, config.type);
     }
-
     config.type = newType;
     registerDropZone(node, newType);
     config.items = _toConsumableArray(items);
     config.dragDisabled = dragDisabled;
     config.morphDisabled = morphDisabled;
     config.transformDraggedElement = transformDraggedElement;
-    config.centreDraggedOnCursor = centreDraggedOnCursor; // realtime update for dropTargetStyle
+    config.centreDraggedOnCursor = centreDraggedOnCursor;
 
+    // realtime update for dropTargetStyle
     if (initialized && isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
       styleInactiveDropZones([node], function () {
         return config.dropTargetStyle;
@@ -1922,14 +1748,13 @@ function dndzone(node, options) {
         return dropTargetClasses;
       });
     }
-
     config.dropTargetStyle = dropTargetStyle;
-    config.dropTargetClasses = _toConsumableArray(dropTargetClasses); // realtime update for dropFromOthersDisabled
+    config.dropTargetClasses = _toConsumableArray(dropTargetClasses);
 
+    // realtime update for dropFromOthersDisabled
     function getConfigProp(dz, propName) {
       return dzToConfig.get(dz) ? dzToConfig.get(dz)[propName] : config[propName];
     }
-
     if (initialized && isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
       if (dropFromOthersDisabled) {
         styleInactiveDropZones([node], function (dz) {
@@ -1945,50 +1770,34 @@ function dndzone(node, options) {
         });
       }
     }
-
     config.dropFromOthersDisabled = dropFromOthersDisabled;
     dzToConfig.set(node, config);
     var shadowElIdx = findShadowElementIdx(config.items);
-
-    var _loop = function _loop(idx) {
+    for (var idx = 0; idx < node.children.length; idx++) {
       var draggableEl = node.children[idx];
       styleDraggable(draggableEl, dragDisabled);
-
       if (idx === shadowElIdx) {
+        config.transformDraggedElement(draggedEl, draggedElData, idx);
         if (!morphDisabled) {
-          morphDraggedElementToBeLike(draggedEl, draggableEl, currentMousePosition.x, currentMousePosition.y, function () {
-            return config.transformDraggedElement(draggedEl, draggedElData, idx);
-          });
+          morphDraggedElementToBeLike(draggedEl, draggableEl, currentMousePosition.x, currentMousePosition.y);
         }
-
         decorateShadowEl(draggableEl);
-        return "continue";
+        continue;
       }
-
       draggableEl.removeEventListener("mousedown", elToMouseDownListener.get(draggableEl));
       draggableEl.removeEventListener("touchstart", elToMouseDownListener.get(draggableEl));
-
       if (!dragDisabled) {
         draggableEl.addEventListener("mousedown", handleMouseDown);
         draggableEl.addEventListener("touchstart", handleMouseDown);
         elToMouseDownListener.set(draggableEl, handleMouseDown);
-      } // updating the idx
-
-
+      }
+      // updating the idx
       elToIdx.set(draggableEl, idx);
-
       if (!initialized) {
         initialized = true;
       }
-    };
-
-    for (var idx = 0; idx < node.children.length; idx++) {
-      var _ret = _loop(idx);
-
-      if (_ret === "continue") continue;
     }
   }
-
   configure(options);
   return {
     update: function update(newOptions) {
@@ -2005,7 +1814,6 @@ function dndzone(node, options) {
         unregisterDropZone(node, dzToConfig.get(node).type);
         dzToConfig["delete"](node);
       }
-
       if (isWorkingOnPreviousDrag) {
         printDebug(function () {
           return "pointer dndzone will be scheduled for destruction";
@@ -2026,20 +1834,17 @@ var INSTRUCTION_IDs = {
 var ID_TO_INSTRUCTION = (_ID_TO_INSTRUCTION = {}, _defineProperty(_ID_TO_INSTRUCTION, INSTRUCTION_IDs.DND_ZONE_ACTIVE, "Tab to one the items and press space-bar or enter to start dragging it"), _defineProperty(_ID_TO_INSTRUCTION, INSTRUCTION_IDs.DND_ZONE_DRAG_DISABLED, "This is a disabled drag and drop list"), _ID_TO_INSTRUCTION);
 var ALERT_DIV_ID = "dnd-action-aria-alert";
 var alertsDiv;
-
 function initAriaOnBrowser() {
   if (alertsDiv) {
     // it is already initialized
     return;
-  } // setting the dynamic alerts
-
-
+  }
+  // setting the dynamic alerts
   alertsDiv = document.createElement("div");
-
   (function initAlertsDiv() {
-    alertsDiv.id = ALERT_DIV_ID; // tab index -1 makes the alert be read twice on chrome for some reason
+    alertsDiv.id = ALERT_DIV_ID;
+    // tab index -1 makes the alert be read twice on chrome for some reason
     //alertsDiv.tabIndex = -1;
-
     alertsDiv.style.position = "fixed";
     alertsDiv.style.bottom = "0";
     alertsDiv.style.left = "0";
@@ -2049,49 +1854,43 @@ function initAriaOnBrowser() {
     alertsDiv.style.width = "0";
     alertsDiv.setAttribute("role", "alert");
   })();
+  document.body.prepend(alertsDiv);
 
-  document.body.prepend(alertsDiv); // setting the instructions
-
+  // setting the instructions
   Object.entries(ID_TO_INSTRUCTION).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
-        id = _ref2[0],
-        txt = _ref2[1];
-
+      id = _ref2[0],
+      txt = _ref2[1];
     return document.body.prepend(instructionToHiddenDiv(id, txt));
   });
 }
+
 /**
  * Initializes the static aria instructions so they can be attached to zones
  * @return {{DND_ZONE_ACTIVE: string, DND_ZONE_DRAG_DISABLED: string} | null} - the IDs for static aria instruction (to be used via aria-describedby) or null on the server
  */
-
-
 function initAria() {
   if (isOnServer) return null;
-
   if (document.readyState === "complete") {
     initAriaOnBrowser();
   } else {
     window.addEventListener("DOMContentLoaded", initAriaOnBrowser);
   }
-
   return _objectSpread2({}, INSTRUCTION_IDs);
 }
+
 /**
  * Removes all the artifacts (dom elements) added by this module
  */
-
 function destroyAria() {
   if (isOnServer || !alertsDiv) return;
   Object.keys(ID_TO_INSTRUCTION).forEach(function (id) {
     var _document$getElementB;
-
     return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
   });
   alertsDiv.remove();
   alertsDiv = undefined;
 }
-
 function instructionToHiddenDiv(id, txt) {
   var div = document.createElement("div");
   div.id = id;
@@ -2101,23 +1900,20 @@ function instructionToHiddenDiv(id, txt) {
   div.style.zIndex = "-5";
   return div;
 }
+
 /**
  * Will make the screen reader alert the provided text to the user
  * @param {string} txt
  */
-
-
 function alertToScreenReader(txt) {
   if (isOnServer) return;
-
   if (!alertsDiv) {
     initAriaOnBrowser();
   }
-
   alertsDiv.innerHTML = "";
   var alertText = document.createTextNode(txt);
-  alertsDiv.appendChild(alertText); // this is needed for Safari
-
+  alertsDiv.appendChild(alertText);
+  // this is needed for Safari
   alertsDiv.style.display = "none";
   alertsDiv.style.display = "inline";
 }
@@ -2139,19 +1935,19 @@ var elToFocusListeners = new WeakMap();
 var dzToHandles = new Map();
 var dzToConfig$1 = new Map();
 var typeToDropZones$1 = new Map();
+
 /* TODO (potentially)
  * what's the deal with the black border of voice-reader not following focus?
  * maybe keep focus on the last dragged item upon drop?
  */
 
 var INSTRUCTION_IDs$1;
-/* drop-zones registration management */
 
+/* drop-zones registration management */
 function registerDropZone$1(dropZoneEl, type) {
   printDebug(function () {
     return "registering drop-zone if absent";
   });
-
   if (typeToDropZones$1.size === 0) {
     printDebug(function () {
       return "adding global keydown and click handlers";
@@ -2160,33 +1956,26 @@ function registerDropZone$1(dropZoneEl, type) {
     window.addEventListener("keydown", globalKeyDownHandler);
     window.addEventListener("click", globalClickHandler);
   }
-
   if (!typeToDropZones$1.has(type)) {
     typeToDropZones$1.set(type, new Set());
   }
-
   if (!typeToDropZones$1.get(type).has(dropZoneEl)) {
     typeToDropZones$1.get(type).add(dropZoneEl);
     incrementActiveDropZoneCount();
   }
 }
-
 function unregisterDropZone$1(dropZoneEl, type) {
   printDebug(function () {
     return "unregistering drop-zone";
   });
-
   if (focusedDz === dropZoneEl) {
     handleDrop$1();
   }
-
   typeToDropZones$1.get(type)["delete"](dropZoneEl);
   decrementActiveDropZoneCount();
-
   if (typeToDropZones$1.get(type).size === 0) {
     typeToDropZones$1["delete"](type);
   }
-
   if (typeToDropZones$1.size === 0) {
     printDebug(function () {
       return "removing global keydown and click handlers";
@@ -2197,10 +1986,8 @@ function unregisterDropZone$1(dropZoneEl, type) {
     destroyAria();
   }
 }
-
 function globalKeyDownHandler(e) {
   if (!isDragging) return;
-
   switch (e.key) {
     case "Escape":
       {
@@ -2209,10 +1996,8 @@ function globalKeyDownHandler(e) {
       }
   }
 }
-
 function globalClickHandler() {
   if (!isDragging) return;
-
   if (!allDragTargets.has(document.activeElement)) {
     printDebug(function () {
       return "clicked outside of any draggable";
@@ -2220,7 +2005,6 @@ function globalClickHandler() {
     handleDrop$1();
   }
 }
-
 function handleZoneFocus(e) {
   printDebug(function () {
     return "zone focus";
@@ -2229,34 +2013,27 @@ function handleZoneFocus(e) {
   var newlyFocusedDz = e.currentTarget;
   if (newlyFocusedDz === focusedDz) return;
   focusedDzLabel = newlyFocusedDz.getAttribute("aria-label") || "";
-
   var _dzToConfig$get = dzToConfig$1.get(focusedDz),
-      originItems = _dzToConfig$get.items;
-
+    originItems = _dzToConfig$get.items;
   var originItem = originItems.find(function (item) {
     return item[ITEM_ID_KEY] === focusedItemId;
   });
   var originIdx = originItems.indexOf(originItem);
   var itemToMove = originItems.splice(originIdx, 1)[0];
-
   var _dzToConfig$get2 = dzToConfig$1.get(newlyFocusedDz),
-      targetItems = _dzToConfig$get2.items,
-      autoAriaDisabled = _dzToConfig$get2.autoAriaDisabled;
-
+    targetItems = _dzToConfig$get2.items,
+    autoAriaDisabled = _dzToConfig$get2.autoAriaDisabled;
   if (newlyFocusedDz.getBoundingClientRect().top < focusedDz.getBoundingClientRect().top || newlyFocusedDz.getBoundingClientRect().left < focusedDz.getBoundingClientRect().left) {
     targetItems.push(itemToMove);
-
     if (!autoAriaDisabled) {
       alertToScreenReader("Moved item ".concat(focusedItemLabel, " to the end of the list ").concat(focusedDzLabel));
     }
   } else {
     targetItems.unshift(itemToMove);
-
     if (!autoAriaDisabled) {
       alertToScreenReader("Moved item ".concat(focusedItemLabel, " to the beginning of the list ").concat(focusedDzLabel));
     }
   }
-
   var dzFrom = focusedDz;
   dispatchFinalizeEvent(dzFrom, originItems, {
     trigger: TRIGGERS.DROPPED_INTO_ANOTHER,
@@ -2270,28 +2047,23 @@ function handleZoneFocus(e) {
   });
   focusedDz = newlyFocusedDz;
 }
-
 function triggerAllDzsUpdate() {
   dzToHandles.forEach(function (_ref, dz) {
     var update = _ref.update;
     return update(dzToConfig$1.get(dz));
   });
 }
-
 function handleDrop$1() {
   var dispatchConsider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
   printDebug(function () {
     return "drop";
   });
-
   if (!dzToConfig$1.get(focusedDz).autoAriaDisabled) {
     alertToScreenReader("Stopped dragging item ".concat(focusedItemLabel));
   }
-
   if (allDragTargets.has(document.activeElement)) {
     document.activeElement.blur();
   }
-
   if (dispatchConsider) {
     dispatchConsiderEvent(focusedDz, dzToConfig$1.get(focusedDz).items, {
       trigger: TRIGGERS.DRAG_STOPPED,
@@ -2299,7 +2071,6 @@ function handleDrop$1() {
       source: SOURCES.KEYBOARD
     });
   }
-
   styleInactiveDropZones(typeToDropZones$1.get(draggedItemType), function (dz) {
     return dzToConfig$1.get(dz).dropTargetStyle;
   }, function (dz) {
@@ -2313,9 +2084,8 @@ function handleDrop$1() {
   focusedDzLabel = "";
   isDragging = false;
   triggerAllDzsUpdate();
-} //////
-
-
+}
+//////
 function dndzone$1(node, options) {
   var config = {
     items: undefined,
@@ -2327,17 +2097,14 @@ function dndzone$1(node, options) {
     dropTargetClasses: [],
     autoAriaDisabled: false
   };
-
   function swap(arr, i, j) {
     if (arr.length <= 1) return;
     arr.splice(j, 1, arr.splice(i, 1, arr[j])[0]);
   }
-
   function handleKeyDown(e) {
     printDebug(function () {
       return ["handling key down", e.key];
     });
-
     switch (e.key) {
       case "Enter":
       case " ":
@@ -2346,11 +2113,8 @@ function dndzone$1(node, options) {
           if ((e.target.disabled !== undefined || e.target.href || e.target.isContentEditable) && !allDragTargets.has(e.target)) {
             return;
           }
-
           e.preventDefault(); // preventing scrolling on spacebar
-
           e.stopPropagation();
-
           if (isDragging) {
             // TODO - should this trigger a drop? only here or in general (as in when hitting space or enter outside of any zone)?
             handleDrop$1();
@@ -2358,32 +2122,25 @@ function dndzone$1(node, options) {
             // drag start
             handleDragStart(e);
           }
-
           break;
         }
-
       case "ArrowDown":
       case "ArrowRight":
         {
           if (!isDragging) return;
           e.preventDefault(); // prevent scrolling
-
           e.stopPropagation();
-
           var _dzToConfig$get3 = dzToConfig$1.get(node),
-              items = _dzToConfig$get3.items;
-
+            items = _dzToConfig$get3.items;
           var children = Array.from(node.children);
           var idx = children.indexOf(e.currentTarget);
           printDebug(function () {
             return ["arrow down", idx];
           });
-
           if (idx < children.length - 1) {
             if (!config.autoAriaDisabled) {
               alertToScreenReader("Moved item ".concat(focusedItemLabel, " to position ").concat(idx + 2, " in the list ").concat(focusedDzLabel));
             }
-
             swap(items, idx, idx + 1);
             dispatchFinalizeEvent(node, items, {
               trigger: TRIGGERS.DROPPED_INTO_ZONE,
@@ -2391,34 +2148,25 @@ function dndzone$1(node, options) {
               source: SOURCES.KEYBOARD
             });
           }
-
           break;
         }
-
       case "ArrowUp":
       case "ArrowLeft":
         {
           if (!isDragging) return;
           e.preventDefault(); // prevent scrolling
-
           e.stopPropagation();
-
           var _dzToConfig$get4 = dzToConfig$1.get(node),
-              _items = _dzToConfig$get4.items;
-
+            _items = _dzToConfig$get4.items;
           var _children = Array.from(node.children);
-
           var _idx = _children.indexOf(e.currentTarget);
-
           printDebug(function () {
             return ["arrow up", _idx];
           });
-
           if (_idx > 0) {
             if (!config.autoAriaDisabled) {
               alertToScreenReader("Moved item ".concat(focusedItemLabel, " to position ").concat(_idx, " in the list ").concat(focusedDzLabel));
             }
-
             swap(_items, _idx, _idx - 1);
             dispatchFinalizeEvent(node, _items, {
               trigger: TRIGGERS.DROPPED_INTO_ZONE,
@@ -2426,12 +2174,10 @@ function dndzone$1(node, options) {
               source: SOURCES.KEYBOARD
             });
           }
-
           break;
         }
     }
   }
-
   function handleDragStart(e) {
     printDebug(function () {
       return "drag start";
@@ -2448,17 +2194,13 @@ function dndzone$1(node, options) {
     }, function (dz) {
       return dzToConfig$1.get(dz).dropTargetClasses;
     });
-
     if (!config.autoAriaDisabled) {
       var msg = "Started dragging item ".concat(focusedItemLabel, ". Use the arrow keys to move it within its list ").concat(focusedDzLabel);
-
       if (dropTargets.length > 1) {
         msg += ", or tab to another list in order to move the item into it";
       }
-
       alertToScreenReader(msg);
     }
-
     dispatchConsiderEvent(node, dzToConfig$1.get(node).items, {
       trigger: TRIGGERS.DRAG_STARTED,
       id: focusedItemId,
@@ -2466,7 +2208,6 @@ function dndzone$1(node, options) {
     });
     triggerAllDzsUpdate();
   }
-
   function handleClick(e) {
     if (!isDragging) return;
     if (e.currentTarget === focusedItem) return;
@@ -2474,11 +2215,9 @@ function dndzone$1(node, options) {
     handleDrop$1(false);
     handleDragStart(e);
   }
-
   function setCurrentFocusedItem(draggableEl) {
     var _dzToConfig$get5 = dzToConfig$1.get(node),
-        items = _dzToConfig$get5.items;
-
+      items = _dzToConfig$get5.items;
     var children = Array.from(node.children);
     var focusedItemIdx = children.indexOf(draggableEl);
     focusedItem = draggableEl;
@@ -2486,24 +2225,23 @@ function dndzone$1(node, options) {
     focusedItemId = items[focusedItemIdx][ITEM_ID_KEY];
     focusedItemLabel = children[focusedItemIdx].getAttribute("aria-label") || "";
   }
-
   function configure(_ref2) {
     var _ref2$items = _ref2.items,
-        items = _ref2$items === void 0 ? [] : _ref2$items,
-        _ref2$type = _ref2.type,
-        newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE$1 : _ref2$type,
-        _ref2$dragDisabled = _ref2.dragDisabled,
-        dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
-        _ref2$zoneTabIndex = _ref2.zoneTabIndex,
-        zoneTabIndex = _ref2$zoneTabIndex === void 0 ? 0 : _ref2$zoneTabIndex,
-        _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
-        dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
-        _ref2$dropTargetStyle = _ref2.dropTargetStyle,
-        dropTargetStyle = _ref2$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE$1 : _ref2$dropTargetStyle,
-        _ref2$dropTargetClass = _ref2.dropTargetClasses,
-        dropTargetClasses = _ref2$dropTargetClass === void 0 ? [] : _ref2$dropTargetClass,
-        _ref2$autoAriaDisable = _ref2.autoAriaDisabled,
-        autoAriaDisabled = _ref2$autoAriaDisable === void 0 ? false : _ref2$autoAriaDisable;
+      items = _ref2$items === void 0 ? [] : _ref2$items,
+      _ref2$type = _ref2.type,
+      newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE$1 : _ref2$type,
+      _ref2$dragDisabled = _ref2.dragDisabled,
+      dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
+      _ref2$zoneTabIndex = _ref2.zoneTabIndex,
+      zoneTabIndex = _ref2$zoneTabIndex === void 0 ? 0 : _ref2$zoneTabIndex,
+      _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
+      dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
+      _ref2$dropTargetStyle = _ref2.dropTargetStyle,
+      dropTargetStyle = _ref2$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE$1 : _ref2$dropTargetStyle,
+      _ref2$dropTargetClass = _ref2.dropTargetClasses,
+      dropTargetClasses = _ref2$dropTargetClass === void 0 ? [] : _ref2$dropTargetClass,
+      _ref2$autoAriaDisable = _ref2.autoAriaDisabled,
+      autoAriaDisabled = _ref2$autoAriaDisable === void 0 ? false : _ref2$autoAriaDisable;
     config.items = _toConsumableArray(items);
     config.dragDisabled = dragDisabled;
     config.dropFromOthersDisabled = dropFromOthersDisabled;
@@ -2511,69 +2249,56 @@ function dndzone$1(node, options) {
     config.dropTargetStyle = dropTargetStyle;
     config.dropTargetClasses = dropTargetClasses;
     config.autoAriaDisabled = autoAriaDisabled;
-
     if (config.type && newType !== config.type) {
       unregisterDropZone$1(node, config.type);
     }
-
     config.type = newType;
     registerDropZone$1(node, newType);
-
     if (!autoAriaDisabled) {
       node.setAttribute("aria-disabled", dragDisabled);
       node.setAttribute("role", "list");
       node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
     }
-
     dzToConfig$1.set(node, config);
-
     if (isDragging) {
       node.tabIndex = node === focusedDz || focusedItem.contains(node) || config.dropFromOthersDisabled || focusedDz && config.type !== dzToConfig$1.get(focusedDz).type ? -1 : 0;
     } else {
       node.tabIndex = config.zoneTabIndex;
     }
-
     node.addEventListener("focus", handleZoneFocus);
-
     var _loop = function _loop(i) {
       var draggableEl = node.children[i];
       allDragTargets.add(draggableEl);
       draggableEl.tabIndex = isDragging ? -1 : 0;
-
       if (!autoAriaDisabled) {
         draggableEl.setAttribute("role", "listitem");
       }
-
       draggableEl.removeEventListener("keydown", elToKeyDownListeners.get(draggableEl));
       draggableEl.removeEventListener("click", elToFocusListeners.get(draggableEl));
-
       if (!dragDisabled) {
         draggableEl.addEventListener("keydown", handleKeyDown);
         elToKeyDownListeners.set(draggableEl, handleKeyDown);
         draggableEl.addEventListener("click", handleClick);
         elToFocusListeners.set(draggableEl, handleClick);
       }
-
       if (isDragging && config.items[i][ITEM_ID_KEY] === focusedItemId) {
         printDebug(function () {
           return ["focusing on", {
             i: i,
             focusedItemId: focusedItemId
           }];
-        }); // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
-
+        });
+        // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
         focusedItem = draggableEl;
-        focusedItem.tabIndex = 0; // without this the element loses focus if it moves backwards in the list
-
+        focusedItem.tabIndex = 0;
+        // without this the element loses focus if it moves backwards in the list
         draggableEl.focus();
       }
     };
-
     for (var i = 0; i < node.children.length; i++) {
       _loop(i);
     }
   }
-
   configure(options);
   var handles = {
     update: function update(newOptions) {
@@ -2596,6 +2321,7 @@ function dndzone$1(node, options) {
 }
 
 var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
+
 /**
  * A custom action to turn any container to a dnd zone and all of its direct children to draggables
  * Supports mouse, touch and keyboard interactions.
@@ -2617,7 +2343,6 @@ var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabl
  * @param {Options} options
  * @return {{update: function, destroy: function}}
  */
-
 function dndzone$2(node, options) {
   validateOptions(options);
   var pointerZone = dndzone(node, options);
@@ -2634,50 +2359,41 @@ function dndzone$2(node, options) {
     }
   };
 }
-
 function validateOptions(options) {
   /*eslint-disable*/
   var items = options.items,
-      flipDurationMs = options.flipDurationMs,
-      type = options.type,
-      dragDisabled = options.dragDisabled,
-      morphDisabled = options.morphDisabled,
-      dropFromOthersDisabled = options.dropFromOthersDisabled,
-      zoneTabIndex = options.zoneTabIndex,
-      dropTargetStyle = options.dropTargetStyle,
-      dropTargetClasses = options.dropTargetClasses,
-      transformDraggedElement = options.transformDraggedElement,
-      autoAriaDisabled = options.autoAriaDisabled,
-      centreDraggedOnCursor = options.centreDraggedOnCursor,
-      rest = _objectWithoutProperties(options, _excluded);
+    flipDurationMs = options.flipDurationMs,
+    type = options.type,
+    dragDisabled = options.dragDisabled,
+    morphDisabled = options.morphDisabled,
+    dropFromOthersDisabled = options.dropFromOthersDisabled,
+    zoneTabIndex = options.zoneTabIndex,
+    dropTargetStyle = options.dropTargetStyle,
+    dropTargetClasses = options.dropTargetClasses,
+    transformDraggedElement = options.transformDraggedElement,
+    autoAriaDisabled = options.autoAriaDisabled,
+    centreDraggedOnCursor = options.centreDraggedOnCursor,
+    rest = _objectWithoutProperties(options, _excluded);
   /*eslint-enable*/
-
-
   if (Object.keys(rest).length > 0) {
     console.warn("dndzone will ignore unknown options", rest);
   }
-
   if (!items) {
     throw new Error("no 'items' key provided to dndzone");
   }
-
   var itemWithMissingId = items.find(function (item) {
     return !{}.hasOwnProperty.call(item, ITEM_ID_KEY);
   });
-
   if (itemWithMissingId) {
     throw new Error("missing '".concat(ITEM_ID_KEY, "' property for item ").concat(toString(itemWithMissingId)));
   }
-
   if (dropTargetClasses && !Array.isArray(dropTargetClasses)) {
     throw new Error("dropTargetClasses should be an array but instead it is a ".concat(_typeof(dropTargetClasses), ", ").concat(toString(dropTargetClasses)));
   }
-
   if (zoneTabIndex && !isInt(zoneTabIndex)) {
     throw new Error("zoneTabIndex should be a number but instead it is a ".concat(_typeof(zoneTabIndex), ", ").concat(toString(zoneTabIndex)));
   }
 }
-
 function isInt(value) {
   return !isNaN(value) && function (x) {
     return (x | 0) === x;