@elliemae/ds-drag-and-drop 2.0.0-rc.10

package/cjs/hierarchy/customCollisionDetection.js

@@ -0,0 +1,75 @@
+'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');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+
+const customCollisionDetection = (activeId, activeParent, dndItems) => _ref => {
+  var _droppableContainers$, _droppableContainers$2, _originalContainer$re;
+
+  let {
+    droppableContainers,
+    collisionRect,
+    active
+  } = _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 dragOverlayRect = (_droppableContainers$ = droppableContainers.find(_ref3 => {
+    let {
+      id
+    } = _ref3;
+    return id === active.id;
+  })) === null || _droppableContainers$ === void 0 ? void 0 : (_droppableContainers$2 = _droppableContainers$.rect) === null || _droppableContainers$2 === void 0 ? void 0 : _droppableContainers$2.current;
+  const originalContainer = entriesWithSameParent.find(_ref4 => {
+    let {
+      id
+    } = _ref4;
+    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 || !dragOverlayRect) return undefined;
+
+  if (originalRect.offsetLeft <= collisionRect.offsetLeft && collisionRect.offsetLeft <= originalRect.offsetLeft + originalRect.width) {
+    return originalContainer.id;
+  }
+
+  const isLeft = collisionRect.offsetLeft <= originalRect.offsetLeft + dragOverlayRect.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 + dragOverlayRect.width / 2;
+  entriesWithSameParent.forEach(entry => {
+    const {
+      rect: {
+        current: rect
+      }
+    } = entry;
+
+    if (rect) {
+      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;
+      }
+    }
+  });
+  return match === null ? null : match.id;
+};
+
+exports.customCollisionDetection = customCollisionDetection;

package/cjs/hierarchy/getHierarchyKeyboardCoordinates.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.for-each.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 core = require('@dnd-kit/core');
+
+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 vertical = [core.KeyboardCode.Up, core.KeyboardCode.Down];
+
+const getHorizontalKeyboardCoordinates = _ref => {
+  var _document$querySelect, _document$querySelect2, _droppableContainers$, _droppableContainers$2, _droppableContainers$3, _droppableContainers$4;
+
+  let {
+    items,
+    active,
+    over,
+    event,
+    currentCoordinates,
+    droppableContainers,
+    collisionRect,
+    dragOverlayDataTestid
+  } = _ref;
+  if (vertical.includes(event.code) || !active || !over) return undefined;
+  const activeItem = items.find(item => item.id === active.id);
+  const overRect = over.rect;
+  const layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
+
+  droppableContainers.forEach(container => {
+    var _items$find;
+
+    if (container !== null && container !== void 0 && container.disabled || !overRect) {
+      return;
+    }
+
+    const node = container === null || container === void 0 ? void 0 : container.node.current;
+
+    if (!node) {
+      return;
+    }
+
+    const itemParent = (_items$find = items.find(item => item.id === container.id)) === null || _items$find === void 0 ? void 0 : _items$find.parentId;
+    if (itemParent !== (activeItem === null || activeItem === void 0 ? void 0 : activeItem.parentId)) return;
+    const rect = core.getViewRect(node);
+
+    if (event.code === core.KeyboardCode.Left && collisionRect.left > rect.right - 10) {
+      layoutRects.push(container);
+    } else if (event.code === core.KeyboardCode.Right && collisionRect.left < rect.left) {
+      layoutRects.push(container);
+    }
+  });
+  const dragOverlayRect = (_document$querySelect = (_document$querySelect2 = document.querySelector("[data-testid=\"".concat(dragOverlayDataTestid, "\"]"))) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.getBoundingClientRect()) !== null && _document$querySelect !== void 0 ? _document$querySelect : {
+    width: 150,
+    left: 0
+  };
+  const closestId = core.closestCorners({
+    droppableContainers: layoutRects,
+    collisionRect,
+    active
+  });
+  if (!closestId) return undefined;
+  const closestDroppableContainer = (_droppableContainers$ = droppableContainers.get(closestId)) === null || _droppableContainers$ === void 0 ? void 0 : (_droppableContainers$2 = _droppableContainers$.node) === null || _droppableContainers$2 === void 0 ? void 0 : _droppableContainers$2.current;
+  const activeDroppableContainer = (_droppableContainers$3 = droppableContainers.get(active === null || active === void 0 ? void 0 : active.id)) === null || _droppableContainers$3 === void 0 ? void 0 : (_droppableContainers$4 = _droppableContainers$3.node) === null || _droppableContainers$4 === void 0 ? void 0 : _droppableContainers$4.current;
+  if (!closestDroppableContainer || !activeDroppableContainer) return undefined;
+  const closestRect = core.getViewRect(closestDroppableContainer);
+  const activeRect = core.getViewRect(activeDroppableContainer);
+  return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+    x: closestRect.left + (closestRect.width - dragOverlayRect.width) / 2 + (closestRect.offsetLeft < activeRect.left ? -1 : 1)
+  });
+};
+
+const getHierarchyKeyboardCoordinates = (context, dragOverlayDataTestid, isHorizontalDnD) => (event, _ref2) => {
+  let {
+    currentCoordinates,
+    context: {
+      active,
+      over,
+      collisionRect,
+      droppableContainers
+    }
+  } = _ref2;
+
+  if (directions.includes(event.code)) {
+    event.preventDefault();
+
+    if (!collisionRect) {
+      return undefined;
+    }
+
+    const {
+      current: {
+        items
+      }
+    } = context;
+    const args = {
+      dragOverlayDataTestid,
+      items,
+      active,
+      over,
+      event,
+      currentCoordinates,
+      droppableContainers,
+      collisionRect
+    };
+    if (isHorizontalDnD) return getHorizontalKeyboardCoordinates(args);
+    return undefined;
+  }
+
+  return undefined;
+};
+
+exports.getHierarchyKeyboardCoordinates = getHierarchyKeyboardCoordinates;

