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

package/esm/tree/getTreeKeyboardCoordinates.js

@@ -1,46 +1,28 @@
-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; }
+import * as React from "react";
+import { closestCorners, getViewRect, KeyboardCode } from "@dnd-kit/core";
+import { DropIndicatorPosition } from "./constants";
 const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
 const horizontal = [KeyboardCode.Left, KeyboardCode.Right];
-[KeyboardCode.Up, KeyboardCode.Down];
-
-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 getVerticalKeyboardCoordinates = ({
+  items,
+  active,
+  over,
+  event,
+  currentCoordinates,
+  droppableContainers,
+  collisionRect,
+  dropIndicatorPosition,
+  maxDragAndDropLevel
+}) => {
+  if (horizontal.includes(event.code))
+    return void 0;
   const overRect = over.rect;
-  const layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
-
-  droppableContainers.forEach(container => {
-    if (container !== null && container !== void 0 && container.disabled || !overRect) {
+  const layoutRects = [];
+  droppableContainers.forEach((container) => {
+    if (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) {
@@ -52,64 +34,44 @@ const getVerticalKeyboardCoordinates = _ref => {
     droppableContainers: layoutRects,
     active
   });
-  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 closestItem = items.find((item) => item.uid === closestId);
+  const closestElement = droppableContainers.get(closestId)?.node?.current;
+  if (!closestId || !closestItem || !closestElement)
+    return void 0;
   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 _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+      return {
+        ...currentCoordinates,
         y: closestRect.top - collisionRect.height / 2
-      });
+      };
     }
-
-    return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+    return {
+      ...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 _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+    return {
+      ...currentCoordinates,
       y: closestRect.top + collisionRect.height / 2
-    });
+    };
   }
-
-  return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+  return {
+    ...currentCoordinates,
     y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
-  });
+  };
 };
