@elliemae/ds-drag-and-drop 2.0.0-alpha.12

package/cjs/tree/getTreeKeyboardCoordinates.js

@@ -0,0 +1,139 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var core = require('@dnd-kit/core');
+var constants = require('./constants.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const directions = [core.KeyboardCode.Down, core.KeyboardCode.Right, core.KeyboardCode.Up, core.KeyboardCode.Left];
+const horizontal = [core.KeyboardCode.Left, core.KeyboardCode.Right];
+[core.KeyboardCode.Up, core.KeyboardCode.Down];
+
+const getVerticalKeyboardCoordinates = _ref => {
+  var _droppableContainers$, _droppableContainers$2;
+
+  let {
+    items,
+    active,
+    over,
+    event,
+    currentCoordinates,
+    droppableContainers,
+    collisionRect,
+    dropIndicatorPosition,
+    maxDragAndDropLevel
+  } = _ref;
+  if (horizontal.includes(event.code)) return undefined;
+  const overRect = over.rect;
+  const layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
+
+  droppableContainers.forEach(container => {
+    if (container !== null && container !== void 0 && container.disabled || !overRect) {
+      return;
+    }
+
+    const rect = container.rect.current;
+
+    if (rect && event.code === core.KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {
+      layoutRects.push(container);
+    } else if (rect && event.code === core.KeyboardCode.Up && collisionRect.top >= rect.offsetTop) {
+      layoutRects.push(container);
+    }
+  });
+  const closestId = core.closestCorners({
+    collisionRect,
+    droppableContainers: layoutRects,
+    active
+  });
+  const closestItem = items.find(item => item.uid === closestId);
+  const closestElement = (_droppableContainers$ = droppableContainers.get(closestId)) === null || _droppableContainers$ === void 0 ? void 0 : (_droppableContainers$2 = _droppableContainers$.node) === null || _droppableContainers$2 === void 0 ? void 0 : _droppableContainers$2.current;
+  if (!closestId || !closestItem || !closestElement) return undefined;
+  const closestRect = core.getViewRect(closestElement);
+
+  if (event.code === core.KeyboardCode.Up) {
+    // If the drop indicator is inside (or over ourselves)
+    // We are gonna go to the before position
+    // Else we are gonna go inside the over rect
+    if (dropIndicatorPosition === constants.DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
+      return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+        y: closestRect.top - collisionRect.height / 2
+      });
+    }
+
+    return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+      y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
+    });
+  } // If the drop indicator is inside (or over ourselves)
+  // We are gonna go to the after position
+  // Else we are gonna go inside the over rect
+
+
+  if (dropIndicatorPosition === constants.DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
+    return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+      y: closestRect.top + collisionRect.height / 2
+    });
+  }
+
+  return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+    y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
+  });
+};
+
+const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, _ref2) => {
+  let {
+    currentCoordinates,
+    context: {
+      over,
+      translatedRect,
+      droppableContainers,
+      active,
+      collisionRect
+    }
+  } = _ref2;
+
+  if (directions.includes(event.code)) {
+    if (!translatedRect) {
+      return undefined;
+    }
+
+    const {
+      current: {
+        items,
+        dropIndicatorPosition
+      }
+    } = context;
+    if (!over || !active || !collisionRect) return undefined;
+    const args = {
+      items,
+      active,
+      over,
+      event,
+      currentCoordinates,
+      droppableContainers,
+      collisionRect,
+      dropIndicatorPosition,
+      maxDragAndDropLevel
+    };
+    if (isHorizontalDnD) return undefined;
+    return getVerticalKeyboardCoordinates(args);
+  }
+
+  return undefined;
+};
+
+exports.getTreeKeyboardCoordinates = getTreeKeyboardCoordinates;

package/cjs/tree/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useTreeDndkitConfig = require('./useTreeDndkitConfig.js');
+
+
+
+exports.useTreeDndkitConfig = useTreeDndkitConfig.useTreeDndkitConfig;