package/cjs/hierarchy/index.js

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

package/cjs/hierarchy/types.js

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

package/cjs/hierarchy/useHierarchyActionHandlers.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const useHierarchyActionHandlers = _ref => {
+  let {
+    handlePreviewDragStart,
+    handlePreviewDragMove,
+    handlePreviewDragOver,
+    handlePreviewDragEnd,
+    handlePreviewDragCancel,
+    onReorder,
+    dndItems
+  } = _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) return;
+
+    if (active.id !== over.id) {
+      const activeIndex = dndItems.findIndex(item => item.id === active.id);
+      const overIndex = dndItems.findIndex(item => item.id === over.id);
+      onReorder(dndItems[activeIndex], {
+        targetIndex: overIndex,
+        fromIndex: activeIndex
+      });
+    }
+  }, [handlePreviewDragEnd, dndItems, onReorder]);
+  const onDragCancel = react.useCallback(e => {
+    handlePreviewDragCancel(e);
+  }, [handlePreviewDragCancel]);
+  return {
+    onDragStart,
+    onDragMove,
+    onDragOver,
+    onDragEnd,
+    onDragCancel
+  };
+};
+
+exports.useHierarchyActionHandlers = useHierarchyActionHandlers;

package/cjs/hierarchy/useHierarchyAnnouncements.js

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

package/cjs/hierarchy/useHierarchyDndkitConfig.js

