@elliemae/ds-drag-and-drop 2.2.0-alpha.2 → 2.2.0-beta.0

package/cjs/tree/useTreeDndkitConfig.js

@@ -1,146 +1,142 @@
-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 useTreeDndkitConfig_exports = {};
-__export(useTreeDndkitConfig_exports, {
-  useTreeDndkitConfig: () => useTreeDndkitConfig
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_core = __toESM(require("@dnd-kit/core"));
-var import_sortable = __toESM(require("@dnd-kit/sortable"));
-var import_useTreePreviewHandlers = __toESM(require("./useTreePreviewHandlers"));
-var import_getTreeKeyboardCoordinates = __toESM(require("./getTreeKeyboardCoordinates"));
-var import_utilities = __toESM(require("./utilities"));
-var import_useTreeActionHandlers = __toESM(require("./useTreeActionHandlers"));
-var import_constants = __toESM(require("./constants"));
-var import_customCollisionDetection = __toESM(require("./customCollisionDetection"));
-var import_useTreeAnnouncements = __toESM(require("./useTreeAnnouncements"));
-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 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); 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.x = transform.x + 25;
   } else {
     newTransform.x = transform.x + 15;
   }
+
   return newTransform;
 };
+
 const measuring = {
   droppable: {
-    strategy: import_core.MeasuringStrategy.BeforeDragging
+    strategy: core.MeasuringStrategy.BeforeDragging
   }
 };
-const useTreeDndkitConfig = ({
-  flattenedItems,
-  visibleItems: preVisibleItems,
-  isHorizontalDnD = false,
-  isExpandable = false,
-  onReorder,
-  maxDragAndDropLevel
-}) => {
-  const [activeId, setActiveId] = (0, import_react.useState)("");
-  const [overId, setOverId] = (0, import_react.useState)("");
-  const [dropIndicatorPosition, setDropIndicatorPosition] = (0, import_react.useState)(import_constants.DropIndicatorPosition.None);
-  const [lastPosition, setLastPosition] = (0, import_react.useState)("");
-  const visibleItems = (0, import_react.useMemo)(() => (0, import_utilities.removeChildrenOf)(preVisibleItems, activeId), [preVisibleItems, activeId]);
-  const sortedIds = (0, import_react.useMemo)(() => visibleItems.map((item) => item.uid), [visibleItems]);
-  const visibleItemsDictionary = (0, import_react.useMemo)(() => {
+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) => {
+    visibleItems.forEach(item => {
       dictionary[item.uid] = item;
     });
     return dictionary;
   }, [visibleItems]);
-  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: visibleItems,
     dropIndicatorPosition,
     setDropIndicatorPosition
   });
-  (0, import_react.useEffect)(() => {
+  react.useEffect(() => {
     sensorContext.current = {
       items: visibleItems,
       dropIndicatorPosition,
       setDropIndicatorPosition
     };
   }, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition]);
-  const coordinateGetter = (0, import_react.useMemo)(() => (0, import_getTreeKeyboardCoordinates.getTreeKeyboardCoordinates)(sensorContext, isHorizontalDnD, maxDragAndDropLevel), [sensorContext, isHorizontalDnD, maxDragAndDropLevel]);
-  const sensors = (0, import_core.useSensors)((0, import_core.useSensor)(import_core.PointerSensor), (0, import_core.useSensor)(import_core.KeyboardSensor, {
+  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
-  }));
-  const projected = (0, import_react.useMemo)(() => overId ? (0, import_utilities.getProjection)(visibleItems, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) : null, [overId, visibleItems, visibleItemsDictionary, dropIndicatorPosition, isExpandable]);
-  const dragPreviewHandlers = (0, import_useTreePreviewHandlers.useTreePreviewHandlers)({
+  })); // 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 = (0, import_useTreeActionHandlers.useTreeActionHandlers)({
-    ...dragPreviewHandlers,
+  const dragActionHandlers = useTreeActionHandlers.useTreeActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
     onReorder,
     projected,
     flattenedItems,
     dropIndicatorPosition
-  });
-  const announcements = (0, import_useTreeAnnouncements.useTreeAnnouncements)(visibleItemsDictionary, dropIndicatorPosition);
-  const dndContextProps = (0, import_react.useMemo)(() => ({
+  }));
+  const announcements = useTreeAnnouncements.useTreeAnnouncements(visibleItemsDictionary, dropIndicatorPosition);
+  const dndContextProps = react.useMemo(() => _objectSpread({
     announcements,
     modifiers,
     sensors,
     measuring,
-    collisionDetection: (0, import_customCollisionDetection.customCollisionDetection)(activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition),
-    ...dragActionHandlers
-  }), [
-    announcements,
-    modifiers,
-    sensors,
-    dragActionHandlers,
-    visibleItemsDictionary,
-    setDropIndicatorPosition,
-    activeId,
-    maxDragAndDropLevel,
-    lastPosition,
-    setLastPosition
-  ]);
-  const sortableContextProps = (0, import_react.useMemo)(() => ({
+    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 ? import_sortable.horizontalListSortingStrategy : import_sortable.verticalListSortingStrategy
+    strategy: isHorizontalDnD ? sortable.horizontalListSortingStrategy : sortable.verticalListSortingStrategy
   }), [sortedIds, isHorizontalDnD]);
   return {
     dndContextProps,
     sortableContextProps,
     activeId,
-    activeIndex: visibleItemsDictionary[activeId]?.realIndex ?? -1,
+    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
   };
 };
