@elliemae/ds-treeview 2.3.0-alpha.9 → 2.3.0-next.3

package/esm/utils/object-helpers.js

@@ -0,0 +1,64 @@
+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/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+
+/* eslint-disable no-sequences */
+
+/* eslint-disable no-return-assign */
+
+/* eslint-disable no-restricted-syntax */
+
+/* eslint-disable guard-for-in */
+function isObjectADate(o) {
+  var _o$constructor;
+
+  return (o === null || o === void 0 ? void 0 : (_o$constructor = o.constructor) === null || _o$constructor === void 0 ? void 0 : _o$constructor.name) === 'Date';
+}
+
+function isObjectAnArray(o) {
+  return Array.isArray(o);
+}
+
+function isObjectAString(o) {
+  return typeof o === 'object';
+}
+
+const unfreeze = o => {
+  let oo;
+
+  if (o === null) {
+    oo = null;
+  } else if (o === undefined) {
+    oo = undefined;
+  } else if (isObjectADate(o)) {
+    oo = new Date(o);
+  } else if (isObjectAnArray(o)) {
+    oo = [];
+    o.forEach(v => {
+      oo.push(v);
+    });
+  } else if (isObjectAString(o)) {
+    oo = String(o);
+  } else if (isObjectAString(o)) {
+    oo = {};
+
+    for (const property in o) {
+      oo[property] = o[property];
+    }
+  } else {
+    oo = o;
+  }
+
+  return oo;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function filterObject(obj, predicate) {
+  return Object.keys(obj).reduce((res, key) => {
+    if (predicate(obj[key])) res[key] = obj[key];
+    return res;
+  }, {});
+}
+
+export { filterObject, unfreeze };

package/esm/utils/refs-helpers.js

@@ -0,0 +1,27 @@
+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';
+
+// allow multiple refs to be set to point to the same DOM element
+const setMultipleRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  const filteredRefs = refs.filter(Boolean);
+  if (!filteredRefs.length) return () => {};
+  if (filteredRefs.length === 0) return () => {};
+  return newRef => {
+    filteredRefs.forEach(refToBeUpdated => {
+      if (typeof refToBeUpdated === 'function') {
+        refToBeUpdated(newRef);
+      } else if (refToBeUpdated) {
+        refToBeUpdated.current = newRef;
+      }
+    });
+  };
+};
+
+export { setMultipleRefs };

package/esm/utils/selectable-helper.js

@@ -0,0 +1,70 @@
+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 => {
+    const {
+      model: {
+        isChecked
+      }
+    } = childNode;
+    if (isChecked === 'mixed' || isChecked === true) anyChildChecked = true;else childAllChecked = false;
+  });
+  if (childAllChecked) return true;
+  if (anyChildChecked) return 'mixed';
+  return false;
+};
+const selectCheckboxItemModelParentsTillRoot = function (modelToCheck) {
+  let triggerTreeRerender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  const newSelections = {};
+  const {
+    nodePath
+  } = modelToCheck;
+  walkParents(nodePath, parentNode => {
+    const nextState = getGroupCheckState(parentNode);
+    parentNode.model.isChecked = nextState;
+    newSelections[parentNode.model.id] = nextState;
+  });
+  if (triggerTreeRerender) triggerTreeRerender();
+  return newSelections;
+};
+const toggleCheckboxItem = function (itemToSelect) {
+  let triggerTreeRerender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  const {
+    node: {
+      model: {
+        id,
+        isChecked,
+        children = []
+      }
+    }
+  } = itemToSelect;
+  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 => {
+      childNode.model.isChecked = nextState;
+      newSelections[childNode.model.id] = nextState;
+    });
+  }
+
+  const parentsNewSelections = selectCheckboxItemModelParentsTillRoot(itemToSelect);
+  if (triggerTreeRerender) triggerTreeRerender();
+  return _objectSpread(_objectSpread({}, parentsNewSelections), newSelections);
+};
+
+export { getGroupCheckState, selectCheckboxItemModelParentsTillRoot, toggleCheckboxItem };