-
-const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, _ref2) => {
-  let {
-    currentCoordinates,
-    context: {
-      over,
-      translatedRect,
-      droppableContainers,
-      active,
-      collisionRect
-    }
-  } = _ref2;
-
+const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {
   if (directions.includes(event.code)) {
     if (!translatedRect) {
-      return undefined;
+      return void 0;
     }
-
     const {
-      current: {
-        items,
-        dropIndicatorPosition
-      }
+      current: { items, dropIndicatorPosition }
     } = context;
-    if (!over || !active || !collisionRect) return undefined;
+    if (!over || !active || !collisionRect)
+      return void 0;
     const args = {
       items,
       active,
@@ -121,11 +83,13 @@ const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLeve
       dropIndicatorPosition,
       maxDragAndDropLevel
     };
-    if (isHorizontalDnD) return undefined;
+    if (isHorizontalDnD)
+      return void 0;
     return getVerticalKeyboardCoordinates(args);
   }
-
-  return undefined;
+  return void 0;
+};
+export {
+  getTreeKeyboardCoordinates
 };
-
-export { getTreeKeyboardCoordinates };
+//# sourceMappingURL=getTreeKeyboardCoordinates.js.map

package/esm/tree/getTreeKeyboardCoordinates.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/getTreeKeyboardCoordinates.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { closestCorners, getViewRect, KeyboardCode, KeyboardCoordinateGetter, DroppableContainer } from '@dnd-kit/core';\nimport { Coordinates } from '@dnd-kit/core/dist/types';\nimport type { GetKeyboardCoordinatesArgs, SensorContext } from './types';\nimport { DropIndicatorPosition } from './constants';\n\nconst directions: string[] = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];\n\nconst horizontal: string[] = [KeyboardCode.Left, KeyboardCode.Right];\n\nconst getVerticalKeyboardCoordinates = ({\n  items,\n  active,\n  over,\n  event,\n  currentCoordinates,\n  droppableContainers,\n  collisionRect,\n  dropIndicatorPosition,\n  maxDragAndDropLevel,\n}: GetKeyboardCoordinatesArgs): Coordinates | undefined => {\n  if (horizontal.includes(event.code)) return undefined;\n\n  const overRect = over.rect;\n\n  const layoutRects: DroppableContainer[] = [];\n\n  // Get the reacheable rects depending on the arrow key pressed\n  droppableContainers.forEach((container) => {\n    if (container?.disabled || !overRect) {\n      return;\n    }\n    const rect = container.rect.current;\n    if (rect && event.code === KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {\n      layoutRects.push(container);\n    } else if (rect && event.code === KeyboardCode.Up && collisionRect.top >= rect.offsetTop) {\n      layoutRects.push(container);\n    }\n  });\n\n  const closestId = closestCorners({\n    collisionRect,\n    droppableContainers: layoutRects,\n    active,\n  });\n\n  const closestItem = items.find((item) => item.uid === closestId);\n\n  const closestElement = droppableContainers.get(closestId)?.node?.current;\n\n  if (!closestId || !closestItem || !closestElement) return undefined;\n\n  const closestRect = getViewRect(closestElement);\n\n  if (event.code === KeyboardCode.Up) {\n    // If the drop indicator is inside (or over ourselves)\n    // We are gonna go to the before position\n    // Else we are gonna go inside the over rect\n    if (\n      dropIndicatorPosition === DropIndicatorPosition.Inside ||\n      closestId === active.id ||\n      closestItem.depth + 1 > maxDragAndDropLevel\n    ) {\n      return {\n        ...currentCoordinates,\n        y: closestRect.top - collisionRect.height / 2,\n      };\n    }\n    return {\n      ...currentCoordinates,\n      y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2,\n    };\n  }\n  // If the drop indicator is inside (or over ourselves)\n  // We are gonna go to the after position\n  // Else we are gonna go inside the over rect\n  if (\n    dropIndicatorPosition === DropIndicatorPosition.Inside ||\n    closestId === active.id ||\n    closestItem.depth + 1 > maxDragAndDropLevel\n  ) {\n    return {\n      ...currentCoordinates,\n      y: closestRect.top + collisionRect.height / 2,\n    };\n  }\n  return {\n    ...currentCoordinates,\n    y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2,\n  };\n};\n\nexport const getTreeKeyboardCoordinates: (\n  context: SensorContext,\n  isHorizontalDnD: boolean,\n  maxDragAndDropLevel: number,\n) => KeyboardCoordinateGetter =\n  (context, isHorizontalDnD, maxDragAndDropLevel) =>\n  (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {\n    if (directions.includes(event.code)) {\n      if (!translatedRect) {\n        return undefined;\n      }\n\n      const {\n        current: { items, dropIndicatorPosition },\n      } = context;\n\n      if (!over || !active || !collisionRect) return undefined;\n\n      const args = {\n        items,\n        active,\n        over,\n        event,\n        currentCoordinates,\n        droppableContainers,\n        collisionRect,\n        dropIndicatorPosition,\n        maxDragAndDropLevel,\n      };\n\n      if (isHorizontalDnD) return undefined;\n      return getVerticalKeyboardCoordinates(args);\n    }\n    return undefined;\n  };\n"],
+  "mappings": "AAAA;ACCA;AAGA;AAEA,MAAM,aAAuB,CAAC,aAAa,MAAM,aAAa,OAAO,aAAa,IAAI,aAAa;AAEnG,MAAM,aAAuB,CAAC,aAAa,MAAM,aAAa;AAE9D,MAAM,iCAAiC,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACyD;AACzD,MAAI,WAAW,SAAS,MAAM;AAAO,WAAO;AAE5C,QAAM,WAAW,KAAK;AAEtB,QAAM,cAAoC;AAG1C,sBAAoB,QAAQ,CAAC,cAAc;AACzC,QAAI,WAAW,YAAY,CAAC,UAAU;AACpC;AAAA;AAEF,UAAM,OAAO,UAAU,KAAK;AAC5B,QAAI,QAAQ,MAAM,SAAS,aAAa,QAAQ,cAAc,MAAM,KAAK,KAAK,WAAW;AACvF,kBAAY,KAAK;AAAA,eACR,QAAQ,MAAM,SAAS,aAAa,MAAM,cAAc,OAAO,KAAK,WAAW;AACxF,kBAAY,KAAK;AAAA;AAAA;AAIrB,QAAM,YAAY,eAAe;AAAA,IAC/B;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA;AAGF,QAAM,cAAc,MAAM,KAAK,CAAC,SAAS,KAAK,QAAQ;AAEtD,QAAM,iBAAiB,oBAAoB,IAAI,YAAY,MAAM;AAEjE,MAAI,CAAC,aAAa,CAAC,eAAe,CAAC;AAAgB,WAAO;AAE1D,QAAM,cAAc,YAAY;AAEhC,MAAI,MAAM,SAAS,aAAa,IAAI;AAIlC,QACE,0BAA0B,sBAAsB,UAChD,cAAc,OAAO,MACrB,YAAY,QAAQ,IAAI,qBACxB;AACA,aAAO;AAAA,WACF;AAAA,QACH,GAAG,YAAY,MAAM,cAAc,SAAS;AAAA;AAAA;AAGhD,WAAO;AAAA,SACF;AAAA,MACH,GAAG,YAAY,MAAM,KAAK,IAAI,YAAY,SAAS,cAAc,UAAU;AAAA;AAAA;AAM/E,MACE,0BAA0B,sBAAsB,UAChD,cAAc,OAAO,MACrB,YAAY,QAAQ,IAAI,qBACxB;AACA,WAAO;AAAA,SACF;AAAA,MACH,GAAG,YAAY,MAAM,cAAc,SAAS;AAAA;AAAA;AAGhD,SAAO;AAAA,OACF;AAAA,IACH,GAAG,YAAY,MAAM,KAAK,IAAI,YAAY,SAAS,cAAc,UAAU;AAAA;AAAA;AAIxE,MAAM,6BAKX,CAAC,SAAS,iBAAiB,wBAC3B,CAAC,OAAO,EAAE,oBAAoB,SAAS,EAAE,MAAM,gBAAgB,qBAAqB,QAAQ,sBAAsB;AAChH,MAAI,WAAW,SAAS,MAAM,OAAO;AACnC,QAAI,CAAC,gBAAgB;AACnB,aAAO;AAAA;AAGT,UAAM;AAAA,MACJ,SAAS,EAAE,OAAO;AAAA,QAChB;AAEJ,QAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;AAAe,aAAO;AAE/C,UAAM,OAAO;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAGF,QAAI;AAAiB,aAAO;AAC5B,WAAO,+BAA+B;AAAA;AAExC,SAAO;AAAA;",
+  "names": []
+}

