@elliemae/ds-treeview 2.0.1 → 2.1.0-rc.3

package/cjs/utils/tree-helpers.js

@@ -27,9 +27,9 @@ const walkVisibles = function (node, callback) {
     matchesSearchQuery
   } = model;
   const shouldSkipBecauseIsRoot = skipRoot && name === '__root';
-  const queryRestrictionsPassed = highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery;
+  const queryRestrictionsPassed = !!(highlightOnlyQuery || childrenMatchesSearchQuery || matchesSearchQuery);
   if (!shouldSkipBecauseIsRoot && queryRestrictionsPassed) callback(node);
-  const shouldWalkChildren = children.length && isExpanded && queryRestrictionsPassed;
+  const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);
 
   if (shouldWalkChildren) {
     children.forEach(childNode => {
@@ -65,13 +65,10 @@ const getNodeById = (treeRoot, id) => {
   return nodes[0];
 };
 const cloneNode = (tree, node) => tree.parse(node.model);
-const getItemsParentNode = function () {
+const itemsShareSameParent = 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}]
+  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);
@@ -82,12 +79,21 @@ const getItemsParentNode = function () {
   // 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;
+  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 itemsShareSameParent = function () {
+const getItemsParentNode = 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}]
+  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);
@@ -98,13 +104,7 @@ const itemsShareSameParent = function () {
   // 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 => {
-    // 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;
-  });
+  return directParentNode;
 };
 const getNodeMatchesSearchQuery = function (node) {
   let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -120,11 +120,23 @@ const getChildrenMatchesSearchQuery = function (parentNode) {
   });
   return anyChildMatch;
 };