package/cjs/tree/types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/tree/useTreeActionHandlers.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var sortable = require('@dnd-kit/sortable');
+var lodash = require('lodash');
+var react = require('react');
+var constants = require('./constants.js');
+
+const useTreeActionHandlers = _ref => {
+  let {
+    handlePreviewDragStart,
+    handlePreviewDragMove,
+    handlePreviewDragOver,
+    handlePreviewDragEnd,
+    handlePreviewDragCancel,
+    onReorder,
+    flattenedItems,
+    projected,
+    dropIndicatorPosition
+  } = _ref;
+  const onDragStart = react.useCallback(e => {
+    handlePreviewDragStart(e);
+  }, [handlePreviewDragStart]);
+  const onDragMove = react.useCallback(e => {
+    handlePreviewDragMove(e);
+  }, [handlePreviewDragMove]);
+  const onDragOver = react.useCallback(e => {
+    handlePreviewDragOver(e);
+  }, [handlePreviewDragOver]);
+  const onDragEnd = react.useCallback(e => {
+    handlePreviewDragEnd(e);
+    const {
+      active,
+      over
+    } = e;
+    if (over === null) return;
+    const activeIndex = flattenedItems.findIndex(item => item.uid === active.id);
+    let considerExpanding = null;
+    let overIndex = flattenedItems.findIndex(item => item.uid === over.id); // If drop indicator is inside, then put it last,
+    // It will be reconstructed well later
+
+    if (dropIndicatorPosition === constants.DropIndicatorPosition.Inside) {
+      var _flattenedItems$overI, _flattenedItems$overI2;
+
+      considerExpanding = over.id;
+      overIndex = flattenedItems[overIndex].realIndex + ((_flattenedItems$overI = (_flattenedItems$overI2 = flattenedItems[overIndex].original.subRows) === null || _flattenedItems$overI2 === void 0 ? void 0 : _flattenedItems$overI2.length) !== null && _flattenedItems$overI !== void 0 ? _flattenedItems$overI : 0) + 1;
+    } // If we are dropping the item in a new position, or new depth
+
+
+    if (projected && (activeIndex !== overIndex || flattenedItems[activeIndex].depth !== projected.depth)) {
+      // Change parent and depth from projected data
+      flattenedItems[activeIndex].parentId = projected.parentId;
+      flattenedItems[activeIndex].depth = projected.depth; // If same index, don't move the array, just copy it
+
+      const newFlattenedData = activeIndex !== overIndex ? sortable.arrayMove(flattenedItems, activeIndex, overIndex) : lodash.cloneDeep(flattenedItems);
+      onReorder(newFlattenedData, {
+        targetIndex: overIndex,
+        fromIndex: activeIndex
+      }, considerExpanding || '');
+    }
+  }, [handlePreviewDragEnd, flattenedItems, projected, onReorder, dropIndicatorPosition]);
+  const onDragCancel = react.useCallback(e => {
+    handlePreviewDragCancel(e);
+  }, [handlePreviewDragCancel]);
+  return {
+    onDragStart,
+    onDragMove,
+    onDragOver,
+    onDragEnd,
+    onDragCancel
+  };
+};
+
+exports.useTreeActionHandlers = useTreeActionHandlers;

