@bsol-oss/react-datatable5 7.6.2 → 7.7.0

package/dist/index.mjs

@@ -10,7 +10,11 @@ import { FaUpDown, FaGripLinesVertical } from 'react-icons/fa6';
 import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
 import { CgClose } from 'react-icons/cg';
 import { IoMdEye, IoMdCheckbox } from 'react-icons/io';
-import { monitorForElements, draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { bind, bindAll } from 'bind-event-listener';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import rafSchd from 'raf-schd';
 import invariant from 'tiny-invariant';
 import { HiMiniEllipsisHorizontal, HiChevronLeft, HiChevronRight } from 'react-icons/hi2';
 import { flexRender, makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, createColumnHelper } from '@tanstack/react-table';
@@ -24,9 +28,6 @@ import axios from 'axios';
 import { useDebounce } from '@uidotdev/usehooks';
 import { useFormContext, useForm, FormProvider } from 'react-hook-form';
 import dayjs from 'dayjs';
-import { dropTargetForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
-import { getFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
-import { getText } from '@atlaskit/pragmatic-drag-and-drop/external/text';
 
 const DataTableContext = createContext({
     table: {},
@@ -438,6 +439,1896 @@ const EditSortingButton = ({ text, icon = jsx(MdOutlineSort, {}), title = "Edit
     return (jsx(Fragment, { children: jsxs(DialogRoot, { size: ["full", "full", "md", "md"], children: [jsx(DialogBackdrop, {}), jsx(DialogTrigger, { children: jsxs(Button$1, { as: "div", variant: "ghost", onClick: sortingModal.onOpen, children: [icon, " ", text] }) }), jsxs(DialogContent, { children: [jsx(DialogCloseTrigger, {}), jsxs(DialogHeader, { children: [jsx(DialogTitle, {}), title] }), jsx(DialogBody, { children: jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(TableSorter, {}), jsx(ResetSortingButton, {})] }) }), jsx(DialogFooter, {})] })] }) }));
 };
 
+// pulling this into a separate file so adapter(s) that don't
+// need the honey pot can pay as little as possible for it.
+var honeyPotDataAttribute = 'data-pdnd-honey-pot';
+
+function isHoneyPotElement(target) {
+  return target instanceof Element && target.hasAttribute(honeyPotDataAttribute);
+}
+
+function getElementFromPointWithoutHoneypot(client) {
+  // eslint-disable-next-line no-restricted-syntax
+  var _document$elementsFro = document.elementsFromPoint(client.x, client.y),
+    _document$elementsFro2 = _slicedToArray(_document$elementsFro, 2),
+    top = _document$elementsFro2[0],
+    second = _document$elementsFro2[1];
+  if (!top) {
+    return null;
+  }
+  if (isHoneyPotElement(top)) {
+    return second !== null && second !== void 0 ? second : null;
+  }
+  return top;
+}
+
+// Maximum possible z-index
+// https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index
+var maxZIndex = 2147483647;
+
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var honeyPotSize = 2;
+var halfHoneyPotSize = honeyPotSize / 2;
+
+/**
+ * `clientX` and `clientY` can be in sub pixels (eg `2.332`)
+ * However, browser hitbox testing is commonly do to the closest pixel.
+ *
+ * → https://issues.chromium.org/issues/40940531
+ *
+ * To be sure that the honey pot will be over the `client` position,
+ * we `.floor()` `clientX` and`clientY` and then make it `2px` in size.
+ **/
+function floorToClosestPixel(point) {
+  return {
+    x: Math.floor(point.x),
+    y: Math.floor(point.y)
+  };
+}
+
+/**
+ * We want to make sure the honey pot sits around the users position.
+ * This seemed to be the most resilient while testing.
+ */
+function pullBackByHalfHoneyPotSize(point) {
+  return {
+    x: point.x - halfHoneyPotSize,
+    y: point.y - halfHoneyPotSize
+  };
+}
+
+/**
+ * Prevent the honey pot from changing the window size.
+ * This is super unlikely to occur, but just being safe.
+ */
+function preventGoingBackwardsOffScreen(point) {
+  return {
+    x: Math.max(point.x, 0),
+    y: Math.max(point.y, 0)
+  };
+}
+
+/**
+ * Prevent the honey pot from changing the window size.
+ * This is super unlikely to occur, but just being safe.
+ */
+function preventGoingForwardsOffScreen(point) {
+  return {
+    x: Math.min(point.x, window.innerWidth - honeyPotSize),
+    y: Math.min(point.y, window.innerHeight - honeyPotSize)
+  };
+}
+
+/**
+ * Create a `2x2` `DOMRect` around the `client` position
+ */
+function getHoneyPotRectFor(_ref) {
+  var client = _ref.client;
+  var point = preventGoingForwardsOffScreen(preventGoingBackwardsOffScreen(pullBackByHalfHoneyPotSize(floorToClosestPixel(client))));
+
+  // When debugging, it is helpful to
+  // make this element a bit bigger
+  return DOMRect.fromRect({
+    x: point.x,
+    y: point.y,
+    width: honeyPotSize,
+    height: honeyPotSize
+  });
+}
+function getRectStyles(_ref2) {
+  var clientRect = _ref2.clientRect;
+  return {
+    left: "".concat(clientRect.left, "px"),
+    top: "".concat(clientRect.top, "px"),
+    width: "".concat(clientRect.width, "px"),
+    height: "".concat(clientRect.height, "px")
+  };
+}
+function isWithin(_ref3) {
+  var client = _ref3.client,
+    clientRect = _ref3.clientRect;
+  return (
+    // is within horizontal bounds
+    client.x >= clientRect.x && client.x <= clientRect.x + clientRect.width &&
+    // is within vertical bounds
+    client.y >= clientRect.y && client.y <= clientRect.y + clientRect.height
+  );
+}
+/**
+ * The honey pot fix is designed to get around a painful bug in all browsers.
+ *
+ * [Overview](https://www.youtube.com/watch?v=udE9qbFTeQg)
+ *
+ * **Background**
+ *
+ * When a drag starts, browsers incorrectly think that the users pointer is
+ * still depressed where the drag started. Any element that goes under this position
+ * will be entered into, causing `"mouseenter"` events and `":hover"` styles to be applied.
+ *
+ * _This is a violation of the spec_
+ *
+ * > "From the moment that the user agent is to initiate the drag-and-drop operation,
+ * > until the end 	of the drag-and-drop operation, device input events
+ * > (e.g. mouse and keyboard events) must be suppressed."
+ * >
+ * > - https://html.spec.whatwg.org/multipage/dnd.html#drag-and-drop-processing-model
+ *
+ * _Some impacts_
+ *
+ * - `":hover"` styles being applied where they shouldn't (looks messy)
+ * - components such as tooltips responding to `"mouseenter"` can show during a drag,
+ *   and on an element the user isn't even over
+ *
+ * Bug: https://issues.chromium.org/issues/41129937
+ *
+ * **Honey pot fix**
+ *
+ * 1. Create an element where the browser thinks the depressed pointer is
+ *    to absorb the incorrect pointer events
+ * 2. Remove that element when it is no longer needed
+ */
+function mountHoneyPot(_ref4) {
+  var initial = _ref4.initial;
+  var element = document.createElement('div');
+  element.setAttribute(honeyPotDataAttribute, 'true');
+
+  // can shift during the drag thanks to Firefox
+  var clientRect = getHoneyPotRectFor({
+    client: initial
+  });
+  Object.assign(element.style, _objectSpread$2(_objectSpread$2({
+    // Setting a background color explicitly to avoid any inherited styles.
+    // Looks like this could be `opacity: 0`, but worried that _might_
+    // cause the element to be ignored on some platforms.
+    // When debugging, set backgroundColor to something like "red".
+    backgroundColor: 'transparent',
+    position: 'fixed',
+    // Being explicit to avoid inheriting styles
+    padding: 0,
+    margin: 0,
+    boxSizing: 'border-box'
+  }, getRectStyles({
+    clientRect: clientRect
+  })), {}, {
+    // We want this element to absorb pointer events,
+    // it's kind of the whole point 😉
+    pointerEvents: 'auto',
+    // Want to make sure the honey pot is top of everything else.
+    // Don't need to worry about native drag previews, as they will
+    // have been rendered (and removed) before the honey pot is rendered
+    zIndex: maxZIndex
+  }));
+  document.body.appendChild(element);
+
+  /**
+   *  🦊 In firefox we can get `"pointermove"` events after the drag
+   * has started, which is a spec violation.
+   * The final `"pointermove"` will reveal where the "depressed" position
+   * is for our honey pot fix.
+   */
+  var unbindPointerMove = bind(window, {
+    type: 'pointermove',
+    listener: function listener(event) {
+      var client = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      clientRect = getHoneyPotRectFor({
+        client: client
+      });
+      Object.assign(element.style, getRectStyles({
+        clientRect: clientRect
+      }));
+    },
+    // using capture so we are less likely to be impacted by event stopping
+    options: {
+      capture: true
+    }
+  });
+  return function finish(_ref5) {
+    var current = _ref5.current;
+    // Don't need this any more
+    unbindPointerMove();
+
+    // If the user is hover the honey pot, we remove it
+    // so that the user can continue to interact with the page normally.
+    if (isWithin({
+      client: current,
+      clientRect: clientRect
+    })) {
+      element.remove();
+      return;
+    }
+    function cleanup() {
+      unbindPostDragEvents();
+      element.remove();
+    }
+    var unbindPostDragEvents = 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
+    },
+    // if the user has dragged something out of the window
+    // and then is dragging something back into the window
+    // the first events we will see are "dragenter" (and then "dragover").
+    // So if we see any of these we need to clear the post drag fix.
+    {
+      type: 'dragenter',
+      listener: cleanup
+    }, {
+      type: 'dragover',
+      listener: cleanup
+    }
+
+    // Not adding a "wheel" event listener, as "wheel" by itself does not
+    // resolve the bug.
+    ], {
+      // Using `capture` so less likely to be impacted by other code stopping events
+      capture: true
+    });
+  };
+}
+function makeHoneyPotFix() {
+  var latestPointerMove = null;
+  function bindEvents() {
+    // For sanity, only collecting this value from when events are first bound.
+    // This prevents the case where a super old "pointermove" could be used
+    // from a prior interaction.
+    latestPointerMove = null;
+    return bind(window, {
+      type: 'pointermove',
+      listener: function listener(event) {
+        latestPointerMove = {
+          x: event.clientX,
+          y: event.clientY
+        };
+      },
+      // listening for pointer move in capture phase
+      // so we are less likely to be impacted by events being stopped.
+      options: {
+        capture: true
+      }
+    });
+  }
+  function getOnPostDispatch() {
+    var finish = null;
+    return function onPostEvent(_ref6) {
+      var eventName = _ref6.eventName,
+        payload = _ref6.payload;
+      // We are adding the honey pot `onDragStart` so we don't
+      // impact the creation of the native drag preview.
+      if (eventName === 'onDragStart') {
+        var _latestPointerMove;
+        var input = payload.location.initial.input;
+
+        // Sometimes there will be no latest "pointermove" (eg iOS).
+        // In which case, we use the start position of the drag.
+        var initial = (_latestPointerMove = latestPointerMove) !== null && _latestPointerMove !== void 0 ? _latestPointerMove : {
+          x: input.clientX,
+          y: input.clientY
+        };
+
+        // Don't need to defensively call `finish()` as `onDrop` from
+        // one interaction is guaranteed to be called before `onDragStart`
+        // of the next.
+        finish = mountHoneyPot({
+          initial: initial
+        });
+      }
+      if (eventName === 'onDrop') {
+        var _finish;
+        var _input = payload.location.current.input;
+        (_finish = finish) === null || _finish === void 0 || _finish({
+          current: {
+            x: _input.clientX,
+            y: _input.clientY
+          }
+        });
+        finish = null;
+        // this interaction is finished, we want to use
+        // the latest "pointermove" for each interaction
+        latestPointerMove = null;
+      }
+    };
+  }
+  return {
+    bindEvents: bindEvents,
+    getOnPostDispatch: getOnPostDispatch
+  };
+}
+
+/** 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;
+  };
+}
+
+// using `cache` as our `isFirefox()` result will not change in a browser
+
+/**
+ * Returns `true` if a `Firefox` browser
+ * */
+var isFirefox = once(function isFirefox() {
+  if (process.env.NODE_ENV === 'test') {
+    return false;
+  }
+  return navigator.userAgent.includes('Firefox');
+});
+
+// using `cache` as our `isSafari()` result will not change in a browser
+
+/**
+ * Returns `true` if a `Safari` browser.
+ * Returns `true` if the browser is running on iOS (they are all Safari).
+ * */
+var isSafari = once(function isSafari() {
+  if (process.env.NODE_ENV === 'test') {
+    return false;
+  }
+  var _navigator = navigator,
+    userAgent = _navigator.userAgent;
+  return userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
+});
+
+/* For "dragenter" events, the browser should set `relatedTarget` to the previous element.
+ * For external drag operations, our first "dragenter" event should have a `event.relatedTarget` of `null`.
+ *
+ *  Unfortunately in Safari `event.relatedTarget` is *always* set to `null`
+ *  Safari bug: https://bugs.webkit.org/show_bug.cgi?id=242627
+ *  To work around this we count "dragenter" and "dragleave" events */
+
+// Using symbols for event properties so we don't clash with
+// anything on the `event` object
+var symbols = {
+  isLeavingWindow: Symbol('leaving'),
+  isEnteringWindow: Symbol('entering')
+};
+function isEnteringWindowInSafari(_ref) {
+  var dragEnter = _ref.dragEnter;
+  if (!isSafari()) {
+    return false;
+  }
+  return dragEnter.hasOwnProperty(symbols.isEnteringWindow);
+}
+function isLeavingWindowInSafari(_ref2) {
+  var dragLeave = _ref2.dragLeave;
+  if (!isSafari()) {
+    return false;
+  }
+  return dragLeave.hasOwnProperty(symbols.isLeavingWindow);
+}
+(function fixSafari() {
+  // Don't do anything when server side rendering
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  // rather than checking the userAgent for "jsdom" we can do this check
+  // so that the check will be removed completely in production code
+  if (process.env.NODE_ENV === 'test') {
+    return;
+  }
+  if (!isSafari()) {
+    return;
+  }
+  function getInitialState() {
+    return {
+      enterCount: 0,
+      isOverWindow: false
+    };
+  }
+  var state = getInitialState();
+  function resetState() {
+    state = getInitialState();
+  }
+
+  // These event listeners are bound _forever_ and _never_ removed
+  // We don't bother cleaning up these event listeners (for now)
+  // as this workaround is only for Safari
+
+  // This is how the event count works:
+  //
+  // lift (+1 enterCount)
+  // - dragstart(draggable) [enterCount: 0]
+  // - dragenter(draggable) [enterCount: 1]
+  // leaving draggable (+0 enterCount)
+  // - dragenter(document.body) [enterCount: 2]
+  // - dragleave(draggable) [enterCount: 1]
+  // leaving window (-1 enterCount)
+  // - dragleave(document.body) [enterCount: 0] {leaving the window}
+
+  // Things to note:
+  // - dragenter and dragleave bubble
+  // - the first dragenter when entering a window might not be on `window`
+  //   - it could be on an element that is pressed up against the window
+  //   - (so we cannot rely on `event.target` values)
+
+  bindAll(window, [{
+    type: 'dragstart',
+    listener: function listener() {
+      state.enterCount = 0;
+      // drag start occurs in the source window
+      state.isOverWindow = true;
+      // When a drag first starts it will also trigger a "dragenter" on the draggable element
+    }
+  }, {
+    type: 'drop',
+    listener: resetState
+  }, {
+    type: 'dragend',
+    listener: resetState
+  }, {
+    type: 'dragenter',
+    listener: function listener(event) {
+      if (!state.isOverWindow && state.enterCount === 0) {
+        // Patching the `event` object
+        // The `event` object is shared with all event listeners for the event
+        // @ts-expect-error: adding property to the event object
+        event[symbols.isEnteringWindow] = true;
+      }
+      state.isOverWindow = true;
+      state.enterCount++;
+    }
+  }, {
+    type: 'dragleave',
+    listener: function listener(event) {
+      state.enterCount--;
+      if (state.isOverWindow && state.enterCount === 0) {
+        // Patching the `event` object as it is shared with all event listeners
+        // The `event` object is shared with all event listeners for the event
+        // @ts-expect-error: adding property to the event object
+        event[symbols.isLeavingWindow] = true;
+        state.isOverWindow = false;
+      }
+    }
+  }],
+  // using `capture: true` so that adding event listeners
+  // in bubble phase will have the correct symbols
+  {
+    capture: true
+  });
+})();
+
+/**
+ * Does the `EventTarget` look like a `Node` based on "duck typing".
+ *
+ * Helpful when the `Node` might be outside of the current document
+ * so we cannot to an `target instanceof Node` check.
+ */
+function isNodeLike(target) {
+  return 'nodeName' in target;
+}
+
+/**
+ * Is an `EventTarget` a `Node` from another `window`?
+ */
+function isFromAnotherWindow(eventTarget) {
+  return isNodeLike(eventTarget) && eventTarget.ownerDocument !== document;
+}
+
+function isLeavingWindow(_ref) {
+  var dragLeave = _ref.dragLeave;
+  var type = dragLeave.type,
+    relatedTarget = dragLeave.relatedTarget;
+  if (type !== 'dragleave') {
+    return false;
+  }
+  if (isSafari()) {
+    return isLeavingWindowInSafari({
+      dragLeave: dragLeave
+    });
+  }
+
+  // Standard check: if going to `null` we are leaving the `window`
+  if (relatedTarget == null) {
+    return true;
+  }
+
+  /**
+   * 🦊 Exception: `iframe` in Firefox (`125.0`)
+   *
+   * Case 1: parent `window` → child `iframe`
+   * `dragLeave.relatedTarget` is element _inside_ the child `iframe`
+   * (foreign element)
+   *
+   * Case 2: child `iframe` → parent `window`
+   * `dragLeave.relatedTarget` is the `iframe` in the parent `window`
+   * (foreign element)
+   */
+
+  if (isFirefox()) {
+    return isFromAnotherWindow(relatedTarget);
+  }
+
+  /**
+   * 🌏 Exception: `iframe` in Chrome (`124.0`)
+   *
+   * Case 1: parent `window` → child `iframe`
+   * `dragLeave.relatedTarget` is the `iframe` in the parent `window`
+   *
+   * Case 2: child `iframe` → parent `window`
+   * `dragLeave.relatedTarget` is `null` *(standard check)*
+   */
+
+  // Case 2
+  // Using `instanceof` check as the element will be in the same `window`
+  return relatedTarget instanceof HTMLIFrameElement;
+}
+
+function getBindingsForBrokenDrags(_ref) {
+  var onDragEnd = _ref.onDragEnd;
+  return [
+  // ## 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;
+        }
+        onDragEnd();
+      };
+    }()
+  },
+  // ### 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: onDragEnd
+  }];
+}
+
+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
+  };
+}
+
+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
+  };
+}();
+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.updatedSourcePayload;
+      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;
+}
+
+var globalState = {
+  isActive: false
+};
+function canStart() {
+  return !globalState.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,
+    dragType = _ref2.dragType,
+    getDropTargetsOver = _ref2.getDropTargetsOver,
+    dispatchEvent = _ref2.dispatchEvent;
+  if (!canStart()) {
+    return;
+  }
+  var initial = getStartLocation({
+    event: event,
+    dragType: dragType,
+    getDropTargetsOver: getDropTargetsOver
+  });
+  globalState.isActive = true;
+  var state = {
+    current: initial
+  };
+
+  // Setting initial drop effect for the drag
+  setDropEffectOnEvent({
+    event: event,
+    current: initial.dropTargets
+  });
+  var dispatch = makeDispatch({
+    source: dragType.payload,
+    dispatchEvent: dispatchEvent,
+    initial: initial
+  });
+  function updateState(next) {
+    // only looking at whether hierarchy has changed to determine whether something as 'changed'
+    var hasChanged = hasHierarchyChanged({
+      current: state.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`
+    state.current = next;
+    if (hasChanged) {
+      dispatch.dragUpdate({
+        current: state.current
+      });
+    }
+  }
+  function onUpdateEvent(event) {
+    var input = getInput(event);
+
+    // If we are over the honey pot, we need to get the element
+    // that the user would have been over if not for the honey pot
+    var target = isHoneyPotElement(event.target) ? getElementFromPointWithoutHoneypot({
+      x: input.clientX,
+      y: input.clientY
+    }) : event.target;
+    var nextDropTargets = getDropTargetsOver({
+      target: target,
+      input: input,
+      source: dragType.payload,
+      current: state.current.dropTargets
+    });
+    if (nextDropTargets.length) {
+      // 🩸 must call `event.preventDefault()` to allow a browser drop to occur
+      event.preventDefault();
+      setDropEffectOnEvent({
+        event: event,
+        current: nextDropTargets
+      });
+    }
+    updateState({
+      dropTargets: nextDropTargets,
+      input: input
+    });
+  }
+  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 (state.current.dropTargets.length) {
+      updateState({
+        dropTargets: [],
+        input: state.current.input
+      });
+    }
+    dispatch.drop({
+      current: state.current,
+      updatedSourcePayload: null
+    });
+    finish();
+  }
+  function finish() {
+    globalState.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: state.current
+      });
+    }
+  }, {
+    type: 'dragenter',
+    listener: onUpdateEvent
+  }, {
+    type: 'dragleave',
+    listener: function listener(event) {
+      if (!isLeavingWindow({
+        dragLeave: event
+      })) {
+        return;
+      }
+
+      /**
+       * At this point we don't know if a drag is being cancelled,
+       * or if a drag is leaving the `window`.
+       *
+       * Both have:
+       *   1. "dragleave" (with `relatedTarget: null`)
+       *   2. "dragend" (a "dragend" can occur when outside the `window`)
+       *
+       * **Clearing drop targets**
+       *
+       * For either case we are clearing the the drop targets
+       *
+       * - cancelling: we clear drop targets in `"dragend"` anyway
+       * - leaving the `window`: we clear the drop targets (to clear stickiness)
+       *
+       * **Leaving the window and finishing the drag**
+       *
+       * _internal drags_
+       *
+       * - The drag continues when the user is outside the `window`
+       *   and can resume if the user drags back over the `window`,
+       *   or end when the user drops in an external `window`.
+       * - We will get a `"dragend"`, or we can listen for other
+       *   events to determine the drag is finished when the user re-enters the `window`).
+       *
+       * _external drags_
+       *
+       * - We conclude the drag operation.
+       * - We have no idea if the user will drag back over the `window`,
+       *   or if the drag ends elsewhere.
+       * - We will create a new drag if the user re-enters the `window`.
+       *
+       * **Not updating `input`**
+       *
+       * 🐛 Bug[Chrome] the final `"dragleave"` has default input values (eg `clientX == 0`)
+       * Workaround: intentionally not updating `input` in "dragleave"
+       * 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)
+       **/
+
+      updateState({
+        input: state.current.input,
+        dropTargets: []
+      });
+      if (dragType.startedFrom === 'external') {
+        cancel();
+      }
+    }
+  }, {
+    // A "drop" can only happen if the browser allowed the drop
+    type: 'drop',
+    listener: function listener(event) {
+      // Capture the final input.
+      // We are capturing the final `input` for the
+      // most accurate honey pot experience
+      state.current = {
+        dropTargets: state.current.dropTargets,
+        input: getInput(event)
+      };
+
+      /** If there are no drop targets, then we will get
+       * a "drop" event if:
+       * - `preventUnhandled()` is being used
+       * - there is an unmanaged drop target (eg another library)
+       * In these cases, it's up to the consumer
+       * to handle the drop if it's not over one of our drop targets
+       * - `preventUnhandled()` will cancel the "drop"
+       * - unmanaged drop targets can handle the "drop" how they want to
+       * We won't call `event.preventDefault()` in this call path */
+
+      if (!state.current.dropTargets.length) {
+        cancel();
+        return;
+      }
+      event.preventDefault();
+
+      // applying the latest drop effect to the event
+      setDropEffectOnEvent({
+        event: event,
+        current: state.current.dropTargets
+      });
+      dispatch.drop({
+        current: state.current,
+        // When dropping something native, we need to extract the latest
+        // `.items` from the "drop" event as it is now accessible
+        updatedSourcePayload: dragType.type === 'external' ? dragType.getDropPayload(event) : null
+      });
+      finish();
+    }
+  }, {
+    // "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)
+
+    // This "dragend" listener will not fire if there was a successful drop
+    // as we will have already removed the event listener
+
+    type: 'dragend',
+    listener: function listener(event) {
+      // In firefox, the position of the "dragend" event can
+      // be a bit different to the last "dragover" event.
+      // Updating the input so we can get the best possible
+      // information for the honey pot.
+      state.current = {
+        dropTargets: state.current.dropTargets,
+        input: getInput(event)
+      };
+      cancel();
+    }
+  }].concat(_toConsumableArray(getBindingsForBrokenDrags({
+    onDragEnd: 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 setDropEffectOnEvent(_ref3) {
+  var _current$;
+  var event = _ref3.event,
+    current = _ref3.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(_ref4) {
+  var event = _ref4.event,
+    dragType = _ref4.dragType,
+    getDropTargetsOver = _ref4.getDropTargetsOver;
+  var input = getInput(event);
+
+  // When dragging from outside of the browser,
+  // the drag is not being sourced from any local drop targets
+  if (dragType.startedFrom === 'external') {
+    return {
+      input: input,
+      dropTargets: []
+    };
+  }
+  var dropTargets = getDropTargetsOver({
+    input: input,
+    source: dragType.payload,
+    target: event.target,
+    current: []
+  });
+  return {
+    input: input,
+    dropTargets: dropTargets
+  };
+}
+var lifecycle = {
+  canStart: canStart,
+  start: start
+};
+
+// 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;
+}
+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);
+  };
+}
+
+/** Create a new combined function that will call all the provided functions */
+function combine() {
+  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
+    fns[_key] = arguments[_key];
+  }
+  return function cleanup() {
+    fns.forEach(function (fn) {
+      return fn();
+    });
+  };
+}
+
+function addAttribute(element, _ref) {
+  var attribute = _ref.attribute,
+    value = _ref.value;
+  element.setAttribute(attribute, value);
+  return function () {
+    return element.removeAttribute(attribute);
+  };
+}
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0; } }
+function _arrayLikeToArray$1(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function copyReverse(array) {
+  return array.slice(0).reverse();
+}
+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 [".concat(typeKey, "] dropTarget on the same element"), {
+          existing: existing,
+          proposed: args
+        });
+      }
+      if (args.element instanceof HTMLIFrameElement) {
+        // eslint-disable-next-line no-console
+        console.warn("\n            We recommend not registering <iframe> elements as drop targets\n            as it can result in some strange browser event ordering.\n          " // Removing newlines and excessive whitespace
+        .replace(/\s{2,}/g, ' ').trim());
+      }
+    }
+    return combine(addAttribute(args.element, {
+      attribute: dropTargetDataAtt,
+      value: 'true'
+    }), addToRegistry(args));
+  }
+  function getActualDropTargets(_ref2) {
+    var _args$getData, _args$getData2, _args$getDropEffect, _args$getDropEffect2;
+    var source = _ref2.source,
+      target = _ref2.target,
+      input = _ref2.input,
+      _ref2$result = _ref2.result,
+      result = _ref2$result === void 0 ? [] : _ref2$result;
+    if (target == null) {
+      return result;
+    }
+    if (!(target instanceof Element)) {
+      // For "text-selection" drags, the original `target`
+      // is not an `Element`, so we need to start looking from
+      // the parent element
+      if (target instanceof Node) {
+        return getActualDropTargets({
+          source: source,
+          target: target.parentElement,
+          input: input,
+          result: result
+        });
+      }
+
+      // not sure what we are working with,
+      // so we can exit.
+      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
+      });
+    }
+
+    // calculate our new record
+    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 record = {
+      data: data,
+      element: args.element,
+      dropEffect: dropEffect,
+      // we are collecting _actual_ drop targets, so these are
+      // being applied _not_ due to stickiness
+      isActiveDueToStickiness: false
+    };
+    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$1(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$1(_objectSpread$1({}, payload), {}, {
+          self: record
+        });
+        entry === null || entry === void 0 || (_entry$eventName = entry[eventName]) === null || _entry$eventName === 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$1(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 args = _objectSpread$1(_objectSpread$1({}, payload), {}, {
+            self: record
+          });
+          entry === null || entry === void 0 || (_entry$onDropTargetCh = entry.onDropTargetChange) === null || _entry$onDropTargetCh === void 0 || _entry$onDropTargetCh.call(entry, args);
+
+          // 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 || (_entry$onDragLeave = entry.onDragLeave) === null || _entry$onDragLeave === void 0 || _entry$onDragLeave.call(entry, args);
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      var _iterator3 = _createForOfIteratorHelper$1(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 _args = _objectSpread$1(_objectSpread$1({}, payload), {}, {
+            self: _record
+          });
+          var _entry = registry.get(_record.element);
+          _entry === null || _entry === void 0 || (_entry$onDropTargetCh2 = _entry.onDropTargetChange) === null || _entry$onDropTargetCh2 === void 0 || _entry$onDropTargetCh2.call(_entry, _args);
+          _entry === null || _entry === void 0 || (_entry$onDragEnter = _entry.onDragEnter) === null || _entry$onDragEnter === void 0 || _entry$onDragEnter.call(_entry, _args);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    }
+  };
+  function dispatchEvent(args) {
+    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 _argsForLast$getIsSti;
+      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
+
+      // 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];
+
+      // Stickiness is based on parent relationships, so if the parent relationship has change
+      // then we can stop our search
+      if ((parent === null || parent === void 0 ? void 0 : parent.element) !== (lastParent === null || lastParent === void 0 ? void 0 : lastParent.element)) {
+        break;
+      }
+
+      // We need to check whether the old drop target can still be dropped on
+
+      var argsForLast = registry.get(last.element);
+
+      // We cannot drop on a drop target that is no longer mounted
+      if (!argsForLast) {
+        break;
+      }
+      var feedback = {
+        input: input,
+        source: source,
+        element: argsForLast.element
+      };
+
+      // We cannot drop on a drop target that no longer allows being dropped on
+      if (argsForLast.canDrop && !argsForLast.canDrop(feedback)) {
+        break;
+      }
+
+      // We cannot drop on a drop target that is no longer sticky
+      if (!((_argsForLast$getIsSti = argsForLast.getIsSticky) !== null && _argsForLast$getIsSti !== void 0 && _argsForLast$getIsSti.call(argsForLast, feedback))) {
+        break;
+      }
+
+      // Note: intentionally not recollecting `getData()` or `getDropEffect()`
+      // Previous values for `data` and `dropEffect` will be borrowed
+      // This is to prevent things like the 'closest edge' changing when
+      // no longer over a drop target.
+      // We could change our mind on this behaviour in the future
+
+      resultCaptureOrdered.push(_objectSpread$1(_objectSpread$1({}, last), {}, {
+        // making it clear to consumers this drop target is active due to stickiness
+        isActiveDueToStickiness: true
+      }));
+    }
+
+    // return bubble ordered result
+    return copyReverse(resultCaptureOrdered);
+  }
+  return {
+    dropTargetForConsumers: dropTargetForConsumers,
+    getIsOver: getIsOver,
+    dispatchEvent: dispatchEvent
+  };
+}
+
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function makeMonitor() {
+  var registry = new Set();
+  var dragging = null;
+  function tryAddToActive(monitor) {
+    if (!dragging) {
+      return;
+    }
+    // Monitor is allowed to monitor events if:
+    // 1. It has no `canMonitor` function (default is that a monitor can listen to everything)
+    // 2. `canMonitor` returns true
+    if (!monitor.canMonitor || monitor.canMonitor(dragging.canMonitorArgs)) {
+      dragging.active.add(monitor);
+    }
+  }
+  function monitorForConsumers(args) {
+    // We are giving each `args` a new reference so that you
+    // can create multiple monitors with the same `args`.
+    var entry = _objectSpread({}, args);
+    registry.add(entry);
+
+    // if there is an active drag we need to see if this new monitor is relevant
+    tryAddToActive(entry);
+    return function cleanup() {
+      registry.delete(entry);
+
+      // We need to stop publishing events during a drag to this monitor!
+      if (dragging) {
+        dragging.active.delete(entry);
+      }
+    };
+  }
+  function dispatchEvent(_ref) {
+    var eventName = _ref.eventName,
+      payload = _ref.payload;
+    if (eventName === 'onGenerateDragPreview') {
+      dragging = {
+        canMonitorArgs: {
+          initial: payload.location.initial,
+          source: payload.source
+        },
+        active: new Set()
+      };
+      var _iterator = _createForOfIteratorHelper(registry),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var monitor = _step.value;
+          tryAddToActive(monitor);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+
+    // This should never happen.
+    if (!dragging) {
+      return;
+    }
+
+    // Creating an array from the set _before_ iterating
+    // This is so that monitors added during the current event will not be called.
+    // This behaviour matches native EventTargets where an event listener
+    // cannot add another event listener during an active event to the same
+    // event target in the same event (for us we have a single global event target)
+    var active = Array.from(dragging.active);
+    for (var _i = 0, _active = active; _i < _active.length; _i++) {
+      var _monitor = _active[_i];
+      // A monitor can be removed by another monitor during an event.
+      // We need to check that the monitor is still registered before calling it
+      if (dragging.active.has(_monitor)) {
+        var _monitor$eventName;
+        // @ts-expect-error: I cannot get this type working!
+        (_monitor$eventName = _monitor[eventName]) === null || _monitor$eventName === void 0 || _monitor$eventName.call(_monitor, payload);
+      }
+    }
+    if (eventName === 'onDrop') {
+      dragging.active.clear();
+      dragging = null;
+    }
+  }
+  return {
+    dispatchEvent: dispatchEvent,
+    monitorForConsumers: monitorForConsumers
+  };
+}
+
+function makeAdapter(_ref) {
+  var typeKey = _ref.typeKey,
+    mount = _ref.mount,
+    dispatchEventToSource = _ref.dispatchEventToSource,
+    onPostDispatch = _ref.onPostDispatch,
+    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 || dispatchEventToSource(args);
+
+    // 2. forward the event to relevant dropTargets
+    dropTargetAPI.dispatchEvent(args);
+
+    // 3. forward event to monitors
+    monitorAPI.dispatchEvent(args);
+
+    // 4. post consumer dispatch (used for honey pot fix)
+    onPostDispatch === null || onPostDispatch === void 0 || onPostDispatch(args);
+  }
+  function start(_ref2) {
+    var event = _ref2.event,
+      dragType = _ref2.dragType;
+    lifecycle.start({
+      event: event,
+      dragType: dragType,
+      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
+  };
+}
+
+// using `cache` as our `isAndroid()` result will not change in a browser
+var isAndroid = once(function isAndroid() {
+  return navigator.userAgent.toLocaleLowerCase().includes('android');
+});
+var androidFallbackText = 'pdnd:android-fallback';
+
+// Why we put the media types in their own files:
+//
+// - we are not putting them all in one file as not all adapters need all types
+// - we are not putting them in the external helpers as some things just need the
+//   types and not the external functions code
+var textMediaType = 'text/plain';
+
+// Why we put the media types in their own files:
+//
+// - we are not putting them all in one file as not all adapters need all types
+// - we are not putting them in the external helpers as some things just need the
+//   types and not the external functions code
+var URLMediaType = 'text/uri-list';
+
+/**
+ * This key has been pulled into a separate module
+ * so that the external adapter does not need to import
+ * the element adapter
+ */
+var elementAdapterNativeDataKey = 'application/vnd.pdnd';
+
+var draggableRegistry = new WeakMap();
+function addToRegistry(args) {
+  draggableRegistry.set(args.element, args);
+  return function cleanup() {
+    draggableRegistry.delete(args.element);
+  };
+}
+var honeyPotFix = makeHoneyPotFix();
+var adapter$1 = makeAdapter({
+  typeKey: 'element',
+  defaultDropEffect: 'move',
+  mount: function mount(api) {
+    /**  Binding event listeners the `document` rather than `window` so that
+     * this adapter always gets preference over the text adapter.
+     * `document` is the first `EventTarget` under `window`
+     * https://twitter.com/alexandereardon/status/1604658588311465985
+     */
+    return combine(honeyPotFix.bindEvents(), bind(document, {
+      type: 'dragstart',
+      listener: function listener(event) {
+        var _entry$dragHandle, _entry$getInitialData, _entry$getInitialData2, _entry$dragHandle2, _entry$getInitialData3, _entry$getInitialData4;
+        if (!api.canStart(event)) {
+          return;
+        }
+
+        // If the "dragstart" event is cancelled, then a drag won't start
+        // There will be no further drag operation events (eg no "dragend" event)
+        if (event.defaultPrevented) {
+          return;
+        }
+
+        // Technically `dataTransfer` can be `null` according to the types
+        // But that behaviour does not seem to appear in the spec.
+        // If there is not `dataTransfer`, we can assume something is wrong and not
+        // start a drag
+        if (!event.dataTransfer) {
+          // Including this code on "test" and "development" environments:
+          // - Browser tests commonly run against "development" builds
+          // - Unit tests commonly run in "test"
+          if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.warn("\n              It appears as though you have are not testing DragEvents correctly.\n\n              - If you are unit testing, ensure you have polyfilled DragEvent.\n              - If you are browser testing, ensure you are dispatching drag events correctly.\n\n              Please see our testing guides for more information:\n              https://atlassian.design/components/pragmatic-drag-and-drop/core-package/testing\n            ".replace(/ {2}/g, ''));
+          }
+          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;
+        }
+
+        /**
+         * A text selection drag _can_ have the `draggable` element be
+         * the `event.target` if the user is dragging the text selection
+         * from the `draggable`.
+         *
+         * To know if the `draggable` is being dragged, we look at whether any
+         * `"text/plain"` data is being dragged. If it is, then a text selection
+         * drag is occurring.
+         *
+         * This behaviour has been validated on:
+         *
+         * - Chrome@128 on Android@14
+         * - Chrome@128 on iOS@17.6.1
+         * - Chrome@128 on Windows@11
+         * - Chrome@128 on MacOS@14.6.1
+         * - Firefox@129 on Windows@11 (not possible for user to select text in a draggable)
+         * - Firefox@129 on MacOS@14.6.1 (not possible for user to select text in a draggable)
+         *
+         * Note: Could usually just use: `event.dataTransfer.types.includes(textMediaType)`
+         * but unfortunately ProseMirror is always setting `""` as the dragged text
+         *
+         * Note: Unfortunately editor is (heavily) leaning on the current functionality today
+         * and unwinding it will be a decent amount of effort. So for now, a text selection
+         * where the `event.target` is a `draggable` element will still trigger the
+         * element adapter.
+         *
+         * // Future state:
+         * if(event.dataTransfer.getData(textMediaType)) {
+         * 	return;
+         * }
+         *
+         */
+
+        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) {
+          // technically don't need this util, but just being
+          // consistent with how we look up what is under the users
+          // cursor.
+          var over = getElementFromPointWithoutHoneypot({
+            x: input.clientX,
+            y: 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;
+          }
+        }
+
+        /**
+         *  **Goal**
+         *  Pass information to other applications
+         *
+         * **Approach**
+         *  Put data into the native data store
+         *
+         *  **What about the native adapter?**
+         *  When the element adapter puts native data into the native data store
+         *  the native adapter is not triggered in the current window,
+         *  but a native adapter in an external window _can_ be triggered
+         *
+         *  **Why bake this into core?**
+         *  This functionality could be pulled out and exposed inside of
+         *  `onGenerateDragPreview`. But decided to make it a part of the
+         *  base API as it felt like a common enough use case and ended
+         *  up being a similar amount of code to include this function as
+         *  it was to expose the hook for it
+         */
+        var nativeData = (_entry$getInitialData = (_entry$getInitialData2 = entry.getInitialDataForExternal) === null || _entry$getInitialData2 === void 0 ? void 0 : _entry$getInitialData2.call(entry, feedback)) !== null && _entry$getInitialData !== void 0 ? _entry$getInitialData : null;
+        if (nativeData) {
+          for (var _i = 0, _Object$entries = Object.entries(nativeData); _i < _Object$entries.length; _i++) {
+            var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+              key = _Object$entries$_i[0],
+              data = _Object$entries$_i[1];
+            event.dataTransfer.setData(key, data !== null && data !== void 0 ? data : '');
+          }
+        }
+
+        /**
+         *  📱 For Android devices, a drag operation will not start unless
+         * "text/plain" or "text/uri-list" data exists in the native data store
+         * https://twitter.com/alexandereardon/status/1732189803754713424
+         *
+         * Tested on:
+         * Device: Google Pixel 5
+         * Android version: 14 (November 5, 2023)
+         * Chrome version: 120.0
+         */
+        if (isAndroid() && !event.dataTransfer.types.includes(textMediaType) && !event.dataTransfer.types.includes(URLMediaType)) {
+          event.dataTransfer.setData(textMediaType, androidFallbackText);
+        }
+
+        /**
+         * 1. Must set any media type for `iOS15` to work
+         * 2. We are also doing adding data so that the native adapter
+         * can know that the element adapter has handled this drag
+         *
+         * We used to wrap this `setData()` in a `try/catch` for Firefox,
+         * but it looks like that was not needed.
+         *
+         * Tested using: https://codesandbox.io/s/checking-firefox-throw-behaviour-on-dragstart-qt8h4f
+         *
+         * - ✅ Firefox@70.0 (Oct 2019) on macOS Sonoma
+         * - ✅ Firefox@70.0 (Oct 2019) on macOS Big Sur
+         * - ✅ Firefox@70.0 (Oct 2019) on Windows 10
+         *
+         * // just checking a few more combinations to be super safe
+         *
+         * - ✅ Chrome@78 (Oct 2019) on macOS Big Sur
+         * - ✅ Chrome@78 (Oct 2019) on Windows 10
+         * - ✅ Safari@14.1 on macOS Big Sur
+         */
+        event.dataTransfer.setData(elementAdapterNativeDataKey, '');
+        var payload = {
+          element: entry.element,
+          dragHandle: (_entry$dragHandle2 = entry.dragHandle) !== null && _entry$dragHandle2 !== void 0 ? _entry$dragHandle2 : null,
+          data: (_entry$getInitialData3 = (_entry$getInitialData4 = entry.getInitialData) === null || _entry$getInitialData4 === void 0 ? void 0 : _entry$getInitialData4.call(entry, feedback)) !== null && _entry$getInitialData3 !== void 0 ? _entry$getInitialData3 : {}
+        };
+        var dragType = {
+          type: 'element',
+          payload: payload,
+          startedFrom: 'internal'
+        };
+        api.start({
+          event: event,
+          dragType: dragType
+        });
+      }
+    }));
+  },
+  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 || (_draggableRegistry$ge2 = _draggableRegistry$ge[eventName]) === null || _draggableRegistry$ge2 === 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);
+  },
+  onPostDispatch: honeyPotFix.getOnPostDispatch()
+});
+var dropTargetForElements = adapter$1.dropTarget;
+var monitorForElements = adapter$1.monitor;
+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$1.registerUsage(), addToRegistry(args), addAttribute(args.element, {
+    attribute: 'draggable',
+    value: 'true'
+  }));
+}
+
+/** Common event payload for all events */
+
+/** A map containing payloads for all events */
+
+/** Common event payload for all drop target events */
+
+/** A map containing payloads for all events on drop targets */
+
+/** Arguments given to all feedback functions (eg `canDrag()`) on for a `draggable()` */
+
+/** Arguments given to all feedback functions (eg `canDrop()`) on a `dropTargetForElements()` */
+
+/** Arguments given to all monitor feedback functions (eg `canMonitor()`) for a `monitorForElements` */
+
 const CheckboxCard = React.forwardRef(function CheckboxCard(props, ref) {
     const { inputProps, label, description, icon, addon, indicator = jsx(CheckboxCard$1.Indicator, {}), indicatorPlacement = "end", ...rest } = props;
     const hasContent = label || description || icon;
@@ -694,11 +2585,12 @@ const snakeToLabel = (str) => {
 };
 
 const RecordDisplay = ({ object, boxProps }) => {
+    console.log(object, "dkfos");
     if (object === null) {
         return jsx(Fragment, { children: "null" });
     }
-    return (jsx(Grid, { rowGap: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
-            return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsx(Text, { color: "gray.400", children: snakeToLabel(field) }), jsx(Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }, field));
+    return (jsx(Grid, { rowGap: 1, padding: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
+            return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsx(Text, { color: "gray.400", children: snakeToLabel(field) }), typeof value === "object" ? (jsx(RecordDisplay, { object: value })) : (jsx(Text, { children: JSON.stringify(value) }))] }, field));
         }) }));
 };
 
@@ -2161,6 +4053,309 @@ const TagPicker = ({ column }) => {
             }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
 };
 
+function isEnteringWindow(_ref) {
+  var dragEnter = _ref.dragEnter;
+  var type = dragEnter.type,
+    relatedTarget = dragEnter.relatedTarget;
+  if (type !== 'dragenter') {
+    return false;
+  }
+  if (isSafari()) {
+    return isEnteringWindowInSafari({
+      dragEnter: dragEnter
+    });
+  }
+
+  // standard check
+  if (relatedTarget == null) {
+    return true;
+  }
+
+  /**
+   * 🦊 Exception: `iframe` in Firefox (`125.0`)
+   *
+   * Case 1: parent `window` → child `iframe`
+   * `relatedTarget` is the `iframe` element in the parent `window`
+   * (foreign element)
+   *
+   * Case 2: child `iframe` → parent `window`
+   * `relatedTarget` is an element inside the child `iframe`
+   * (foreign element)
+   */
+
+  if (isFirefox()) {
+    return isFromAnotherWindow(relatedTarget);
+  }
+
+  /**
+   * 🌏 Exception: `iframe` in Chrome (`124.0`)
+   *
+   * Case 1: parent `window` → child `iframe`
+   * `relatedTarget` is `null` *(standard check)*
+   *
+   * Case 2: child `iframe` → parent `window`
+   * `relatedTarget` is the `iframe` element in the parent `window`
+   */
+
+  // Case 2
+  // Using `instanceof` check as the element will be in the same `window`
+  return relatedTarget instanceof HTMLIFrameElement;
+}
+
+function isAnAvailableType(_ref) {
+  var type = _ref.type,
+    value = _ref.value;
+  // We don't want to expose our private elementAdapter key / value
+  if (type === elementAdapterNativeDataKey) {
+    return false;
+  }
+  // Not exposing "text/plain" if it contains the android fallback text
+  // We _could_ add an `isAndroid()` check, but it's probably safest
+  // to trim this data out, regardless of what OS we see it on.
+  if (type === textMediaType && value === androidFallbackText) {
+    return false;
+  }
+  return true;
+}
+function getAvailableTypes(transfer) {
+  return Array.from(transfer.types).filter(function (type) {
+    return isAnAvailableType({
+      type: type,
+      value: transfer.getData(type)
+    });
+  });
+}
+function getAvailableItems(dataTransfer) {
+  // item.kind is 'string' | 'file'
+  // For 'string' item.type is the mimeType (eg 'text/plain')
+  // For 'file' item.type is the file type (eg 'image/jpg')
+
+  return Array.from(dataTransfer.items).filter(function (item) {
+    return item.kind === 'file' || isAnAvailableType({
+      type: item.type,
+      value: dataTransfer.getData(item.type)
+    });
+  });
+}
+var didDragStartLocally = false;
+var adapter = makeAdapter({
+  typeKey: 'external',
+  // for external drags, we are generally making a copy of something that is being dragged
+  defaultDropEffect: 'copy',
+  mount: function mount(api) {
+    // Binding to the `window` so that the element adapter
+    // has a chance to get in first on the`document`.
+    // We are giving preference to the element adapter.
+    return bind(window, {
+      type: 'dragenter',
+      listener: function listener(event) {
+        // drag operation was started within the document, it won't be an "external" drag
+        if (didDragStartLocally) {
+          return;
+        }
+
+        // Note: not checking if event was cancelled (`event.defaultPrevented`) as
+        // cancelling a "dragenter" accepts the drag operation (not prevent it)
+
+        // Something has gone wrong with our drag event
+        if (!event.dataTransfer) {
+          // Including this code on "test" and "development" environments:
+          // - Browser tests commonly run against "development" builds
+          // - Unit tests commonly run in "test"
+          if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.warn("\n              It appears as though you have are not testing DragEvents correctly.\n\n              - If you are unit testing, ensure you have polyfilled DragEvent.\n              - If you are browser testing, ensure you are dispatching drag events correctly.\n\n              Please see our testing guides for more information:\n              https://atlassian.design/components/pragmatic-drag-and-drop/core-package/testing\n            ".replace(/ {2}/g, ''));
+          }
+          return;
+        }
+        if (!api.canStart(event)) {
+          return;
+        }
+        if (!isEnteringWindow({
+          dragEnter: event
+        })) {
+          return;
+        }
+
+        // Note: not checking types for `elementAdapterNativeDataKey` as we expect to see that
+        // key when pdnd started the drag in another document
+        var types = getAvailableTypes(event.dataTransfer);
+        if (!types.length) {
+          return;
+        }
+        var locked = {
+          types: types,
+          items: [],
+          getStringData: function getStringData() {
+            return null;
+          }
+        };
+        api.start({
+          event: event,
+          dragType: {
+            type: 'external',
+            startedFrom: 'external',
+            payload: locked,
+            getDropPayload: function getDropPayload(event) {
+              // this would be a platform error
+              // trying to handle it gracefully rather than throwing (for now)
+              if (!event.dataTransfer) {
+                return locked;
+              }
+              var items = getAvailableItems(event.dataTransfer);
+              // need to use `.bind` as `getData` is required
+              // to be run with `event.dataTransfer` as the "this" context
+              var nativeGetData = event.dataTransfer.getData.bind(event.dataTransfer);
+              return {
+                types: types,
+                items: items,
+                // return `null` if there is no result, otherwise string
+                getStringData: function getStringData(mediaType) {
+                  // not dragging the requested type
+                  // return `null` (no result)
+                  if (!types.includes(mediaType)) {
+                    return null;
+                  }
+
+                  // nativeGetData will return `""` when there is no value,
+                  // but at this point we know we will only get explicitly set
+                  // values back as we have checked the `types`.
+                  // `""` can be an explicitly set value.
+                  var value = nativeGetData(mediaType);
+
+                  // not exposing data for unavailable types
+                  if (!isAnAvailableType({
+                    type: mediaType,
+                    value: value
+                  })) {
+                    return null;
+                  }
+                  return value;
+                }
+              };
+            }
+          }
+        });
+      }
+    });
+  }
+});
+
+/**
+ * Some events don't make sense for the external adapter
+ *
+ * `onGenerateDragPreview`
+ * The browser creates the drag preview for external drags, so we don't
+ * need an event to generate the preview for _monitors_ or the _dropTarget_
+ *
+ * `onDragStart`
+ * An external drag can never start from in the `window`, so _dropTarget_'s
+ * don't need `onDragStart`
+ */
+
+function dropTargetForExternal(args) {
+  // not removing unused events, just leaning on the type system
+  return adapter.dropTarget(args);
+}
+(function startup() {
+  // server side rendering check
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  // A shared single usage registration as we want to capture
+  // all external drag operations, even if there are no drop targets
+  // on the page yet
+  adapter.registerUsage();
+  // independent of pdnd, we need to keep track of
+  // all drag operations so that we can know if a drag operation
+  // has started locally
+
+  var idle = {
+    type: 'idle'
+  };
+  var state = idle;
+  function clear() {
+    if (state.type !== 'dragging') {
+      return;
+    }
+    didDragStartLocally = false;
+    state.cleanup();
+    state = idle;
+  }
+  function bindEndEvents() {
+    return bindAll(window, [{
+      type: 'dragend',
+      listener: clear
+    }].concat(_toConsumableArray(getBindingsForBrokenDrags({
+      onDragEnd: clear
+    }))),
+    // we want to make sure we get all the events,
+    // and this helps avoid not seeing events when folks stop
+    // them later on the event path
+    {
+      capture: true
+    });
+  }
+
+  // we always keep this event listener active
+  bind(window, {
+    type: 'dragstart',
+    listener: function listener() {
+      // something bad has happened if this is true!
+      if (state.type !== 'idle') {
+        return;
+      }
+      // set our global flag
+      didDragStartLocally = true;
+      state = {
+        type: 'dragging',
+        cleanup: bindEndEvents()
+      };
+    },
+    // binding in the capture phase so these listeners are called
+    // before our listeners in the adapters `mount` function
+    options: {
+      capture: true
+    }
+  });
+})();
+
+/** Common event payload for all events */
+
+/** A map containing payloads for all events */
+
+/** Common event payload for all drop target events */
+
+/** A map containing payloads for all events on drop targets */
+
+/** Arguments given to all feedback functions (eg `canDrop()`) on a `dropTargetForExternal` */
+
+/** Arguments given to all monitor feedback functions (eg `canMonitor()`) for a `monitorForExternal` */
+
+/** Obtain an array of the dragged `File`s */
+function getFiles(_ref2) {
+  var source = _ref2.source;
+  return source.items
+  // unlike other media types, for files:
+  // item.kind is 'file'
+  // item.type is the type of file eg 'image/jpg'
+  // for other media types, item.type is the mime format
+  .filter(function (item) {
+    return item.kind === 'file';
+  }).map(function (item) {
+    return item.getAsFile();
+  }).filter(function (file) {
+    return file != null;
+  });
+}
+
+/* Get the plain text that a user is dragging */
+function getText(_ref2) {
+  var source = _ref2.source;
+  return source.getStringData(textMediaType);
+}
+
 const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }, placeholder = "Drop files here or click to upload", }) => {
     const ref = useRef(null);
     const [isDraggedOver, setIsDraggedOver] = useState(false);