@elliemae/ds-treeview 2.2.0-next.5 → 2.2.0

package/cjs/TreeView.js

@@ -7,6 +7,7 @@ require('react');
 var reactDesc = require('react-desc');
 var reactDescPropTypes = require('./react-desc-prop-types.js');
 var TreeViewContext = require('./TreeViewContext.js');
+var TreeDndPlugin = require('./plugins/dnd/TreeDndPlugin.js');
 var useTreeview = require('./config/useTreeview.js');
 var TreeList = require('./parts/TreeList.js');
 
@@ -14,14 +15,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var _TreeList;
+var _TreeDnD, _TreeList;
 function TreeView(props) {
+  const {
+    plugins
+  } = props;
   const {
     ctx
   } = useTreeview.useTreeview(props);
   return /*#__PURE__*/_jsx__default["default"](TreeViewContext["default"].Provider, {
     value: ctx
-  }, void 0, _TreeList || (_TreeList = /*#__PURE__*/_jsx__default["default"](TreeList.TreeList, {})));
+  }, void 0, plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin.TreeDndPlugin) ? _TreeDnD || (_TreeDnD = /*#__PURE__*/_jsx__default["default"](TreeDndPlugin.TreeDnD, {})) : _TreeList || (_TreeList = /*#__PURE__*/_jsx__default["default"](TreeList.TreeList, {})));
 }
 const TreeViewWithSchema = reactDesc.describe(TreeView);
 TreeViewWithSchema.propTypes = reactDescPropTypes.TreeViewPropTypes;

package/cjs/TreeViewContext.js

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

package/cjs/config/useTreeview.js

@@ -50,7 +50,11 @@ const useTreeview = props => {
     selection,
     onInstanceRefInitialized
   } = propsWithDefault;
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [isKeyboardDragging, setIsKeyboardDragging] = React.useState(false);
+  const [relativeMouseCord, setRelativeMouseCord] = React.useState(TreeViewContext.defaultRelativeMouseCoord);
   const [uniqueTreeViewUUID] = React.useState(uuid.v4());
+  const [draggedItem, setDraggedItem] = React.useState(null);
   const [hoverItem, setHoverItem] = React.useState(null);
   const [latestToggledItem, setLatestToggledItem] = React.useState(null);
   const [selectedItem, setSelectedItem] = React.useState(null);