package/cjs/tree/useTreeAnnouncements.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var constants = require('./constants.js');
+
+const useTreeAnnouncements = (visibleItemsDictionary, dropIndicatorPosition) => {
+  const onDragStart = react.useCallback(id => "Picked up draggable item from position ".concat(visibleItemsDictionary[id].realIndex + 1, "."), [visibleItemsDictionary]);
+  const onDragMove = react.useCallback((id, overId) => {
+    if (overId) {
+      const overIndex = visibleItemsDictionary[overId].realIndex + 1;
+
+      if (dropIndicatorPosition === constants.DropIndicatorPosition.Inside) {
+        return "Draggable item was moved inside the item at position ".concat(overIndex, ".");
+      }
+
+      if (dropIndicatorPosition === constants.DropIndicatorPosition.Before) {
+        return "Draggable item was moved to position ".concat(overIndex - 1, ".");
+      }
+
+      return "Draggable item was moved to position ".concat(overIndex, ".");
+    }
+
+    return "Draggable item is no longer over a droppable area.";
+  }, [visibleItemsDictionary, dropIndicatorPosition]);
+  const onDragOver = onDragMove;
+  const onDragEnd = react.useCallback((id, overId) => {
+    if (overId) {
+      const overIndex = visibleItemsDictionary[overId].realIndex + 1;
+
+      if (dropIndicatorPosition === constants.DropIndicatorPosition.Inside) {
+        return "Draggable item was dropped inside the item at position ".concat(overIndex, ".");
+      }
+
+      if (dropIndicatorPosition === constants.DropIndicatorPosition.Before) {
+        return "Draggable item was dropped over position ".concat(overIndex - 1, ".");
+      }
+
+      return "Draggable item was dropped over position ".concat(overIndex, ".");
+    }
+
+    return "Draggable item was dropped at it's original position.";
+  }, [dropIndicatorPosition, visibleItemsDictionary]);
+  const onDragCancel = react.useCallback(id => "Dragging was cancelled. Draggable item from position ".concat(visibleItemsDictionary[id].realIndex + 1, " was dropped at it's initial position."), [visibleItemsDictionary]);
+  return {
+    onDragStart,
+    onDragOver,
+    onDragMove,
+    onDragEnd,
+    onDragCancel
+  };
+};
+
+exports.useTreeAnnouncements = useTreeAnnouncements;

package/cjs/tree/useTreeDndkitConfig.js

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var react = require('react');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var useTreePreviewHandlers = require('./useTreePreviewHandlers.js');
+var getTreeKeyboardCoordinates = require('./getTreeKeyboardCoordinates.js');
+var utilities = require('./utilities.js');
+var useTreeActionHandlers = require('./useTreeActionHandlers.js');
+var constants = require('./constants.js');
+var customCollisionDetection = require('./customCollisionDetection.js');
+var useTreeAnnouncements = require('./useTreeAnnouncements.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+// if second parameter is true, the space will be done on the horizontal axis
+
+const adjustTranslate = isHorizontalDnD => _ref => {
+  let {
+    transform
+  } = _ref;
+
+  const newTransform = _objectSpread({}, transform);
+
+  if (isHorizontalDnD) {
+    newTransform.x = transform.x + 25;
+  } else {
+    newTransform.x = transform.x + 15;
+  }
+
+  return newTransform;
+};
+
+const measuring = {
+  droppable: {
+    strategy: core.MeasuringStrategy.BeforeDragging
+  }
+};
+const useTreeDndkitConfig = _ref2 => {
+  var _visibleItemsDictiona, _visibleItemsDictiona2;
+
+  let {
+    flattenedItems,
+    visibleItems: preVisibleItems,
+    isHorizontalDnD = false,
+    isExpandable = false,
+    onReorder,
+    maxDragAndDropLevel
+  } = _ref2;
+  const [activeId, setActiveId] = react.useState('');
+  const [overId, setOverId] = react.useState('');
+  const [dropIndicatorPosition, setDropIndicatorPosition] = react.useState(constants.DropIndicatorPosition.None);
+  const [lastPosition, setLastPosition] = react.useState(''); // Remove activeId's children
+
+  const visibleItems = react.useMemo(() => utilities.removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]); // Sorted ids for the library
+
+  const sortedIds = react.useMemo(() => visibleItems.map(item => item.uid), [visibleItems]);
+  /**
+   * Dictionary from UID to ITEM
+   * This dictionary is computed since on every DnD move, I need to know the
+   * depth of a particular row, so O(1) per DnD move instead of O(#ITEMS)
+   */
+
+  const visibleItemsDictionary = react.useMemo(() => {
+    // Using plain for to achieve O(#ITEMS) performance
+    const dictionary = {};
+    visibleItems.forEach(item => {
+      dictionary[item.uid] = item;
+    });
+    return dictionary;
+  }, [visibleItems]);
+  const modifiers = react.useMemo(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);
+  const sensorContext = react.useRef({
+    items: visibleItems,
+    dropIndicatorPosition,
+    setDropIndicatorPosition
+  });
+  react.useEffect(() => {
+    sensorContext.current = {
+      items: visibleItems,
+      dropIndicatorPosition,
+      setDropIndicatorPosition
+    };
+  }, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition]);
+  const coordinateGetter = react.useMemo(() => getTreeKeyboardCoordinates.getTreeKeyboardCoordinates(sensorContext, isHorizontalDnD, maxDragAndDropLevel), [sensorContext, isHorizontalDnD, maxDragAndDropLevel]);
+  const sensors = core.useSensors(core.useSensor(core.PointerSensor), core.useSensor(core.KeyboardSensor, {
+    coordinateGetter
+  })); // where is the activeItem being positioned (depth and parent)
+
+  const projected = react.useMemo(() => overId ? utilities.getProjection(visibleItems, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) : null, [overId, visibleItems, visibleItemsDictionary, dropIndicatorPosition, isExpandable]);
+  const dragPreviewHandlers = useTreePreviewHandlers.useTreePreviewHandlers({
+    setActiveId,
+    setOverId,
+    setDropIndicatorPosition
+  });
+  const dragActionHandlers = useTreeActionHandlers.useTreeActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
+    onReorder,
+    projected,
+    flattenedItems,
+    dropIndicatorPosition
+  }));
+  const announcements = useTreeAnnouncements.useTreeAnnouncements(visibleItemsDictionary, dropIndicatorPosition);
+  const dndContextProps = react.useMemo(() => _objectSpread({
+    announcements,
+    modifiers,
+    sensors,
+    measuring,
+    collisionDetection: customCollisionDetection.customCollisionDetection(activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition)
+  }, dragActionHandlers), [announcements, modifiers, sensors, dragActionHandlers, visibleItemsDictionary, setDropIndicatorPosition, activeId, maxDragAndDropLevel, lastPosition, setLastPosition]);
+  const sortableContextProps = react.useMemo(() => ({
+    items: sortedIds,
+    strategy: isHorizontalDnD ? sortable.horizontalListSortingStrategy : sortable.verticalListSortingStrategy
+  }), [sortedIds, isHorizontalDnD]);
+  return {
+    dndContextProps,
+    sortableContextProps,
+    activeId,
+    activeIndex: (_visibleItemsDictiona = (_visibleItemsDictiona2 = visibleItemsDictionary[activeId]) === null || _visibleItemsDictiona2 === void 0 ? void 0 : _visibleItemsDictiona2.realIndex) !== null && _visibleItemsDictiona !== void 0 ? _visibleItemsDictiona : -1,
+    overId,
+    depth: projected ? projected.depth : 0,
+    dropIndicatorPosition,
+    visibleItems
+  };
+};
+
+exports.useTreeDndkitConfig = useTreeDndkitConfig;

