@atlaskit/pragmatic-drag-and-drop 0.17.0

package/dist/es2019/util/set-custom-native-drag-preview.js

@@ -0,0 +1,106 @@
+import { monitorForElements } from '../adapter/element-adapter';
+
+/** A function to remove the element that has been added to the `container`.
+ * @example () => ReactDOM.unmountComponentAtNode(container)
+ */
+
+/** A function that will render a preview element into a `container` `HTMLElement` */
+
+/** Any valid CSS string value
+ * @example `calc(var(--grid) * 2)
+ */
+
+/**
+ * Where to place the custom drag preview
+ *
+ * `type: 'center'`: Place the center of the drag preview user the users pointer
+ *
+ * `type: 'offset-from-pointer'`: Shift the drag preview away from the users pointer
+ */
+
+function setImage({
+  container,
+  placement,
+  nativeSetDragImage
+}) {
+  if ((placement === null || placement === void 0 ? void 0 : placement.type) === 'center') {
+    const box = container.getBoundingClientRect();
+    nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, box.width / 2, box.height / 2);
+    return;
+  }
+  if ((placement === null || placement === void 0 ? void 0 : placement.type) === 'offset-from-pointer') {
+    // Using a transparent border to push the drag preview away
+    // from the user's pointer.
+    // In Chrome and Safari we could use `padding`:
+    // padding: 'var(--grid)',
+    // But it does not work in Firefox which trims the padding (or inner margin)
+    Object.assign(container.style, {
+      borderLeft: `${placement.x} solid transparent`,
+      borderTop: `${placement.y} solid transparent`
+    });
+  }
+  nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, 0, 0);
+}
+
+/** This function provides the ability to mount an element for it to be used as the native drag preview
+ *
+ * @example
+ * draggable({
+ *  onGenerateDragPreview: ({ nativeSetDragImage }) => {
+ *    setCustomNativeDragPreview({
+ *      render: ({ container }) => {
+ *        ReactDOM.render(<Preview item={item} />, container);
+ *        return () => ReactDOM.unmountComponentAtNode(container);
+ *      },
+ *      nativeSetDragImage,
+ *    });
+ *    },
+ * });
+ */
+export function setCustomNativeDragPreview({
+  render,
+  nativeSetDragImage,
+  placement
+}) {
+  const container = document.createElement('div');
+  Object.assign(container.style, {
+    // Ensuring we don't cause reflow when adding the element to the page
+    // Using `position:fixed` rather than `position:absolute` so we are
+    // positioned on the current viewport.
+    // `position:fixed` also creates a new stacking context, so we don't need to do that here
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    // Using maximum possible z-index so that this element will always be on top
+    // https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index
+    // Did not use `layers` in `@atlaskit/theme` because:
+    // 1. This element is not a 'layer' in the conventional sense, as this element
+    //    is only created for a single frame for the browser to take a photo of it,
+    //    and then it is destroyed
+    // 2. Did not want to add a dependency onto `@atlaskit/theme`
+    // 3. Want to always be on top of product UI which might have higher z-index's
+    zIndex: 2147483647,
+    // Avoiding any additional events caused by the new element (being super safe)
+    pointerEvents: 'none'
+  });
+  document.body.append(container);
+  const unmount = render({
+    container
+  });
+  setImage({
+    container,
+    placement,
+    nativeSetDragImage
+  });
+  function cleanup() {
+    unbindMonitor();
+    unmount === null || unmount === void 0 ? void 0 : unmount();
+    document.body.removeChild(container);
+  }
+  const unbindMonitor = monitorForElements({
+    // Remove portal in the dragstart event so that the user will never see it
+    onDragStart: cleanup,
+    // Backup: remove portal when the drop finishes (this would be an error case)
+    onDrop: cleanup
+  });
+}

package/dist/es2019/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/pragmatic-drag-and-drop",
+	"version": "0.17.0",
+	"sideEffects": false
+}

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

