@atlaskit/pragmatic-drag-and-drop 0.17.0

package/dist/esm/ledger/lifecycle-manager.js

@@ -0,0 +1,328 @@
+import { bindAll } from 'bind-event-listener';
+import { isLeavingWindow } from '../util/entering-and-leaving-the-window';
+import { fixPostDragPointerBug } from '../util/fix-post-drag-pointer-bug';
+import { getInput } from '../util/get-input';
+import { makeDispatch } from './dispatch-consumer-event';
+var isActive = false;
+function canStart() {
+  return !isActive;
+}
+function getNativeSetDragImage(event) {
+  if (event.dataTransfer) {
+    // need to use `.bind` as `setDragImage` is required
+    // to be run with `event.dataTransfer` as the "this" context
+    return event.dataTransfer.setDragImage.bind(event.dataTransfer);
+  }
+  return null;
+}
+function hasHierarchyChanged(_ref) {
+  var current = _ref.current,
+    next = _ref.next;
+  if (current.length !== next.length) {
+    return true;
+  }
+  // not checking stickiness, data or dropEffect,
+  // just whether the hierarchy has changed
+  for (var i = 0; i < current.length; i++) {
+    if (current[i].element !== next[i].element) {
+      return true;
+    }
+  }
+  return false;
+}
+function start(_ref2) {
+  var event = _ref2.event,
+    dragInterface = _ref2.dragInterface,
+    getDropTargetsOver = _ref2.getDropTargetsOver,
+    dispatchEvent = _ref2.dispatchEvent;
+  if (!canStart()) {
+    return;
+  }
+  isActive = true;
+  var initial = getStartLocation({
+    event: event,
+    dragInterface: dragInterface,
+    getDropTargetsOver: getDropTargetsOver
+  });
+  var current = initial;
+  // Setting initial drop effect for the drag
+  setDropEffect({
+    event: event,
+    current: initial.dropTargets
+  });
+  var dispatch = makeDispatch({
+    source: dragInterface.payload,
+    dispatchEvent: dispatchEvent,
+    initial: initial
+  });
+  function updateDropTargets(next) {
+    // only looking at whether hierarchy has changed to determine whether something as 'changed'
+    var hasChanged = hasHierarchyChanged({
+      current: current.dropTargets,
+      next: next.dropTargets
+    });
+
+    // Always updating the state to include latest data, dropEffect and stickiness
+    // Only updating consumers if the hierarchy has changed in some way
+    // Consumers can get the latest data by using `onDrag`
+    current = next;
+    if (hasChanged) {
+      dispatch.dragUpdate({
+        current: current
+      });
+    }
+  }
+  function onUpdateEvent(event) {
+    var input = getInput(event);
+    var nextDropTargets = getDropTargetsOver({
+      target: event.target,
+      input: input,
+      source: dragInterface.payload,
+      current: current.dropTargets
+    });
+    if (nextDropTargets.length) {
+      // 🩸 must call `event.preventDefault()` to allow a browser drop to occur
+      event.preventDefault();
+      setDropEffect({
+        event: event,
+        current: nextDropTargets
+      });
+    }
+    updateDropTargets({
+      dropTargets: nextDropTargets,
+      input: input
+    });
+  }
+  function onDrop(_ref3) {
+    var updatedExternalPayload = _ref3.updatedExternalPayload;
+    dispatch.drop({
+      current: current,
+      updatedExternalPayload: updatedExternalPayload
+    });
+  }
+  function cancel() {
+    // The spec behaviour is that when a drag is cancelled, or when dropping on no drop targets,
+    // a "dragleave" event is fired on the active drop target before a "dragend" event.
+    // We are replicating that behaviour in `cancel` if there are any active drop targets to
+    // ensure consistent behaviour.
+    //
+    // Note: When cancelling, or dropping on no drop targets, a "dragleave" event
+    // will have already cleared the dropTargets to `[]` (as that particular "dragleave" has a `relatedTarget` of `null`)
+
+    if (current.dropTargets.length) {
+      updateDropTargets({
+        dropTargets: [],
+        input: current.input
+      });
+    }
+    onDrop({
+      updatedExternalPayload: null
+    });
+    finish();
+  }
+  function finish() {
+    isActive = false;
+    unbindEvents();
+  }
+  var unbindEvents = bindAll(window, [{
+    // 👋 Note: we are repurposing the `dragover` event as our `drag` event
+    // this is because firefox does not publish pointer coordinates during
+    // a `drag` event, but does for every other type of drag event
+    // `dragover` fires on all elements that are being dragged over
+    // Because we are binding to `window` - our `dragover` is effectively the same as a `drag`
+    // 🦊😤
+    type: 'dragover',
+    listener: function listener(event) {
+      // We need to regularly calculate the drop targets in order to allow:
+      //  - dynamic `canDrop()` checks
+      //  - rapid updating `getData()` calls to attach data in response to user input (eg for edge detection)
+      // Sadly we cannot schedule inspecting changes resulting from this event
+      // we need to be able to conditionally cancel the event with `event.preventDefault()`
+      // to enable the correct native drop experience.
+
+      // 1. check to see if anything has changed
+      onUpdateEvent(event);
+
+      // 2. let consumers know a move has occurred
+      // This will include the latest 'input' values
+      dispatch.drag({
+        current: current
+      });
+    }
+  }, {
+    type: 'dragenter',
+    listener: onUpdateEvent
+  }, {
+    // This was the only reliable cross browser way I found to detect
+    // when the user is leaving the `window`.
+    // Internal drags: when we leave the `window` we want to clear any active drop targets,
+    // but the drag is not yet over. The user could drag back into the window.
+    // We only need to do this because of stickiness
+    // External drags: when we leave the `window` the drag operation is over,
+    // we will start another drag operation
+    type: 'dragleave',
+    listener: function listener(event) {
+      if (!isLeavingWindow({
+        dragLeave: event
+      })) {
+        return;
+      }
+      // When a drag is ending without a drop target (or when the drag is cancelled),
+      // All browsers fire:
+      // 1. "drag"
+      // 2. "dragleave"
+      // These events have `event.relatedTarget == null` so this code path is also hit in those cases.
+      // This is all good! We would be clearing the dropTargets in `cancel()` after the "dragend"
+
+      // 🐛 Bug workaround: intentionally not updating `input` in "dragleave"
+      // In Chrome, this final "dragleave" has default input values (eg clientX == 0)
+      // rather than the users current input values
+      //
+      // - [Conversation](https://twitter.com/alexandereardon/status/1642697633864241152)
+      // - [Bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1429937)
+      updateDropTargets({
+        input: current.input,
+        dropTargets: []
+      });
+      if (dragInterface.startedFrom === 'external') {
+        cancel();
+      }
+    }
+  }, {
+    type: 'drop',
+    listener: function listener(event) {
+      var _dragInterface$getDro;
+      // A "drop" can only happen if the browser allowed the drop
+
+      // Opting out of standard browser drop behaviour for the drag
+      event.preventDefault();
+
+      // applying the latest drop effect to the event
+      setDropEffect({
+        event: event,
+        current: current.dropTargets
+      });
+      onDrop({
+        updatedExternalPayload: dragInterface.startedFrom === 'external' ? ((_dragInterface$getDro = dragInterface.getDropPayload) === null || _dragInterface$getDro === void 0 ? void 0 : _dragInterface$getDro.call(dragInterface, event)) || null : null
+      });
+      finish();
+
+      // Applying this fix after `dispatch.drop` so that frameworks have the opportunity
+      // to update UI in response to a "onDrop".
+      if (dragInterface.startedFrom === 'internal') {
+        fixPostDragPointerBug({
+          current: current
+        });
+      }
+    }
+  }, {
+    // "dragend" fires when on the drag source (eg a draggable element)
+    // when the drag is finished.
+    // "dragend" will fire after "drop"(if there was a successful drop)
+    // "dragend" does not fire if the draggable source has been removed during the drag
+    // or for external drag sources (eg files)
+    type: 'dragend',
+    listener: function listener() {
+      cancel();
+
+      // Applying this fix after `dispatch.drop` so that frameworks have the opportunity
+      // to update UI in response to a "onDrop".
+      if (dragInterface.startedFrom === 'internal') {
+        fixPostDragPointerBug({
+          current: current
+        });
+      }
+    }
+  },
+  // ## Detecting drag ending for removed draggables
+  //
+  // If a draggable element is removed during a drag and the user drops:
+  // 1. if over a valid drop target: we get a "drop" event to know the drag is finished
+  // 2. if not over a valid drop target (or cancelled): we get nothing
+  // The "dragend" event will not fire on the source draggable if it has been
+  // removed from the DOM.
+  // So we need to figure out if a drag operation has finished by looking at other events
+  // We can do this by looking at other events
+
+  // ### First detection: "pointermove" events
+
+  // 1. "pointermove" events cannot fire during a drag and drop operation
+  // according to the spec. So if we get a "pointermove" it means that
+  // the drag and drop operations has finished. So if we get a "pointermove"
+  // we know that the drag is over
+  // 2. 🦊😤 Drag and drop operations are _supposed_ to suppress
+  // other pointer events. However, firefox will allow a few
+  // pointer event to get through after a drag starts.
+  // The most I've seen is 3
+  {
+    type: 'pointermove',
+    listener: function () {
+      var callCount = 0;
+      return function listener() {
+        // Using 20 as it is far bigger than the most observed (3)
+        if (callCount < 20) {
+          callCount++;
+          return;
+        }
+        cancel();
+      };
+    }()
+  },
+  // ### Second detection: "pointerdown" events
+
+  // If we receive this event then we know that a drag operation has finished
+  // and potentially another one is about to start.
+  // Note: `pointerdown` fires on all browsers / platforms before "dragstart"
+  {
+    type: 'pointerdown',
+    listener: cancel
+  }],
+  // Once we have started a managed drag operation it is important that we see / own all drag events
+  // We got one adoption bug pop up where some code was stopping (`event.stopPropagation()`)
+  // all "drop" events in the bubble phase on the `document.body`.
+  // This meant that we never saw the "drop" event.
+  {
+    capture: true
+  });
+  dispatch.start({
+    nativeSetDragImage: getNativeSetDragImage(event)
+  });
+}
+function setDropEffect(_ref4) {
+  var _current$;
+  var event = _ref4.event,
+    current = _ref4.current;
+  // setting the `dropEffect` to be the innerMost drop targets dropEffect
+  var innerMost = (_current$ = current[0]) === null || _current$ === void 0 ? void 0 : _current$.dropEffect;
+  if (innerMost != null && event.dataTransfer) {
+    event.dataTransfer.dropEffect = innerMost;
+  }
+}
+function getStartLocation(_ref5) {
+  var event = _ref5.event,
+    dragInterface = _ref5.dragInterface,
+    getDropTargetsOver = _ref5.getDropTargetsOver;
+  var input = getInput(event);
+
+  // When dragging from outside of the browser, we don't have any starting drop targets
+  if (dragInterface.startedFrom === 'external') {
+    return {
+      input: input,
+      dropTargets: []
+    };
+  }
+  var dropTargets = getDropTargetsOver({
+    input: input,
+    source: dragInterface.payload,
+    target: event.target,
+    current: []
+  });
+  return {
+    input: input,
+    dropTargets: dropTargets
+  };
+}
+export var lifecycle = {
+  canStart: canStart,
+  start: start
+};

