@atlaskit/pragmatic-drag-and-drop 0.17.0

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

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.draggable = draggable;
+exports.monitorForElements = exports.dropTargetForElements = void 0;
+var _bindEventListener = require("bind-event-listener");
+var _makeAdapter = require("../make-adapter/make-adapter");
+var _addAttribute = require("../util/add-attribute");
+var _combine = require("../util/combine");
+var _getInput = require("../util/get-input");
+var draggableRegistry = new WeakMap();
+function addToRegistry(args) {
+  draggableRegistry.set(args.element, args);
+  return function cleanup() {
+    draggableRegistry.delete(args.element);
+  };
+}
+var adapter = (0, _makeAdapter.makeAdapter)({
+  typeKey: 'element',
+  defaultDropEffect: 'move',
+  mount: function mount(api) {
+    return (0, _bindEventListener.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 = (0, _getInput.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);
+  }
+});
+var dropTargetForElements = adapter.dropTarget;
+exports.dropTargetForElements = dropTargetForElements;
+var monitorForElements = adapter.monitor;
+exports.monitorForElements = monitorForElements;
+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 (0, _combine.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), (0, _addAttribute.addAttribute)(args.element, {
+    attribute: 'draggable',
+    value: 'true'
+  }));
+}

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

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.monitorForFiles = exports.dropTargetForFiles = void 0;
+var _bindEventListener = require("bind-event-listener");
+var _makeAdapter = require("../make-adapter/make-adapter");
+var _combine = require("../util/combine");
+var _enteringAndLeavingTheWindow = require("../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 = (0, _makeAdapter.makeAdapter)({
+  typeKey: 'file',
+  defaultDropEffect: 'copy',
+  mount: function mount(api) {
+    return (0, _bindEventListener.bind)(window, {
+      type: 'dragenter',
+      listener: function listener(event) {
+        if (!api.canStart(event)) {
+          return;
+        }
+
+        // already cancelled by something else
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (!(0, _enteringAndLeavingTheWindow.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
+var dropTargetForFiles = function dropTargetForFiles(args) {
+  return (0, _combine.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));
+};
+exports.dropTargetForFiles = dropTargetForFiles;
+var monitorForFiles = function monitorForFiles(args) {
+  // note: not removing unsupported events from args; just leaning on the type system
+  return adapter.monitor(args);
+};
+exports.monitorForFiles = monitorForFiles;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cancelUnhandled = void 0;
+var _bindEventListener = require("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`
+ */
+var cancelUnhandled = {
+  start: function start() {
+    var _unbindEvents;
+    (_unbindEvents = unbindEvents) === null || _unbindEvents === void 0 ? void 0 : _unbindEvents();
+    unbindEvents = (0, _bindEventListener.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;
+  }
+};
+exports.cancelUnhandled = cancelUnhandled;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "draggable", {
+  enumerable: true,
+  get: function get() {
+    return _elementAdapter.draggable;
+  }
+});
+Object.defineProperty(exports, "dropTargetForElements", {
+  enumerable: true,
+  get: function get() {
+    return _elementAdapter.dropTargetForElements;
+  }
+});
+Object.defineProperty(exports, "monitorForElements", {
+  enumerable: true,
+  get: function get() {
+    return _elementAdapter.monitorForElements;
+  }
+});
+var _elementAdapter = require("../../adapter/element-adapter");

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "dropTargetForFiles", {
+  enumerable: true,
+  get: function get() {
+    return _fileAdapter.dropTargetForFiles;
+  }
+});
+Object.defineProperty(exports, "monitorForFiles", {
+  enumerable: true,
+  get: function get() {
+    return _fileAdapter.monitorForFiles;
+  }
+});
+var _fileAdapter = require("../../adapter/file-adapter");

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "cancelUnhandled", {
+  enumerable: true,
+  get: function get() {
+    return _cancelUnhandled.cancelUnhandled;
+  }
+});
+var _cancelUnhandled = require("../../addon/cancel-unhandled");

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "dropTargetForCrossWindowElements", {
+  enumerable: true,
+  get: function get() {
+    return _crossWindowElementAdapter.dropTargetForCrossWindowElements;
+  }
+});
+Object.defineProperty(exports, "extractCrossWindowResult", {
+  enumerable: true,
+  get: function get() {
+    return _crossWindowElementAdapter.extractCrossWindowResult;
+  }
+});
+Object.defineProperty(exports, "monitorForCrossWindowElements", {
+  enumerable: true,
+  get: function get() {
+    return _crossWindowElementAdapter.monitorForCrossWindowElements;
+  }
+});
+Object.defineProperty(exports, "setCrossWindowData", {
+  enumerable: true,
+  get: function get() {
+    return _crossWindowElementAdapter.setCrossWindowData;
+  }
+});
+var _crossWindowElementAdapter = require("../../experimental/cross-window-element-adapter");

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "combine", {
+  enumerable: true,
+  get: function get() {
+    return _combine.combine;
+  }
+});
+var _combine = require("../../util/combine");

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "disableNativeDragPreview", {
+  enumerable: true,
+  get: function get() {
+    return _disableNativeDragPreview.disableNativeDragPreview;
+  }
+});
+var _disableNativeDragPreview = require("../../util/disable-native-drag-preview");

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "once", {
+  enumerable: true,
+  get: function get() {
+    return _once.once;
+  }
+});
+var _once = require("../../util/once");

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "reorder", {
+  enumerable: true,
+  get: function get() {
+    return _reorder.reorder;
+  }
+});
+var _reorder = require("../../util/reorder");

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "scrollJustEnoughIntoView", {
+  enumerable: true,
+  get: function get() {
+    return _scrollJustEnoughIntoView.scrollJustEnoughIntoView;
+  }
+});
+var _scrollJustEnoughIntoView = require("../../util/scroll-just-enough-into-view");

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "setCustomNativeDragPreview", {
+  enumerable: true,
+  get: function get() {
+    return _setCustomNativeDragPreview.setCustomNativeDragPreview;
+  }
+});
+var _setCustomNativeDragPreview = require("../../util/set-custom-native-drag-preview");

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

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dropTargetForCrossWindowElements = void 0;
+exports.extractCrossWindowResult = extractCrossWindowResult;
+exports.monitorForCrossWindowElements = void 0;
+exports.setCrossWindowData = setCrossWindowData;
+var _bindEventListener = require("bind-event-listener");
+var _makeAdapter = require("../make-adapter/make-adapter");
+var _combine = require("../util/combine");
+var _enteringAndLeavingTheWindow = require("../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 = (0, _makeAdapter.makeAdapter)({
+  typeKey: 'experimental-cross-window-element',
+  defaultDropEffect: 'move',
+  mount: function mount(api) {
+    return (0, _combine.combine)((0, _bindEventListener.bindAll)(window, [{
+      type: 'dragenter',
+      listener: function listener(event) {
+        if (!api.canStart(event)) {
+          return;
+        }
+
+        // already cancelled by something else
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (!(0, _enteringAndLeavingTheWindow.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);
+      }
+    }));
+  }
+});
+function setCrossWindowData(_ref) {
+  var data = _ref.data;
+  storage.setData(data);
+}
+function extractCrossWindowResult() {
+  return storage.findResult();
+}
+var dropTargetForCrossWindowElements = function dropTargetForCrossWindowElements(args) {
+  return (0, _combine.combine)(
+  // at least one drop target required before we will start listening for cross element dragging
+  adapter.registerUsage(), adapter.dropTarget(args));
+};
+exports.dropTargetForCrossWindowElements = dropTargetForCrossWindowElements;
+var monitorForCrossWindowElements = adapter.monitor;
+exports.monitorForCrossWindowElements = monitorForCrossWindowElements;

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// 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.
+var _default = {};
+exports.default = _default;

package/dist/cjs/internal-types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});