@elliemae/ds-treeview 2.2.0-next.6 → 2.2.1

package/esm/parts/TreeList.js

@@ -8,13 +8,12 @@ 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 { useContext } from 'react';
+import { SortableContainer } from '@elliemae/react-sortable-hoc';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';
 import TreeViewContext from '../TreeViewContext.js';
 import { treeListBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
-import TreeItem from './TreeItem.js';
-import { withConditionalDnDRowContext } from '../hoc/WithConditionalDnDContext.js';
-import { DnDTreeContext } from '../hoc/DnDTreeContext.js';
+import { DragAndDropTreeItem, TreeItem } from './TreeItem.js';
 import { jsxs, jsx } 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; }
@@ -39,13 +38,16 @@ const TreeListWrapper = aggregatedClasses('ul', {
 });
 const compactRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-compact");
 const normaRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-normal");
-
-const TreeListComp = () => {
+const TreeList = props => {
+  const {
+    onMouseDragOverItem
+  } = props;
   const ctx = useContext(TreeViewContext);
   const {
     virtualListRef,
     virtualListHelpers,
-    visibleItems: flattenedVisibleItems,
+    visibleItems,
+    withDragAndDrop,
     props: {
       width,
       height,
@@ -59,9 +61,6 @@ const TreeListComp = () => {
     virtualItems
   } = virtualListHelpers;
   const className = "".concat(rowSize === 'compact' ? "".concat(compactRowClass) : "".concat(normaRowClass));
-  const {
-    visibleItems
-  } = useContext(DnDTreeContext);
   return /*#__PURE__*/jsxs(TreeListWrapper, {
     ref: virtualListRef,
     className: className,
@@ -96,17 +95,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),
@@ -117,11 +116,13 @@ const TreeListComp = () => {
         item,
         itemWrapperStyle: style
       };
+      if (withDragAndDrop) return /*#__PURE__*/jsx(DragAndDropTreeItem, _objectSpread(_objectSpread({}, listItemProps), {}, {
+        onMouseDragOverItem: onMouseDragOverItem
+      }));
       return /*#__PURE__*/jsx(TreeItem, _objectSpread({}, listItemProps));
     })) : null]
   });
 };
+const DragAndDropTreeList = SortableContainer(TreeList);
 
-const TreeList = withConditionalDnDRowContext(TreeListComp);
-
-export { TreeList, TreeListNoItems, TreeListWrapper, treeListNoItemsBn };
+export { DragAndDropTreeList, TreeList, TreeListNoItems, TreeListWrapper, treeListNoItemsBn };

package/esm/plugins/dnd/TreeDndPlugin.js

@@ -1,3 +1,35 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { DragAndDropTreeList } from '../../parts/TreeList.js';
+import { useDnDHelpers } from '../../utils/useDnDHelpers.js';
+import { keyCodes } from '../../utils/dnd-helpers.js';
+import TreeViewContext from '../../TreeViewContext.js';
+
+const TreeDnD = () => {
+  const {
+    updateBeforeSortStart,
+    onSortStart,
+    onMouseDragOverItem,
+    onSortEnd
+  } = useDnDHelpers();
+  const ctx = useContext(TreeViewContext);
+  const {
+    virtualListRef
+  } = ctx;
+  return /*#__PURE__*/_jsx(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: keyCodes
+  });
+};
 const TreeDndPlugin = 'tree-dnd';
 
-export { TreeDndPlugin };
+export { TreeDnD, TreeDndPlugin };

package/esm/plugins/dnd/index.js

@@ -1 +1 @@
-export { TreeDndPlugin } from './TreeDndPlugin.js';
+export { TreeDnD, TreeDndPlugin } from './TreeDndPlugin.js';

package/esm/plugins/index.js

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

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

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

package/esm/utils/dnd-helpers.js

