@atlaskit/pragmatic-drag-and-drop 0.17.0

package/dist/es2019/experimental/cross-window-element-adapter.js

@@ -0,0 +1,121 @@
+import { bindAll } from 'bind-event-listener';
+import { makeAdapter } from '../make-adapter/make-adapter';
+import { combine } from '../util/combine';
+import { isEnteringWindow } from '../util/entering-and-leaving-the-window';
+const storage = (() => {
+  const dataKey = 'private-pdnd-data';
+  const resultKey = 'private-pdnd-result';
+  function tryParse(raw) {
+    if (raw == null) {
+      return null;
+    }
+    try {
+      return JSON.parse(raw);
+    } catch (e) {
+      // failed to parse
+      return null;
+    }
+  }
+  function setData(data) {
+    // clearing a result when we set data
+    clearStorage();
+    localStorage.setItem(dataKey, JSON.stringify(data));
+  }
+  function findData() {
+    return tryParse(localStorage.getItem(dataKey));
+  }
+  function setResult(result) {
+    localStorage.setItem(resultKey, result);
+  }
+  function findResult() {
+    const raw = localStorage.getItem(resultKey);
+    if (raw == null) {
+      return null;
+    }
+
+    // TODO: improve type
+    return raw;
+  }
+  function clearStorage() {
+    localStorage.removeItem(dataKey);
+    localStorage.removeItem(resultKey);
+  }
+  return {
+    clearStorage,
+    setData,
+    findData,
+    setResult,
+    findResult
+  };
+})();
+const adapter = makeAdapter({
+  typeKey: 'experimental-cross-window-element',
+  defaultDropEffect: 'move',
+  mount(api) {
+    return combine(bindAll(window, [{
+      type: 'dragenter',
+      listener(event) {
+        if (!api.canStart(event)) {
+          return;
+        }
+
+        // already cancelled by something else
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (!isEnteringWindow({
+          dragEnter: event
+        })) {
+          return;
+        }
+
+        // we only care about when the window is being first entered
+        if (event.relatedTarget != null) {
+          return null;
+        }
+        const data = storage.findData();
+        if (data == null) {
+          return;
+        }
+        const dragInterface = {
+          key: 'experimental-cross-window-element',
+          startedFrom: 'external',
+          payload: {
+            data
+          }
+        };
+        api.start({
+          event,
+          dragInterface
+        });
+      }
+    },
+    // always clear a external drag result from another window before a drag starts
+    {
+      type: 'dragstart',
+      listener: storage.clearStorage,
+      options: {
+        capture: true
+      }
+    }]), adapter.monitor({
+      onDrop(payload) {
+        const result = payload.location.current.dropTargets.length > 0 ? 'moved' : 'none';
+        storage.setResult(result);
+      }
+    }));
+  }
+});
+export function setCrossWindowData({
+  data
+}) {
+  storage.setData(data);
+}
+export function extractCrossWindowResult() {
+  return storage.findResult();
+}
+export const dropTargetForCrossWindowElements = args => {
+  return combine(
+  // at least one drop target required before we will start listening for cross element dragging
+  adapter.registerUsage(), adapter.dropTarget(args));
+};
+export const monitorForCrossWindowElements = adapter.monitor;

package/dist/es2019/index.js

@@ -0,0 +1,7 @@
+// This file exists for module resolution purposes.
+
+// Not exporting anything from the root entry point
+// Please use individual entry points in order to always
+// obtain minimum kbs.
+
+export default {};

package/dist/es2019/internal-types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ledger/dispatch-consumer-event.js

@@ -0,0 +1,128 @@
+import rafSchd from 'raf-schd';
+const scheduleOnDrag = rafSchd(fn => fn());
+const dragStart = (() => {
+  let scheduled = null;
+  function schedule(fn) {
+    const frameId = requestAnimationFrame(() => {
+      scheduled = null;
+      fn();
+    });
+    scheduled = {
+      frameId: frameId,
+      fn
+    };
+  }
+  function flush() {
+    if (scheduled) {
+      cancelAnimationFrame(scheduled.frameId);
+      scheduled.fn();
+      scheduled = null;
+    }
+  }
+  return {
+    schedule,
+    flush
+  };
+})();
+export function makeDispatch({
+  source,
+  initial,
+  dispatchEvent
+}) {
+  let previous = {
+    dropTargets: []
+  };
+  function safeDispatch(args) {
+    dispatchEvent(args);
+    previous = {
+      dropTargets: args.payload.location.current.dropTargets
+    };
+  }
+  const dispatch = {
+    start({
+      nativeSetDragImage
+    }) {
+      // Ensuring that both `onGenerateDragPreview` and `onDragStart` get the same location.
+      // We do this so that `previous` is`[]` in `onDragStart` (which is logical)
+      const location = {
+        current: initial,
+        previous,
+        initial
+      };
+      // a `onGenerateDragPreview` does _not_ add another entry for `previous`
+      // onDragPreview
+      safeDispatch({
+        eventName: 'onGenerateDragPreview',
+        payload: {
+          source,
+          location,
+          nativeSetDragImage
+        }
+      });
+      dragStart.schedule(() => {
+        safeDispatch({
+          eventName: 'onDragStart',
+          payload: {
+            source,
+            location
+          }
+        });
+      });
+    },
+    dragUpdate({
+      current
+    }) {
+      dragStart.flush();
+      scheduleOnDrag.cancel();
+      safeDispatch({
+        eventName: 'onDropTargetChange',
+        payload: {
+          source,
+          location: {
+            initial,
+            previous,
+            current
+          }
+        }
+      });
+    },
+    drag({
+      current
+    }) {
+      scheduleOnDrag(() => {
+        dragStart.flush();
+        const location = {
+          initial,
+          previous,
+          current
+        };
+        safeDispatch({
+          eventName: 'onDrag',
+          payload: {
+            source,
+            location
+          }
+        });
+      });
+    },
+    drop({
+      current,
+      updatedExternalPayload: updatedSourcePayload
+    }) {
+      dragStart.flush();
+      scheduleOnDrag.cancel();
+      safeDispatch({
+        eventName: 'onDrop',
+        payload: {
+          source: updatedSourcePayload !== null && updatedSourcePayload !== void 0 ? updatedSourcePayload : source,
+          location: {
+            current,
+            previous,
+            initial
+          }
+        }
+      });
+    }
+  };
+  return dispatch;
+}

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