package/dist/esm/ledger/usage-ledger.js

@@ -0,0 +1,31 @@
+// Extending `Map` to allow us to link Key and Values together
+
+var ledger = new Map();
+function registerUsage(_ref) {
+  var typeKey = _ref.typeKey,
+    mount = _ref.mount;
+  var entry = ledger.get(typeKey);
+  if (entry) {
+    entry.usageCount++;
+    return entry;
+  }
+  var initial = {
+    typeKey: typeKey,
+    unmount: mount(),
+    usageCount: 1
+  };
+  ledger.set(typeKey, initial);
+  return initial;
+}
+export function register(args) {
+  var entry = registerUsage(args);
+  return function unregister() {
+    entry.usageCount--;
+    if (entry.usageCount > 0) {
+      return;
+    }
+    // Only a single usage left, remove it
+    entry.unmount();
+    ledger.delete(args.typeKey);
+  };
+}

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

@@ -0,0 +1,53 @@
+import { lifecycle } from '../ledger/lifecycle-manager';
+import { register } from '../ledger/usage-ledger';
+import { makeDropTarget } from './make-drop-target';
+import { makeMonitor } from './make-monitor';
+export function makeAdapter(_ref) {
+  var typeKey = _ref.typeKey,
+    mount = _ref.mount,
+    dispatchEventToSource = _ref.dispatchEventToSource,
+    defaultDropEffect = _ref.defaultDropEffect;
+  var monitorAPI = makeMonitor();
+  var dropTargetAPI = makeDropTarget({
+    typeKey: typeKey,
+    defaultDropEffect: defaultDropEffect
+  });
+  function dispatchEvent(args) {
+    // 1. forward the event to source
+    dispatchEventToSource === null || dispatchEventToSource === void 0 ? void 0 : dispatchEventToSource(args);
+
+    // 2. forward the event to relevant dropTargets
+    dropTargetAPI.dispatchEvent(args);
+
+    // 3. forward event to monitors
+    monitorAPI.dispatchEvent(args);
+  }
+  function start(_ref2) {
+    var event = _ref2.event,
+      dragInterface = _ref2.dragInterface;
+    lifecycle.start({
+      event: event,
+      dragInterface: dragInterface,
+      getDropTargetsOver: dropTargetAPI.getIsOver,
+      dispatchEvent: dispatchEvent
+    });
+  }
+  function registerUsage() {
+    function mountAdapter() {
+      var api = {
+        canStart: lifecycle.canStart,
+        start: start
+      };
+      return mount(api);
+    }
+    return register({
+      typeKey: typeKey,
+      mount: mountAdapter
+    });
+  }
+  return {
+    registerUsage: registerUsage,
+    dropTarget: dropTargetAPI.dropTargetForConsumers,
+    monitor: monitorAPI.monitorForConsumers
+  };
+}

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

