@atlaskit/pragmatic-drag-and-drop 0.17.0

package/dist/cjs/util/fix-post-drag-pointer-bug.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fixPostDragPointerBug = fixPostDragPointerBug;
+var _bindEventListener = require("bind-event-listener");
+/** Set a `style` property on a `HTMLElement`
+ *
+ * @returns a `cleanup` function to restore the `style` property to it's original state
+ */
+function setStyle(el, _ref) {
+  var property = _ref.property,
+    rule = _ref.rule,
+    _ref$priority = _ref.priority,
+    priority = _ref$priority === void 0 ? '' : _ref$priority;
+  var originalValue = el.style.getPropertyValue(property);
+  var originalPriority = el.style.getPropertyPriority(property);
+  el.style.setProperty(property, rule, priority);
+  return function cleanup() {
+    el.style.setProperty(property, originalValue, originalPriority);
+  };
+}
+
+/**
+ * Allow the user to continue to interact with the element their pointer is over at the end of the drag.
+ * This is important to allow the user to be able to click, drag (etc) after they have finished a drag
+ *
+ * @returns a `cleanup` function to restore all elements under the users pointer to their original state
+ */
+function allowPointerEventsOnElementUnderPointer(_ref2) {
+  var current = _ref2.current;
+  var underUsersPointer = document.elementFromPoint(current.input.clientX, current.input.clientY);
+  if (!(underUsersPointer instanceof HTMLElement)) {
+    return null;
+  }
+
+  // Debug note: change from 'pointer-events: none' to 'background: green'
+  // to get a better sense of what is being achieved
+  return setStyle(underUsersPointer, {
+    property: 'pointer-events',
+    rule: 'auto',
+    priority: 'important'
+  });
+}
+function blockPointerEventsOnEverything() {
+  var _element$sheet;
+  var element = document.createElement('style');
+  // Adding a data attribute so to make it super clear to consumers
+  // (and to our tests) what this temporary style tag is for
+  element.setAttribute('pdnd-post-drag-fix', 'true');
+  document.head.appendChild(element);
+
+  // Debug note: change from 'pointer-events: none' to 'background: red'
+  // to get a better sense of what is being achieved
+  (_element$sheet = element.sheet) === null || _element$sheet === void 0 ? void 0 : _element$sheet.insertRule('* { pointer-events: none !important; }');
+  return function cleanup() {
+    document.head.removeChild(element);
+  };
+}
+
+/** 🔥🤮 Fix (Chrome, Safari and Firefox) bug where the element under where the user started dragging
+ * (on the viewport) is entered into by the browser after a drag finishes ("drop" or "dragend")
+ *
+ * @description
+ *
+ * Block pointer events on all elements except for the specific element that pointer is currently over
+ *
+ * - [Visual explanation of bug](https://twitter.com/alexandereardon/status/1633614212873465856)
+ * - [Chrome bug](https://bugs.chromium.org/p/chromium/issues/detail?id=410328)
+ */
+function fixPostDragPointerBug(_ref3) {
+  var current = _ref3.current;
+  // Queuing a microtask to give any opportunity for frameworks to update their UI in a microtask
+  // Note: react@18 does standard state updates in a microtask
+  // We do this so our `atDestination` gets the _actual_ element that is under the users pointer
+  // at the end of the drag.
+  queueMicrotask(function () {
+    var undoUnderPointer = allowPointerEventsOnElementUnderPointer({
+      current: current
+    });
+
+    // This will also block pointer-events on the children of the element under the users pointer.
+    // This is what we want. If the user drops on a container element we don't want the children
+    // of the container to be incorrectly entered into
+    var undoGlobalBlock = blockPointerEventsOnEverything();
+    function cleanup() {
+      unbindEvents();
+      undoUnderPointer === null || undoUnderPointer === void 0 ? void 0 : undoUnderPointer();
+      undoGlobalBlock();
+    }
+    var unbindEvents = (0, _bindEventListener.bindAll)(window, [{
+      type: 'pointerdown',
+      listener: cleanup
+    }, {
+      type: 'pointermove',
+      listener: cleanup
+    }, {
+      type: 'focusin',
+      listener: cleanup
+    }, {
+      type: 'focusout',
+      listener: cleanup
+    },
+    // a 'pointerdown' should happen before 'dragstart', but just being super safe
+    {
+      type: 'dragstart',
+      listener: cleanup
+    }], {
+      // Using `capture` is more likely to not be impacted by consumers stopping events
+      capture: true
+    });
+  });
+}

package/dist/cjs/util/get-input.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInput = getInput;
+function getInput(event) {
+  return {
+    altKey: event.altKey,
+    button: event.button,
+    buttons: event.buttons,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    shiftKey: event.shiftKey,
+    clientX: event.clientX,
+    clientY: event.clientY,
+    pageX: event.pageX,
+    pageY: event.pageY
+  };
+}

