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

package/esm/hierarchy/getHierarchyKeyboardCoordinates.js

@@ -1,61 +1,97 @@
-import * as React from "react";
-import { closestCorners, getViewRect, KeyboardCode } from "@dnd-kit/core";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+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.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { KeyboardCode, getViewRect, closestCorners } from '@dnd-kit/core';
+
+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 vertical = [KeyboardCode.Up, KeyboardCode.Down];
-const getHorizontalKeyboardCoordinates = ({
-  items,
-  active,
-  over,
-  event,
-  currentCoordinates,
-  droppableContainers,
-  collisionRect
-}) => {
-  if (vertical.includes(event.code) || !active || !over)
-    return void 0;
-  const activeItem = items.find((item) => item.id === active.id);
+
+const getHorizontalKeyboardCoordinates = _ref => {
+  var _droppableContainers$, _droppableContainers$2, _droppableContainers$3, _droppableContainers$4;
+
+  let {
+    items,
+    active,
+    over,
+    event,
+    currentCoordinates,
+    droppableContainers,
+    collisionRect
+  } = _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 = [];
-  droppableContainers.forEach((container) => {
-    if (container?.disabled || !overRect) {
+  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?.node.current;
+
+    const node = container === null || container === void 0 ? void 0 : container.node.current;
+
     if (!node) {
       return;
     }
-    const itemParent = items.find((item) => item.id === container.id)?.parentId;
-    if (itemParent !== activeItem?.parentId)
-      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 = getViewRect(node);
+
     if (event.code === KeyboardCode.Left && collisionRect.left > rect.right - 10) {
       layoutRects.push(container);
     } else if (event.code === KeyboardCode.Right && collisionRect.left < rect.left) {
       layoutRects.push(container);
     }
   });
-  const closestId = closestCorners({ droppableContainers: layoutRects, collisionRect, active });
-  if (!closestId)
-    return void 0;
-  const closestDroppableContainer = droppableContainers.get(closestId)?.node?.current;
-  const activeDroppableContainer = droppableContainers.get(active?.id)?.node?.current;
-  if (!closestDroppableContainer || !activeDroppableContainer)
-    return void 0;
+  const closestId = 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 = getViewRect(closestDroppableContainer);
   const activeRect = getViewRect(activeDroppableContainer);
-  return {
-    ...currentCoordinates,
+  return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
     x: closestRect.left + (closestRect.width - collisionRect.width) / 2 + (closestRect.offsetLeft < activeRect.left ? -1 : 1)
-  };
+  });
 };
-const getHierarchyKeyboardCoordinates = (context, dragOverlayDataTestid, isHorizontalDnD) => (event, { currentCoordinates, context: { active, over, collisionRect, droppableContainers } }) => {
+
+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 void 0;
+      return undefined;
     }
+
     const {
-      current: { items }
+      current: {
+        items
+      }
     } = context;
     const args = {
       dragOverlayDataTestid,
@@ -67,13 +103,11 @@ const getHierarchyKeyboardCoordinates = (context, dragOverlayDataTestid, isHoriz
       droppableContainers,
       collisionRect
     };
-    if (isHorizontalDnD)
-      return getHorizontalKeyboardCoordinates(args);
-    return void 0;
+    if (isHorizontalDnD) return getHorizontalKeyboardCoordinates(args);
+    return undefined;
   }
-  return void 0;
-};
-export {
-  getHierarchyKeyboardCoordinates
+
+  return undefined;
 };
-//# sourceMappingURL=getHierarchyKeyboardCoordinates.js.map
+
+export { getHierarchyKeyboardCoordinates };

package/esm/hierarchy/index.js

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

package/esm/hierarchy/types.js

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

package/esm/hierarchy/useHierarchyActionHandlers.js