package/esm/tree/index.js

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

package/esm/tree/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './useTreeDndkitConfig';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/esm/tree/types.js

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

package/esm/tree/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/esm/tree/useTreeActionHandlers.js

@@ -1,71 +1,57 @@
-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
-  } = _ref;
-  const onDragStart = useCallback(e => {
+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,
+  isDropValid
+}) => {
+  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); // If drop indicator is inside, then put it last,
-    // It will be reconstructed well later
-
+    let overIndex = flattenedItems.findIndex((item) => item.uid === over.id);
     if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
-      var _flattenedItems$overI, _flattenedItems$overI2;
-
       considerExpanding = over.id;
-      overIndex = flattenedItems[overIndex].realIndex + ((_flattenedItems$overI = (_flattenedItems$overI2 = flattenedItems[overIndex].original.subRows) === null || _flattenedItems$overI2 === void 0 ? void 0 : _flattenedItems$overI2.length) !== null && _flattenedItems$overI !== void 0 ? _flattenedItems$overI : 0) + 1;
-    } // If we are dropping the item in a new position, or new depth
-
-
+      overIndex = flattenedItems[overIndex].realIndex + flattenedItems[overIndex].childrenCount + 1;
+    }
     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; // If same index, don't move the array, just copy it
-
+      flattenedItems[activeIndex].depth = projected.depth;
       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
-  };
+  return { onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel };
+};
+export {
+  useTreeActionHandlers
 };
-
-export { useTreeActionHandlers };
+//# sourceMappingURL=useTreeActionHandlers.js.map