@@ -0,0 +1,142 @@
+import { bind } from 'bind-event-listener';
+import { makeAdapter } from '../make-adapter/make-adapter';
+import { addAttribute } from '../util/add-attribute';
+import { combine } from '../util/combine';
+import { getInput } from '../util/get-input';
+var draggableRegistry = new WeakMap();
+function addToRegistry(args) {
+  draggableRegistry.set(args.element, args);
+  return function cleanup() {
+    draggableRegistry.delete(args.element);
+  };
+}
+var adapter = makeAdapter({
+  typeKey: 'element',
+  defaultDropEffect: 'move',
+  mount: function mount(api) {
+    return bind(window, {
+      type: 'dragstart',
+      listener: function listener(event) {
+        var _entry$dragHandle, _entry$dragHandle2, _entry$getInitialData, _entry$getInitialData2;
+        if (!api.canStart(event)) {
+          return;
+        }
+        // the closest parent that is a draggable element will be marked as
+        // the `event.target` for the event
+        var target = event.target;
+
+        // this source is only for elements
+        // Note: only HTMLElements can have the "draggable" attribute
+        if (!(target instanceof HTMLElement)) {
+          return null;
+        }
+
+        // see if the thing being dragged is owned by us
+        var entry = draggableRegistry.get(target);
+
+        // no matching element found
+        // → dragging an element with `draggable="true"` that is not controlled by us
+        if (!entry) {
+          return null;
+        }
+        var input = getInput(event);
+        var feedback = {
+          element: entry.element,
+          dragHandle: (_entry$dragHandle = entry.dragHandle) !== null && _entry$dragHandle !== void 0 ? _entry$dragHandle : null,
+          input: input
+        };
+
+        // Check: does the draggable want to allow dragging?
+        if (entry.canDrag && !entry.canDrag(feedback)) {
+          // cancel drag operation if we cannot drag
+          event.preventDefault();
+          return null;
+        }
+
+        // Check: is there a drag handle and is the user using it?
+        if (entry.dragHandle) {
+          var over = document.elementFromPoint(input.clientX, input.clientY);
+
+          // if we are not dragging from the drag handle (or something inside the drag handle)
+          // then we will cancel the active drag
+          if (!entry.dragHandle.contains(over)) {
+            event.preventDefault();
+            return null;
+          }
+        }
+
+        // Must set any media type for iOS15 to work
+        // Doing this will fail in firefox though, so we
+        // wrap the operation in a try/catch
+        try {
+          var _event$dataTransfer;
+          (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setData('application/vnd.pdnd', '');
+        } catch (e) {}
+        var payload = {
+          element: entry.element,
+          dragHandle: (_entry$dragHandle2 = entry.dragHandle) !== null && _entry$dragHandle2 !== void 0 ? _entry$dragHandle2 : null,
+          data: (_entry$getInitialData = (_entry$getInitialData2 = entry.getInitialData) === null || _entry$getInitialData2 === void 0 ? void 0 : _entry$getInitialData2.call(entry, feedback)) !== null && _entry$getInitialData !== void 0 ? _entry$getInitialData : {}
+        };
+        var makeDragType = {
+          key: 'element',
+          startedFrom: 'internal',
+          payload: payload
+        };
+        api.start({
+          event: event,
+          dragInterface: makeDragType
+        });
+      }
+    });
+  },
+  dispatchEventToSource: function dispatchEventToSource(_ref) {
+    var _draggableRegistry$ge, _draggableRegistry$ge2;
+    var eventName = _ref.eventName,
+      payload = _ref.payload;
+    // During a drag operation, a draggable can be:
+    // - remounted with different functions
+    // - removed completely
+    // So we need to get the latest entry from the registry in order
+    // to call the latest event functions
+
+    (_draggableRegistry$ge = draggableRegistry.get(payload.source.element)) === null || _draggableRegistry$ge === void 0 ? void 0 : (_draggableRegistry$ge2 = _draggableRegistry$ge[eventName]) === null || _draggableRegistry$ge2 === void 0 ? void 0 : _draggableRegistry$ge2.call(_draggableRegistry$ge,
+    // I cannot seem to get the types right here.
+    // TS doesn't seem to like that one event can need `nativeSetDragImage`
+    // @ts-expect-error
+    payload);
+  }
+});
+export var dropTargetForElements = adapter.dropTarget;
+export var monitorForElements = adapter.monitor;
+export function draggable(args) {
+  // Guardrail: warn if the drag handle is not contained in draggable element
+  if (process.env.NODE_ENV !== 'production') {
+    if (args.dragHandle && !args.element.contains(args.dragHandle)) {
+      // eslint-disable-next-line no-console
+      console.warn('Drag handle element must be contained in draggable element', {
+        element: args.element,
+        dragHandle: args.dragHandle
+      });
+    }
+  }
+  // Guardrail: warn if the draggable element is already registered
+  if (process.env.NODE_ENV !== 'production') {
+    var existing = draggableRegistry.get(args.element);
+    if (existing) {
+      // eslint-disable-next-line no-console
+      console.warn('You have already registered a `draggable` on the same element', {
+        existing: existing,
+        proposed: args
+      });
+    }
+  }
+  return combine(
+  // making the draggable register the adapter rather than drop targets
+  // this is because you *must* have a draggable element to start a drag
+  // but you _might_ not have any drop targets immediately
+  // (You might create drop targets async)
+  adapter.registerUsage(), addToRegistry(args), addAttribute(args.element, {
+    attribute: 'draggable',
+    value: 'true'
+  }));
+}

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

@@ -0,0 +1,90 @@
+import { bind } 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';
+function getFileItems(event) {
+  if (event.dataTransfer == null) {
+    return null;
+  }
+  // filtering out anything that is not a file
+  var items = event.dataTransfer.items;
+  for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+    if (item.kind !== 'file') {
+      items.remove(i);
+    }
+  }
+  return items;
+}
+var adapter = makeAdapter({
+  typeKey: 'file',
+  defaultDropEffect: 'copy',
+  mount: function mount(api) {
+    return bind(window, {
+      type: 'dragenter',
+      listener: function listener(event) {
+        if (!api.canStart(event)) {
+          return;
+        }
+
+        // already cancelled by something else
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (!isEnteringWindow({
+          dragEnter: event
+        })) {
+          return;
+        }
+        if (event.dataTransfer == null) {
+          return;
+        }
+
+        // Checking if we are dragging any files
+        // This check works in Chrome, Firefox and Chrome
+        if (!event.dataTransfer.types.includes('Files')) {
+          return null;
+        }
+        var dragInterface = {
+          key: 'file',
+          startedFrom: 'external',
+          payload: {
+            // Not giving `.items` initially as it cannot be safely and consistently
+            // accessed across browsers
+            // Not giving `.types` as the consumer already knows a file is being dragged
+            items: null
+          },
+          getDropPayload: function getDropPayload(event) {
+            return {
+              items: getFileItems(event)
+            };
+          }
+        };
+        api.start({
+          event: event,
+          dragInterface: dragInterface
+        });
+      }
+    });
+  }
+});
+
+// Some events don't make sense for external files
+//
+// onGenerateDragPreview: drag preview is always generated by the browser
+// type WithoutUselessEvents<T> = Omit<T, 'onDragStart' | 'onGenerateDragPreview'>;
+//
+// onDragStart: an external file can never start from inside a drop target
+// (it will always come from outside and we never let a file drag start in a drop target)
+// We remove `onDragStart` from drop targets, but monitors can still listen for a start
+export var dropTargetForFiles = function dropTargetForFiles(args) {
+  return combine(
+  // at least one drop target required before we will start listening for file events
+  adapter.registerUsage(),
+  // note: not removing unsupported events from args; just leaning on the type system
+  adapter.dropTarget(args));
+};
+export var monitorForFiles = function monitorForFiles(args) {
+  // note: not removing unsupported events from args; just leaning on the type system
+  return adapter.monitor(args);
+};

