@elliemae/ds-drag-and-drop 2.2.0-alpha.3 → 2.2.0-next.2

package/cjs/hierarchy/useHierarchyDndkitConfig.js

@@ -1,113 +1,119 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var useHierarchyDndkitConfig_exports = {};
-__export(useHierarchyDndkitConfig_exports, {
-  useHierarchyDndkitConfig: () => useHierarchyDndkitConfig
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_core = __toESM(require("@dnd-kit/core"));
-var import_useHierarchyActionHandlers = __toESM(require("./useHierarchyActionHandlers"));
-var import_useHierarchyPreviewHandlers = __toESM(require("./useHierarchyPreviewHandlers"));
-var import_getHierarchyKeyboardCoordinates = __toESM(require("./getHierarchyKeyboardCoordinates"));
-var import_customCollisionDetection = __toESM(require("./customCollisionDetection"));
-var import_useHierarchyAnnouncements = __toESM(require("./useHierarchyAnnouncements"));
-const adjustTranslate = (isHorizontalDnD) => ({ transform }) => {
-  const newTransform = {
-    ...transform
-  };
+'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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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: import_core.MeasuringStrategy.Always
+    strategy: core.MeasuringStrategy.Always
   }
 };
+
 const noop = () => null;
-const useHierarchyDndkitConfig = ({
-  flattenedItems,
-  dragOverlayDataTestid,
-  isHorizontalDnD = false,
-  onReorder,
-  onPreviewResetState = noop,
-  onPreviewDragStart = noop
-}) => {
-  const [activeId, setActiveId] = (0, import_react.useState)("");
-  const dndItems = (0, import_react.useMemo)(() => flattenedItems.map(([item]) => item), [flattenedItems]);
-  const itemsDictionary = (0, import_react.useMemo)(() => {
+
+const useHierarchyDndkitConfig = _ref2 => {
+  var _itemsDictionary$acti;
+
+  let {
+    flattenedItems,
+    dragOverlayDataTestid,
+    isHorizontalDnD = false,
+    onReorder,
+    onPreviewResetState = noop,
+    onPreviewDragStart = noop
+  } = _ref2;
+  const [activeId, setActiveId] = react.useState('');
+  const dndItems = react.useMemo(() => flattenedItems.map(_ref3 => {
+    let [item] = _ref3;
+    return item;
+  }), [flattenedItems]);
+  const itemsDictionary = react.useMemo(() => {
     const dictionary = {};
-    dndItems.forEach((item) => {
+    dndItems.forEach(item => {
       dictionary[item.id] = item;
     });
     return dictionary;
   }, [dndItems]);
-  const modifiers = (0, import_react.useMemo)(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);
-  const sensorContext = (0, import_react.useRef)({
+  const modifiers = react.useMemo(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);
+  const sensorContext = react.useRef({
     items: dndItems
   });
-  (0, import_react.useEffect)(() => {
+  react.useEffect(() => {
     sensorContext.current = {
       items: dndItems
     };
   }, [dndItems]);
-  const coordinateGetter = (0, import_react.useMemo)(() => (0, import_getHierarchyKeyboardCoordinates.getHierarchyKeyboardCoordinates)(sensorContext, dragOverlayDataTestid, isHorizontalDnD), [isHorizontalDnD]);
-  const sensors = (0, import_core.useSensors)((0, import_core.useSensor)(import_core.PointerSensor), (0, import_core.useSensor)(import_core.KeyboardSensor, {
+  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 = (0, import_useHierarchyPreviewHandlers.useHierarchyPreviewHandlers)({
+  const dragPreviewHandlers = useHierarchyPreviewHandlers.useHierarchyPreviewHandlers({
     setActiveId,
     onPreviewResetState,
     onPreviewDragStart
   });
-  const dragActionHandlers = (0, import_useHierarchyActionHandlers.useHierarchyActionHandlers)({
-    ...dragPreviewHandlers,
+  const dragActionHandlers = useHierarchyActionHandlers.useHierarchyActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
     dndItems,
     onReorder
-  });
-  const announcements = (0, import_useHierarchyAnnouncements.useHierarchyAnnouncements)(itemsDictionary);
-  const dndContextProps = (0, import_react.useMemo)(() => ({
-    announcements,
-    modifiers,
-    sensors,
-    measuring,
-    collisionDetection: (0, import_customCollisionDetection.customCollisionDetection)(activeId, itemsDictionary[activeId ?? ""]?.parentId, dndItems),
-    ...dragActionHandlers
-  }), [announcements, modifiers, sensors, activeId, itemsDictionary, dndItems, dragActionHandlers]);
+  }));
+  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,
-    activeIndex: activeId ? itemsDictionary[activeId]?.index : -1
+    activeIndex: activeId ? (_itemsDictionary$acti = itemsDictionary[activeId]) === null || _itemsDictionary$acti === void 0 ? void 0 : _itemsDictionary$acti.index : -1
   };
 };
-module.exports = __toCommonJS(useHierarchyDndkitConfig_exports);
-//# sourceMappingURL=useHierarchyDndkitConfig.js.map
+
+exports.useHierarchyDndkitConfig = useHierarchyDndkitConfig;

package/cjs/hierarchy/useHierarchyPreviewHandlers.js

@@ -1,56 +1,35 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var useHierarchyPreviewHandlers_exports = {};
-__export(useHierarchyPreviewHandlers_exports, {
-  useHierarchyPreviewHandlers: () => useHierarchyPreviewHandlers
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-const useHierarchyPreviewHandlers = ({
-  setActiveId,
-  onPreviewResetState,
-  onPreviewDragStart
-}) => {
-  const resetState = (0, import_react.useCallback)(() => {
-    setActiveId("");
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const useHierarchyPreviewHandlers = _ref => {
+  let {
+    setActiveId,
+    onPreviewResetState,
+    onPreviewDragStart
+  } = _ref;
+  const resetState = react.useCallback(() => {
+    setActiveId('');
     onPreviewResetState();
-    document.body.style.setProperty("cursor", "");
+    document.body.style.setProperty('cursor', '');
   }, [setActiveId, onPreviewResetState]);
-  const handlePreviewDragStart = (0, import_react.useCallback)(({ active: { id } }) => {
+  const handlePreviewDragStart = react.useCallback(_ref2 => {
+    let {
+      active: {
+        id
+      }
+    } = _ref2;
     setActiveId(id);
-    document.body.style.setProperty("cursor", "grabbing");
+    document.body.style.setProperty('cursor', 'grabbing');
     onPreviewDragStart();
   }, [setActiveId, onPreviewDragStart]);
-  const handlePreviewDragMove = (0, import_react.useCallback)(() => null, []);
-  const handlePreviewDragEnd = (0, import_react.useCallback)(() => {
+  const handlePreviewDragMove = react.useCallback(() => null, []);
+  const handlePreviewDragEnd = react.useCallback(() => {
     resetState();
   }, [resetState]);
-  const handlePreviewDragCancel = (0, import_react.useCallback)(() => {
+  const handlePreviewDragCancel = react.useCallback(() => {
     resetState();
   }, [resetState]);
   return {
@@ -60,5 +39,5 @@ const useHierarchyPreviewHandlers = ({
     handlePreviewDragCancel
   };
 };
-module.exports = __toCommonJS(useHierarchyPreviewHandlers_exports);
-//# sourceMappingURL=useHierarchyPreviewHandlers.js.map
+
+exports.useHierarchyPreviewHandlers = useHierarchyPreviewHandlers;

package/cjs/index.js

@@ -1,29 +1,11 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var src_exports = {};
-var React = __toESM(require("react"));
-__reExport(src_exports, __toESM(require("./hierarchy")));
-__reExport(src_exports, __toESM(require("./tree")));
-module.exports = __toCommonJS(src_exports);
-//# sourceMappingURL=index.js.map
+'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

@@ -1,41 +1,12 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var constants_exports = {};
-__export(constants_exports, {
-  DropIndicatorPosition: () => DropIndicatorPosition
-});
-var React = __toESM(require("react"));
-var DropIndicatorPosition = /* @__PURE__ */ ((DropIndicatorPosition2) => {
-  DropIndicatorPosition2[DropIndicatorPosition2["None"] = 0] = "None";
-  DropIndicatorPosition2[DropIndicatorPosition2["Before"] = 1] = "Before";
-  DropIndicatorPosition2[DropIndicatorPosition2["After"] = 2] = "After";
-  DropIndicatorPosition2[DropIndicatorPosition2["Inside"] = 3] = "Inside";
-  return DropIndicatorPosition2;
-})(DropIndicatorPosition || {});
-module.exports = __toCommonJS(constants_exports);
-//# sourceMappingURL=constants.js.map
+'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

@@ -1,106 +1,141 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var customCollisionDetection_exports = {};
-__export(customCollisionDetection_exports, {
-  customCollisionDetection: () => customCollisionDetection
-});
-var React = __toESM(require("react"));
-var import_constants = __toESM(require("./constants"));
-const DUMMY_ID = "DUMMY_ID_INTERNAL_USE_ONLY";
+'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,
-  height: 0
+  // Doesn't matter
+  height: 0 // Doesn't matter
+
 };
 const RECT_DOWN = {
   offsetTop: Infinity,
   offsetLeft: 0,
+  // Doesn't matter,
   width: 0,
-  height: 0
-};
-const thresholdRatio = 0.2;
+  // 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) => ({ droppableContainers, collisionRect }) => {
-  const originalContainer = droppableContainers.find(({ id }) => id === activeId);
-  const originalRect = originalContainer?.rect?.current;
-  let isUp = lastPosition === "up";
-  if (originalRect) {
-    isUp = originalRect.offsetTop > collisionRect.top;
-  }
-  const threshold = collisionRect.height * thresholdRatio;
-  let collidingContainer = null;
-  if (isUp) {
-    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;
+const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition) => {
+  const func = _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
         }
-      }
-      return firstRectDown;
-    }, { id: DUMMY_ID, rect: { current: RECT_DOWN } });
-  } else {
-    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;
+      });
+    } 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 (collidingContainer.id === DUMMY_ID) {
-    return null;
-  }
-  const collidingRect = collidingContainer.rect.current;
-  if (!collidingRect)
-    return null;
-  const [top, bottom] = [
-    Math.max(collisionRect.top, collidingRect.offsetTop),
-    Math.min(collisionRect.bottom, collidingRect.offsetTop + collidingRect.height)
-  ];
-  const intersectionPercentage = Math.abs(bottom - top) / collidingRect.height;
-  if (intersectionPercentage > insideThreshold && visibleItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel && collidingContainer.id !== activeId) {
-    setDropIndicatorPosition(import_constants.DropIndicatorPosition.Inside);
-  } else {
-    setDropIndicatorPosition(isUp ? import_constants.DropIndicatorPosition.Before : import_constants.DropIndicatorPosition.After);
-  }
-  if (isUp && lastPosition !== "up")
-    setLastPosition("up");
-  else if (!isUp && lastPosition !== "down")
-    setLastPosition("down");
-  return collidingContainer.id;
+
+        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.top + collisionRect.height, 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;
+  };
+
+  return func;
 };
-module.exports = __toCommonJS(customCollisionDetection_exports);
-//# sourceMappingURL=customCollisionDetection.js.map
+
+exports.customCollisionDetection = customCollisionDetection;