+/**
+ * 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;
@@ -140,24 +152,27 @@ const enrichNodeModelInPlace = function (node) {
     node.model.isGroup = true;
   }
 
-  if (typeof node.model.isExpanded !== 'boolean') {
-    node.model.isExpanded = false;
+  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) {
-    node.model.matchesSearchQuery = getNodeMatchesSearchQuery(node, searchQuery);
+    partiallyEnrichedNode.model.matchesSearchQuery = getNodeMatchesSearchQuery(partiallyEnrichedNode, searchQuery);
 
-    if (node.model.isGroup === true) {
-      node.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(node, searchQuery);
-      if (node.model.childrenMatchesSearchQuery) node.model.isExpanded = true;
+    if (partiallyEnrichedNode.model.isGroup === true) {
+      partiallyEnrichedNode.model.childrenMatchesSearchQuery = getChildrenMatchesSearchQuery(partiallyEnrichedNode, searchQuery);
+      if (partiallyEnrichedNode.model.childrenMatchesSearchQuery) partiallyEnrichedNode.model.isExpanded = true;
     }
   }
 
-  if (selection && selection[node.model.id]) {
-    node.model.isChecked = selection[node.model.id];
+  if (selection && selection[partiallyEnrichedNode.model.id]) {
+    partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];
   }
 };
 const focusItem = item => {

package/cjs/utils/useDnDHelpers.js

@@ -41,63 +41,68 @@ const useDnDHelpers = () => {
       newIndex,
       isKeySorting
     } = _ref;
-    let newItems = lodash.cloneDeep(data);
     const {
       isBefore,
       isAfter,
       item: overItem,
       isValid
-    } = relativeMouseCord; // if dropping in same position do nothing
-    // if the drop is not allowed do nothing
+    } = 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 (oldIndex === newIndex || !isValid) {
-      // onOrderChange(newItems, data);
+        if (newParentNode.isRoot()) {
+          newItems = [...newParentNode.model.children];
+        } else {
+          newItems = [...treeRoot.model.children];
+        }
+      }
+
+      onOrderChange(newItems, data, draggedItem);
       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,
-        movementDirection
-      });
-      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();
-    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, setRelativeMouseCord]);
+  }, [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);
@@ -110,10 +115,9 @@ const useDnDHelpers = () => {
   const updateBeforeSortStart = React.useCallback(beforeStartArgs => new Promise(resolve => {
     const {
       index,
-      collection,
       isKeySorting
     } = beforeStartArgs;
-    const item = (collection === null || collection === void 0 ? void 0 : collection[index]) || visibleItems[index];
+    const item = visibleItems[index];
     const {
       isExpanded
     } = item.node.model;
@@ -129,9 +133,9 @@ const useDnDHelpers = () => {
     setDraggedItem(item);
     treeHelpers.focusItem(null);
     setFocusedItem(null);
-    document.activeElement.blur();
-    resolve();
-  }), [visibleItems, isKeyboardDragging, setFocusedItem, setIsKeyboardDragging, setRelativeMouseCord]); // tracks mouse coords relative to an element to check if the drop happens
+    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
 
@@ -150,58 +154,61 @@ const useDnDHelpers = () => {
       nodeItemRef
     } = node.model;
 
-    if (isDragging && !isKeyboardDragging) {
-      const rect = nodeItemRef.current.getBoundingClientRect();
-      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 isInside = !isBefore && !isAfter;
-      const isValid = dndHelpers.isDropValid({
-        isBefore,
-        isAfter,
-        draggedItem,
-        overItem: item,
-        restrictDragAndDrop
-      });
-      setRelativeMouseCord({
-        isBefore,
-        isAfter,
-        isInside,
-        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);
+    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, setRelativeMouseCord, draggedItem, restrictDragAndDrop, isKeyboardDragging]);
+  }, [isDragging, isKeyboardDragging, draggedItem, restrictDragAndDrop, setRelativeMouseCord, triggerTreeRerender]);
   return {
     updateBeforeSortStart,
     onSortStart,

package/cjs/utils/useInstanceRefActions.js

@@ -19,6 +19,7 @@ const useInstanceRefActions = (_ref, ctx) => {
     treeRoot,
     visibleItems,
     triggerTreeRerender,
+    updateUserExpandedState,
     setSelectedItem,
     setFocusedItem,
     setLatestToggledItem
@@ -40,11 +41,11 @@ const useInstanceRefActions = (_ref, ctx) => {
   actions.toggleExpandAll = React.useCallback(isExpand => {
     const p = new Promise(resolve => {
       promises.expandResolve = resolve;
-      groupExpandsHelpers.toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem);
+      if (treeRoot) groupExpandsHelpers.toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
     });
     setPromise(p);
     return p;
-  }, [promises, treeRoot, triggerTreeRerender, setLatestToggledItem]);
+  }, [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState]);
   actions.scrollTo = React.useCallback(function (indx) {
     let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       align: 'start'

package/cjs/utils/useTree.js

@@ -13,29 +13,34 @@ var React = require('react');
 var TreeModel = require('tree-model');
 var lodash = require('lodash');
 var treeHelpers = require('./tree-helpers.js');
+var groupExpandsHelpers = require('./group-expands-helpers.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var TreeModel__default = /*#__PURE__*/_interopDefaultLegacy(TreeModel);
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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__default["default"](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 useTree = (data, props, states) => {
   const {
     setExpandedGroups
   } = states;
   const unfrozenData = React.useMemo(() => lodash.cloneDeep(data), [data]); // convert data into a TreeModel with extra isExpanded prop
+  // root element type is an exception, children model is based on what the dev passed on
+  // since root is an excepcion we must typecast
 
   const tree = React.useMemo(() => new TreeModel__default["default"](), []);
   const [treeData, setTreeData] = React.useState({
+    id: '__ds_tree_root',
     name: '__root',
     isExpanded: true,
     children: unfrozenData
   });
   React.useEffect(() => {
     setTreeData({
+      id: '__ds_tree_root',
       name: '__root',
       isExpanded: true,
       children: unfrozenData
@@ -51,20 +56,32 @@ const useTree = (data, props, states) => {
   const [treeRoot, setTreeRoot] = React.useState(tree.parse(treeData));
   React.useEffect(() => {
     setTreeRoot(tree.parse(treeData));
-  }, [treeData, rerenderItems]);
+  }, [treeData, rerenderItems, tree]);
   const [visibleItems, setVisibleItems] = React.useState([]);
   const {
     searchQuery,
     highlightOnlyQuery,
     onVisibleItemsChange,
-    selection
+    selection,
+    expanded,
+    onExpandChange
   } = props;
+  const updateUserExpandedState = React.useCallback(() => {
+    groupExpandsHelpers.updateExpandedState(treeRoot, onExpandChange);
+  }, [treeRoot, onExpandChange]); // we add missing properties to the received Items
+  //   not the best of the patterns, but it works
+  //   this is where we convert "SimpleItems" to "Items"
+  //   this was done to avoid breaking changes back in v1
+
   React.useEffect(() => {
     const parsedVisibleItems = [];
     const newExpandedHashMap = {};
     treeRoot.walk(node => {
-      treeHelpers.enrichNodeModelInPlace(node, searchQuery, selection);
+      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;
     });
     treeHelpers.walkVisibles(treeRoot, node => {
       parsedVisibleItems.push(_objectSpread(_objectSpread({}, node.model), {}, {
@@ -73,14 +90,16 @@ const useTree = (data, props, states) => {
     }, true, highlightOnlyQuery);
     setVisibleItems(parsedVisibleItems);
     onVisibleItemsChange(parsedVisibleItems);
-    setExpandedGroups(newExpandedHashMap);
-  }, [treeRoot, rerenderItems, searchQuery]);
+    setExpandedGroups(newExpandedHashMap); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treeRoot, rerenderItems, searchQuery, highlightOnlyQuery, selection, expanded, setExpandedGroups // onVisibleItemsChange // evaluate potential performance hit?
+  ]);
   return {
     visibleItems,
     tree,
     treeRoot,
     rerenderItems,
-    triggerTreeRerender
+    triggerTreeRerender,
+    updateUserExpandedState
   };
 };
 

package/esm/TreeView.js

@@ -1,121 +1,24 @@
-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 'core-js/modules/web.dom-collections.iterator.js';
-import { useRef, useState, useEffect } from 'react';
-import { useVirtual } from 'react-virtual';
-import { v4 } from 'uuid';
+import 'react';
 import { describe } from 'react-desc';
 import { TreeViewPropTypes } from './react-desc-prop-types.js';
-import TreeViewContext, { defaultRelativeMouseCoord, defaultProps } from './TreeViewContext.js';
+import TreeViewContext from './TreeViewContext.js';
 import { TreeDndPlugin, TreeDnD } from './plugins/dnd/TreeDndPlugin.js';
-import { useTree } from './utils/useTree.js';
+import { useTreeview } from './config/useTreeview.js';
 import { TreeList } from './parts/TreeList.js';
-import { useNotifyExpandedChange } from './utils/group-expands-helpers.js';
-import { useInstanceRefActions } from './utils/useInstanceRefActions.js';
-import { useGlobalToggleAllExpandShortcut } from './utils/keyboard-helpers.js';
 
 var _TreeDnD, _TreeList;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function TreeView(props) {
-  const treeRef = useRef({
-    actions: {}
-  });
   const {
-    data,
-    plugins,
-    onOrderChange,
-    isMultiSelect,
-    isSingleSelect,
-    instanceRef,
-    selection
+    plugins
   } = props;
-  const [isDragging, setIsDragging] = useState(false);
-  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
-  const [draggedItem, setDraggedItem] = useState(null);
-  const [hoverItem, setHoverItem] = useState(null);
-  const [relativeMouseCord, setRelativeMouseCord] = useState(defaultRelativeMouseCoord);
-  const [uniqueTreeViewUUID] = useState(v4());
-  const [latestToggledItem, setLatestToggledItem] = useState(null);
-  const [selectedItem, setSelectedItem] = useState(null);
-  const [focusedItem, setFocusedItem] = useState(null);
-  const [selectedCheckboxes, setSelectedCheckboxes] = useState(_objectSpread({}, selection));
-  const [expandedGroups, setExpandedGroups] = useState({});
   const {
-    visibleItems,
-    tree,
-    treeRoot,
-    triggerTreeRerender
-  } = useTree(data, props, {
-    setExpandedGroups
-  });
-  const virtualListRef = useRef(); // estimateSize should not be really required given what was stated on
-  // https://github.com/tannerlinsley/react-virtual/issues/23
-
-  const virtualListHelpers = useVirtual({
-    size: visibleItems.length,
-    parentRef: virtualListRef,
-    overscan: 15
-  });
-  const withDragAndDrop = (plugins === null || plugins === void 0 ? void 0 : plugins.includes(TreeDndPlugin)) && onOrderChange;
-  const withRadioChecks = isSingleSelect && !isMultiSelect;
-  const withCheckboxChecks = !isSingleSelect && isMultiSelect;
-  const ctx = {
-    props,
-    setRelativeMouseCord,
-    relativeMouseCord,
-    virtualListHelpers,
-    virtualListRef,
-    tree,
-    treeRoot,
-    visibleItems,
-    triggerTreeRerender,
-    isDragging,
-    setIsDragging,
-    isKeyboardDragging,
-    setIsKeyboardDragging,
-    draggedItem,
-    setDraggedItem,
-    withRadioChecks,
-    withCheckboxChecks,
-    withDragAndDrop,
-    uniqueTreeViewUUID,
-    selectedCheckboxes,
-    setSelectedCheckboxes,
-    selectedItem,
-    setSelectedItem,
-    expandedGroups,
-    setExpandedGroups,
-    latestToggledItem,
-    setLatestToggledItem,
-    focusedItem,
-    setFocusedItem,
-    hoverItem,
-    setHoverItem
-  }; // 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;
-  useInstanceRefActions(treeRef.current, ctx);
-  useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem);
-  useNotifyExpandedChange(props, ctx);
-  useEffect(() => {
-    setTimeout(() => {
-      ctx.props.onInstanceRefInitialized(treeRef);
-    }, 100);
-  }, []);
+    ctx
+  } = useTreeview(props);
   return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
     value: ctx
   }, void 0, plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin) ? _TreeDnD || (_TreeDnD = /*#__PURE__*/_jsx(TreeDnD, {})) : _TreeList || (_TreeList = /*#__PURE__*/_jsx(TreeList, {})));
 }
-TreeView.defaultProps = defaultProps;
 const TreeViewWithSchema = describe(TreeView);
 TreeViewWithSchema.propTypes = TreeViewPropTypes;