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

package/cjs/utils/tree-helpers.js

@@ -1,164 +1,194 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var tree_helpers_exports = {};
-__export(tree_helpers_exports, {
-  cloneNode: () => cloneNode,
-  enrichNodeModelInPlace: () => enrichNodeModelInPlace,
-  focusItem: () => focusItem,
-  getChildrenMatchesSearchQuery: () => getChildrenMatchesSearchQuery,
-  getItemsParentNode: () => getItemsParentNode,
-  getNodeById: () => getNodeById,
-  getNodeMatchesSearchQuery: () => getNodeMatchesSearchQuery,
-  itemsShareSameParent: () => itemsShareSameParent,
-  walkAllNodeChildren: () => walkAllNodeChildren,
-  walkParents: () => walkParents,
-  walkVisibles: () => walkVisibles
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_string_helpers = __toESM(require("./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";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.every.js');
+require('core-js/modules/esnext.iterator.every.js');
+var React = require('react');
+var stringHelpers = require('./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 standardizedName = (0, import_string_helpers.standardizeSearchQueryString)(node.model.name);
-  const standardizedSearchQuery = (0, import_string_helpers.standardizeSearchQueryString)(searchQuery);
+const getNodeMatchesSearchQuery = function (node) {
+  let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const standardizedName = stringHelpers.standardizeSearchQueryString(node.model.name);
+  const standardizedSearchQuery = stringHelpers.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 = (0, import_react.createRef)();
-  }
-  if (typeof node.model.isGroup !== "boolean" && node.model?.children?.length > 0) {
+    node.model.nodeItemRef = /*#__PURE__*/React.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();
+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();
 };
-module.exports = __toCommonJS(tree_helpers_exports);
-//# sourceMappingURL=tree-helpers.js.map
+
+exports.cloneNode = cloneNode;
+exports.enrichNodeModelInPlace = enrichNodeModelInPlace;
+exports.focusItem = focusItem;
+exports.getChildrenMatchesSearchQuery = getChildrenMatchesSearchQuery;
+exports.getItemsParentNode = getItemsParentNode;
+exports.getNodeById = getNodeById;
+exports.getNodeMatchesSearchQuery = getNodeMatchesSearchQuery;
+exports.itemsShareSameParent = itemsShareSameParent;
+exports.walkAllNodeChildren = walkAllNodeChildren;
+exports.walkParents = walkParents;
+exports.walkVisibles = walkVisibles;

package/cjs/utils/useDnDHelpers.js

@@ -1,44 +1,26 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var useDnDHelpers_exports = {};
-__export(useDnDHelpers_exports, {
-  useDnDHelpers: () => useDnDHelpers
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_lodash = __toESM(require("lodash"));
-var import_TreeViewContext = __toESM(require("../TreeViewContext"));
-var import_tree_helpers = __toESM(require("./tree-helpers"));
-var import_dnd_helpers = __toESM(require("./dnd-helpers"));
+'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 = (0, import_react.useContext)(import_TreeViewContext.default);
+  const ctx = React.useContext(TreeViewContext["default"]);
   const {
-    props: { data, onOrderChange, restrictDragAndDrop },
+    props: {
+      data,
+      onOrderChange,
+      restrictDragAndDrop
+    },
     relativeMouseCord,
     setRelativeMouseCord,
     visibleItems,
@@ -53,28 +35,45 @@ const useDnDHelpers = () => {
     treeRoot,
     draggedItem
   } = ctx;
-  const onSortEnd = (0, import_react.useCallback)(({ oldIndex, newIndex, isKeySorting }) => {
-    const { isBefore, isAfter, item: overItem, isValid } = relativeMouseCord;
+  const onSortEnd = React.useCallback(_ref => {
+    let {
+      oldIndex,
+      newIndex,
+      isKeySorting
+    } = _ref;
+    const {
+      isBefore,
+      isAfter,
+      item: overItem,
+      isValid
+    } = relativeMouseCord;
+
     if (draggedItem && tree && treeRoot && overItem) {
-      let newItems = (0, import_lodash.cloneDeep)(data);
+      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;
-      }
-      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 = (0, import_dnd_helpers.inferKeyboardKinshipDrop)({
+        const kinship = dndHelpers.inferKeyboardKinshipDrop({
           items: visibleItems,
           newIndex
         });
         newNestedIndex = kinship.newNestedIndex;
         newParentNode = kinship.newParentNode;
       } else {
-        const kinship = (0, import_dnd_helpers.inferHoverItemKinshipDrop)({
+        const kinship = dndHelpers.inferHoverItemKinshipDrop({
           isBefore,
           isAfter,
           overItem,
@@ -84,81 +83,99 @@ const useDnDHelpers = () => {
         newNestedIndex = kinship.newNestedIndex;
         newParentNode = kinship.newParentNode;
       }
+
       const newMovedItemNode = tree.parse(draggedItem.node.model);
-      (0, import_tree_helpers.getNodeById)(treeRoot, draggedItem.id).drop();
-      if (newParentNode && typeof newNestedIndex === "number") {
+      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 = (0, import_react.useCallback)(() => {
-  }, []);
-  const updateBeforeSortStart = (0, import_react.useCallback)((beforeStartArgs) => new Promise((resolve) => {
-    const { index, isKeySorting } = beforeStartArgs;
+  }, [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;
+    const {
+      isExpanded
+    } = item.node.model;
+
     if (isExpanded) {
       item.node.model.isExpanded = false;
       triggerTreeRerender();
     }
-    setRelativeMouseCord(import_TreeViewContext.defaultRelativeMouseCoord);
+
+    setRelativeMouseCord(TreeViewContext.defaultRelativeMouseCoord);
     setIsKeyboardDragging(isKeySorting);
     setIsDragging(true);
     setDraggedItem(item);
-    (0, import_tree_helpers.focusItem)(null);
+    treeHelpers.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 = (0, import_react.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 = React.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;
         const isAfter = y > dropAfterMinY;
-        const isValid = (0, import_dnd_helpers.isDropValid)({
+        const isValid = dndHelpers.isDropValid({
           isBefore,
           isAfter,
           draggedItem,
@@ -176,16 +193,20 @@ 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 {
-      setRelativeMouseCord(import_TreeViewContext.defaultRelativeMouseCoord);
+      setRelativeMouseCord(TreeViewContext.defaultRelativeMouseCoord);
     }
   }, [isDragging, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender]);
   return {
@@ -195,5 +216,5 @@ const useDnDHelpers = () => {
     onMouseDragOverItem
   };
 };
-module.exports = __toCommonJS(useDnDHelpers_exports);
-//# sourceMappingURL=useDnDHelpers.js.map
+
+exports.useDnDHelpers = useDnDHelpers;