package/dist/esm/addon/cancel-unhandled.js

@@ -0,0 +1,43 @@
+import { bindAll } from 'bind-event-listener';
+function cancel(event) {
+  // if `@atlaskit/pragmatic-drag-and-drop` has already prevented the event
+  // we don't need to do anything
+  if (event.defaultPrevented) {
+    return;
+  }
+  // Using "move" as the drop effect as that uses the standard
+  // cursor. Doing this so the user doesn't think they are dropping
+  // on the page
+  // Note: using "none" will not allow a drop to occur, so we are using "move"
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move';
+  }
+  // cancel the default browser behaviour
+  // doing this will tell the browser that we have handled the drop
+  event.preventDefault();
+}
+var unbindEvents = null;
+/**
+ * Block drag operations outside of `@atlaskit/pragmatic-drag-and-drop`
+ */
+export var cancelUnhandled = {
+  start: function start() {
+    var _unbindEvents;
+    (_unbindEvents = unbindEvents) === null || _unbindEvents === void 0 ? void 0 : _unbindEvents();
+    unbindEvents = bindAll(window, [{
+      type: 'dragover',
+      listener: cancel
+    }, {
+      type: 'dragenter',
+      listener: cancel
+    }, {
+      type: 'drop',
+      listener: cancel
+    }]);
+  },
+  stop: function stop() {
+    var _unbindEvents2;
+    (_unbindEvents2 = unbindEvents) === null || _unbindEvents2 === void 0 ? void 0 : _unbindEvents2();
+    unbindEvents = null;
+  }
+};