package/cjs/tree/useTreePreviewHandlers.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var constants = require('./constants.js');
+
+const useTreePreviewHandlers = _ref => {
+  let {
+    setOverId,
+    setActiveId,
+    setDropIndicatorPosition
+  } = _ref;
+  const resetState = react.useCallback(() => {
+    setOverId('');
+    setActiveId('');
+    document.body.style.setProperty('cursor', '');
+  }, [setOverId, setActiveId]);
+  const handlePreviewDragStart = react.useCallback(_ref2 => {
+    let {
+      active: {
+        id
+      }
+    } = _ref2;
+    setActiveId(id);
+    setOverId(id);
+    setDropIndicatorPosition(constants.DropIndicatorPosition.Inside);
+    document.body.style.setProperty('cursor', 'grabbing');
+  }, [setActiveId, setDropIndicatorPosition, setOverId]);
+  const handlePreviewDragMove = react.useCallback(() => null, []);
+  const handlePreviewDragOver = react.useCallback(_ref3 => {
+    var _over$id;
+
+    let {
+      over
+    } = _ref3;
+    setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : '');
+  }, [setOverId]);
+  const handlePreviewDragEnd = react.useCallback(() => {
+    resetState();
+  }, [resetState]);
+  const handlePreviewDragCancel = react.useCallback(() => {
+    resetState();
+  }, [resetState]);
+  return {
+    handlePreviewDragStart,
+    handlePreviewDragMove,
+    handlePreviewDragOver,
+    handlePreviewDragEnd,
+    handlePreviewDragCancel
+  };
+};
+
+exports.useTreePreviewHandlers = useTreePreviewHandlers;