package/esm/tree/useTreeActionHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/useTreeActionHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { arrayMove } from '@dnd-kit/sortable';\nimport { cloneDeep } from 'lodash';\nimport { useCallback } from 'react';\nimport type { DragStartEvent, DragMoveEvent, DragEndEvent, DragOverEvent, DragCancelEvent } from '@dnd-kit/core';\nimport { DropIndicatorPosition } from './constants';\nimport type { UseTreeActionHandlersReturn, UseTreeActionHandlersArgs } from './types';\n\nexport const useTreeActionHandlers = ({\n  handlePreviewDragStart,\n  handlePreviewDragMove,\n  handlePreviewDragOver,\n  handlePreviewDragEnd,\n  handlePreviewDragCancel,\n  onReorder,\n  flattenedItems,\n  projected,\n  dropIndicatorPosition,\n  isDropValid,\n}: UseTreeActionHandlersArgs): UseTreeActionHandlersReturn => {\n  const onDragStart = useCallback(\n    (e: DragStartEvent) => {\n      handlePreviewDragStart(e);\n    },\n    [handlePreviewDragStart],\n  );\n\n  const onDragMove = useCallback(\n    (e: DragMoveEvent) => {\n      handlePreviewDragMove(e);\n    },\n    [handlePreviewDragMove],\n  );\n\n  const onDragOver = useCallback(\n    (e: DragOverEvent) => {\n      handlePreviewDragOver(e);\n    },\n    [handlePreviewDragOver],\n  );\n\n  const onDragEnd = useCallback(\n    (e: DragEndEvent) => {\n      handlePreviewDragEnd(e);\n      const { active, over } = e;\n\n      if (over === null || !isDropValid) return;\n\n      const activeIndex = flattenedItems.findIndex((item) => item.uid === active.id);\n\n      let considerExpanding = null;\n\n      let overIndex = flattenedItems.findIndex((item) => item.uid === over.id);\n      // If drop indicator is inside, then put it last,\n      // It will be reconstructed well later\n      if (dropIndicatorPosition === DropIndicatorPosition.Inside) {\n        considerExpanding = over.id;\n        overIndex = flattenedItems[overIndex].realIndex + flattenedItems[overIndex].childrenCount + 1;\n      }\n\n      // If we are dropping the item in a new position, or new depth\n      if (projected && (activeIndex !== overIndex || flattenedItems[activeIndex].depth !== projected.depth)) {\n        // Change parent and depth from projected data\n        flattenedItems[activeIndex].parentId = projected.parentId;\n        flattenedItems[activeIndex].depth = projected.depth;\n\n        // If same index, don't move the array, just copy it\n        const newFlattenedData =\n          activeIndex !== overIndex ? arrayMove(flattenedItems, activeIndex, overIndex) : cloneDeep(flattenedItems);\n\n        onReorder(\n          newFlattenedData,\n          {\n            targetIndex: overIndex,\n            fromIndex: activeIndex,\n          },\n          considerExpanding || '',\n        );\n      }\n    },\n    [handlePreviewDragEnd, isDropValid, flattenedItems, dropIndicatorPosition, projected, onReorder],\n  );\n\n  const onDragCancel = useCallback(\n    (e: DragCancelEvent) => {\n      handlePreviewDragCancel(e);\n    },\n    [handlePreviewDragCancel],\n  );\n\n  return { onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel };\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAGO,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC4D;AAC5D,QAAM,cAAc,YAClB,CAAC,MAAsB;AACrB,2BAAuB;AAAA,KAEzB,CAAC;AAGH,QAAM,aAAa,YACjB,CAAC,MAAqB;AACpB,0BAAsB;AAAA,KAExB,CAAC;AAGH,QAAM,aAAa,YACjB,CAAC,MAAqB;AACpB,0BAAsB;AAAA,KAExB,CAAC;AAGH,QAAM,YAAY,YAChB,CAAC,MAAoB;AACnB,yBAAqB;AACrB,UAAM,EAAE,QAAQ,SAAS;AAEzB,QAAI,SAAS,QAAQ,CAAC;AAAa;AAEnC,UAAM,cAAc,eAAe,UAAU,CAAC,SAAS,KAAK,QAAQ,OAAO;AAE3E,QAAI,oBAAoB;AAExB,QAAI,YAAY,eAAe,UAAU,CAAC,SAAS,KAAK,QAAQ,KAAK;AAGrE,QAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,0BAAoB,KAAK;AACzB,kBAAY,eAAe,WAAW,YAAY,eAAe,WAAW,gBAAgB;AAAA;AAI9F,QAAI,aAAc,iBAAgB,aAAa,eAAe,aAAa,UAAU,UAAU,QAAQ;AAErG,qBAAe,aAAa,WAAW,UAAU;AACjD,qBAAe,aAAa,QAAQ,UAAU;AAG9C,YAAM,mBACJ,gBAAgB,YAAY,UAAU,gBAAgB,aAAa,aAAa,UAAU;AAE5F,gBACE,kBACA;AAAA,QACE,aAAa;AAAA,QACb,WAAW;AAAA,SAEb,qBAAqB;AAAA;AAAA,KAI3B,CAAC,sBAAsB,aAAa,gBAAgB,uBAAuB,WAAW;AAGxF,QAAM,eAAe,YACnB,CAAC,MAAuB;AACtB,4BAAwB;AAAA,KAE1B,CAAC;AAGH,SAAO,EAAE,aAAa,YAAY,YAAY,WAAW;AAAA;",
+  "names": []
+}

package/esm/tree/useTreeAnnouncements.js

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

package/esm/tree/useTreeAnnouncements.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/useTreeAnnouncements.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Announcements } from '@dnd-kit/core';\nimport { useCallback } from 'react';\nimport { DropIndicatorPosition } from './constants';\nimport { Item } from './types';\n\nexport const useTreeAnnouncements = (\n  visibleItemsDictionary: Record<string, Item>,\n  dropIndicatorPosition: DropIndicatorPosition,\n): Announcements => {\n  const onDragStart = useCallback(\n    (id: string) => `Picked up draggable item from position ${visibleItemsDictionary[id].realIndex + 1}.`,\n    [visibleItemsDictionary],\n  );\n\n  const onDragMove = useCallback(\n    (id: string, overId: string) => {\n      if (overId) {\n        const overIndex = visibleItemsDictionary[overId].realIndex + 1;\n        if (dropIndicatorPosition === DropIndicatorPosition.Inside) {\n          return `Draggable item was moved inside the item at position ${overIndex}.`;\n        }\n        if (dropIndicatorPosition === DropIndicatorPosition.Before) {\n          return `Draggable item was moved to position ${overIndex - 1}.`;\n        }\n        return `Draggable item was moved to position ${overIndex}.`;\n      }\n\n      return `Draggable item is no longer over a droppable area.`;\n    },\n    [visibleItemsDictionary, dropIndicatorPosition],\n  );\n\n  const onDragOver = onDragMove;\n\n  const onDragEnd = useCallback(\n    (id: string, overId: string) => {\n      if (overId) {\n        const overIndex = visibleItemsDictionary[overId].realIndex + 1;\n        if (dropIndicatorPosition === DropIndicatorPosition.Inside) {\n          return `Draggable item was dropped inside the item at position ${overIndex}.`;\n        }\n        if (dropIndicatorPosition === DropIndicatorPosition.Before) {\n          return `Draggable item was dropped over position ${overIndex - 1}.`;\n        }\n        return `Draggable item was dropped over position ${overIndex}.`;\n      }\n\n      return `Draggable item was dropped at it's original position.`;\n    },\n    [dropIndicatorPosition, visibleItemsDictionary],\n  );\n\n  const onDragCancel = useCallback(\n    (id: string) =>\n      `Dragging was cancelled. Draggable item from position ${\n        visibleItemsDictionary[id].realIndex + 1\n      } was dropped at it's initial position.`,\n    [visibleItemsDictionary],\n  );\n\n  return { onDragStart, onDragOver, onDragMove, onDragEnd, onDragCancel };\n};\n"],
+  "mappings": "AAAA;ACCA;AACA;AAGO,MAAM,uBAAuB,CAClC,wBACA,0BACkB;AAClB,QAAM,cAAc,YAClB,CAAC,OAAe,0CAA0C,uBAAuB,IAAI,YAAY,MACjG,CAAC;AAGH,QAAM,aAAa,YACjB,CAAC,IAAY,WAAmB;AAC9B,QAAI,QAAQ;AACV,YAAM,YAAY,uBAAuB,QAAQ,YAAY;AAC7D,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,wDAAwD;AAAA;AAEjE,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,wCAAwC,YAAY;AAAA;AAE7D,aAAO,wCAAwC;AAAA;AAGjD,WAAO;AAAA,KAET,CAAC,wBAAwB;AAG3B,QAAM,aAAa;AAEnB,QAAM,YAAY,YAChB,CAAC,IAAY,WAAmB;AAC9B,QAAI,QAAQ;AACV,YAAM,YAAY,uBAAuB,QAAQ,YAAY;AAC7D,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,0DAA0D;AAAA;AAEnE,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,4CAA4C,YAAY;AAAA;AAEjE,aAAO,4CAA4C;AAAA;AAGrD,WAAO;AAAA,KAET,CAAC,uBAAuB;AAG1B,QAAM,eAAe,YACnB,CAAC,OACC,wDACE,uBAAuB,IAAI,YAAY,2CAE3C,CAAC;AAGH,SAAO,EAAE,aAAa,YAAY,YAAY,WAAW;AAAA;",
+  "names": []
+}