@@ -0,0 +1,333 @@
+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';
+let 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({
+  current,
+  next
+}) {
+  if (current.length !== next.length) {
+    return true;
+  }
+  // not checking stickiness, data or dropEffect,
+  // just whether the hierarchy has changed
+  for (let i = 0; i < current.length; i++) {
+    if (current[i].element !== next[i].element) {
+      return true;
+    }
+  }
+  return false;
+}
+function start({
+  event,
+  dragInterface,
+  getDropTargetsOver,
+  dispatchEvent
+}) {
+  if (!canStart()) {
+    return;
+  }
+  isActive = true;
+  const initial = getStartLocation({
+    event,
+    dragInterface,
+    getDropTargetsOver
+  });
+  let current = initial;
+  // Setting initial drop effect for the drag
+  setDropEffect({
+    event,
+    current: initial.dropTargets
+  });
+  const dispatch = makeDispatch({
+    source: dragInterface.payload,
+    dispatchEvent,
+    initial
+  });
+  function updateDropTargets(next) {
+    // only looking at whether hierarchy has changed to determine whether something as 'changed'
+    const 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
+      });
+    }
+  }
+  function onUpdateEvent(event) {
+    const input = getInput(event);
+    const nextDropTargets = getDropTargetsOver({
+      target: event.target,
+      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,
+        current: nextDropTargets
+      });
+    }
+    updateDropTargets({
+      dropTargets: nextDropTargets,
+      input
+    });
+  }
+  function onDrop({
+    updatedExternalPayload
+  }) {
+    dispatch.drop({
+      current,
+      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();
+  }
+  const 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(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
+      });
+    }
+  }, {
+    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(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(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,
+        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
+        });
+      }
+    }
+  }, {
+    // "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() {
+      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
+        });
+      }
+    }
+  },
+  // ## 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: (() => {
+      let 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({
+  event,
+  current
+}) {
+  var _current$;
+  // setting the `dropEffect` to be the innerMost drop targets dropEffect
+  const innerMost = (_current$ = current[0]) === null || _current$ === void 0 ? void 0 : _current$.dropEffect;
+  if (innerMost != null && event.dataTransfer) {
+    event.dataTransfer.dropEffect = innerMost;
+  }
+}
+function getStartLocation({
+  event,
+  dragInterface,
+  getDropTargetsOver
+}) {
+  const input = getInput(event);
+
+  // When dragging from outside of the browser, we don't have any starting drop targets
+  if (dragInterface.startedFrom === 'external') {
+    return {
+      input,
+      dropTargets: []
+    };
+  }
+  const dropTargets = getDropTargetsOver({
+    input,
+    source: dragInterface.payload,
+    target: event.target,
+    current: []
+  });
+  return {
+    input,
+    dropTargets
+  };
+}
+export const lifecycle = {
+  canStart,
+  start
+};

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

@@ -0,0 +1,32 @@
+// Extending `Map` to allow us to link Key and Values together
+
+const ledger = new Map();
+function registerUsage({
+  typeKey,
+  mount
+}) {
+  const entry = ledger.get(typeKey);
+  if (entry) {
+    entry.usageCount++;
+    return entry;
+  }
+  const initial = {
+    typeKey,
+    unmount: mount(),
+    usageCount: 1
+  };
+  ledger.set(typeKey, initial);
+  return initial;
+}
+export function register(args) {
+  const 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/es2019/make-adapter/make-adapter.js

@@ -0,0 +1,55 @@
+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({
+  typeKey,
+  mount,
+  dispatchEventToSource,
+  defaultDropEffect
+}) {
+  const monitorAPI = makeMonitor();
+  const dropTargetAPI = makeDropTarget({
+    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({
+    event,
+    dragInterface
+  }) {
+    lifecycle.start({
+      event,
+      dragInterface,
+      getDropTargetsOver: dropTargetAPI.getIsOver,
+      dispatchEvent
+    });
+  }
+  function registerUsage() {
+    function mountAdapter() {
+      const api = {
+        canStart: lifecycle.canStart,
+        start
+      };
+      return mount(api);
+    }
+    return register({
+      typeKey,
+      mount: mountAdapter
+    });
+  }
+  return {
+    registerUsage,
+    dropTarget: dropTargetAPI.dropTargetForConsumers,
+    monitor: monitorAPI.monitorForConsumers
+  };
+}