package/dist/esm/entry-point/adapter/element.js

@@ -0,0 +1 @@
+export { draggable, dropTargetForElements, monitorForElements } from '../../adapter/element-adapter';

package/dist/esm/entry-point/adapter/file.js

@@ -0,0 +1 @@
+export { monitorForFiles, dropTargetForFiles } from '../../adapter/file-adapter';

package/dist/esm/entry-point/addon/cancel-unhandled.js

@@ -0,0 +1 @@
+export { cancelUnhandled } from '../../addon/cancel-unhandled';

package/dist/esm/entry-point/experimental/cross-with-element-adapter.js

@@ -0,0 +1 @@
+export { setCrossWindowData, extractCrossWindowResult, dropTargetForCrossWindowElements, monitorForCrossWindowElements } from '../../experimental/cross-window-element-adapter';

package/dist/esm/entry-point/types.js

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

package/dist/esm/entry-point/util/combine.js

@@ -0,0 +1 @@
+export { combine } from '../../util/combine';

package/dist/esm/entry-point/util/disable-native-drag-preview.js

@@ -0,0 +1 @@
+export { disableNativeDragPreview } from '../../util/disable-native-drag-preview';

package/dist/esm/entry-point/util/once.js

@@ -0,0 +1 @@
+export { once } from '../../util/once';

package/dist/esm/entry-point/util/reorder.js

@@ -0,0 +1 @@
+export { reorder } from '../../util/reorder';

package/dist/esm/entry-point/util/scroll-just-enough-into-view.js

@@ -0,0 +1 @@
+export { scrollJustEnoughIntoView } from '../../util/scroll-just-enough-into-view';

package/dist/esm/entry-point/util/set-custom-native-drag-preview.js

@@ -0,0 +1 @@
+export { setCustomNativeDragPreview } from '../../util/set-custom-native-drag-preview';

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

@@ -0,0 +1,120 @@
+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';
+var storage = function () {
+  var dataKey = 'private-pdnd-data';
+  var 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() {
+    var raw = localStorage.getItem(resultKey);
+    if (raw == null) {
+      return null;
+    }
+
+    // TODO: improve type
+    return raw;
+  }
+  function clearStorage() {
+    localStorage.removeItem(dataKey);
+    localStorage.removeItem(resultKey);
+  }
+  return {
+    clearStorage: clearStorage,
+    setData: setData,
+    findData: findData,
+    setResult: setResult,
+    findResult: findResult
+  };
+}();
+var adapter = makeAdapter({
+  typeKey: 'experimental-cross-window-element',
+  defaultDropEffect: 'move',
+  mount: function mount(api) {
+    return combine(bindAll(window, [{
+      type: 'dragenter',
+      listener: function 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;
+        }
+        var data = storage.findData();
+        if (data == null) {
+          return;
+        }
+        var dragInterface = {
+          key: 'experimental-cross-window-element',
+          startedFrom: 'external',
+          payload: {
+            data: data
+          }
+        };
+        api.start({
+          event: event,
+          dragInterface: 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: function onDrop(payload) {
+        var result = payload.location.current.dropTargets.length > 0 ? 'moved' : 'none';
+        storage.setResult(result);
+      }
+    }));
+  }
+});
+export function setCrossWindowData(_ref) {
+  var data = _ref.data;
+  storage.setData(data);
+}
+export function extractCrossWindowResult() {
+  return storage.findResult();
+}
+export var dropTargetForCrossWindowElements = function 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 var monitorForCrossWindowElements = adapter.monitor;

package/dist/esm/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/esm/internal-types.js

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

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

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