package/esm/tree/useTreeDndkitConfig.js

@@ -1,82 +1,65 @@
-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 { horizontalListSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { useTreePreviewHandlers } from './useTreePreviewHandlers.js';
-import { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates.js';
-import { removeChildrenOf, getProjection } from './utilities.js';
-import { useTreeActionHandlers } from './useTreeActionHandlers.js';
-import { DropIndicatorPosition } from './constants.js';
-import { customCollisionDetection } from './customCollisionDetection.js';
-import { useTreeAnnouncements } from './useTreeAnnouncements.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.x = transform.x + 25;
-  } else {
-    newTransform.x = transform.x + 15;
-  }
-
-  return newTransform;
+import * as React from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
+import {
+  useSensor,
+  useSensors,
+  KeyboardSensor,
+  PointerSensor,
+  MeasuringStrategy
+} from "@dnd-kit/core";
+import { useTreePreviewHandlers } from "./useTreePreviewHandlers";
+import { getTreeKeyboardCoordinates } from "./getTreeKeyboardCoordinates";
+import { getProjection, removeChildrenOf } from "./utilities";
+import { useTreeActionHandlers } from "./useTreeActionHandlers";
+import { DropIndicatorPosition } from "./constants";
+import { customCollisionDetection } from "./customCollisionDetection";
+import { useTreeAnnouncements } from "./useTreeAnnouncements";
+const adjustTranslate = (isHorizontalDnD) => {
+  const func = ({ transform }) => {
+    const newTransform = {
+      ...transform
+    };
+    if (isHorizontalDnD) {
+      newTransform.x = transform.x + 25;
+    } else {
+      newTransform.x = transform.x + 15;
+    }
+    return newTransform;
+  };
+  return func;
 };
-
 const measuring = {
   droppable: {
-    strategy: MeasuringStrategy.BeforeDragging
+    strategy: MeasuringStrategy.Always
   }
 };
-const useTreeDndkitConfig = _ref2 => {
-  var _visibleItemsDictiona, _visibleItemsDictiona2;
-
-  let {
-    flattenedItems,
-    visibleItems: preVisibleItems,
-    isHorizontalDnD = false,
-    isExpandable = false,
-    onReorder,
-    maxDragAndDropLevel
-  } = _ref2;
-  const [activeId, setActiveId] = useState('');
-  const [overId, setOverId] = useState('');
+const useTreeDndkitConfig = ({
+  flattenedItems,
+  visibleItems: preVisibleItems,
+  isHorizontalDnD = false,
+  isExpandable = false,
+  onReorder,
+  getIsDropValid = () => true,
+  maxDragAndDropLevel
+}) => {
+  const [activeId, setActiveId] = useState("");
+  const [overId, setOverId] = useState("");
   const [dropIndicatorPosition, setDropIndicatorPosition] = useState(DropIndicatorPosition.None);
-  const [lastPosition, setLastPosition] = useState(''); // Remove activeId's children
-
-  const visibleItems = useMemo(() => removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]); // Sorted ids for the library
-
-  const sortedIds = 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 [lastPosition, setLastPosition] = useState("");
+  const visibleItems = useMemo(() => removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]);
+  const sortedIds = useMemo(() => visibleItems.map((item) => item.uid), [visibleItems]);
   const visibleItemsDictionary = 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 isDropValid = useMemo(() => {
+    if (!activeId || !overId)
+      return true;
+    return getIsDropValid(visibleItemsDictionary[activeId], visibleItemsDictionary[overId], ["none", "before", "after", "inside"][dropIndicatorPosition]);
+  }, [getIsDropValid, visibleItemsDictionary, activeId, overId, dropIndicatorPosition]);
   const modifiers = useMemo(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);
   const sensorContext = useRef({
     items: visibleItems,
@@ -93,42 +76,58 @@ const useTreeDndkitConfig = _ref2 => {
   const coordinateGetter = useMemo(() => getTreeKeyboardCoordinates(sensorContext, isHorizontalDnD, maxDragAndDropLevel), [sensorContext, isHorizontalDnD, maxDragAndDropLevel]);
   const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
     coordinateGetter
-  })); // where is the activeItem being positioned (depth and parent)
-
+  }));
   const projected = useMemo(() => overId ? getProjection(visibleItems, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) : null, [overId, visibleItems, visibleItemsDictionary, dropIndicatorPosition, isExpandable]);
   const dragPreviewHandlers = useTreePreviewHandlers({
     setActiveId,
     setOverId,
     setDropIndicatorPosition
   });