package/esm/utils/string-helpers.js

@@ -0,0 +1,3 @@
+const standardizeSearchQueryString = input => input.trim().toLowerCase();
+
+export { standardizeSearchQueryString };

package/esm/utils/tree-helpers.js

@@ -0,0 +1,205 @@
+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);
+  const shouldWalkChildren = !!(children.length > 0 && isExpanded && queryRestrictionsPassed);
+
+  if (shouldWalkChildren) {
+    children.forEach(childNode => {
+      walkVisibles(childNode, callback, skipRoot, highlightOnlyQuery);
+    });
+  }
+};
+const walkParents = function (nodePath, callback) {
+  let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  const parents = [...nodePath].reverse();
+  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 = 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 (shouldWalkChildren) {
+    children.forEach(childNode => {
+      walkAllNodeChildren(childNode, callback, false);
+    });
+  }
+};
+const getNodeById = (treeRoot, id) => {
+  const nodes = treeRoot.all(node => node.model.id === id);
+  return nodes[0];
+};
+const cloneNode = (tree, node) => tree.parse(node.model);
+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 => {
+    // 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 = 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 = 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 = function (parentNode) {
+  let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let anyChildMatch = false;
+  walkAllNodeChildren(parentNode, node => {
+    if (getNodeMatchesSearchQuery(node, searchQuery)) anyChildMatch = true;
+  });
+  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$children$, _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 = /*#__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$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) {
+    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') {
+      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 (selection && selection[partiallyEnrichedNode.model.id]) {
+    partiallyEnrichedNode.model.isChecked = selection[partiallyEnrichedNode.model.id];
+  }
+};
+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();
+};
+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 };

package/{dist/esm → esm}/utils/useInstanceRefActions.js

@@ -1,10 +1,16 @@
-import * as React from "react";
-import { useEffect, useMemo, useState, useRef, useCallback } from "react";
-import { focusItem } from "./tree-helpers";
-import { toggleExpandAllHelper } from "./group-expands-helpers";
-const useInstanceRefActions = ({ actions }, ctx) => {
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { focusItem } from './tree-helpers.js';
+import { toggleExpandAllHelper } from './group-expands-helpers.js';
+
+const useInstanceRefActions = (_ref, ctx) => {
+  let {
+    actions
+  } = _ref;
   const {
-    props: { onItemFocus },
+    props: {
+      onItemFocus
+    },
     virtualListHelpers,
     treeRoot,
     visibleItems,
@@ -14,8 +20,12 @@ const useInstanceRefActions = ({ actions }, ctx) => {
     setFocusedItem,
     setLatestToggledItem
   } = ctx;
-  const { current: promises } = useRef({});
-  const { scrollToIndex } = useMemo(() => virtualListHelpers, [virtualListHelpers]);
+  const {
+    current: promises
+  } = useRef({});
+  const {
+    scrollToIndex
+  } = useMemo(() => virtualListHelpers, [virtualListHelpers]);
   const [expandPromise, setPromise] = useState();
   useEffect(() => {
     if (expandPromise && promises.expandResolve) {
@@ -24,30 +34,36 @@ const useInstanceRefActions = ({ actions }, ctx) => {
       setPromise(null);
     }
   }, [visibleItems, expandPromise, promises]);
-  actions.toggleExpandAll = useCallback((isExpand) => {
-    const p = new Promise((resolve) => {
+  actions.toggleExpandAll = useCallback(isExpand => {
+    const p = new Promise(resolve => {
       promises.expandResolve = resolve;
-      if (treeRoot)
-        toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
+      if (treeRoot) toggleExpandAllHelper(isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
     });
     setPromise(p);
     return p;
   }, [promises, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState]);
-  actions.scrollTo = useCallback((indx, opts = { align: "start" }) => {
-    if (scrollToIndex)
-      scrollToIndex(indx, opts);
+  actions.scrollTo = useCallback(function (indx) {
+    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      align: 'start'
+    };
+    if (scrollToIndex) scrollToIndex(indx, opts);
   }, [scrollToIndex]);
-  actions.setSelectedItemByVirtualIndex = useCallback((index) => {
+  actions.setSelectedItemByVirtualIndex = useCallback(index => {
     const itemByIndex = visibleItems[index];
     setSelectedItem(itemByIndex);
   }, [visibleItems, setSelectedItem]);
-  actions.setFocusedItemByVirtualIndex = useCallback((index, opts = { align: "start", withScroll: false }) => {
+  actions.setFocusedItemByVirtualIndex = useCallback(function (index) {
+    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      align: 'start',
+      withScroll: false
+    };
     const itemByIndex = visibleItems[index];
     const onItemFocusParams = {
       itemIndex: itemByIndex.virtualIndex,
       scrollToItem: () => scrollToIndex(index, opts),
       item: itemByIndex
     };
+
     if (opts.withScroll && scrollToIndex) {
       scrollToIndex(index, opts);
       setTimeout(() => {
@@ -63,7 +79,5 @@ const useInstanceRefActions = ({ actions }, ctx) => {
   }, [visibleItems, scrollToIndex, setFocusedItem, onItemFocus]);
   return actions;
 };
-export {
-  useInstanceRefActions
-};
-//# sourceMappingURL=useInstanceRefActions.js.map
+
+export { useInstanceRefActions };

package/esm/utils/useTree.js

@@ -0,0 +1,99 @@
+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 '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 { 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; }
+
+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 useTree = (data, props, states) => {
+  const {
+    setExpandedGroups
+  } = states;
+  const unfrozenData = useMemo(() => 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 = useMemo(() => new TreeModel(), []);
+  const [treeData, setTreeData] = useState({
+    id: '__ds_tree_root',
+    name: '__root',
+    isExpanded: true,
+    children: unfrozenData
+  });
+  useEffect(() => {
+    setTreeData({
+      id: '__ds_tree_root',
+      name: '__root',
+      isExpanded: true,
+      children: unfrozenData
+    });
+  }, [unfrozenData]); // expose a way to rerender the tree
+  //   used for expand functionality
+
+  const [rerenderItems, setRerenderItems] = useState({});
+  const triggerTreeRerender = useCallback(() => {
+    setRerenderItems({});
+  }, []); // when re-rendering we re-parse the list
+
+  const [treeRoot, setTreeRoot] = useState(tree.parse(treeData));
+  useEffect(() => {
+    setTreeRoot(tree.parse(treeData));
+  }, [treeData, rerenderItems, tree]);
+  const [visibleItems, setVisibleItems] = useState([]);
+  const {
+    searchQuery,
+    highlightOnlyQuery,
+    onVisibleItemsChange,
+    selection,
+    expanded,
+    onExpandChange
+  } = props;
+  const updateUserExpandedState = useCallback(() => {
+    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
+
+  useEffect(() => {
+    const parsedVisibleItems = [];
+    const newExpandedHashMap = {};
+    const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
+
+    treeRoot.walk(node => {
+      enrichNodeModelInPlace(node, searchQuery, selection, expanded);
+      if (node.model.id && node.model.isGroup && node.model.isExpanded) newExpandedHashMap[node.model.id] = true;
+      return shouldContinueWalking;
+    });
+    walkVisibles(treeRoot, node => {
+      parsedVisibleItems.push(_objectSpread(_objectSpread({}, node.model), {}, {
+        node
+      }));
+    }, true, highlightOnlyQuery);
+    setVisibleItems(parsedVisibleItems);
+    onVisibleItemsChange(parsedVisibleItems);
+    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,
+    triggerTreeRerender,
+    updateUserExpandedState
+  };
+};
+
+export { useTree };