-module.exports = __toCommonJS(useTreeDndkitConfig_exports);
-//# sourceMappingURL=useTreeDndkitConfig.js.map
+
+exports.useTreeDndkitConfig = useTreeDndkitConfig;

package/cjs/tree/useTreePreviewHandlers.js

@@ -1,61 +1,45 @@
-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 useTreePreviewHandlers_exports = {};
-__export(useTreePreviewHandlers_exports, {
-  useTreePreviewHandlers: () => useTreePreviewHandlers
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_constants = __toESM(require("./constants"));
-const useTreePreviewHandlers = ({
-  setOverId,
-  setActiveId,
-  setDropIndicatorPosition
-}) => {
-  const resetState = (0, import_react.useCallback)(() => {
-    setOverId("");
-    setActiveId("");
-    document.body.style.setProperty("cursor", "");
+'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 = (0, import_react.useCallback)(({ active: { id } }) => {
+  const handlePreviewDragStart = react.useCallback(_ref2 => {
+    let {
+      active: {
+        id
+      }
+    } = _ref2;
     setActiveId(id);
     setOverId(id);
-    setDropIndicatorPosition(import_constants.DropIndicatorPosition.Inside);
-    document.body.style.setProperty("cursor", "grabbing");
+    setDropIndicatorPosition(constants.DropIndicatorPosition.Inside);
+    document.body.style.setProperty('cursor', 'grabbing');
   }, [setActiveId, setDropIndicatorPosition, setOverId]);
-  const handlePreviewDragMove = (0, import_react.useCallback)(() => null, []);
-  const handlePreviewDragOver = (0, import_react.useCallback)(({ over }) => {
-    setOverId(over?.id ?? "");
+  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 = (0, import_react.useCallback)(() => {
+  const handlePreviewDragEnd = react.useCallback(() => {
     resetState();
   }, [resetState]);
-  const handlePreviewDragCancel = (0, import_react.useCallback)(() => {
+  const handlePreviewDragCancel = react.useCallback(() => {
     resetState();
   }, [resetState]);
   return {
@@ -66,5 +50,5 @@ const useTreePreviewHandlers = ({
     handlePreviewDragCancel
   };
 };
-module.exports = __toCommonJS(useTreePreviewHandlers_exports);
-//# sourceMappingURL=useTreePreviewHandlers.js.map
+
+exports.useTreePreviewHandlers = useTreePreviewHandlers;

package/cjs/tree/utilities.js

@@ -1,66 +1,52 @@
-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 utilities_exports = {};
-__export(utilities_exports, {
-  getProjection: () => getProjection,
-  removeChildrenOf: () => removeChildrenOf
-});
-var React = __toESM(require("react"));
-var import_constants = __toESM(require("./constants"));
-const getMinDepth = (item) => {
-  if (item)
-    return item.depth;
+'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 === import_constants.DropIndicatorPosition.Inside && isExpandable) {
+
+  if (dropIndicatorPosition === constants.DropIndicatorPosition.Inside && isExpandable) {
     return {
       depth: visibleItemsDictionary[overId].depth + 1,
       parentId: overId
     };
   }
-  if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Before) {
-    return { depth: getMinDepth(previousItem), parentId: previousItem.parentId };
+
+  if (dropIndicatorPosition === constants.DropIndicatorPosition.Before) {
+    return {
+      depth: getMinDepth(previousItem),
+      parentId: previousItem.parentId
+    };
   }
-  return { depth: getMinDepth(nextItem), parentId: nextItem?.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) => {
+  return items.filter(item => {
     if (item.parentId !== null && excludeParentIds.includes(item.parentId)) {
       excludeParentIds.push(item.uid);
       return false;
     }
+
     return true;
   });
 };
-module.exports = __toCommonJS(utilities_exports);
-//# sourceMappingURL=utilities.js.map
+
+exports.getProjection = getProjection;
+exports.removeChildrenOf = removeChildrenOf;

package/esm/hierarchy/customCollisionDetection.js

@@ -1,22 +1,54 @@
-import * as React from "react";
-const customCollisionDetection = (activeId, activeParent, dndItems) => ({ droppableContainers, collisionRect }) => {
-  const entriesWithSameParent = droppableContainers.filter(({ id }) => dndItems.find((item) => item.id === id)?.parentId === activeParent);
-  const originalContainer = entriesWithSameParent.find(({ id }) => id === activeId);
-  const originalRect = originalContainer?.rect?.current;
-  if (!originalRect)
-    return null;
+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;
+  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) => {
+  entriesWithSameParent.forEach(entry => {
     const {
-      rect: { current: rect }
+      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)) {
@@ -25,11 +57,10 @@ const customCollisionDetection = (activeId, activeParent, dndItems) => ({ droppa
         match = entry;
       }
     }
-  });
+  }); // Typescript believes match is always null for some reason
+
   const matchCastedForSomeReason = match;
   return matchCastedForSomeReason === null ? null : matchCastedForSomeReason.id;
 };
-export {
-  customCollisionDetection
-};
-//# sourceMappingURL=customCollisionDetection.js.map
+
+export { customCollisionDetection };