@@ -0,0 +1,132 @@
+import { getItemsParentNode, itemsShareSameParent } from './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 = 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 = 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 = getItemsParentNode([itemBefore], true);
+    kinship.newNestedIndex = itemBefore.node.getIndex();
+  }
+
+  return kinship;
+};
+
+export { inferHoverItemKinshipDrop, inferKeyboardKinshipDrop, isDropValid, keyCodes, sameParentAsHoverItemDrop };

package/esm/utils/keyboard-helpers.js

@@ -15,13 +15,14 @@ import { toggleItemExpand, toggleExpandAllHelper } from './group-expands-helpers
 // 36 home
 // 56 number 8
 // 106 (NumPad) *
-const useOnItemKeyDown = (item, draggableProps) => {
+const useOnItemKeyDown = item => {
   const ctx = useContext(TreeViewContext);
   const {
     props: {
       onItemFocus
     },
     triggerTreeRerender,
+    isDragging,
     visibleItems,
     setFocusedItem,
     setSelectedItem,
@@ -50,12 +51,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) {
@@ -143,7 +142,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/esm/utils/tree-helpers.js

@@ -128,7 +128,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;
@@ -144,7 +144,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;
   }
 
@@ -176,30 +176,5 @@ 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;
-};
 
-export { cloneNode, enrichNodeModelInPlace, flattenTreeForDnD, focusItem, getChildrenMatchesSearchQuery, getItemsParentNode, getNodeById, getNodeMatchesSearchQuery, itemsShareSameParent, walkAllNodeChildren, walkParents, walkVisibles };
+export { cloneNode, enrichNodeModelInPlace, focusItem, getChildrenMatchesSearchQuery, getItemsParentNode, getNodeById, getNodeMatchesSearchQuery, itemsShareSameParent, walkAllNodeChildren, walkParents, walkVisibles };

package/esm/utils/useDnDHelpers.js

@@ -0,0 +1,216 @@
+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
+    },
+    relativeMouseCord,
+    setRelativeMouseCord,
+    visibleItems,
+    isDragging,
+    setIsDragging,
+    isKeyboardDragging,
+    setIsKeyboardDragging,
+    setDraggedItem,
+    setFocusedItem,
+    triggerTreeRerender,
+    tree,
+    treeRoot,
+    draggedItem
+  } = ctx;
+  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); // 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 = inferKeyboardKinshipDrop({
+          items: visibleItems,
+          newIndex
+        });
+        newNestedIndex = kinship.newNestedIndex;
+        newParentNode = kinship.newParentNode;
+      } else {
+        const kinship = inferHoverItemKinshipDrop({
+          isBefore,
+          isAfter,
+          overItem,
+          movementDirection,
+          draggedItem
+        });
+        newNestedIndex = kinship.newNestedIndex;
+        newParentNode = kinship.newParentNode;
+      }
+
+      const newMovedItemNode = tree.parse(draggedItem.node.model);
+      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 = 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;
+
+    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();
+    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 = 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 = 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(defaultRelativeMouseCoord);
+    }
+  }, [isDragging, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender]);
+  return {
+    updateBeforeSortStart,
+    onSortStart,
+    onSortEnd,
+    onMouseDragOverItem
+  };
+};
+
+export { useDnDHelpers };

package/esm/utils/useTree.js

@@ -8,7 +8,7 @@ import 'core-js/modules/web.dom-collections.iterator.js';
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import TreeModel from 'tree-model';
 import { cloneDeep } from 'lodash';
-import { enrichNodeModelInPlace, walkVisibles, flattenTreeForDnD } from './tree-helpers.js';
+import { enrichNodeModelInPlace, walkVisibles } from './tree-helpers.js';
 import { updateExpandedState } from './group-expands-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; }
@@ -67,9 +67,9 @@ const useTree = (data, props, states) => {
   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
+
       enrichNodeModelInPlace(node, searchQuery, selection, expanded);
       if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;
       return shouldContinueWalking;
@@ -84,10 +84,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 = useMemo(() => flattenTreeForDnD(data), [data]);
   return {
     visibleItems,
-    flattenedItems,
     tree,
     treeRoot,
     rerenderItems,