@@ -0,0 +1,122 @@
+'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 useHierarchyActionHandlers = require('./useHierarchyActionHandlers.js');
+var useHierarchyPreviewHandlers = require('./useHierarchyPreviewHandlers.js');
+var getHierarchyKeyboardCoordinates = require('./getHierarchyKeyboardCoordinates.js');
+var customCollisionDetection = require('./customCollisionDetection.js');
+var useHierarchyAnnouncements = require('./useHierarchyAnnouncements.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.y = transform.y + 15;
+  } else {
+    newTransform.y = transform.y - 35;
+  }
+
+  return newTransform;
+};
+
+const measuring = {
+  droppable: {
+    strategy: core.MeasuringStrategy.Always
+  }
+};
+
+const noop = () => null;
+
+const useHierarchyDndkitConfig = _ref2 => {
+  var _itemsDictionary$acti;
+
+  let {
+    flattenedItems,
+    dragOverlayDataTestid,
+    isHorizontalDnD = false,
+    onReorder,
+    onPreviewResetState = noop,
+    onPreviewDragStart = noop
+  } = _ref2;
+  const [activeId, setActiveId] = react.useState('');
+  const [overId, setOverId] = react.useState('');
+  const dndItems = react.useMemo(() => flattenedItems.map(_ref3 => {
+    let [item] = _ref3;
+    return item;
+  }), [flattenedItems]);
+  const itemsDictionary = react.useMemo(() => {
+    const dictionary = {};
+    dndItems.forEach(item => {
+      dictionary[item.id] = item;
+    });
+    return dictionary;
+  }, [dndItems]);
+  const modifiers = react.useMemo(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);
+  const sensorContext = react.useRef({
+    items: dndItems
+  });
+  react.useEffect(() => {
+    sensorContext.current = {
+      items: dndItems
+    };
+  }, [dndItems]);
+  const coordinateGetter = react.useMemo(() => getHierarchyKeyboardCoordinates.getHierarchyKeyboardCoordinates(sensorContext, dragOverlayDataTestid, isHorizontalDnD), [isHorizontalDnD]);
+  const sensors = core.useSensors(core.useSensor(core.PointerSensor), core.useSensor(core.KeyboardSensor, {
+    coordinateGetter
+  }));
+  const dragPreviewHandlers = useHierarchyPreviewHandlers.useHierarchyPreviewHandlers({
+    setActiveId,
+    setOverId,
+    onPreviewResetState,
+    onPreviewDragStart
+  });
+  const dragActionHandlers = useHierarchyActionHandlers.useHierarchyActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
+    dndItems,
+    onReorder
+  }));
+  const announcements = useHierarchyAnnouncements.useHierarchyAnnouncements(itemsDictionary);
+  const dndContextProps = react.useMemo(() => {
+    var _itemsDictionary;
+
+    return _objectSpread({
+      announcements,
+      modifiers,
+      sensors,
+      measuring,
+      collisionDetection: customCollisionDetection.customCollisionDetection(activeId, (_itemsDictionary = itemsDictionary[activeId !== null && activeId !== void 0 ? activeId : '']) === null || _itemsDictionary === void 0 ? void 0 : _itemsDictionary.parentId, dndItems)
+    }, dragActionHandlers);
+  }, [announcements, modifiers, sensors, activeId, itemsDictionary, dndItems, dragActionHandlers]);
+  return {
+    dndContextProps,
+    activeId,
+    overId,
+    activeIndex: activeId ? (_itemsDictionary$acti = itemsDictionary[activeId]) === null || _itemsDictionary$acti === void 0 ? void 0 : _itemsDictionary$acti.index : -1
+  };
+};
+
+exports.useHierarchyDndkitConfig = useHierarchyDndkitConfig;

