@elliemae/ds-treeview 2.2.0-next.3 → 2.2.0-rc.0

package/cjs/utils/keyboard-helpers.js

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

@@ -0,0 +1,220 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.constructor.js');
+require('core-js/modules/esnext.async-iterator.drop.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.drop.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var lodash = require('lodash');
+var TreeViewContext = require('../TreeViewContext.js');
+var treeHelpers = require('./tree-helpers.js');
+var dndHelpers = require('./dnd-helpers.js');
+
+const useDnDHelpers = () => {
+  const ctx = React.useContext(TreeViewContext["default"]);
+  const {
+    props: {
+      data,
+      onOrderChange,
+      restrictDragAndDrop
+    },
+    relativeMouseCord,
+    setRelativeMouseCord,
+    visibleItems,
+    isDragging,
+    setIsDragging,
+    isKeyboardDragging,
+    setIsKeyboardDragging,
+    setDraggedItem,
+    setFocusedItem,
+    triggerTreeRerender,
+    tree,
+    treeRoot,
+    draggedItem
+  } = ctx;
+  const onSortEnd = React.useCallback(_ref => {
+    let {
+      oldIndex,
+      newIndex,
+      isKeySorting
+    } = _ref;
+    const {
+      isBefore,
+      isAfter,
+      item: overItem,
+      isValid
+    } = relativeMouseCord;
+
+    if (draggedItem && tree && treeRoot && overItem) {
+      let newItems = lodash.cloneDeep(data); // if dropping in same position do nothing
+      // if the drop is not allowed do nothing
+
+      if (oldIndex === newIndex || !isValid) {
+        // onOrderChange(newItems, data);
+        setIsDragging(false);
+        setDraggedItem(null);
+        triggerTreeRerender();
+        return;
+      } // if we are moving from topToBottom the offset changes
+
+
+      const movementDirection = newIndex > oldIndex ? 'topToBottom' : 'bottomToTop';
+      let newNestedIndex;
+      let newParentNode;
+
+      if (isKeySorting) {
+        const kinship = dndHelpers.inferKeyboardKinshipDrop({
+          items: visibleItems,
+          newIndex
+        });
+        newNestedIndex = kinship.newNestedIndex;
+        newParentNode = kinship.newParentNode;
+      } else {
+        const kinship = dndHelpers.inferHoverItemKinshipDrop({
+          isBefore,
+          isAfter,
+          overItem,
+          movementDirection,
+          draggedItem
+        });
+        newNestedIndex = kinship.newNestedIndex;
+        newParentNode = kinship.newParentNode;
+      }
+
+      const newMovedItemNode = tree.parse(draggedItem.node.model);
+      treeHelpers.getNodeById(treeRoot, draggedItem.id).drop();
+
+      if (newParentNode && typeof newNestedIndex === 'number') {
+        newParentNode.addChildAtIndex(newMovedItemNode, newNestedIndex);
+
+        if (newParentNode.isRoot()) {
+          newItems = [...newParentNode.model.children];
+        } else {
+          newItems = [...treeRoot.model.children];
+        }
+      }
+
+      onOrderChange(newItems, data, draggedItem);
+      setIsDragging(false);
+      setDraggedItem(null);
+      triggerTreeRerender();
+    }
+  }, [data, draggedItem, relativeMouseCord, visibleItems, tree, treeRoot, onOrderChange, triggerTreeRerender, setIsDragging, setDraggedItem]);
+  const onSortStart = React.useCallback(() => {}, // ({ node, index, collection, isKeySorting }, event) => {
+  // console.log('node :>> ', node);
+  // console.log('isKeySorting :>> ', isKeySorting);
+  // console.log('event :>> ', event);
+  // const item = collection?.[index] || visibleItems[index];
+  // setIsDragging(true);
+  // setDraggedItem(item);
+  // },
+  []);
+  const updateBeforeSortStart = React.useCallback(beforeStartArgs => new Promise(resolve => {
+    const {
+      index,
+      isKeySorting
+    } = beforeStartArgs;
+    const item = visibleItems[index];
+    const {
+      isExpanded
+    } = item.node.model;
+
+    if (isExpanded) {
+      item.node.model.isExpanded = false;
+      triggerTreeRerender();
+    }
+
+    setRelativeMouseCord(TreeViewContext.defaultRelativeMouseCoord);
+    setIsKeyboardDragging(isKeySorting);
+    setIsDragging(true);
+    setDraggedItem(item);
+    treeHelpers.focusItem(null);
+    setFocusedItem(null);
+    if (document.activeElement && typeof document.activeElement.blur === 'function') document.activeElement.blur();
+    resolve(true);
+  }), [visibleItems, setRelativeMouseCord, setIsKeyboardDragging, setIsDragging, setDraggedItem, setFocusedItem, triggerTreeRerender]); // tracks mouse coords relative to an element to check if the drop happens
+  // at the top/center/bottom of an element to choose where to move the element
+  // requested in the specs
+
+  const onMouseDragOverItem = React.useCallback(_ref2 => {
+    let {
+      event,
+      item,
+      itemIndex,
+      setIsDraggingOverThis,
+      openFolderOnHoverTimeout
+    } = _ref2;
+    const {
+      node
+    } = item;
+    const {
+      nodeItemRef
+    } = node.model;
+
+    if (isDragging && !isKeyboardDragging && draggedItem) {
+      var _nodeItemRef$current;
+
+      const rect = nodeItemRef === null || nodeItemRef === void 0 ? void 0 : (_nodeItemRef$current = nodeItemRef.current) === null || _nodeItemRef$current === void 0 ? void 0 : _nodeItemRef$current.getBoundingClientRect();
+
+      if (rect) {
+        const x = event.clientX - rect.left; // x position within the element.
+
+        const y = event.clientY - rect.top; // y position within the element.
+        // by spec we need to track where the drop will happens
+        // if drop happens on top 25% drop before
+        // if drop happens on bottom of 25% drop after
+        // if drop happens in the middle 50% either invalid or drop into children
+
+        const {
+          height: elementHeight
+        } = rect;
+        const dropBeforeMaxY = elementHeight * 0.25;
+        const dropAfterMinY = elementHeight - elementHeight * 0.25;
+        const isBefore = y < dropBeforeMaxY;
+        const isAfter = y > dropAfterMinY;
+        const isValid = dndHelpers.isDropValid({
+          isBefore,
+          isAfter,
+          draggedItem,
+          overItem: item,
+          restrictDragAndDrop
+        });
+        setRelativeMouseCord({
+          isBefore,
+          isAfter,
+          isValid,
+          item,
+          x,
+          y,
+          relativeElementDOMRect: rect,
+          relativeElementIndex: itemIndex
+        });
+        setIsDraggingOverThis(true);
+
+        if (!(openFolderOnHoverTimeout !== null && openFolderOnHoverTimeout !== void 0 && openFolderOnHoverTimeout.current) && // only set the interval if it wasn't set already once
+        (draggedItem === null || draggedItem === void 0 ? void 0 : draggedItem.id) !== (item === null || item === void 0 ? void 0 : item.id) && ( // don't open ghost element
+        item.isGroup || item.children.length > 0) && // only open groups
+        !restrictDragAndDrop) {
+          openFolderOnHoverTimeout.current = setTimeout(() => {
+            item.node.model.isExpanded = true;
+            openFolderOnHoverTimeout.current = null;
+            triggerTreeRerender();
+          }, 1000);
+        }
+      }
+    } else {
+      setRelativeMouseCord(TreeViewContext.defaultRelativeMouseCoord);
+    }
+  }, [isDragging, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender]);
+  return {
+    updateBeforeSortStart,
+    onSortStart,
+    onSortEnd,
+    onMouseDragOverItem
+  };
+};
+
+exports.useDnDHelpers = useDnDHelpers;

package/cjs/utils/useTree.js

@@ -76,9 +76,9 @@ const useTree = (data, props, states) => {
   React.useEffect(() => {
     const parsedVisibleItems = [];
     const newExpandedHashMap = {};
-    const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
-
     treeRoot.walk(node => {
+      const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
+
       treeHelpers.enrichNodeModelInPlace(node, searchQuery, selection, expanded);
       if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;
       return shouldContinueWalking;
@@ -93,10 +93,8 @@ 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,17 +3,21 @@ 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 _TreeList;
+var _TreeDnD, _TreeList;
 function TreeView(props) {
+  const {
+    plugins
+  } = props;
   const {
     ctx
   } = useTreeview(props);
   return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
     value: ctx
-  }, void 0, _TreeList || (_TreeList = /*#__PURE__*/_jsx(TreeList, {})));
+  }, void 0, plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin) ? _TreeDnD || (_TreeDnD = /*#__PURE__*/_jsx(TreeDnD, {})) : _TreeList || (_TreeList = /*#__PURE__*/_jsx(TreeList, {})));
 }
 const TreeViewWithSchema = describe(TreeView);
 TreeViewWithSchema.propTypes = TreeViewPropTypes;

package/esm/TreeViewContext.js

@@ -14,7 +14,6 @@ const defaultProps = {
   fluid: false,
   isMultiSelect: false,
   isSingleSelect: false,
-  getIsDropValid: () => true,
   restrictDragAndDrop: false,
   showChildrenAmount: false,
   sortable: false,
@@ -55,10 +54,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,
@@ -69,6 +69,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/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 } from '../TreeViewContext.js';
+import { defaultProps, defaultRelativeMouseCoord } 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,7 +42,11 @@ 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);
@@ -51,7 +55,6 @@ const useTreeview = props => {
   const [expandedGroups, setExpandedGroups] = useState({});
   const {
     visibleItems,
-    flattenedItems,
     tree,
     treeRoot,
     triggerTreeRerender,
@@ -73,13 +76,20 @@ 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,
@@ -98,7 +108,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/esm/index.js

@@ -1,5 +1,5 @@
 export { TreeView, TreeViewWithSchema } from './TreeView.js';
-export { TreeDndPlugin } from './plugins/dnd/TreeDndPlugin.js';
+export { TreeDnD, TreeDndPlugin } from './plugins/dnd/TreeDndPlugin.js';
 export { TreeRovingPlugin } from './plugins/roving/TreeRovingPlugin.js';
 export { SelectablePluginTree } from './plugins/selectable/SelectablePluginTree.js';
 export { TreeToolbarPlugin } from './plugins/toolbar/TreeToolbarPlugin.js';

package/esm/parts/TreeItem.js

@@ -1,12 +1,15 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { useContext, useMemo, useCallback } from 'react';
+import { useRef, useState, useContext, useMemo, useCallback } from 'react';
+import { SortableHandle, SortableElement } from '@elliemae/react-sortable-hoc';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { GripperVertical } from '@elliemae/ds-icons';
 import RadioSelectable from './RadioSelectable.js';
 import CheckboxSelectable from './CheckboxSelectable.js';
 import TreeViewContext from '../TreeViewContext.js';
@@ -17,10 +20,6 @@ import { Icon } from './Icon.js';
 import { ExpandCaret } from './ExpandCaret.js';
 import { TreeItemText } from './TreeItemText.js';
 import { treeItemBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
-import { DnDHandle } from './DnDHandle.js';
-import { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext.js';
-import { SortableItemContext, DropIndicatorPosition } from '../hoc/SortableItemContext.js';
-import DropIndicator from './DropIndicator.js';
 import { jsxs } from 'react/jsx-runtime';
 
 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; }
@@ -33,6 +32,23 @@ const TreeListItem = aggregatedClasses('li', {
 })(treeItemBlockName);
 const TreeListItemAddonsWrapper = aggregatedClasses('div')(treeItemBlockName, 'addons' // temp fix untill we move to styled components
 );
+const DnDHandle = SortableHandle(_ref => {
+  let {
+    id
+  } = _ref;
+  return /*#__PURE__*/_jsx(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,
@@ -40,7 +56,7 @@ const TreeItem = props => {
     itemWrapperStyle = {},
     virtualItemRef,
     spaceForNestingLevel = 1.5,
-    isDragOverlay = false
+    onMouseDragOverItem
   } = props;
   const {
     id,
@@ -49,10 +65,9 @@ const TreeItem = props => {
   const {
     nodeItemRef
   } = node.model;
-  const {
-    draggableProps
-  } = useContext(SortableItemContext);
-  const onItemKeyDown = useOnItemKeyDown(item, draggableProps);
+  const openFolderOnHoverTimeout = useRef(null);
+  const [isDraggingOverThis, setIsDraggingOverThis] = useState(false);
+  const onItemKeyDown = useOnItemKeyDown(item);
   const ctx = useContext(TreeViewContext);
   const {
     props: {
@@ -63,12 +78,14 @@ const TreeItem = props => {
       rowSize,
       labelOverflow
     },
+    relativeMouseCord,
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
     selectedItem,
     selectedCheckboxes,
     hoverItem,
+    isDragging,
     virtualListHelpers: {
       scrollToIndex
     },
@@ -78,27 +95,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 => {
-    setMultipleRefs(virtualItemRef, !isDragOverlay && nodeItemRef, !isDragOverlay && draggableProps && draggableProps.setNodeRef)(ref);
+    setMultipleRefs(virtualItemRef, nodeItemRef)(ref);
   };
 
-  const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
-  const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;
-  const isDragging = draggableProps && draggableProps.isDragging;
-  const isDropValid = draggableProps && draggableProps.isDropValid;
   const dropPreviewClassName = useMemo(() => {
-    if (isDropIndicatorPositionInside) {
-      const className = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName).concat(isDropValid ? '--valid' : '--invalid', "-drop-in");
-      return className;
-    }
-
-    return '';
-  }, [isDropIndicatorPositionInside, isDropValid]);
-  const dragOverlayClassName = useMemo(() => isDragOverlay ? 'drag-overlay' : '', [isDragOverlay]);
-  const selectedClassName = 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 = 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(DSTreeViewPrefix, "-").concat(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 = 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 = 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 = useMemo(() => {
     if (labelOverflow === 'truncate') {
       if (rowSize === 'compact') return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--fixed-height-compact");
@@ -107,7 +121,7 @@ const TreeItem = props => {
 
     return '';
   }, [labelOverflow, rowSize]);
-  const finalClassName = useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
+  const finalClassName = useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
   const handleItemClick = useCallback(e => {
     onItemClick(item, e);
     setFocusedItem(item);
@@ -126,7 +140,23 @@ const TreeItem = props => {
   }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
   return /*#__PURE__*/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);
       }
@@ -135,7 +165,6 @@ const TreeItem = props => {
       setHoverItem(item);
     },
     onClick: handleItemClick,
-    onBlur: () => setFocusedItem(null),
     ref: setItemRefs,
     style: _objectSpread({}, itemWrapperStyle),
     className: finalClassName,
@@ -145,29 +174,25 @@ const TreeItem = props => {
     "data-index": item.virtualIndex,
     onKeyDown: onItemKeyDown,
     children: [/*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx(DnDHandle, {
-      id: id,
-      isDragOverlay: isDragOverlay
-    }) : null, withRadioChecks && !isDragOverlay ? /*#__PURE__*/_jsx(RadioSelectable, {
+      id: id
+    }) : null, withRadioChecks ? /*#__PURE__*/_jsx(RadioSelectable, {
       item: item,
       itemIndex: itemIndex
-    }) : null, withCheckboxChecks && !isDragOverlay ? /*#__PURE__*/_jsx(CheckboxSelectable, {
+    }) : null, withCheckboxChecks ? /*#__PURE__*/_jsx(CheckboxSelectable, {
       item: item,
       itemIndex: itemIndex
-    }) : null, !isDragOverlay && /*#__PURE__*/_jsx(NestingSpace, {
+    }) : null, /*#__PURE__*/_jsx(NestingSpace, {
       item: item,
       spaceForNestingLevel: spaceForNestingLevel
-    }), !isDragOverlay && /*#__PURE__*/_jsx(ExpandCaret, {
+    }), /*#__PURE__*/_jsx(ExpandCaret, {
       item: item
     }), !disableIcons ? /*#__PURE__*/_jsx(Icon, {
       item: item
     }) : null), /*#__PURE__*/_jsx(TreeItemText, {
       item: item
-    }), rightAddons && /*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons), /*#__PURE__*/_jsx(DropIndicator, {
-      dropIndicatorPosition: dropIndicatorPosition,
-      isDropValid: isDropValid
-    })]
+    }), rightAddons && /*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons)]
   });
 };
-var TreeItem$1 = withDnDSortableItemContext(TreeItem);
+const DragAndDropTreeItem = SortableElement(TreeItem);
 
-export { TreeItem, TreeListItem, TreeListItemAddonsWrapper, TreeItem$1 as default };
+export { DragAndDropTreeItem, TreeItem, TreeListItem, TreeListItemAddonsWrapper };