package/dist/cjs/util/once.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.once = once;
+/** Provide a function that you only ever want to be called a single time */
+function once(fn) {
+  var cache = null;
+  return function wrapped() {
+    if (!cache) {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var result = fn.apply(this, args);
+      cache = {
+        result: result
+      };
+    }
+    return cache.result;
+  };
+}

package/dist/cjs/util/reorder.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reorder = reorder;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+/**
+ * Reorder a provided `list`
+ * Returns a new array and does not modify the original array
+ */
+function reorder(_ref) {
+  var list = _ref.list,
+    startIndex = _ref.startIndex,
+    finishIndex = _ref.finishIndex;
+  if (startIndex === -1 || finishIndex === -1) {
+    return list;
+  }
+  var result = Array.from(list);
+  var _result$splice = result.splice(startIndex, 1),
+    _result$splice2 = (0, _slicedToArray2.default)(_result$splice, 1),
+    removed = _result$splice2[0];
+  result.splice(finishIndex, 0, removed);
+  return result;
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollJustEnoughIntoView = scrollJustEnoughIntoView;
+/**
+ * Scroll an `element` just enough into view so that the element becomes totally visible.
+ * If the element is already totally visible then no scrolling will occur.
+ */
+function scrollJustEnoughIntoView(_ref) {
+  var element = _ref.element;
+  element.scrollIntoView({
+    block: 'nearest',
+    inline: 'nearest'
+  });
+}

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

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setCustomNativeDragPreview = setCustomNativeDragPreview;
+var _elementAdapter = require("../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(_ref) {
+  var container = _ref.container,
+    placement = _ref.placement,
+    nativeSetDragImage = _ref.nativeSetDragImage;
+  if ((placement === null || placement === void 0 ? void 0 : placement.type) === 'center') {
+    var 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: "".concat(placement.x, " solid transparent"),
+      borderTop: "".concat(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,
+ *    });
+ *    },
+ * });
+ */
+function setCustomNativeDragPreview(_ref2) {
+  var render = _ref2.render,
+    nativeSetDragImage = _ref2.nativeSetDragImage,
+    placement = _ref2.placement;
+  var 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);
+  var unmount = render({
+    container: container
+  });
+  setImage({
+    container: container,
+    placement: placement,
+    nativeSetDragImage: nativeSetDragImage
+  });
+  function cleanup() {
+    unbindMonitor();
+    unmount === null || unmount === void 0 ? void 0 : unmount();
+    document.body.removeChild(container);
+  }
+  var unbindMonitor = (0, _elementAdapter.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/cjs/version.json

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

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

@@ -0,0 +1,143 @@
+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';
+const draggableRegistry = new WeakMap();
+function addToRegistry(args) {
+  draggableRegistry.set(args.element, args);
+  return function cleanup() {
+    draggableRegistry.delete(args.element);
+  };
+}
+const adapter = makeAdapter({
+  typeKey: 'element',
+  defaultDropEffect: 'move',
+  mount(api) {
+    return bind(window, {
+      type: 'dragstart',
+      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
+        const 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
+        const entry = draggableRegistry.get(target);
+
+        // no matching element found
+        // → dragging an element with `draggable="true"` that is not controlled by us
+        if (!entry) {
+          return null;
+        }
+        const input = getInput(event);
+        const feedback = {
+          element: entry.element,
+          dragHandle: (_entry$dragHandle = entry.dragHandle) !== null && _entry$dragHandle !== void 0 ? _entry$dragHandle : null,
+          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) {
+          const 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) {}
+        const 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 : {}
+        };
+        const makeDragType = {
+          key: 'element',
+          startedFrom: 'internal',
+          payload
+        };
+        api.start({
+          event,
+          dragInterface: makeDragType
+        });
+      }
+    });
+  },
+  dispatchEventToSource: ({
+    eventName,
+    payload
+  }) => {
+    var _draggableRegistry$ge, _draggableRegistry$ge2;
+    // 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 const dropTargetForElements = adapter.dropTarget;
+export const 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') {
+    const 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,
+        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/es2019/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
+  const items = event.dataTransfer.items;
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.kind !== 'file') {
+      items.remove(i);
+    }
+  }
+  return items;
+}
+const adapter = makeAdapter({
+  typeKey: 'file',
+  defaultDropEffect: 'copy',
+  mount(api) {
+    return bind(window, {
+      type: 'dragenter',
+      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;
+        }
+        const 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(event) {
+            return {
+              items: getFileItems(event)
+            };
+          }
+        };
+        api.start({
+          event,
+          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 const 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 const monitorForFiles = args => {
+  // note: not removing unsupported events from args; just leaning on the type system
+  return adapter.monitor(args);
+};

package/dist/es2019/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();
+}
+let unbindEvents = null;
+/**
+ * Block drag operations outside of `@atlaskit/pragmatic-drag-and-drop`
+ */
+export const cancelUnhandled = {
+  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() {
+    var _unbindEvents2;
+    (_unbindEvents2 = unbindEvents) === null || _unbindEvents2 === void 0 ? void 0 : _unbindEvents2();
+    unbindEvents = null;
+  }
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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