@elliemae/ds-treeview 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/utils/selectable-helper.js

@@ -1,59 +1,70 @@
-import * as React from "react";
-import { walkParents, walkAllNodeChildren } from "./tree-helpers";
-const getGroupCheckState = (node) => {
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { walkAllNodeChildren, walkParents } from './tree-helpers.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; }
+const getGroupCheckState = node => {
   let childAllChecked = true;
   let anyChildChecked = false;
-  walkAllNodeChildren(node, (childNode) => {
+  walkAllNodeChildren(node, childNode => {
     const {
-      model: { isChecked }
+      model: {
+        isChecked
+      }
     } = childNode;
-    if (isChecked === "mixed" || isChecked === true)
-      anyChildChecked = true;
-    else
-      childAllChecked = false;
+    if (isChecked === 'mixed' || isChecked === true) anyChildChecked = true;else childAllChecked = false;
   });
-  if (childAllChecked)
-    return true;
-  if (anyChildChecked)
-    return "mixed";
+  if (childAllChecked) return true;
+  if (anyChildChecked) return 'mixed';
   return false;
 };
-const selectCheckboxItemModelParentsTillRoot = (modelToCheck, triggerTreeRerender = null) => {
+const selectCheckboxItemModelParentsTillRoot = function (modelToCheck) {
+  let triggerTreeRerender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const newSelections = {};
-  const { nodePath } = modelToCheck;
-  walkParents(nodePath, (parentNode) => {
+  const {
+    nodePath
+  } = modelToCheck;
+  walkParents(nodePath, parentNode => {
     const nextState = getGroupCheckState(parentNode);
     parentNode.model.isChecked = nextState;
     newSelections[parentNode.model.id] = nextState;
   });
-  if (triggerTreeRerender)
-    triggerTreeRerender();
+  if (triggerTreeRerender) triggerTreeRerender();
   return newSelections;
 };
-const toggleCheckboxItem = (itemToSelect, triggerTreeRerender = null) => {
+const toggleCheckboxItem = function (itemToSelect) {
+  let triggerTreeRerender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const {
     node: {
-      model: { id, isChecked, children = [] }
+      model: {
+        id,
+        isChecked,
+        children = []
+      }
     }
   } = itemToSelect;
-  const newSelections = {};
-  const nextState = isChecked === "mixed" ? true : !isChecked;
+  const newSelections = {}; // 'mixed' -> true -> false -> true [...->false -> true]
+
+  const nextState = isChecked === 'mixed' ? true : !isChecked;
   itemToSelect.node.model.isChecked = nextState;
   newSelections[id] = nextState;
+
   if (children.length > 0 && (nextState === true || nextState === false)) {
-    walkAllNodeChildren(itemToSelect.node, (childNode) => {
+    walkAllNodeChildren(itemToSelect.node, childNode => {
       childNode.model.isChecked = nextState;
       newSelections[childNode.model.id] = nextState;
     });
   }
+
   const parentsNewSelections = selectCheckboxItemModelParentsTillRoot(itemToSelect);
-  if (triggerTreeRerender)
-    triggerTreeRerender();
-  return { ...parentsNewSelections, ...newSelections };
-};
-export {
-  getGroupCheckState,
-  selectCheckboxItemModelParentsTillRoot,
-  toggleCheckboxItem
+  if (triggerTreeRerender) triggerTreeRerender();
+  return _objectSpread(_objectSpread({}, parentsNewSelections), newSelections);
 };
-//# sourceMappingURL=selectable-helper.js.map
+
+export { getGroupCheckState, selectCheckboxItemModelParentsTillRoot, toggleCheckboxItem };

package/esm/utils/string-helpers.js

@@ -1,6 +1,3 @@
-import * as React from "react";
-const standardizeSearchQueryString = (input) => input.trim().toLowerCase();
-export {
-  standardizeSearchQueryString
-};
-//# sourceMappingURL=string-helpers.js.map
+const standardizeSearchQueryString = input => input.trim().toLowerCase();
+
+export { standardizeSearchQueryString };

package/esm/utils/tree-helpers.js

@@ -1,135 +1,180 @@
-import * as React from "react";
-import { createRef } from "react";
-import { standardizeSearchQueryString } from "./string-helpers";
-const walkVisibles = (node, callback, skipRoot = true, highlightOnlyQuery = false) => {
-  const { children, model } = node;
-  const { name, isExpanded, childrenMatchesSearchQuery, matchesSearchQuery } = model;
-  const shouldSkipBecauseIsRoot = skipRoot && name === "__root";
+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/web.dom-collections.iterator.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.every.js';
+import 'core-js/modules/esnext.iterator.every.js';
+import { createRef } from 'react';
+import { standardizeSearchQueryString } from './string-helpers.js';
+
+const walkVisibles = function (node, callback) {
+  let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let highlightOnlyQuery = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const {
+    children,
+    model
+  } = node;
+  const {
+    name,
+    isExpanded,
+    childrenMatchesSearchQuery,
+    matchesSearchQuery
+  } = model;
+  const shouldSkipBecauseIsRoot = skipRoot && name === '__root';
   const queryRestrictionsPassed = !!(highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery);
-  if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed)
-    callback(node);
+  if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);
   const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);
+
   if (shouldWalkChildren) {
-    children.forEach((childNode) => {
+    children.forEach(childNode => {
       walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);
     });
   }
 };
-const walkParents = (nodePath, callback, skipRoot = true) => {
+const walkParents = function (nodePath, callback) {
+  let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   const parents = [...nodePath].reverse();
-  parents.shift();
-  if (skipRoot)
-    parents.pop();
+  parents.shift(); // remove current node from the parents array
+
+  if (skipRoot) parents.pop(); // remove the root from the parents if skipping root
+
   parents.forEach(callback);
 };
-const walkAllNodeChildren = (node, callback, isFirst = true) => {
-  const { children = [] } = node;
+const walkAllNodeChildren = function (node, callback) {
+  let isFirst = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  const {
+    children = []
+  } = node;
   const shouldWalkChildren = children.length;
-  if (!isFirst)
-    callback(node);
+  if (!isFirst) callback(node);
+
   if (shouldWalkChildren) {
-    children.forEach((childNode) => {
+    children.forEach(childNode => {
       walkAllNodeChildren(childNode, callback, false);
     });
   }
 };
 const getNodeById = (treeRoot, id) => {
-  const nodes = treeRoot.all((node) => node.model.id === id);
+  const nodes = treeRoot.all(node => node.model.id === id);
   return nodes[0];
 };
 const cloneNode = (tree, node) => tree.parse(node.model);
-const itemsShareSameParent = (items = []) => {
-  if (items.length === 0)
-    throw new Error("Received empty items for comparison");
-  if (items.length === 1)
-    return true;
-  const firstExistingItem = items.find((item) => !!item);
-  if (!firstExistingItem)
-    throw new Error("Received no items, can't retrieve parent");
-  const firstExistingItemPath = firstExistingItem.node.getPath();
+const itemsShareSameParent = function () {
+  let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  if (items.length === 0) throw new Error('Received empty items for comparison');
+  if (items.length === 1) return true; // when moving in first position we receive [undefined,...{items}]
+  // when moving in last position we receive [...{items}, undefined]
+
+  const firstExistingItem = items.find(item => !!item);
+  if (!firstExistingItem) throw new Error("Received no items, can't retrieve parent");
+  const firstExistingItemPath = firstExistingItem.node.getPath(); // path is like [rootParent, ...[parentsNodes], currentNode]
+  // length -1 is the current-node
+  // length -2 is the parent-node
+  // root node is not printed and is always present so minimum path length is 2 (root + currentNode)
+
   const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];
-  return items.every((item) => {
-    if (!item)
-      return true;
+  return items.every(item => {
+    // undefined nodes count as having the same parent
+    if (!item) return true;
     const itemPath = item.node.getPath();
     const itemDirectParent = itemPath[itemPath.length - 2];
     return directParentNode === itemDirectParent;
   });
 };
-const getItemsParentNode = (items = [], skipSameParentCheck = false) => {
-  if (items.length === 0)
-    throw new Error("Received empty items, can't retrieve parent");
-  if (!skipSameParentCheck) {
-    if (!itemsShareSameParent(items))
-      throw new Error("Received items don't share the same parent, can't retrieve parent");
-  }
-  const firstExistingItem = items.find((item) => !!item);
-  if (!firstExistingItem)
-    throw new Error("Received no items, can't retrieve parent");
-  const firstExistingItemPath = firstExistingItem.node.getPath();
+const getItemsParentNode = function () {
+  let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let skipSameParentCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (items.length === 0) throw new Error("Received empty items, can't retrieve parent"); // in case we already know the items compared shares the same parent
+
+  if (!skipSameParentCheck) if (!itemsShareSameParent(items)) // if we don't know (default, we don't) check if they share the parent
+    throw new Error("Received items don't share the same parent, can't retrieve parent"); // when moving in first position we receive [undefined,...{items}]
+  // when moving in last position we receive [...{items}, undefined]
+
+  const firstExistingItem = items.find(item => !!item);
+  if (!firstExistingItem) throw new Error("Received no items, can't retrieve parent");
+  const firstExistingItemPath = firstExistingItem.node.getPath(); // path is like [rootParent, ...[parentsNodes], currentNode]
+  // length -1 is the current-node
+  // length -2 is the parent-node
+  // root node is not printed and is always present so minimum path length is 2 (root + currentNode)
+
   const directParentNode = firstExistingItemPath[firstExistingItemPath.length - 2];
   return directParentNode;
 };
-const getNodeMatchesSearchQuery = (node, searchQuery = "") => {
+const getNodeMatchesSearchQuery = function (node) {
+  let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   const standardizedName = standardizeSearchQueryString(node.model.name);
   const standardizedSearchQuery = standardizeSearchQueryString(searchQuery);
   return standardizedName.includes(standardizedSearchQuery);
 };
-const getChildrenMatchesSearchQuery = (parentNode, searchQuery = "") => {
+const getChildrenMatchesSearchQuery = function (parentNode) {
+  let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let anyChildMatch = false;
-  walkAllNodeChildren(parentNode, (node) => {
-    if (getNodeMatchesSearchQuery(node, searchQuery))
-      anyChildMatch = true;
+  walkAllNodeChildren(parentNode, node => {
+    if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;
   });
   return anyChildMatch;
 };
-const enrichNodeModelInPlace = (node, searchQuery = "", selection = null, expanded = null) => {
+/**
+ * Mutate in place a node from tree-model normalizing object properties like "isGroup" even if user didn't specify it explicitly,
+ * after execution the node will have "nodePath" "treeDepth" "nodeItemRef" "isGroup" "isExpanded"
+ * (optionally, based on the provided arguments) "matchesSearchQuery" "childrenMatchesSearchQuery" "isChecked"
+ *
+ * @param {Object} node - node (based on 'tree-model' lib) that you wish to mutate with extra props
+ * @param {string} [searchQuery=''] - optional string used to parse "matchesSearchQuery"/"childrenMatchesSearchQuery" properties
+ * @param {Object} [selection=null] - optional selection hashmap used to parse "isChecked" properties
+ * @param {Object} [expanded=null] - optional expanded hashmap used to parse "isExpanded" properties
+ */
+
+const enrichNodeModelInPlace = function (node) {
+  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;
+  let expanded = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
   const path = node.getPath();
   const depth = path.length - 1;
   node.model.nodePath = path;
   node.model.treeDepth = depth;
+
   if (!node.model.nodeItemRef) {
-    node.model.nodeItemRef = createRef();
-  }
-  if (typeof node.model.isGroup !== "boolean" && node.model?.children?.length > 0) {
+    node.model.nodeItemRef = /*#__PURE__*/createRef();
+  } // if a node has children but was not marked as isGroup, force-mark as group
+  // 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) {
     node.model.isGroup = true;
   }
-  if (node.model.isGroup && node.model.id !== "__ds_tree_root") {
-    if (expanded)
-      node.model.isExpanded = !!expanded[node.model.id];
-    else if (typeof node.model.isExpanded !== "boolean") {
+
+  if (node.model.isGroup && node.model.id !== '__ds_tree_root') {
+    if (expanded) node.model.isExpanded = !!expanded[node.model.id];else if (typeof node.model.isExpanded !== 'boolean') {
       node.model.isExpanded = false;
     }
   }
+
   node.model.matchesSearchQuery = true;
   node.model.childrenMatchesSearchQuery = false;
   const partiallyEnrichedNode = node;
+
   if (searchQuery) {
     partiallyEnrichedNode.model.matchesSearchQuery = getNodeMatchesSearchQuery(partiallyEnrichedNode, searchQuery);
+
     if (partiallyEnrichedNode.model.isGroup === true) {
       partiallyEnrichedNode.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(partiallyEnrichedNode, searchQuery);
-      if (partiallyEnrichedNode.model.childrenMatchesSearchQuery)
-        partiallyEnrichedNode.model.isExpanded = true;
+      if (partiallyEnrichedNode.model.childrenMatchesSearchQuery) partiallyEnrichedNode.model.isExpanded = true;
     }
   }
+
   if (selection && selection[partiallyEnrichedNode.model.id]) {
     partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];
   }
 };
-const focusItem = (item) => {
-  item?.nodeItemRef?.current?.focus();
-};
-export {
-  cloneNode,
-  enrichNodeModelInPlace,
-  focusItem,
-  getChildrenMatchesSearchQuery,
-  getItemsParentNode,
-  getNodeById,
-  getNodeMatchesSearchQuery,
-  itemsShareSameParent,
-  walkAllNodeChildren,
-  walkParents,
-  walkVisibles
+const focusItem = item => {
+  var _item$nodeItemRef, _item$nodeItemRef$cur;
+
+  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();
 };
-//# sourceMappingURL=tree-helpers.js.map
+
+export { cloneNode, enrichNodeModelInPlace, focusItem, getChildrenMatchesSearchQuery, getItemsParentNode, getNodeById, getNodeMatchesSearchQuery, itemsShareSameParent, walkAllNodeChildren, walkParents, walkVisibles };

package/esm/utils/useDnDHelpers.js

@@ -1,13 +1,22 @@
-import * as React from "react";
-import { useContext, useCallback } from "react";
-import { cloneDeep } from "lodash";
-import TreeViewContext, { defaultRelativeMouseCoord } from "../TreeViewContext";
-import { getNodeById, focusItem } from "./tree-helpers";
-import { inferHoverItemKinshipDrop, inferKeyboardKinshipDrop, isDropValid } from "./dnd-helpers";
+import 'core-js/modules/esnext.async-iterator.constructor.js';
+import 'core-js/modules/esnext.async-iterator.drop.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.drop.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useContext, useCallback } from 'react';
+import { cloneDeep } from 'lodash';
+import TreeViewContext, { defaultRelativeMouseCoord } from '../TreeViewContext.js';
+import { getNodeById, focusItem } from './tree-helpers.js';
+import { inferKeyboardKinshipDrop, inferHoverItemKinshipDrop, isDropValid } from './dnd-helpers.js';
+
 const useDnDHelpers = () => {
   const ctx = useContext(TreeViewContext);
   const {
-    props: { data, onOrderChange, restrictDragAndDrop },
+    props: {
+      data,
+      onOrderChange,
+      restrictDragAndDrop
+    },
     relativeMouseCord,
     setRelativeMouseCord,
     visibleItems,
@@ -22,19 +31,36 @@ const useDnDHelpers = () => {
     treeRoot,
     draggedItem
   } = ctx;
-  const onSortEnd = useCallback(({ oldIndex, newIndex, isKeySorting }) => {
-    const { isBefore, isAfter, item: overItem, isValid } = relativeMouseCord;
+  const onSortEnd = useCallback(_ref => {
+    let {
+      oldIndex,
+      newIndex,
+      isKeySorting
+    } = _ref;
+    const {
+      isBefore,
+      isAfter,
+      item: overItem,
+      isValid
+    } = relativeMouseCord;
+
     if (draggedItem && tree && treeRoot && overItem) {
-      let newItems = cloneDeep(data);
+      let newItems = 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;
-      }
-      const movementDirection = newIndex > oldIndex ? "topToBottom" : "bottomToTop";
+      } // if we are moving from topToBottom the offset changes
+
+
+      const movementDirection = newIndex > oldIndex ? 'topToBottom' : 'bottomToTop';
       let newNestedIndex;
       let newParentNode;
+
       if (isKeySorting) {
         const kinship = inferKeyboardKinshipDrop({
           items: visibleItems,
@@ -53,76 +79,94 @@ const useDnDHelpers = () => {
         newNestedIndex = kinship.newNestedIndex;
         newParentNode = kinship.newParentNode;
       }
+
       const newMovedItemNode = tree.parse(draggedItem.node.model);
       getNodeById(treeRoot, draggedItem.id).drop();
-      if (newParentNode && typeof newNestedIndex === "number") {
+
+      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 = useCallback(() => {
-  }, []);
-  const updateBeforeSortStart = useCallback((beforeStartArgs) => new Promise((resolve) => {
-    const { index, isKeySorting } = beforeStartArgs;
+  }, [data, draggedItem, relativeMouseCord, visibleItems, tree, treeRoot, onOrderChange, triggerTreeRerender, setIsDragging, setDraggedItem]);
+  const onSortStart = 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 = useCallback(beforeStartArgs => new Promise(resolve => {
+    const {
+      index,
+      isKeySorting
+    } = beforeStartArgs;
     const item = visibleItems[index];
-    const { isExpanded } = item.node.model;
+    const {
+      isExpanded
+    } = item.node.model;
+
     if (isExpanded) {
       item.node.model.isExpanded = false;
       triggerTreeRerender();
     }
+
     setRelativeMouseCord(defaultRelativeMouseCoord);
     setIsKeyboardDragging(isKeySorting);
     setIsDragging(true);
     setDraggedItem(item);
     focusItem(null);
     setFocusedItem(null);
-    if (document.activeElement && typeof document.activeElement.blur === "function")
-      document.activeElement.blur();
+    if (document.activeElement && typeof document.activeElement.blur === 'function') document.activeElement.blur();
     resolve(true);
-  }), [
-    visibleItems,
-    setRelativeMouseCord,
-    setIsKeyboardDragging,
-    setIsDragging,
-    setDraggedItem,
-    setFocusedItem,
-    triggerTreeRerender
-  ]);
-  const onMouseDragOverItem = useCallback(({
-    event,
-    item,
-    itemIndex,
-    setIsDraggingOverThis,
-    openFolderOnHoverTimeout
-  }) => {
-    const { node } = item;
-    const { nodeItemRef } = node.model;
+  }), [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 = useCallback(_ref2 => {
+    let {
+      event,
+      item,
+      itemIndex,
+      setIsDraggingOverThis,
+      openFolderOnHoverTimeout
+    } = _ref2;
+    const {
+      node
+    } = item;
+    const {
+      nodeItemRef
+    } = node.model;
+
     if (isDragging && !isKeyboardDragging && draggedItem) {
-      const rect = nodeItemRef?.current?.getBoundingClientRect();
+      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;
-        const y = event.clientY - rect.top;
-        const { height: elementHeight } = 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;
@@ -145,12 +189,16 @@ const useDnDHelpers = () => {
           relativeElementIndex: itemIndex
         });
         setIsDraggingOverThis(true);
-        if (!openFolderOnHoverTimeout?.current && draggedItem?.id !== item?.id && (item.isGroup || item.children.length > 0) && !restrictDragAndDrop) {
+
+        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();
-          }, 1e3);
+          }, 1000);
         }
       }
     } else {
@@ -164,7 +212,5 @@ const useDnDHelpers = () => {
     onMouseDragOverItem
   };
 };
-export {
-  useDnDHelpers
-};
-//# sourceMappingURL=useDnDHelpers.js.map
+
+export { useDnDHelpers };