@@ -1,39 +1,46 @@
-import * as React from "react";
-import { useCallback } from "react";
-const useHierarchyActionHandlers = ({
-  handlePreviewDragStart,
-  handlePreviewDragMove,
-  handlePreviewDragEnd,
-  handlePreviewDragCancel,
-  onReorder,
-  dndItems
-}) => {
-  const onDragStart = useCallback((e) => {
+import { useCallback } from 'react';
+
+const useHierarchyActionHandlers = _ref => {
+  let {
+    handlePreviewDragStart,
+    handlePreviewDragMove,
+    handlePreviewDragEnd,
+    handlePreviewDragCancel,
+    onReorder,
+    dndItems
+  } = _ref;
+  const onDragStart = useCallback(e => {
     handlePreviewDragStart(e);
   }, [handlePreviewDragStart]);
-  const onDragMove = useCallback((e) => {
+  const onDragMove = useCallback(e => {
     handlePreviewDragMove(e);
   }, [handlePreviewDragMove]);
-  const onDragEnd = useCallback((e) => {
+  const onDragEnd = useCallback(e => {
     handlePreviewDragEnd(e);
-    const { active, over } = e;
-    if (!over)
-      return;
+    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);
+      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 = useCallback((e) => {
+  const onDragCancel = useCallback(e => {
     handlePreviewDragCancel(e);
   }, [handlePreviewDragCancel]);
-  return { onDragStart, onDragMove, onDragEnd, onDragCancel };
+  return {
+    onDragStart,
+    onDragMove,
+    onDragEnd,
+    onDragCancel
+  };
 };
-export {
-  useHierarchyActionHandlers
-};
-//# sourceMappingURL=useHierarchyActionHandlers.js.map
+
+export { useHierarchyActionHandlers };

package/esm/hierarchy/useHierarchyAnnouncements.js

@@ -1,26 +1,32 @@
-import * as React from "react";
-import { useCallback } from "react";
-const useHierarchyAnnouncements = (visibleItemsDictionary) => {
-  const onDragStart = useCallback((id) => `Picked up draggable item from position ${visibleItemsDictionary[id].index + 1}.`, [visibleItemsDictionary]);
+import { useCallback } from 'react';
+
+const useHierarchyAnnouncements = visibleItemsDictionary => {
+  const onDragStart = useCallback(id => "Picked up draggable item from position ".concat(visibleItemsDictionary[id].index + 1, "."), [visibleItemsDictionary]);
   const onDragMove = useCallback((id, overId) => {
     if (overId) {
       const overIndex = visibleItemsDictionary[overId].index + 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]);
   const onDragOver = onDragMove;
   const onDragEnd = useCallback((id, overId) => {
     if (overId) {
       const overIndex = visibleItemsDictionary[overId].index + 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.";
   }, [visibleItemsDictionary]);
-  const onDragCancel = useCallback((id) => `Dragging was cancelled. Draggable item from position ${visibleItemsDictionary[id].index + 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].index + 1, " was dropped at it's initial position."), [visibleItemsDictionary]);
+  return {
+    onDragStart,
+    onDragOver,
+    onDragMove,
+    onDragEnd,
+    onDragCancel
+  };
 };
-export {
-  useHierarchyAnnouncements
-};
-//# sourceMappingURL=useHierarchyAnnouncements.js.map
+
+export { useHierarchyAnnouncements };

package/esm/hierarchy/useHierarchyDndkitConfig.js

@@ -1,47 +1,68 @@
-import * as React from "react";
-import { useState, useEffect, useMemo, useRef } from "react";
-import {
-  useSensor,
-  useSensors,
-  KeyboardSensor,
-  PointerSensor,
-  MeasuringStrategy
-} from "@dnd-kit/core";
-import { useHierarchyActionHandlers } from "./useHierarchyActionHandlers";
-import { useHierarchyPreviewHandlers } from "./useHierarchyPreviewHandlers";
-import { getHierarchyKeyboardCoordinates } from "./getHierarchyKeyboardCoordinates";
-import { customCollisionDetection } from "./customCollisionDetection";
-import { useHierarchyAnnouncements } from "./useHierarchyAnnouncements";
-const adjustTranslate = (isHorizontalDnD) => ({ transform }) => {
-  const newTransform = {
-    ...transform
-  };
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+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 { useState, useMemo, useRef, useEffect } from 'react';
+import { MeasuringStrategy, useSensors, useSensor, PointerSensor, KeyboardSensor } from '@dnd-kit/core';
+import { useHierarchyActionHandlers } from './useHierarchyActionHandlers.js';
+import { useHierarchyPreviewHandlers } from './useHierarchyPreviewHandlers.js';
+import { getHierarchyKeyboardCoordinates } from './getHierarchyKeyboardCoordinates.js';
+import { customCollisionDetection } from './customCollisionDetection.js';
+import { useHierarchyAnnouncements } from './useHierarchyAnnouncements.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; }
+// 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: MeasuringStrategy.Always
   }
 };
+
 const noop = () => null;
-const useHierarchyDndkitConfig = ({
-  flattenedItems,
-  dragOverlayDataTestid,
-  isHorizontalDnD = false,
-  onReorder,
-  onPreviewResetState = noop,
-  onPreviewDragStart = noop
-}) => {
-  const [activeId, setActiveId] = useState("");
-  const dndItems = useMemo(() => flattenedItems.map(([item]) => item), [flattenedItems]);
+
+const useHierarchyDndkitConfig = _ref2 => {
+  var _itemsDictionary$acti;
+
+  let {
+    flattenedItems,
+    dragOverlayDataTestid,
+    isHorizontalDnD = false,
+    onReorder,
+    onPreviewResetState = noop,
+    onPreviewDragStart = noop
+  } = _ref2;
+  const [activeId, setActiveId] = useState('');
+  const dndItems = useMemo(() => flattenedItems.map(_ref3 => {
+    let [item] = _ref3;
+    return item;
+  }), [flattenedItems]);
   const itemsDictionary = useMemo(() => {
     const dictionary = {};
-    dndItems.forEach((item) => {
+    dndItems.forEach(item => {
       dictionary[item.id] = item;
     });
     return dictionary;
@@ -64,27 +85,27 @@ const useHierarchyDndkitConfig = ({
     onPreviewResetState,
     onPreviewDragStart
   });
-  const dragActionHandlers = useHierarchyActionHandlers({
-    ...dragPreviewHandlers,
+  const dragActionHandlers = useHierarchyActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
     dndItems,
     onReorder
-  });
+  }));
   const announcements = useHierarchyAnnouncements(itemsDictionary);
-  const dndContextProps = useMemo(() => ({
-    announcements,
-    modifiers,
-    sensors,
-    measuring,
-    collisionDetection: customCollisionDetection(activeId, itemsDictionary[activeId ?? ""]?.parentId, dndItems),
-    ...dragActionHandlers
-  }), [announcements, modifiers, sensors, activeId, itemsDictionary, dndItems, dragActionHandlers]);
+  const dndContextProps = useMemo(() => {
+    var _itemsDictionary;
+
+    return _objectSpread({
+      announcements,
+      modifiers,
+      sensors,
+      measuring,
+      collisionDetection: 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
   };
 };
-export {
-  useHierarchyDndkitConfig
-};
-//# sourceMappingURL=useHierarchyDndkitConfig.js.map
+
+export { useHierarchyDndkitConfig };

package/esm/hierarchy/useHierarchyPreviewHandlers.js

@@ -1,18 +1,24 @@
-import * as React from "react";
-import { useCallback } from "react";
-const useHierarchyPreviewHandlers = ({
-  setActiveId,
-  onPreviewResetState,
-  onPreviewDragStart
-}) => {
+import { useCallback } from 'react';
+
+const useHierarchyPreviewHandlers = _ref => {
+  let {
+    setActiveId,
+    onPreviewResetState,
+    onPreviewDragStart
+  } = _ref;
   const resetState = useCallback(() => {
-    setActiveId("");
+    setActiveId('');
     onPreviewResetState();
-    document.body.style.setProperty("cursor", "");
+    document.body.style.setProperty('cursor', '');
   }, [setActiveId, onPreviewResetState]);
-  const handlePreviewDragStart = useCallback(({ active: { id } }) => {
+  const handlePreviewDragStart = 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 = useCallback(() => null, []);
@@ -29,7 +35,5 @@ const useHierarchyPreviewHandlers = ({
     handlePreviewDragCancel
   };
 };
-export {
-  useHierarchyPreviewHandlers
-};
-//# sourceMappingURL=useHierarchyPreviewHandlers.js.map
+
+export { useHierarchyPreviewHandlers };

package/esm/index.js

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

package/esm/tree/constants.js

@@ -1,12 +1,10 @@
-import * as React from "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 || {});
-export {
-  DropIndicatorPosition
-};
-//# sourceMappingURL=constants.js.map
+let DropIndicatorPosition;
+
+(function (DropIndicatorPosition) {
+  DropIndicatorPosition[DropIndicatorPosition["None"] = 0] = "None";
+  DropIndicatorPosition[DropIndicatorPosition["Before"] = 1] = "Before";
+  DropIndicatorPosition[DropIndicatorPosition["After"] = 2] = "After";
+  DropIndicatorPosition[DropIndicatorPosition["Inside"] = 3] = "Inside";
+})(DropIndicatorPosition || (DropIndicatorPosition = {}));
+
+export { DropIndicatorPosition };