@elliemae/ds-treeview 2.2.0 → 2.2.2

package/cjs/parts/TreeItem.js

@@ -2,18 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
 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');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var reactSortableHoc = require('@elliemae/react-sortable-hoc');
 var dsClassnames = require('@elliemae/ds-classnames');
-var dsIcons = require('@elliemae/ds-icons');
 var RadioSelectable = require('./RadioSelectable.js');
 var CheckboxSelectable = require('./CheckboxSelectable.js');
 var TreeViewContext = require('../TreeViewContext.js');
@@ -24,12 +21,16 @@ var Icon = require('./Icon.js');
 var ExpandCaret = require('./ExpandCaret.js');
 var TreeItemText = require('./TreeItemText.js');
 var cssClassesConstants = require('../config/cssClassesConstants.js');
+var DnDHandle = require('./DnDHandle.js');
+var WithDnDSortableItemContext = require('../hoc/WithDnDSortableItemContext.js');
+var SortableItemContext = require('../hoc/SortableItemContext.js');
+var DropIndicator = require('./DropIndicator.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+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; }
 
@@ -41,23 +42,6 @@ const TreeListItem = dsClassnames.aggregatedClasses('li', {
 })(cssClassesConstants.treeItemBlockName);
 const TreeListItemAddonsWrapper = dsClassnames.aggregatedClasses('div')(cssClassesConstants.treeItemBlockName, 'addons' // temp fix untill we move to styled components
 );
-const DnDHandle = reactSortableHoc.SortableHandle(_ref => {
-  let {
-    id
-  } = _ref;
-  return /*#__PURE__*/_jsx__default["default"](dsIcons.GripperVertical, {
-    "data-testid": "drag-handle",
-    className: "drag-handle",
-    size: "s",
-    onMouseDown: e => {
-      // prevent focusing the drag-handle to avoid borders
-      if (e) {
-        e.preventDefault();
-      }
-    },
-    tabIndex: "0"
-  }, "".concat(id, "-drag-handle"));
-});
 const TreeItem = props => {
   const {
     item,
@@ -65,7 +49,7 @@ const TreeItem = props => {
     itemWrapperStyle = {},
     virtualItemRef,
     spaceForNestingLevel = 1.5,
-    onMouseDragOverItem
+    isDragOverlay = false
   } = props;
   const {
     id,
@@ -74,9 +58,10 @@ const TreeItem = props => {
   const {
     nodeItemRef
   } = node.model;
-  const openFolderOnHoverTimeout = React.useRef(null);
-  const [isDraggingOverThis, setIsDraggingOverThis] = React.useState(false);
-  const onItemKeyDown = keyboardHelpers.useOnItemKeyDown(item);
+  const {
+    draggableProps
+  } = React.useContext(SortableItemContext.SortableItemContext);
+  const onItemKeyDown = keyboardHelpers.useOnItemKeyDown(item, draggableProps);
   const ctx = React.useContext(TreeViewContext["default"]);
   const {
     props: {
@@ -87,14 +72,12 @@ const TreeItem = props => {
       rowSize,
       labelOverflow
     },
-    relativeMouseCord,
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
     selectedItem,
     selectedCheckboxes,
     hoverItem,
-    isDragging,
     virtualListHelpers: {
       scrollToIndex
     },
@@ -104,24 +87,27 @@ const TreeItem = props => {
   } = ctx; // Sortable Items needs to update
   //   - the virtual list ref (for react-virtual requirement)
   //   - nodeItemRef which is a prop avaiable in the TreeModel nodes
+  //   - the drag and drop node reference
 
   const setItemRefs = ref => {
-    refsHelpers.setMultipleRefs(virtualItemRef, nodeItemRef)(ref);
+    refsHelpers.setMultipleRefs(virtualItemRef, !isDragOverlay && nodeItemRef, !isDragOverlay && draggableProps && draggableProps.setNodeRef)(ref);
   };
 
+  const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
+  const isDropIndicatorPositionInside = dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Inside;
+  const isDragging = draggableProps && draggableProps.isDragging;
+  const isDropValid = draggableProps && draggableProps.isDropValid;
   const dropPreviewClassName = React.useMemo(() => {
-    if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis) return '';
-    const {
-      isBefore,
-      isAfter,
-      isValid
-    } = relativeMouseCord;
-    let className = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName).concat(isValid ? '--valid' : '--invalid');
-    if (isBefore) className += '-drop-before';else if (isAfter) className += '-drop-after';else className += '-drop-in';
-    return className;
-  }, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);
-  const selectedClassName = React.useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? 'selected' : '', [item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
-  const hoverClassName = React.useMemo(() => (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) !== item.id || withDragAndDrop && isDragging ? '' : 'hover', [hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, withDragAndDrop, isDragging]);
+    if (isDropIndicatorPositionInside) {
+      const className = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName).concat(isDropValid ? '--valid' : '--invalid', "-drop-in");
+      return className;
+    }
+
+    return '';
+  }, [isDropIndicatorPositionInside, isDropValid]);
+  const dragOverlayClassName = React.useMemo(() => isDragOverlay ? 'drag-overlay' : '', [isDragOverlay]);
+  const selectedClassName = React.useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id && !isDragOverlay ? 'selected' : '', [isDragOverlay, item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
+  const hoverClassName = React.useMemo(() => !isDragOverlay && ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id || isDragging) ? 'hover' : '', [isDragOverlay, hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, isDragging]);
   const fixedHeightClassname = React.useMemo(() => {
     if (labelOverflow === 'truncate') {
       if (rowSize === 'compact') return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--fixed-height-compact");
@@ -130,7 +116,7 @@ const TreeItem = props => {
 
     return '';
   }, [labelOverflow, rowSize]);
-  const finalClassName = React.useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
+  const finalClassName = React.useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
   const handleItemClick = React.useCallback(e => {
     onItemClick(item, e);
     setFocusedItem(item);
@@ -149,23 +135,7 @@ const TreeItem = props => {
   }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
   return /*#__PURE__*/jsxRuntime.jsxs(TreeListItem, {
     tabIndex: 0,
-    onMouseMove: event => {
-      if (withDragAndDrop && onMouseDragOverItem) {
-        onMouseDragOverItem({
-          event,
-          item,
-          itemIndex,
-          setIsDraggingOverThis,
-          openFolderOnHoverTimeout
-        });
-      }
-    },
     onMouseLeave: () => {
-      if (withDragAndDrop) {
-        setIsDraggingOverThis(false);
-        if (openFolderOnHoverTimeout !== null && openFolderOnHoverTimeout !== void 0 && openFolderOnHoverTimeout.current) clearTimeout(openFolderOnHoverTimeout.current);
-      }
-
       if ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id) {
         setHoverItem(null);
       }
@@ -174,6 +144,7 @@ const TreeItem = props => {
       setHoverItem(item);
     },
     onClick: handleItemClick,
+    onBlur: () => setFocusedItem(null),
     ref: setItemRefs,
     style: _objectSpread({}, itemWrapperStyle),
     className: finalClassName,
@@ -182,29 +153,33 @@ const TreeItem = props => {
     "data-id": item.id,
     "data-index": item.virtualIndex,
     onKeyDown: onItemKeyDown,
-    children: [/*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx__default["default"](DnDHandle, {
-      id: id
-    }) : null, withRadioChecks ? /*#__PURE__*/_jsx__default["default"](RadioSelectable, {
+    children: [/*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx__default["default"](DnDHandle.DnDHandle, {
+      id: id,
+      isDragOverlay: isDragOverlay
+    }) : null, withRadioChecks && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](RadioSelectable, {
       item: item,
       itemIndex: itemIndex
-    }) : null, withCheckboxChecks ? /*#__PURE__*/_jsx__default["default"](CheckboxSelectable, {
+    }) : null, withCheckboxChecks && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](CheckboxSelectable, {
       item: item,
       itemIndex: itemIndex
-    }) : null, /*#__PURE__*/_jsx__default["default"](NestingSpace.NestingSpace, {
+    }) : null, !isDragOverlay && /*#__PURE__*/_jsx__default["default"](NestingSpace.NestingSpace, {
       item: item,
       spaceForNestingLevel: spaceForNestingLevel
-    }), /*#__PURE__*/_jsx__default["default"](ExpandCaret.ExpandCaret, {
+    }), !isDragOverlay && /*#__PURE__*/_jsx__default["default"](ExpandCaret.ExpandCaret, {
       item: item
     }), !disableIcons ? /*#__PURE__*/_jsx__default["default"](Icon.Icon, {
       item: item
     }) : null), /*#__PURE__*/_jsx__default["default"](TreeItemText.TreeItemText, {
       item: item
-    }), rightAddons && /*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons)]
+    }), rightAddons && /*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons), /*#__PURE__*/_jsx__default["default"](DropIndicator, {
+      dropIndicatorPosition: dropIndicatorPosition,
+      isDropValid: isDropValid
+    })]
   });
 };
-const DragAndDropTreeItem = reactSortableHoc.SortableElement(TreeItem);
+var TreeItem$1 = WithDnDSortableItemContext.withDnDSortableItemContext(TreeItem);
 
-exports.DragAndDropTreeItem = DragAndDropTreeItem;
 exports.TreeItem = TreeItem;
 exports.TreeListItem = TreeListItem;
 exports.TreeListItemAddonsWrapper = TreeListItemAddonsWrapper;
+exports["default"] = TreeItem$1;

package/cjs/parts/TreeList.js

@@ -12,12 +12,13 @@ require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
-var reactSortableHoc = require('@elliemae/react-sortable-hoc');
 var dsClassnames = require('@elliemae/ds-classnames');
 var dsCircularProgressIndicator = require('@elliemae/ds-circular-progress-indicator');
 var TreeViewContext = require('../TreeViewContext.js');
 var cssClassesConstants = require('../config/cssClassesConstants.js');
 var TreeItem = require('./TreeItem.js');
+var WithConditionalDnDContext = require('../hoc/WithConditionalDnDContext.js');
+var DnDTreeContext = require('../hoc/DnDTreeContext.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -47,16 +48,13 @@ const TreeListWrapper = dsClassnames.aggregatedClasses('ul', {
 });
 const compactRowClass = "".concat(cssClassesConstants.DSTreeViewPrefix, "-tv-row-size-compact");
 const normaRowClass = "".concat(cssClassesConstants.DSTreeViewPrefix, "-tv-row-size-normal");
-const TreeList = props => {
-  const {
-    onMouseDragOverItem
-  } = props;
+
+const TreeListComp = () => {
   const ctx = React.useContext(TreeViewContext["default"]);
   const {
     virtualListRef,
     virtualListHelpers,
-    visibleItems,
-    withDragAndDrop,
+    visibleItems: flattenedVisibleItems,
     props: {
       width,
       height,
@@ -70,6 +68,9 @@ const TreeList = props => {
     virtualItems
   } = virtualListHelpers;
   const className = "".concat(rowSize === 'compact' ? "".concat(compactRowClass) : "".concat(normaRowClass));
+  const {
+    visibleItems
+  } = React.useContext(DnDTreeContext.DnDTreeContext);
   return /*#__PURE__*/jsxRuntime.jsxs(TreeListWrapper, {
     ref: virtualListRef,
     className: className,
@@ -104,17 +105,17 @@ const TreeList = props => {
         measureRef,
         start
       } = virtualItem;
-      const item = visibleItems[index];
+      const item = (visibleItems || flattenedVisibleItems)[index];
+      if (!item) return null;
       item.virtualIndex = index;
       const {
         id
       } = item;
       const style = {
         position: 'absolute',
-        top: 0,
+        top: "".concat(start, "px"),
         left: 0,
-        width: '100%',
-        transform: "translateY(".concat(start, "px)")
+        width: '100%'
       };
       const listItemProps = {
         key: "DS-TreeView-List-Item-".concat(id),
@@ -125,16 +126,13 @@ const TreeList = props => {
         item,
         itemWrapperStyle: style
       };
-      if (withDragAndDrop) return /*#__PURE__*/jsxRuntime.jsx(TreeItem.DragAndDropTreeItem, _objectSpread(_objectSpread({}, listItemProps), {}, {
-        onMouseDragOverItem: onMouseDragOverItem
-      }));
-      return /*#__PURE__*/jsxRuntime.jsx(TreeItem.TreeItem, _objectSpread({}, listItemProps));
+      return /*#__PURE__*/jsxRuntime.jsx(TreeItem["default"], _objectSpread({}, listItemProps));
     })) : null]
   });
 };
-const DragAndDropTreeList = reactSortableHoc.SortableContainer(TreeList);
 
-exports.DragAndDropTreeList = DragAndDropTreeList;
+const TreeList = WithConditionalDnDContext.withConditionalDnDRowContext(TreeListComp);
+
 exports.TreeList = TreeList;
 exports.TreeListNoItems = TreeListNoItems;
 exports.TreeListWrapper = TreeListWrapper;

package/cjs/plugins/dnd/TreeDndPlugin.js

@@ -2,43 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _jsx = require('@babel/runtime/helpers/jsx');
-var React = require('react');
-var TreeList = require('../../parts/TreeList.js');
-var useDnDHelpers = require('../../utils/useDnDHelpers.js');
-var dndHelpers = require('../../utils/dnd-helpers.js');
-var TreeViewContext = require('../../TreeViewContext.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-const TreeDnD = () => {
-  const {
-    updateBeforeSortStart,
-    onSortStart,
-    onMouseDragOverItem,
-    onSortEnd
-  } = useDnDHelpers.useDnDHelpers();
-  const ctx = React.useContext(TreeViewContext["default"]);
-  const {
-    virtualListRef
-  } = ctx;
-  return /*#__PURE__*/_jsx__default["default"](TreeList.DragAndDropTreeList, {
-    useDragHandle: true,
-    transitionDuration: 0,
-    keyboardSortingTransitionDuration: 0,
-    hideSortableGhost: false,
-    disableAnimation: true,
-    updateBeforeSortStart: updateBeforeSortStart,
-    onSortStart: onSortStart,
-    onMouseDragOverItem: onMouseDragOverItem,
-    onSortEnd: onSortEnd,
-    getContainer: () => virtualListRef === null || virtualListRef === void 0 ? void 0 : virtualListRef.current,
-    keyCodes: dndHelpers.keyCodes
-  });
-};
 const TreeDndPlugin = 'tree-dnd';
 
-exports.TreeDnD = TreeDnD;
 exports.TreeDndPlugin = TreeDndPlugin;

package/cjs/plugins/dnd/index.js

@@ -6,5 +6,4 @@ var TreeDndPlugin = require('./TreeDndPlugin.js');
 
 
 
-exports.TreeDnD = TreeDndPlugin.TreeDnD;
 exports.TreeDndPlugin = TreeDndPlugin.TreeDndPlugin;

package/cjs/plugins/index.js

@@ -12,7 +12,6 @@ var SearchableTreePlugin = require('./searchable/SearchableTreePlugin.js');
 
 
 
-exports.TreeDnD = TreeDndPlugin.TreeDnD;
 exports.TreeDndPlugin = TreeDndPlugin.TreeDndPlugin;
 exports.TreeRovingPlugin = TreeRovingPlugin.TreeRovingPlugin;
 exports.SelectablePluginTree = SelectablePluginTree.SelectablePluginTree;

package/cjs/react-desc-prop-types.js

@@ -30,6 +30,7 @@ const TreeViewPropTypes = {
   isMultiSelect: reactDesc.PropTypes.bool.description('whether the tree view is multi select or not').defaultValue(false),
   isSingleSelect: reactDesc.PropTypes.bool.description('wheter the tree view is single select or not').defaultValue(false),
   isLoading: reactDesc.PropTypes.bool.description('wheter the tree should show the loading state or not').defaultValue(false),
+  getIsDropValid: reactDesc.PropTypes.func.description("Function that returns true if the drop is valid and false if it's not").defaultValue('() => true'),
   restrictDragAndDrop: reactDesc.PropTypes.bool.description('whether to restrict DnD functionality or not').defaultValue(false),
   showChildrenAmount: reactDesc.PropTypes.bool.description('whether to show the amount of children or not').defaultValue(false),
   sortable: reactDesc.PropTypes.bool.description('whether the sortable functionality is active or not').defaultValue(false),

package/cjs/utils/keyboard-helpers.js

@@ -19,14 +19,13 @@ var groupExpandsHelpers = require('./group-expands-helpers.js');
 // 36 home
 // 56 number 8
 // 106 (NumPad) *
-const useOnItemKeyDown = item => {
+const useOnItemKeyDown = (item, draggableProps) => {
   const ctx = React.useContext(TreeViewContext["default"]);
   const {
     props: {
       onItemFocus
     },
     triggerTreeRerender,
-    isDragging,
     visibleItems,
     setFocusedItem,
     setSelectedItem,
@@ -55,10 +54,12 @@ const useOnItemKeyDown = item => {
       keyCode
     } = e;
 
-    if (!isDragging) {
+    if (!(draggableProps && draggableProps.active)) {
       if (keyCode !== 9) e.preventDefault(); // allow tab/shift+tab
 
-      if (keyCode === 13 || keyCode === 32) setSelectedItem(item);
+      if ((keyCode === 13 || keyCode === 32) && e.target.tagName === 'LI') {
+        setSelectedItem(item);
+      }
 
       if (keyCode === 37) {
         if (isGroup && isExpanded) {
@@ -146,7 +147,7 @@ const useOnItemKeyDown = item => {
         }
       }
     }
-  }, [isDragging, setSelectedItem, item, isGroup, isExpanded, triggerTreeRerender, scrollToIndex, setLatestToggledItem, visibleItems, setFocusedItem, onItemFocusCurry, updateUserExpandedState]);
+  }, [draggableProps, setSelectedItem, item, isGroup, isExpanded, triggerTreeRerender, updateUserExpandedState, scrollToIndex, setLatestToggledItem, visibleItems, setFocusedItem, onItemFocusCurry]);
   return onItemKeyDown;
 };
 const useGlobalKeyboardListener = func => {

package/cjs/utils/tree-helpers.js

@@ -132,7 +132,7 @@ const getChildrenMatchesSearchQuery = function (parentNode) {
  */
 
 const enrichNodeModelInPlace = function (node) {
-  var _node$model, _node$model$children;
+  var _node$model$children$, _node$model, _node$model$children;
 
   let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let selection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
@@ -148,7 +148,7 @@ const enrichNodeModelInPlace = function (node) {
   // this is useful to avoid having to always check both the flag and the children.length...
 
 
-  if (typeof node.model.isGroup !== 'boolean' && ((_node$model = node.model) === null || _node$model === void 0 ? void 0 : (_node$model$children = _node$model.children) === null || _node$model$children === void 0 ? void 0 : _node$model$children.length) > 0) {
+  if (typeof node.model.isGroup !== 'boolean' && ((_node$model$children$ = (_node$model = node.model) === null || _node$model === void 0 ? void 0 : (_node$model$children = _node$model.children) === null || _node$model$children === void 0 ? void 0 : _node$model$children.length) !== null && _node$model$children$ !== void 0 ? _node$model$children$ : 0) > 0) {
     node.model.isGroup = true;
   }
 
@@ -180,9 +180,35 @@ const focusItem = item => {
 
   item === null || item === void 0 ? void 0 : (_item$nodeItemRef = item.nodeItemRef) === null || _item$nodeItemRef === void 0 ? void 0 : (_item$nodeItemRef$cur = _item$nodeItemRef.current) === null || _item$nodeItemRef$cur === void 0 ? void 0 : _item$nodeItemRef$cur.focus();
 };
+const flattenTreeForDnD = function (data) {
+  let shouldDescend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => true;
+  const flattenedTree = [];
+  let index = 0;
+
+  const doit = function (node) {
+    var _node$children$length, _node$children, _node$children2;
+
+    let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    flattenedTree.push({
+      uid: node.id.toString(),
+      depth,
+      realIndex: index,
+      childrenCount: (_node$children$length = (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.length) !== null && _node$children$length !== void 0 ? _node$children$length : 0,
+      parentId: parentId !== null ? parentId.toString() : null,
+      original: node
+    });
+    index += 1;
+    if (shouldDescend(node)) (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.forEach(child => doit(child, depth + 1, node.id.toString()));
+  };
+
+  data.forEach(datum => doit(datum));
+  return flattenedTree;
+};
 
 exports.cloneNode = cloneNode;
 exports.enrichNodeModelInPlace = enrichNodeModelInPlace;
+exports.flattenTreeForDnD = flattenTreeForDnD;
 exports.focusItem = focusItem;
 exports.getChildrenMatchesSearchQuery = getChildrenMatchesSearchQuery;
 exports.getItemsParentNode = getItemsParentNode;

package/cjs/utils/useTree.js

@@ -76,9 +76,9 @@ const useTree = (data, props, states) => {
   React.useEffect(() => {
     const parsedVisibleItems = [];
     const newExpandedHashMap = {};
-    treeRoot.walk(node => {
-      const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
+    const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
 
+    treeRoot.walk(node => {
       treeHelpers.enrichNodeModelInPlace(node, searchQuery, selection, expanded);
       if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;
       return shouldContinueWalking;
@@ -93,8 +93,10 @@ const useTree = (data, props, states) => {
     setExpandedGroups(newExpandedHashMap); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [treeRoot, rerenderItems, searchQuery, highlightOnlyQuery, selection, expanded, setExpandedGroups // onVisibleItemsChange // evaluate potential performance hit?
   ]);
+  const flattenedItems = React.useMemo(() => treeHelpers.flattenTreeForDnD(data), [data]);
   return {
     visibleItems,
+    flattenedItems,
     tree,
     treeRoot,
     rerenderItems,

package/esm/TreeView.js

@@ -3,21 +3,17 @@ import 'react';
 import { describe } from 'react-desc';
 import { TreeViewPropTypes } from './react-desc-prop-types.js';
 import TreeViewContext from './TreeViewContext.js';
-import { TreeDndPlugin, TreeDnD } from './plugins/dnd/TreeDndPlugin.js';
 import { useTreeview } from './config/useTreeview.js';
 import { TreeList } from './parts/TreeList.js';
 
-var _TreeDnD, _TreeList;
+var _TreeList;
 function TreeView(props) {
-  const {
-    plugins
-  } = props;
   const {
     ctx
   } = useTreeview(props);
   return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
     value: ctx
-  }, void 0, plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin) ? _TreeDnD || (_TreeDnD = /*#__PURE__*/_jsx(TreeDnD, {})) : _TreeList || (_TreeList = /*#__PURE__*/_jsx(TreeList, {})));
+  }, void 0, _TreeList || (_TreeList = /*#__PURE__*/_jsx(TreeList, {})));
 }
 const TreeViewWithSchema = describe(TreeView);
 TreeViewWithSchema.propTypes = TreeViewPropTypes;

package/esm/TreeViewContext.js

@@ -14,6 +14,7 @@ const defaultProps = {
   fluid: false,
   isMultiSelect: false,
   isSingleSelect: false,
+  getIsDropValid: () => true,
   restrictDragAndDrop: false,
   showChildrenAmount: false,
   sortable: false,
@@ -54,11 +55,10 @@ const defaultRelativeMouseCoord = {
 const defaultContext = {
   props: defaultProps,
   visibleItems: [],
+  flattenedItems: [],
   withRadioChecks: false,
   withCheckboxChecks: false,
   withDragAndDrop: false,
-  relativeMouseCord: defaultRelativeMouseCoord,
-  setRelativeMouseCord: noop,
   triggerTreeRerender: noop,
   tree: undefined,
   treeRoot: undefined,
@@ -69,12 +69,6 @@ const defaultContext = {
     scrollToIndex: noop
   },
   virtualListRef: undefined,
-  isDragging: false,
-  setIsDragging: noop,
-  isKeyboardDragging: false,
-  setIsKeyboardDragging: noop,
-  draggedItem: null,
-  setDraggedItem: noop,
   uniqueTreeViewUUID: '',
   selectedItem: null,
   setSelectedItem: noop,

package/esm/config/useTreeview.js

@@ -10,7 +10,7 @@ import { useVirtual } from 'react-virtual';
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { v4 } from 'uuid';
 import { TreeViewPropTypes } from '../react-desc-prop-types.js';
-import { defaultProps, defaultRelativeMouseCoord } from '../TreeViewContext.js';
+import { defaultProps } from '../TreeViewContext.js';
 import { TreeDndPlugin } from '../plugins/dnd/TreeDndPlugin.js';
 import { useTree } from '../utils/useTree.js';
 import { toggleItemExpand, useNotifyExpandedChange } from '../utils/group-expands-helpers.js';
@@ -42,11 +42,7 @@ const useTreeview = props => {
     selection,
     onInstanceRefInitialized
   } = propsWithDefault;
-  const [isDragging, setIsDragging] = useState(false);
-  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
-  const [relativeMouseCord, setRelativeMouseCord] = useState(defaultRelativeMouseCoord);
   const [uniqueTreeViewUUID] = useState(v4());
-  const [draggedItem, setDraggedItem] = useState(null);
   const [hoverItem, setHoverItem] = useState(null);
   const [latestToggledItem, setLatestToggledItem] = useState(null);
   const [selectedItem, setSelectedItem] = useState(null);
@@ -55,6 +51,7 @@ const useTreeview = props => {
   const [expandedGroups, setExpandedGroups] = useState({});
   const {
     visibleItems,
+    flattenedItems,
     tree,
     treeRoot,
     triggerTreeRerender,
@@ -76,20 +73,13 @@ const useTreeview = props => {
   const handleExpandGroup = useCallback(toggleItemExpand, []);
   const ctx = useMemo(() => ({
     props: propsWithDefault,
-    setRelativeMouseCord,
-    relativeMouseCord,
     virtualListHelpers,
     virtualListRef,
     tree,
     treeRoot,
     visibleItems,
+    flattenedItems,
     triggerTreeRerender,
-    isDragging,
-    setIsDragging,
-    isKeyboardDragging,
-    setIsKeyboardDragging,
-    draggedItem,
-    setDraggedItem,
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
@@ -108,7 +98,7 @@ const useTreeview = props => {
     setHoverItem,
     handleExpandGroup,
     updateUserExpandedState
-  }), [draggedItem, expandedGroups, focusedItem, handleExpandGroup, hoverItem, isDragging, isKeyboardDragging, latestToggledItem, propsWithDefault, relativeMouseCord, selectedCheckboxes, selectedItem, tree, treeRoot, triggerTreeRerender, uniqueTreeViewUUID, virtualListHelpers, visibleItems, withCheckboxChecks, withDragAndDrop, withRadioChecks, updateUserExpandedState]); // this hooks can't use the context because the context provider doesn't wrap this
+  }), [propsWithDefault, virtualListHelpers, tree, treeRoot, visibleItems, flattenedItems, triggerTreeRerender, withRadioChecks, withCheckboxChecks, withDragAndDrop, uniqueTreeViewUUID, selectedCheckboxes, selectedItem, expandedGroups, latestToggledItem, focusedItem, hoverItem, handleExpandGroup, updateUserExpandedState]); // this hooks can't use the context because the context provider doesn't wrap this
   // as such we manually pass the second parameter as fit
 
   if (instanceRef) instanceRef.current = treeRef.current;

package/esm/hoc/DnDTreeContext.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { DropIndicatorPosition } from './SortableItemContext.js';
+
+const DnDTreeContext = /*#__PURE__*/createContext({
+  depth: undefined,
+  activeIndex: undefined,
+  visibleItems: undefined,
+  dropIndicatorPosition: DropIndicatorPosition.None,
+  lastActiveId: undefined,
+  setLastActiveId: undefined,
+  isDropValid: false
+});
+
+export { DnDTreeContext };

package/esm/hoc/SortableItemContext.js

@@ -0,0 +1,17 @@
+import { createContext } from 'react';
+
+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 = {}));
+
+/** Context for cross component communication */
+const SortableItemContext = /*#__PURE__*/createContext({
+  draggableProps: false
+});
+
+export { DropIndicatorPosition, SortableItemContext };