@@ -59,7 +63,6 @@ const useTreeview = props => {
   const [expandedGroups, setExpandedGroups] = React.useState({});
   const {
     visibleItems,
-    flattenedItems,
     tree,
     treeRoot,
     triggerTreeRerender,
@@ -81,13 +84,20 @@ const useTreeview = props => {
   const handleExpandGroup = React.useCallback(groupExpandsHelpers.toggleItemExpand, []);
   const ctx = React.useMemo(() => ({
     props: propsWithDefault,
+    setRelativeMouseCord,
+    relativeMouseCord,
     virtualListHelpers,
     virtualListRef,
     tree,
     treeRoot,
     visibleItems,
-    flattenedItems,
     triggerTreeRerender,
+    isDragging,
+    setIsDragging,
+    isKeyboardDragging,
+    setIsKeyboardDragging,
+    draggedItem,
+    setDraggedItem,
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
@@ -106,7 +116,7 @@ const useTreeview = props => {
     setHoverItem,
     handleExpandGroup,
     updateUserExpandedState
-  }), [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
+  }), [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
   // as such we manually pass the second parameter as fit
 
   if (instanceRef) instanceRef.current = treeRef.current;

package/cjs/index.js

@@ -16,6 +16,7 @@ var TreeViewSearchBar = require('./related-components/TreeViewSearchBar.js');
 
 exports.TreeView = TreeView.TreeView;
 exports.TreeViewWithSchema = TreeView.TreeViewWithSchema;
+exports.TreeDnD = TreeDndPlugin.TreeDnD;
 exports.TreeDndPlugin = TreeDndPlugin.TreeDndPlugin;
 exports.TreeRovingPlugin = TreeRovingPlugin.TreeRovingPlugin;
 exports.SelectablePluginTree = SelectablePluginTree.SelectablePluginTree;

package/cjs/parts/TreeItem.js

@@ -2,15 +2,18 @@
 
 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');
@@ -21,16 +24,12 @@ 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 _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 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; }
 
@@ -42,6 +41,23 @@ 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,
@@ -49,7 +65,7 @@ const TreeItem = props => {
     itemWrapperStyle = {},
     virtualItemRef,
     spaceForNestingLevel = 1.5,
-    isDragOverlay = false
+    onMouseDragOverItem
   } = props;
   const {
     id,
@@ -58,10 +74,9 @@ const TreeItem = props => {
   const {
     nodeItemRef
   } = node.model;
-  const {
-    draggableProps
-  } = React.useContext(SortableItemContext.SortableItemContext);
-  const onItemKeyDown = keyboardHelpers.useOnItemKeyDown(item, draggableProps);
+  const openFolderOnHoverTimeout = React.useRef(null);
+  const [isDraggingOverThis, setIsDraggingOverThis] = React.useState(false);
+  const onItemKeyDown = keyboardHelpers.useOnItemKeyDown(item);
   const ctx = React.useContext(TreeViewContext["default"]);
   const {
     props: {
@@ -72,12 +87,14 @@ const TreeItem = props => {
       rowSize,
       labelOverflow
     },
+    relativeMouseCord,
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
     selectedItem,
     selectedCheckboxes,
     hoverItem,
+    isDragging,
     virtualListHelpers: {
       scrollToIndex
     },
@@ -87,27 +104,24 @@ 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, !isDragOverlay && nodeItemRef, !isDragOverlay && draggableProps && draggableProps.setNodeRef)(ref);
+    refsHelpers.setMultipleRefs(virtualItemRef, nodeItemRef)(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 (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]);
+    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]);
   const fixedHeightClassname = React.useMemo(() => {
     if (labelOverflow === 'truncate') {
       if (rowSize === 'compact') return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--fixed-height-compact");
@@ -116,7 +130,7 @@ const TreeItem = props => {
 
     return '';
   }, [labelOverflow, rowSize]);
-  const finalClassName = React.useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
+  const finalClassName = React.useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
   const handleItemClick = React.useCallback(e => {
     onItemClick(item, e);
     setFocusedItem(item);
@@ -135,7 +149,23 @@ 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);
       }
@@ -144,7 +174,6 @@ const TreeItem = props => {
       setHoverItem(item);
     },
     onClick: handleItemClick,
-    onBlur: () => setFocusedItem(null),
     ref: setItemRefs,
     style: _objectSpread({}, itemWrapperStyle),
     className: finalClassName,
@@ -153,33 +182,29 @@ 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.DnDHandle, {
-      id: id,
-      isDragOverlay: isDragOverlay
-    }) : null, withRadioChecks && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](RadioSelectable, {
+    children: [/*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx__default["default"](DnDHandle, {
+      id: id
+    }) : null, withRadioChecks ? /*#__PURE__*/_jsx__default["default"](RadioSelectable, {
       item: item,
       itemIndex: itemIndex
-    }) : null, withCheckboxChecks && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](CheckboxSelectable, {
+    }) : null, withCheckboxChecks ? /*#__PURE__*/_jsx__default["default"](CheckboxSelectable, {
       item: item,
       itemIndex: itemIndex
-    }) : null, !isDragOverlay && /*#__PURE__*/_jsx__default["default"](NestingSpace.NestingSpace, {
+    }) : null, /*#__PURE__*/_jsx__default["default"](NestingSpace.NestingSpace, {
       item: item,
       spaceForNestingLevel: spaceForNestingLevel
-    }), !isDragOverlay && /*#__PURE__*/_jsx__default["default"](ExpandCaret.ExpandCaret, {
+    }), /*#__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), /*#__PURE__*/_jsx__default["default"](DropIndicator, {
-      dropIndicatorPosition: dropIndicatorPosition,
-      isDropValid: isDropValid
-    })]
+    }), rightAddons && /*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons)]
   });
 };
-var TreeItem$1 = WithDnDSortableItemContext.withDnDSortableItemContext(TreeItem);
+const DragAndDropTreeItem = reactSortableHoc.SortableElement(TreeItem);
 
+exports.DragAndDropTreeItem = DragAndDropTreeItem;
 exports.TreeItem = TreeItem;
 exports.TreeListItem = TreeListItem;
 exports.TreeListItemAddonsWrapper = TreeListItemAddonsWrapper;
-exports["default"] = TreeItem$1;

package/cjs/parts/TreeList.js

@@ -12,13 +12,12 @@ 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 }; }
@@ -48,13 +47,16 @@ const TreeListWrapper = dsClassnames.aggregatedClasses('ul', {
 });
 const compactRowClass = "".concat(cssClassesConstants.DSTreeViewPrefix, "-tv-row-size-compact");
 const normaRowClass = "".concat(cssClassesConstants.DSTreeViewPrefix, "-tv-row-size-normal");
-
-const TreeListComp = () => {
+const TreeList = props => {
+  const {
+    onMouseDragOverItem
+  } = props;
   const ctx = React.useContext(TreeViewContext["default"]);
   const {
     virtualListRef,
     virtualListHelpers,
-    visibleItems: flattenedVisibleItems,
+    visibleItems,
+    withDragAndDrop,
     props: {
       width,
       height,
@@ -68,9 +70,6 @@ const TreeListComp = () => {
     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,
@@ -105,17 +104,17 @@ const TreeListComp = () => {
         measureRef,
         start
       } = virtualItem;
-      const item = (visibleItems || flattenedVisibleItems)[index];
-      if (!item) return null;
+      const item = visibleItems[index];
       item.virtualIndex = index;
       const {
         id
       } = item;
       const style = {
         position: 'absolute',
-        top: "".concat(start, "px"),
+        top: 0,
         left: 0,
-        width: '100%'
+        width: '100%',
+        transform: "translateY(".concat(start, "px)")
       };
       const listItemProps = {
         key: "DS-TreeView-List-Item-".concat(id),
@@ -126,13 +125,16 @@ const TreeListComp = () => {
         item,
         itemWrapperStyle: style
       };
-      return /*#__PURE__*/jsxRuntime.jsx(TreeItem["default"], _objectSpread({}, listItemProps));
+      if (withDragAndDrop) return /*#__PURE__*/jsxRuntime.jsx(TreeItem.DragAndDropTreeItem, _objectSpread(_objectSpread({}, listItemProps), {}, {
+        onMouseDragOverItem: onMouseDragOverItem
+      }));
+      return /*#__PURE__*/jsxRuntime.jsx(TreeItem.TreeItem, _objectSpread({}, listItemProps));
     })) : null]
   });
 };