package/cjs/tree/utilities.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var constants = require('./constants.js');
+
+const getMinDepth = item => {
+  if (item) return item.depth;
+  return 0;
+};
+
+const getProjection = (items, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) => {
+  const overItemIndex = visibleItemsDictionary[overId].realIndex;
+  const previousItem = items[overItemIndex];
+  const nextItem = items[overItemIndex + 1];
+
+  if (dropIndicatorPosition === constants.DropIndicatorPosition.Inside && isExpandable) {
+    return {
+      depth: visibleItemsDictionary[overId].depth + 1,
+      parentId: overId
+    };
+  }
+
+  if (dropIndicatorPosition === constants.DropIndicatorPosition.Before) {
+    return {
+      depth: getMinDepth(previousItem),
+      parentId: previousItem.parentId
+    };
+  }
+
+  return {
+    depth: getMinDepth(nextItem),
+    parentId: nextItem === null || nextItem === void 0 ? void 0 : nextItem.parentId
+  };
+};
+const removeChildrenOf = (items, id) => {
+  const excludeParentIds = [id];
+  return items.filter(item => {
+    if (item.parentId !== null && excludeParentIds.includes(item.parentId)) {
+      excludeParentIds.push(item.uid);
+      return false;
+    }
+
+    return true;
+  });
+};
+
+exports.getProjection = getProjection;
+exports.removeChildrenOf = removeChildrenOf;

package/esm/hierarchy/customCollisionDetection.js

@@ -0,0 +1,66 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+
+const customCollisionDetection = (activeId, activeParent, dndItems) => _ref => {
+  var _originalContainer$re;
+
+  let {
+    droppableContainers,
+    collisionRect
+  } = _ref;
+  const entriesWithSameParent = droppableContainers.filter(_ref2 => {
+    var _dndItems$find;
+
+    let {
+      id
+    } = _ref2;
+    return ((_dndItems$find = dndItems.find(item => item.id === id)) === null || _dndItems$find === void 0 ? void 0 : _dndItems$find.parentId) === activeParent;
+  });
+  const originalContainer = entriesWithSameParent.find(_ref3 => {
+    let {
+      id
+    } = _ref3;
+    return id === activeId;
+  });
+  const originalRect = originalContainer === null || originalContainer === void 0 ? void 0 : (_originalContainer$re = originalContainer.rect) === null || _originalContainer$re === void 0 ? void 0 : _originalContainer$re.current;
+  if (!originalRect) return null;
+
+  if (originalRect.offsetLeft <= collisionRect.offsetLeft && collisionRect.offsetLeft <= originalRect.offsetLeft + originalRect.width) {
+    return originalContainer.id;
+  }
+
+  const isLeft = collisionRect.offsetLeft <= originalRect.offsetLeft + collisionRect.width / 2 + 5;
+  let match = null; // If going to the left, search the closest offset left
+  // Otherwise, get the closest offset right
+
+  const collisionPoint = collisionRect.offsetLeft + collisionRect.width / 2;
+  entriesWithSameParent.forEach(entry => {
+    const {
+      rect: {
+        current: rect
+      }
+    } = entry;
+
+    if (rect !== null) {
+      const offsetRight = rect.offsetLeft + rect.width;
+
+      if (!match) {
+        match = entry;
+      } else if (match && match.rect.current && isLeft && Math.abs(collisionPoint - rect.offsetLeft) <= Math.abs(collisionPoint - match.rect.current.offsetLeft)) {
+        match = entry;
+      } else if (match && match.rect.current && !isLeft && Math.abs(collisionPoint - offsetRight) <= Math.abs(collisionPoint - match.rect.current.offsetLeft - match.rect.current.width)) {
+        match = entry;
+      }
+    }
+  }); // Typescript believes match is always null for some reason
+
+  const matchCastedForSomeReason = match;
+  return matchCastedForSomeReason === null ? null : matchCastedForSomeReason.id;
+};
+
+export { customCollisionDetection };