package/cjs/hierarchy/useHierarchyPreviewHandlers.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const useHierarchyPreviewHandlers = _ref => {
+  let {
+    setOverId,
+    setActiveId,
+    onPreviewResetState,
+    onPreviewDragStart
+  } = _ref;
+  const resetState = react.useCallback(() => {
+    setOverId('');
+    setActiveId('');
+    onPreviewResetState();
+    document.body.style.setProperty('cursor', '');
+  }, [setOverId, setActiveId, onPreviewResetState]);
+  const handlePreviewDragStart = react.useCallback(_ref2 => {
+    let {
+      active: {
+        id
+      }
+    } = _ref2;
+    setActiveId(id);
+    setOverId(id);
+    document.body.style.setProperty('cursor', 'grabbing');
+    onPreviewDragStart();
+  }, [setActiveId, setOverId, onPreviewDragStart]);
+  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.useHierarchyPreviewHandlers = useHierarchyPreviewHandlers;

package/cjs/index.js

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

package/cjs/tree/constants.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.DropIndicatorPosition = void 0;
+
+(function (DropIndicatorPosition) {
+  DropIndicatorPosition[DropIndicatorPosition["None"] = 0] = "None";
+  DropIndicatorPosition[DropIndicatorPosition["Before"] = 1] = "Before";
+  DropIndicatorPosition[DropIndicatorPosition["After"] = 2] = "After";
+  DropIndicatorPosition[DropIndicatorPosition["Inside"] = 3] = "Inside";
+})(exports.DropIndicatorPosition || (exports.DropIndicatorPosition = {}));

package/cjs/tree/customCollisionDetection.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+var constants = require('./constants.js');
+
+const DUMMY_ID = 'DUMMY_ID_INTERNAL_USE_ONLY';
+const RECT_UP = {
+  offsetTop: -Infinity,
+  offsetLeft: 0,
+  // Doesn't matter,
+  width: 0,
+  // Doesn't matter
+  height: 0 // Doesn't matter
+
+};
+const RECT_DOWN = {
+  offsetTop: Infinity,
+  offsetLeft: 0,
+  // Doesn't matter,
+  width: 0,
+  // Doesn't matter
+  height: 0 // Doesn't matter
+
+}; // Percentage of height to take into consideration when looking for colliding rects
+
+const thresholdRatio = 0.2; // Percentage to be inside
+
+const insideThreshold = 0.7;
+const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition) => _ref => {
+  var _originalContainer$re;
+
+  let {
+    droppableContainers,
+    collisionRect
+  } = _ref;
+  const originalContainer = droppableContainers.find(_ref2 => {
+    let {
+      id
+    } = _ref2;
+    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; // We first check if the item was moved up or down
+  // This modifies how to search the matching colliding rect
+
+  let isUp = lastPosition === 'up';
+
+  if (originalRect) {
+    isUp = originalRect.offsetTop > collisionRect.top;
+  } // Threshold
+
+
+  const threshold = collisionRect.height * thresholdRatio;
+  let collidingContainer = null;
+
+  if (isUp) {
+    // Up -- We need to find the first rectangle downwards
+    collidingContainer = droppableContainers.reduce((firstRectDown, container) => {
+      const rect = container.rect.current;
+
+      if (rect && firstRectDown.rect.current) {
+        const {
+          offsetTop: rectOffsetTop
+        } = rect;
+        const {
+          offsetTop: firstRectDownOffsetTop
+        } = firstRectDown.rect.current;
+
+        if (rectOffsetTop + threshold > collisionRect.top && rectOffsetTop < firstRectDownOffsetTop) {
+          return container;
+        }
+      }
+
+      return firstRectDown;
+    }, {
+      id: DUMMY_ID,
+      rect: {
+        current: RECT_DOWN
+      }
+    });
+  } else {
+    // Down -- We need to find the first rectangle upwards
+    collidingContainer = droppableContainers.reduce((firstRectUp, container) => {
+      const rect = container.rect.current;
+
+      if (rect && firstRectUp.rect.current) {
+        const {
+          offsetTop: rectOffsetTop
+        } = rect;
+        const {
+          offsetTop: firstRectUpOffsetTop
+        } = firstRectUp.rect.current;
+
+        if (rectOffsetTop - threshold < collisionRect.top && rectOffsetTop > firstRectUpOffsetTop) {
+          return container;
+        }
+      }
+
+      return firstRectUp;
+    }, {
+      id: DUMMY_ID,
+      rect: {
+        current: RECT_UP
+      }
+    });
+  } // If we didn't find a match, return null
+
+
+  if (collidingContainer.id === DUMMY_ID) {
+    return null;
+  }
+
+  const collidingRect = collidingContainer.rect.current;
+  if (!collidingRect) return null; // Calculate the intersection interval
+
+  const [top, bottom] = [Math.max(collisionRect.top, collidingRect.offsetTop), Math.min(collisionRect.bottom, collidingRect.offsetTop + collidingRect.height)]; // Calculate the percentage of intersection
+
+  const intersectionPercentage = Math.abs(bottom - top) / collidingRect.height;
+
+  if (intersectionPercentage > insideThreshold && visibleItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel && collidingContainer.id !== activeId) {
+    setDropIndicatorPosition(constants.DropIndicatorPosition.Inside);
+  } else {
+    setDropIndicatorPosition(isUp ? constants.DropIndicatorPosition.Before : constants.DropIndicatorPosition.After);
+  }
+
+  if (isUp && lastPosition !== 'up') setLastPosition('up');else if (!isUp && lastPosition !== 'down') setLastPosition('down'); // Return the id of the match rectangle
+
+  return collidingContainer.id;
+};
+
+exports.customCollisionDetection = customCollisionDetection;