+const DragAndDropTreeList = reactSortableHoc.SortableContainer(TreeList);
 
-const TreeList = WithConditionalDnDContext.withConditionalDnDRowContext(TreeListComp);
-
+exports.DragAndDropTreeList = DragAndDropTreeList;
 exports.TreeList = TreeList;
 exports.TreeListNoItems = TreeListNoItems;
 exports.TreeListWrapper = TreeListWrapper;

package/cjs/plugins/dnd/TreeDndPlugin.js

@@ -2,6 +2,43 @@
 
 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,4 +6,5 @@ var TreeDndPlugin = require('./TreeDndPlugin.js');
 
 
 
+exports.TreeDnD = TreeDndPlugin.TreeDnD;
 exports.TreeDndPlugin = TreeDndPlugin.TreeDndPlugin;

package/cjs/plugins/index.js

@@ -12,6 +12,7 @@ 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,7 +30,6 @@ 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/dnd-helpers.js

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var treeHelpers = require('./tree-helpers.js');
+
+/* eslint-disable max-lines */
+const keyCodes = {
+  lift: [32, 13],
+  drop: [32, 13],
+  cancel: [27],
+  up: [38, 37],
+  down: [40, 39]
+};
+const sameParentAsHoverItemDrop = _ref => {
+  let {
+    isBefore,
+    isAfter,
+    draggedItem,
+    overItem,
+    movementDirection
+  } = _ref;
+  const hoveredItemNodeNestedIndex = overItem.node.getIndex();
+  let newParentNode = treeHelpers.getItemsParentNode([overItem], true);
+  const {
+    treeDepth: draggedItemTreeDepth
+  } = draggedItem;
+  const {
+    treeDepth: overItemTreeDepth
+  } = overItem;
+  const directionOffset = // we don't apply the offset for direction
+  //  if moving from less nested to more nested
+  //  or moving bottom to top
+  // the offset is required when moving elemnts down in their nest level
+  draggedItemTreeDepth <= overItemTreeDepth && movementDirection === 'topToBottom' ? -1 : 0;
+  let newNestedIndex;
+  if (isBefore) newNestedIndex = hoveredItemNodeNestedIndex + directionOffset;else if (isAfter) newNestedIndex = hoveredItemNodeNestedIndex + 1 + directionOffset;else {
+    newNestedIndex = overItem.children.length; // append as last child of the group
+
+    newParentNode = overItem.node;
+  }
+  if (newNestedIndex < 0) newNestedIndex = 0;
+  return {
+    newNestedIndex,
+    newParentNode
+  };
+};
+const inferHoverItemKinshipDrop = _ref2 => {
+  let {
+    isBefore,
+    isAfter,
+    draggedItem,
+    overItem,
+    movementDirection
+  } = _ref2;
+  const hoverItemModel = overItem.node.model;
+  const isGroupAndIsExpanded = hoverItemModel.isExpanded && hoverItemModel.children.length > 0;
+
+  if (isAfter && isGroupAndIsExpanded) {
+    return {
+      newNestedIndex: 0,
+      // append after the group, so basically as first child
+      newParentNode: overItem.node
+    };
+  }
+
+  if (isBefore || isAfter && !isGroupAndIsExpanded) {
+    return sameParentAsHoverItemDrop({
+      isBefore,
+      isAfter,
+      draggedItem,
+      overItem,
+      movementDirection
+    });
+  } // drop inside
+
+
+  return {
+    newNestedIndex: overItem.children.length,
+    // append as last child of the group
+    newParentNode: overItem.node
+  };
+};
+const isDropValid = _ref3 => {
+  let {
+    isBefore,
+    isAfter,
+    draggedItem,
+    overItem,
+    restrictDragAndDrop
+  } = _ref3;
+  const {
+    id: movedId
+  } = draggedItem;
+  const {
+    id: hoverId
+  } = overItem;
+  const isInside = !isBefore && !isAfter;
+  if (movedId === hoverId) return false;
+
+  if (isInside && !overItem.isGroup) {
+    return false; // we can't drop inside an item that isn't a group
+  }
+
+  if (restrictDragAndDrop) {
+    if (isInside) return false; // in this mode we can't drop inside another element
+
+    const sameParent = treeHelpers.itemsShareSameParent([draggedItem, overItem]);
+    if (overItem.node.model.isExpanded && isAfter) return false;
+    if (!sameParent) return false;
+  }
+
+  return true;
+};
+const inferKeyboardKinshipDrop = _ref4 => {
+  let {
+    items,
+    newIndex
+  } = _ref4;
+  const kinship = {};
+  const itemBefore = items[newIndex];
+  const itemBeforeModel = itemBefore.node.model;
+  const isGroupAndIsExpanded = itemBeforeModel.isExpanded && itemBeforeModel.children.length > 0;
+
+  if (isGroupAndIsExpanded) {
+    kinship.newParentNode = itemBefore.node;
+    kinship.newNestedIndex = 0;
+  } else {
+    kinship.newParentNode = treeHelpers.getItemsParentNode([itemBefore], true);
+    kinship.newNestedIndex = itemBefore.node.getIndex();
+  }
+
+  return kinship;
+};
+
+exports.inferHoverItemKinshipDrop = inferHoverItemKinshipDrop;
+exports.inferKeyboardKinshipDrop = inferKeyboardKinshipDrop;
+exports.isDropValid = isDropValid;
+exports.keyCodes = keyCodes;
+exports.sameParentAsHoverItemDrop = sameParentAsHoverItemDrop;