-  const dragActionHandlers = useTreeActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
+  const dragActionHandlers = useTreeActionHandlers({
+    ...dragPreviewHandlers,
     onReorder,
     projected,
     flattenedItems,
-    dropIndicatorPosition
-  }));
+    dropIndicatorPosition,
+    isDropValid
+  });
   const announcements = useTreeAnnouncements(visibleItemsDictionary, dropIndicatorPosition);
-  const dndContextProps = useMemo(() => _objectSpread({
+  const dndContextProps = useMemo(() => ({
     announcements,
     modifiers,
     sensors,
     measuring,
-    collisionDetection: customCollisionDetection(activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition)
-  }, dragActionHandlers), [announcements, modifiers, sensors, dragActionHandlers, visibleItemsDictionary, setDropIndicatorPosition, activeId, maxDragAndDropLevel, lastPosition, setLastPosition]);
+    collisionDetection: customCollisionDetection(activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition),
+    ...dragActionHandlers
+  }), [
+    announcements,
+    modifiers,
+    sensors,
+    dragActionHandlers,
+    visibleItemsDictionary,
+    setDropIndicatorPosition,
+    activeId,
+    maxDragAndDropLevel,
+    lastPosition,
+    setLastPosition
+  ]);
   const sortableContextProps = useMemo(() => ({
     items: sortedIds,
-    strategy: isHorizontalDnD ? horizontalListSortingStrategy : verticalListSortingStrategy
-  }), [sortedIds, isHorizontalDnD]);
+    strategy: () => null
+  }), [sortedIds]);
   return {
     dndContextProps,
     sortableContextProps,
+    isDropValid,
     activeId,
-    activeIndex: (_visibleItemsDictiona = (_visibleItemsDictiona2 = visibleItemsDictionary[activeId]) === null || _visibleItemsDictiona2 === void 0 ? void 0 : _visibleItemsDictiona2.realIndex) !== null && _visibleItemsDictiona !== void 0 ? _visibleItemsDictiona : -1,
+    activeIndex: visibleItemsDictionary[activeId]?.realIndex ?? -1,
     overId,
     depth: projected ? projected.depth : 0,
     dropIndicatorPosition,
     visibleItems
   };
 };
-
-export { useTreeDndkitConfig };
+export {
+  useTreeDndkitConfig
+};
+//# sourceMappingURL=useTreeDndkitConfig.js.map