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

package/esm/tree/customCollisionDetection.js

@@ -1,77 +1,137 @@
-import * as React from "react";
-import { DropIndicatorPosition } from "./constants";
-const DUMMY_ID = "DUMMY_ID_INTERNAL_USE_ONLY";
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { DropIndicatorPosition } from './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 } });
-  } 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;
+
+        return firstRectDown;
+      }, {
+        id: DUMMY_ID,
+        rect: {
+          current: RECT_DOWN
         }
-      }
-      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(DropIndicatorPosition.Inside);
-  } else {
-    setDropIndicatorPosition(isUp ? DropIndicatorPosition.Before : DropIndicatorPosition.After);
-  }
-  if (isUp && lastPosition !== "up")
-    setLastPosition("up");
-  else if (!isUp && lastPosition !== "down")
-    setLastPosition("down");
-  return collidingContainer.id;
-};
-export {
-  customCollisionDetection
+      });
+    } 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.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(DropIndicatorPosition.Inside);
+    } else {
+      setDropIndicatorPosition(isUp ? DropIndicatorPosition.Before : 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;
 };
-//# sourceMappingURL=customCollisionDetection.js.map
+
+export { customCollisionDetection };

package/esm/tree/getTreeKeyboardCoordinates.js

@@ -1,29 +1,45 @@
-import * as React from "react";
-import { closestCorners, getViewRect, KeyboardCode } from "@dnd-kit/core";
-import { DropIndicatorPosition } from "./constants";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.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.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { KeyboardCode, closestCorners, getViewRect } from '@dnd-kit/core';
+import { DropIndicatorPosition } from './constants.js';
+
+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(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; }
 const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
 const horizontal = [KeyboardCode.Left, KeyboardCode.Right];
-const vertical = [KeyboardCode.Up, KeyboardCode.Down];
-const getVerticalKeyboardCoordinates = ({
-  items,
-  active,
-  over,
-  event,
-  currentCoordinates,
-  droppableContainers,
-  collisionRect,
-  dropIndicatorPosition,
-  maxDragAndDropLevel
-}) => {
-  if (horizontal.includes(event.code))
-    return void 0;
+
+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 = [];
-  droppableContainers.forEach((container) => {
-    if (container?.disabled || !overRect) {
+  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 === KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {
       layoutRects.push(container);
     } else if (rect && event.code === KeyboardCode.Up && collisionRect.top >= rect.offsetTop) {
@@ -35,44 +51,64 @@ const getVerticalKeyboardCoordinates = ({
     droppableContainers: layoutRects,
     active
   });
-  const closestItem = items.find((item) => item.uid === closestId);
-  const closestElement = droppableContainers.get(closestId)?.node?.current;
-  if (!closestId || !closestItem || !closestElement)
-    return void 0;
+  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 = getViewRect(closestElement);
+
   if (event.code === 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 === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
-      return {
-        ...currentCoordinates,
+      return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
         y: closestRect.top - collisionRect.height / 2
-      };
+      });
     }
-    return {
-      ...currentCoordinates,
+
+    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 === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
-    return {
-      ...currentCoordinates,
+    return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
       y: closestRect.top + collisionRect.height / 2
-    };
+    });
   }
-  return {
-    ...currentCoordinates,
+
+  return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
     y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
-  };
+  });
 };
-const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {
+
+const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, _ref2) => {
+  let {
+    currentCoordinates,
+    context: {
+      over,
+      translatedRect,
+      droppableContainers,
+      active,
+      collisionRect
+    }
+  } = _ref2;
+
   if (directions.includes(event.code)) {
     if (!translatedRect) {
-      return void 0;
+      return undefined;
     }
+
     const {
-      current: { items, dropIndicatorPosition }
+      current: {
+        items,
+        dropIndicatorPosition
+      }
     } = context;
-    if (!over || !active || !collisionRect)
-      return void 0;
+    if (!over || !active || !collisionRect) return undefined;
     const args = {
       items,
       active,
@@ -84,13 +120,11 @@ const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLeve
       dropIndicatorPosition,
       maxDragAndDropLevel
     };
-    if (isHorizontalDnD)
-      return void 0;
+    if (isHorizontalDnD) return undefined;
     return getVerticalKeyboardCoordinates(args);
   }
-  return void 0;
-};
-export {
-  getTreeKeyboardCoordinates
+
+  return undefined;
 };