@@ -0,0 +1,264 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, 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; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; 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; }
+import { addAttribute } from '../util/add-attribute';
+import { combine } from '../util/combine';
+function copyReverse(array) {
+  return array.slice(0).reverse();
+}
+export function makeDropTarget(_ref) {
+  var typeKey = _ref.typeKey,
+    defaultDropEffect = _ref.defaultDropEffect;
+  var registry = new WeakMap();
+  var dropTargetDataAtt = "data-drop-target-for-".concat(typeKey);
+  var dropTargetSelector = "[".concat(dropTargetDataAtt, "]");
+  function addToRegistry(args) {
+    registry.set(args.element, args);
+    return function () {
+      return registry.delete(args.element);
+    };
+  }
+  function dropTargetForConsumers(args) {
+    // Guardrail: warn if the draggable element is already registered
+    if (process.env.NODE_ENV !== 'production') {
+      var existing = registry.get(args.element);
+      if (existing) {
+        // eslint-disable-next-line no-console
+        console.warn('You have already registered a `droppable` on the same element', {
+          existing: existing,
+          proposed: args
+        });
+      }
+    }
+    return combine(addAttribute(args.element, {
+      attribute: dropTargetDataAtt,
+      value: 'true'
+    }), addToRegistry(args));
+  }
+  function getActualDropTargets(_ref2) {
+    var _args$getData, _args$getData2, _args$getDropEffect, _args$getDropEffect2, _args$getIsSticky;
+    var source = _ref2.source,
+      target = _ref2.target,
+      input = _ref2.input,
+      _ref2$result = _ref2.result,
+      result = _ref2$result === void 0 ? [] : _ref2$result;
+    if (!(target instanceof Element)) {
+      return result;
+    }
+    var closest = target.closest(dropTargetSelector);
+
+    // Cannot find anything else
+    if (closest == null) {
+      return result;
+    }
+    var args = registry.get(closest);
+
+    // error: something had a dropTargetSelector but we could not
+    // find a match. For now, failing silently
+    if (args == null) {
+      return result;
+    }
+    var feedback = {
+      input: input,
+      source: source,
+      element: args.element
+    };
+
+    // if dropping is not allowed, skip this drop target
+    // and continue looking up the DOM tree
+    if (args.canDrop && !args.canDrop(feedback)) {
+      return getActualDropTargets({
+        source: source,
+        target: args.element.parentElement,
+        input: input,
+        result: result
+      });
+    }
+    var data = (_args$getData = (_args$getData2 = args.getData) === null || _args$getData2 === void 0 ? void 0 : _args$getData2.call(args, feedback)) !== null && _args$getData !== void 0 ? _args$getData : {};
+    var dropEffect = (_args$getDropEffect = (_args$getDropEffect2 = args.getDropEffect) === null || _args$getDropEffect2 === void 0 ? void 0 : _args$getDropEffect2.call(args, feedback)) !== null && _args$getDropEffect !== void 0 ? _args$getDropEffect : defaultDropEffect;
+    var sticky = Boolean((_args$getIsSticky = args.getIsSticky) === null || _args$getIsSticky === void 0 ? void 0 : _args$getIsSticky.call(args, feedback));
+    var record = {
+      data: data,
+      element: args.element,
+      dropEffect: dropEffect,
+      sticky: sticky
+    };
+    return getActualDropTargets({
+      source: source,
+      target: args.element.parentElement,
+      input: input,
+      // Using bubble ordering. Same ordering as `event.getPath()`
+      result: [].concat(_toConsumableArray(result), [record])
+    });
+  }
+  function notifyCurrent(_ref3) {
+    var eventName = _ref3.eventName,
+      payload = _ref3.payload;
+    var _iterator = _createForOfIteratorHelper(payload.location.current.dropTargets),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _entry$eventName;
+        var record = _step.value;
+        var entry = registry.get(record.element);
+        var _args = _objectSpread(_objectSpread({}, payload), {}, {
+          self: record
+        });
+        entry === null || entry === void 0 ? void 0 : (_entry$eventName = entry[eventName]) === null || _entry$eventName === void 0 ? void 0 : _entry$eventName.call(entry,
+        // I cannot seem to get the types right here.
+        // TS doesn't seem to like that one event can need `nativeSetDragImage`
+        // @ts-expect-error
+        _args);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+  var actions = {
+    onGenerateDragPreview: notifyCurrent,
+    onDrag: notifyCurrent,
+    onDragStart: notifyCurrent,
+    onDrop: notifyCurrent,
+    onDropTargetChange: function onDropTargetChange(_ref4) {
+      var payload = _ref4.payload;
+      var isCurrent = new Set(payload.location.current.dropTargets.map(function (record) {
+        return record.element;
+      }));
+      var visited = new Set();
+      var _iterator2 = _createForOfIteratorHelper(payload.location.previous.dropTargets),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _entry$onDropTargetCh;
+          var record = _step2.value;
+          visited.add(record.element);
+          var entry = registry.get(record.element);
+          var isOver = isCurrent.has(record.element);
+          var _args2 = _objectSpread(_objectSpread({}, payload), {}, {
+            self: record
+          });
+          entry === null || entry === void 0 ? void 0 : (_entry$onDropTargetCh = entry.onDropTargetChange) === null || _entry$onDropTargetCh === void 0 ? void 0 : _entry$onDropTargetCh.call(entry, _args2);
+
+          // if we cannot find the drop target in the current array, then it has been left
+          if (!isOver) {
+            var _entry$onDragLeave;
+            entry === null || entry === void 0 ? void 0 : (_entry$onDragLeave = entry.onDragLeave) === null || _entry$onDragLeave === void 0 ? void 0 : _entry$onDragLeave.call(entry, _args2);
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      var _iterator3 = _createForOfIteratorHelper(payload.location.current.dropTargets),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _entry$onDropTargetCh2, _entry$onDragEnter;
+          var _record = _step3.value;
+          // already published an update to this drop target
+          if (visited.has(_record.element)) {
+            continue;
+          }
+          // at this point we have a new drop target that is being entered into
+          var _args3 = _objectSpread(_objectSpread({}, payload), {}, {
+            self: _record
+          });
+          var _entry = registry.get(_record.element);
+          _entry === null || _entry === void 0 ? void 0 : (_entry$onDropTargetCh2 = _entry.onDropTargetChange) === null || _entry$onDropTargetCh2 === void 0 ? void 0 : _entry$onDropTargetCh2.call(_entry, _args3);
+          _entry === null || _entry === void 0 ? void 0 : (_entry$onDragEnter = _entry.onDragEnter) === null || _entry$onDragEnter === void 0 ? void 0 : _entry$onDragEnter.call(_entry, _args3);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    }
+  };
+  function dispatchEvent(args) {
+    // This line does not work in TS 4.2
+    // It does work in TS 4.7
+    // @ts-expect-error
+    actions[args.eventName](args);
+  }
+  function getIsOver(_ref5) {
+    var source = _ref5.source,
+      target = _ref5.target,
+      input = _ref5.input,
+      current = _ref5.current;
+    var actual = getActualDropTargets({
+      source: source,
+      target: target,
+      input: input
+    });
+
+    // stickiness is only relevant when we have less
+    // drop targets than we did before
+    if (actual.length >= current.length) {
+      return actual;
+    }
+
+    // less 'actual' drop targets than before,
+    // we need to see if 'stickiness' applies
+
+    // An old drop target will continue to be dropped on if:
+    // 1. it has the same parent
+    // 2. nothing exists in it's previous index
+
+    var lastCaptureOrdered = copyReverse(current);
+    var actualCaptureOrdered = copyReverse(actual);
+    var resultCaptureOrdered = [];
+    for (var index = 0; index < lastCaptureOrdered.length; index++) {
+      var last = lastCaptureOrdered[index];
+      var fresh = actualCaptureOrdered[index];
+
+      // if a record is in the new index -> use that
+      // it will have the latest data + dropEffect
+      if (fresh != null) {
+        resultCaptureOrdered.push(fresh);
+        continue;
+      }
+
+      // At this point we have no drop target in the old spot
+      // Check to see if we can use a previous sticky drop target
+
+      // stickiness is based on relationships to a parent
+      // so if we hit a drop target that is not sticky we
+      // can finish our search
+      if (!last.sticky) {
+        break;
+      }
+
+      // We only want the previous sticky item to 'stick' if
+      // the parent of the sticky item is unchanged
+
+      // The "parent" is the one inside of `resultCaptureOrdered`
+      // (the parent might be a drop target that was sticky)
+      var parent = resultCaptureOrdered[index - 1];
+      var lastParent = lastCaptureOrdered[index - 1];
+
+      // parents are the same (might both be undefined for index == 0)
+      // we can add the last entry and keep searching
+      if ((parent === null || parent === void 0 ? void 0 : parent.element) === (lastParent === null || lastParent === void 0 ? void 0 : lastParent.element)) {
+        resultCaptureOrdered.push(last);
+        continue;
+      }
+      // parents are not the same, we can exit our search
+      break;
+    }
+
+    // return bubble ordered result
+    return copyReverse(resultCaptureOrdered);
+  }
+  return {
+    dropTargetForConsumers: dropTargetForConsumers,
+    getIsOver: getIsOver,
+    dispatchEvent: dispatchEvent
+  };
+}