-//# sourceMappingURL=getTreeKeyboardCoordinates.js.map
+
+export { getTreeKeyboardCoordinates };

package/esm/tree/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "./useTreeDndkitConfig";
-//# sourceMappingURL=index.js.map
+export { useTreeDndkitConfig } from './useTreeDndkitConfig.js';

package/esm/tree/types.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=types.js.map
+

package/esm/tree/useTreeActionHandlers.js

@@ -1,56 +1,70 @@
-import * as React from "react";
-import { arrayMove } from "@dnd-kit/sortable";
-import { cloneDeep } from "lodash";
-import { useCallback } from "react";
-import { DropIndicatorPosition } from "./constants";
-const useTreeActionHandlers = ({
-  handlePreviewDragStart,
-  handlePreviewDragMove,
-  handlePreviewDragOver,
-  handlePreviewDragEnd,
-  handlePreviewDragCancel,
-  onReorder,
-  flattenedItems,
-  projected,
-  dropIndicatorPosition
-}) => {
-  const onDragStart = useCallback((e) => {
+import { arrayMove } from '@dnd-kit/sortable';
+import { cloneDeep } from 'lodash';
+import { useCallback } from 'react';
+import { DropIndicatorPosition } from './constants.js';
+
+const useTreeActionHandlers = _ref => {
+  let {
+    handlePreviewDragStart,
+    handlePreviewDragMove,
+    handlePreviewDragOver,
+    handlePreviewDragEnd,
+    handlePreviewDragCancel,
+    onReorder,
+    flattenedItems,
+    projected,
+    dropIndicatorPosition,
+    isDropValid
+  } = _ref;
+  const onDragStart = useCallback(e => {
     handlePreviewDragStart(e);
   }, [handlePreviewDragStart]);
-  const onDragMove = useCallback((e) => {
+  const onDragMove = useCallback(e => {
     handlePreviewDragMove(e);
   }, [handlePreviewDragMove]);
-  const onDragOver = useCallback((e) => {
+  const onDragOver = useCallback(e => {
     handlePreviewDragOver(e);
   }, [handlePreviewDragOver]);
-  const onDragEnd = useCallback((e) => {
+  const onDragEnd = useCallback(e => {
     handlePreviewDragEnd(e);
-    const { active, over } = e;
-    if (over === null)
-      return;
-    const activeIndex = flattenedItems.findIndex((item) => item.uid === active.id);
+    const {
+      active,
+      over
+    } = e;
+    if (over === null || !isDropValid) return;
+    const activeIndex = flattenedItems.findIndex(item => item.uid === active.id);
     let considerExpanding = null;
-    let overIndex = flattenedItems.findIndex((item) => item.uid === over.id);
+    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 === DropIndicatorPosition.Inside) {
       considerExpanding = over.id;
-      overIndex = flattenedItems[overIndex].realIndex + (flattenedItems[overIndex].original.subRows?.length ?? 0) + 1;
-    }
+      overIndex = flattenedItems[overIndex].realIndex + flattenedItems[overIndex].childrenCount + 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;
+      flattenedItems[activeIndex].depth = projected.depth; // If same index, don't move the array, just copy it
+
       const newFlattenedData = activeIndex !== overIndex ? arrayMove(flattenedItems, activeIndex, overIndex) : cloneDeep(flattenedItems);
       onReorder(newFlattenedData, {
         targetIndex: overIndex,
         fromIndex: activeIndex
-      }, considerExpanding || "");
+      }, considerExpanding || '');
     }
-  }, [handlePreviewDragEnd, flattenedItems, projected, onReorder, dropIndicatorPosition]);
-  const onDragCancel = useCallback((e) => {
+  }, [handlePreviewDragEnd, isDropValid, flattenedItems, dropIndicatorPosition, projected, onReorder]);
+  const onDragCancel = useCallback(e => {
     handlePreviewDragCancel(e);
   }, [handlePreviewDragCancel]);
-  return { onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel };
-};
-export {
-  useTreeActionHandlers
+  return {
+    onDragStart,
+    onDragMove,
+    onDragOver,
+    onDragEnd,
+    onDragCancel
+  };
 };
-//# sourceMappingURL=useTreeActionHandlers.js.map
+
+export { useTreeActionHandlers };

package/esm/tree/useTreeAnnouncements.js

@@ -1,39 +1,51 @@
-import * as React from "react";
-import { useCallback } from "react";
-import { DropIndicatorPosition } from "./constants";
+import { useCallback } from 'react';
+import { DropIndicatorPosition } from './constants.js';
+
 const useTreeAnnouncements = (visibleItemsDictionary, dropIndicatorPosition) => {
-  const onDragStart = useCallback((id) => `Picked up draggable item from position ${visibleItemsDictionary[id].realIndex + 1}.`, [visibleItemsDictionary]);
+  const onDragStart = useCallback(id => "Picked up draggable item from position ".concat(visibleItemsDictionary[id].realIndex + 1, "."), [visibleItemsDictionary]);
   const onDragMove = useCallback((id, overId) => {
     if (overId) {
       const overIndex = visibleItemsDictionary[overId].realIndex + 1;
+
       if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
-        return `Draggable item was moved inside the item at position ${overIndex}.`;
+        return "Draggable item was moved inside the item at position ".concat(overIndex, ".");
       }
+
       if (dropIndicatorPosition === DropIndicatorPosition.Before) {
-        return `Draggable item was moved to position ${overIndex - 1}.`;
+        return "Draggable item was moved to position ".concat(overIndex - 1, ".");
       }
-      return `Draggable item was moved to position ${overIndex}.`;
+
+      return "Draggable item was moved to position ".concat(overIndex, ".");
     }
-    return `Draggable item is no longer over a droppable area.`;
+
+    return "Draggable item is no longer over a droppable area.";
   }, [visibleItemsDictionary, dropIndicatorPosition]);
   const onDragOver = onDragMove;
   const onDragEnd = useCallback((id, overId) => {
     if (overId) {
       const overIndex = visibleItemsDictionary[overId].realIndex + 1;
+
       if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
-        return `Draggable item was dropped inside the item at position ${overIndex}.`;
+        return "Draggable item was dropped inside the item at position ".concat(overIndex, ".");
       }
+
       if (dropIndicatorPosition === DropIndicatorPosition.Before) {
-        return `Draggable item was dropped over position ${overIndex - 1}.`;
+        return "Draggable item was dropped over position ".concat(overIndex - 1, ".");
       }
-      return `Draggable item was dropped over position ${overIndex}.`;
+
+      return "Draggable item was dropped over position ".concat(overIndex, ".");
     }
-    return `Draggable item was dropped at it's original position.`;
+
+    return "Draggable item was dropped at it's original position.";
   }, [dropIndicatorPosition, visibleItemsDictionary]);
-  const onDragCancel = useCallback((id) => `Dragging was cancelled. Draggable item from position ${visibleItemsDictionary[id].realIndex + 1} was dropped at it's initial position.`, [visibleItemsDictionary]);
-  return { onDragStart, onDragOver, onDragMove, onDragEnd, onDragCancel };
+  const onDragCancel = 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
+  };
 };
-export {
-  useTreeAnnouncements
-};
-//# sourceMappingURL=useTreeAnnouncements.js.map
+
+export { useTreeAnnouncements };