@elliemae/ds-treeview 2.0.2 → 2.1.0-rc.4

package/esm/related-components/TreeViewSearchBar.js

@@ -27,6 +27,14 @@ function TreeViewSearchBar(props) {
     totalResults: totalResults,
     value: value
   });
-}
+} // TreeViewSearchBar.propTypes = {
+//   value: PropTypes.string.isRequired,
+//   handleChange: PropTypes.func.isRequired,
+//   onNext: PropTypes.func.isRequired,
+//   onPrevious: PropTypes.func.isRequired,
+//   onClear: PropTypes.func.isRequired,
+//   currentResultIndex: PropTypes.number.isRequired,
+//   totalResults: PropTypes.number.isRequired,
+// };
 
 export { TreeViewSearchBar };

package/esm/utils/dnd-helpers.js

@@ -111,11 +111,9 @@ const isDropValid = _ref3 => {
 const inferKeyboardKinshipDrop = _ref4 => {
   let {
     items,
-    newIndex // movementDirection,
-
+    newIndex
   } = _ref4;
-  const kinship = {}; // const directionOffset = movementDirection === 'topToBottom' ? 0 : 0;
-
+  const kinship = {};
   const itemBefore = items[newIndex];
   const itemBeforeModel = itemBefore.node.model;
   const isGroupAndIsExpanded = itemBeforeModel.isExpanded && itemBeforeModel.children.length > 0;

package/esm/utils/group-expands-helpers.js

@@ -1,8 +1,22 @@
 import { useCallback, useEffect } from 'react';
 
 /* eslint-disable max-params */
-const toggleItemExpand = function (itemToToggle, triggerTreeRerender) {
-  let scrollTo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => {};
+const updateExpandedState = (treeRoot, onExpandChange) => {
+  const shouldContinueWalking = true;
+  const newExpandedHashMap = {
+    __ds_tree_root: true
+  };
+  treeRoot.walk(node => {
+    if (!node.isRoot() && node.model.isGroup && node.model.isExpanded) {
+      newExpandedHashMap[node.model.id] = true;
+    }
+
+    return shouldContinueWalking;
+  });
+  if (onExpandChange) onExpandChange(newExpandedHashMap, null);
+};
+const toggleItemExpand = function (itemToToggle, triggerTreeRerender, updateUserExpandedState) {
+  let scrollTo = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => {};
   const {
     node: {
       model: {
@@ -15,8 +29,9 @@ const toggleItemExpand = function (itemToToggle, triggerTreeRerender) {
   if (itemToToggle.node.model.isGroup) {
     itemToToggle.node.model.isExpanded = !isExpanded;
     triggerTreeRerender();
+    updateUserExpandedState();
     setTimeout(() => {
-      scrollTo(virtualIndex, {
+      if (typeof virtualIndex === 'number') scrollTo(virtualIndex, {
         align: 'start'
       });
     });
@@ -29,46 +44,56 @@ const collapseItemModel = modelToCollapse => {
   if (modelToCollapse.isGroup) modelToCollapse.isExpanded = false;
 };
 const expandAll = (treeRoot, triggerTreeRerender) => {
+  const shouldContinueWalking = true;
   treeRoot.walk(node => {
     if (!node.isRoot()) expandItemModel(node.model);
+    return shouldContinueWalking;
   });
   triggerTreeRerender();
 };
 const collapseAll = (treeRoot, triggerTreeRerender) => {
+  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
+
   treeRoot.walk(node => {
     if (!node.isRoot()) collapseItemModel(node.model);
+    return shouldContinueWalking;
   });
   triggerTreeRerender();
 };
 const getToggleExpandShouldExpand = treeRoot => {
   let shouldExpand = false;
+  const shouldContinueWalking = true; // tree-model ask we return true if we want to continue walking
+
   treeRoot.walk(node => {
     if (!node.isRoot()) {
       if (!node.model.isExpanded && node.model.isGroup) {
         shouldExpand = true; // eslint-disable-next-line no-useless-return
 
-        return;
+        return shouldContinueWalking;
       }
     }
+
+    return shouldContinueWalking;
   });
   return shouldExpand;
 };
-const toggleExpandAllHelper = (isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem) => {
+const toggleExpandAllHelper = (isExpand, treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState) => {
   if (isExpand === true) expandAll(treeRoot, triggerTreeRerender);else if (isExpand === false) collapseAll(treeRoot, triggerTreeRerender);else {
     const shouldExpand = getToggleExpandShouldExpand(treeRoot);
     if (shouldExpand === true) expandAll(treeRoot, triggerTreeRerender);else collapseAll(treeRoot, triggerTreeRerender);
   }
   setLatestToggledItem(null);
+  updateUserExpandedState();
 };
 const useNotifyExpandedChange = (propsWithDefaults, _ref) => {
   let {
     latestToggledItem,
     expandedGroups
   } = _ref;
-  const notifyExpandedChange = useCallback(expandedGroupHashmap => propsWithDefaults.onExpandChange(expandedGroupHashmap, latestToggledItem), [propsWithDefaults, latestToggledItem]);
+  const notifyExpandedChange = useCallback(expandedGroupHashmap => propsWithDefaults === null || propsWithDefaults === void 0 ? void 0 : propsWithDefaults.onExpandChange(expandedGroupHashmap || {}, latestToggledItem), [propsWithDefaults, latestToggledItem]);
   useEffect(() => {
-    notifyExpandedChange(expandedGroups);
-  }, [expandedGroups]);
+    if (!propsWithDefaults.expanded) notifyExpandedChange(expandedGroups);
+  }, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);
 };
 
-export { collapseAll, collapseItemModel, expandAll, expandItemModel, getToggleExpandShouldExpand, toggleExpandAllHelper, toggleItemExpand, useNotifyExpandedChange };
+export { collapseAll, collapseItemModel, expandAll, expandItemModel, getToggleExpandShouldExpand, toggleExpandAllHelper, toggleItemExpand, updateExpandedState, useNotifyExpandedChange };

package/esm/utils/keyboard-helpers.js

@@ -3,7 +3,8 @@ import TreeViewContext from '../TreeViewContext.js';
 import { focusItem } from './tree-helpers.js';
 import { toggleItemExpand, toggleExpandAllHelper } from './group-expands-helpers.js';
 
-/* eslint-disable max-lines */
+/* eslint-disable max-params */
+// 9 tab
 // 13 enter
 // 32 space
 // 37 left arrow
@@ -14,7 +15,6 @@ import { toggleItemExpand, toggleExpandAllHelper } from './group-expands-helpers
 // 36 home
 // 56 number 8
 // 106 (NumPad) *
-
 const useOnItemKeyDown = item => {
   const ctx = useContext(TreeViewContext);
   const {
@@ -27,6 +27,7 @@ const useOnItemKeyDown = item => {
     setFocusedItem,
     setSelectedItem,
     setLatestToggledItem,
+    updateUserExpandedState,
     virtualListHelpers: {
       scrollToIndex
     }
@@ -44,7 +45,7 @@ const useOnItemKeyDown = item => {
       return scrollToIndex(newFocusItem.virtualIndex, opts);
     },
     item: newFocusItem
-  }), [onItemFocus]);
+  }), [onItemFocus, scrollToIndex]);
   const onItemKeyDown = useCallback(e => {
     const {
       keyCode
@@ -57,14 +58,14 @@ const useOnItemKeyDown = item => {
 
       if (keyCode === 37) {
         if (isGroup && isExpanded) {
-          toggleItemExpand(item, triggerTreeRerender, scrollToIndex);
+          toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
           setLatestToggledItem(item);
         }
       }
 
       if (keyCode === 39) {
         if (isGroup && !isExpanded) {
-          toggleItemExpand(item, triggerTreeRerender, scrollToIndex);
+          toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
           setLatestToggledItem(item);
         }
       }
@@ -72,73 +73,76 @@ const useOnItemKeyDown = item => {
       const {
         virtualIndex
       } = item;
-      const lastItemIndex = visibleItems.length - 1;
 
-      if (keyCode === 38) {
-        const isLoopedFocus = virtualIndex === 0;
-        const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;
-        const newFocusItem = visibleItems[newFocusIndex];
-        scrollToIndex(newFocusIndex);
+      if (typeof virtualIndex === 'number') {
+        const lastItemIndex = visibleItems.length - 1;
+
+        if (keyCode === 38) {
+          const isLoopedFocus = virtualIndex === 0;
+          const newFocusIndex = isLoopedFocus ? lastItemIndex : virtualIndex - 1;
+          const newFocusItem = visibleItems[newFocusIndex];
+          scrollToIndex(newFocusIndex);
 
-        if (isLoopedFocus) {
-          // when looping the list from start to end we need to wait a bit before focusing
-          setTimeout(() => {
+          if (isLoopedFocus) {
+            // when looping the list from start to end we need to wait a bit before focusing
+            setTimeout(() => {
+              setFocusedItem(newFocusItem);
+              focusItem(newFocusItem);
+              onItemFocusCurry(newFocusItem);
+            }, 300);
+          } else {
             setFocusedItem(newFocusItem);
-            focusItem(newFocusItem);
             onItemFocusCurry(newFocusItem);
-          }, 300);
-        } else {
-          setFocusedItem(newFocusItem);
-          onItemFocusCurry(newFocusItem);
-          focusItem(newFocusItem);
+            focusItem(newFocusItem);
+          }
         }
-      }
 
-      if (keyCode === 40) {
-        const isLoopedFocus = virtualIndex === lastItemIndex;
-        const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;
-        const newFocusItem = visibleItems[newFocusIndex];
-        scrollToIndex(newFocusIndex);
+        if (keyCode === 40) {
+          const isLoopedFocus = virtualIndex === lastItemIndex;
+          const newFocusIndex = isLoopedFocus ? 0 : virtualIndex + 1;
+          const newFocusItem = visibleItems[newFocusIndex];
+          scrollToIndex(newFocusIndex);
 
-        if (isLoopedFocus) {
-          // when looping the list from start to end we need to wait a bit before focusing
-          setTimeout(() => {
+          if (isLoopedFocus) {
+            // when looping the list from start to end we need to wait a bit before focusing
+            setTimeout(() => {
+              setFocusedItem(newFocusItem);
+              onItemFocusCurry(newFocusItem);
+              focusItem(newFocusItem);
+            }, 300);
+          } else {
             setFocusedItem(newFocusItem);
             onItemFocusCurry(newFocusItem);
             focusItem(newFocusItem);
-          }, 300);
-        } else {
-          setFocusedItem(newFocusItem);
-          onItemFocusCurry(newFocusItem);
-          focusItem(newFocusItem);
+          }
         }
-      }
 
-      if (keyCode === 35) {
-        if (virtualIndex !== lastItemIndex) {
-          const newFocusItem = visibleItems[lastItemIndex];
-          scrollToIndex(lastItemIndex);
-          setTimeout(() => {
-            setFocusedItem(newFocusItem);
-            onItemFocusCurry(newFocusItem);
-            focusItem(newFocusItem);
-          }, 300);
+        if (keyCode === 35) {
+          if (virtualIndex !== lastItemIndex) {
+            const newFocusItem = visibleItems[lastItemIndex];
+            scrollToIndex(lastItemIndex);
+            setTimeout(() => {
+              setFocusedItem(newFocusItem);
+              onItemFocusCurry(newFocusItem);
+              focusItem(newFocusItem);
+            }, 300);
+          }
         }
-      }
 
-      if (keyCode === 36) {
-        if (virtualIndex !== 0) {
-          const newFocusItem = visibleItems[0];
-          scrollToIndex(0);
-          setTimeout(() => {
-            setFocusedItem(newFocusItem);
-            onItemFocusCurry(newFocusItem);
-            focusItem(newFocusItem);
-          }, 300);
+        if (keyCode === 36) {
+          if (virtualIndex !== 0) {
+            const newFocusItem = visibleItems[0];
+            scrollToIndex(0);
+            setTimeout(() => {
+              setFocusedItem(newFocusItem);
+              onItemFocusCurry(newFocusItem);
+              focusItem(newFocusItem);
+            }, 300);
+          }
         }
       }
     }
-  }, [item, visibleItems, isGroup, isDragging, onItemFocusCurry, setFocusedItem, setSelectedItem]);
+  }, [isDragging, setSelectedItem, item, isGroup, isExpanded, triggerTreeRerender, scrollToIndex, setLatestToggledItem, visibleItems, setFocusedItem, onItemFocusCurry, updateUserExpandedState]);
   return onItemKeyDown;
 };
 const useGlobalKeyboardListener = func => {
@@ -147,7 +151,7 @@ const useGlobalKeyboardListener = func => {
     return () => document.removeEventListener('keydown', func);
   }, [func]);
 };
-const useGlobalToggleAllExpandShortcut = (treeRoot, triggerTreeRerender, setLatestToggledItem) => {
+const useGlobalToggleAllExpandShortcut = (treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState) => {
   const memoizedToggleAllKeyboardShortcut = useCallback(e => {
     const {
       shiftKey,
@@ -155,9 +159,9 @@ const useGlobalToggleAllExpandShortcut = (treeRoot, triggerTreeRerender, setLate
     } = e;
 
     if (shiftKey && keyCode === 56) {
-      toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem);
+      toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
     }
-  }, [treeRoot, triggerTreeRerender]);
+  }, [setLatestToggledItem, treeRoot, triggerTreeRerender, updateUserExpandedState]);
   return useGlobalKeyboardListener(memoizedToggleAllKeyboardShortcut);
 };
 

package/esm/utils/object-helpers.js

@@ -3,8 +3,6 @@ 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';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
 
 /* eslint-disable no-sequences */
 
@@ -13,6 +11,20 @@ import 'core-js/modules/esnext.iterator.filter.js';
 /* 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;
 
@@ -20,16 +32,16 @@ const unfreeze = o => {
     oo = null;
   } else if (o === undefined) {
     oo = undefined;
-  } else if (o.constructor.name === 'Date') {
+  } else if (isObjectADate(o)) {
     oo = new Date(o);
-  } else if (o instanceof Array) {
+  } else if (isObjectAnArray(o)) {
     oo = [];
     o.forEach(v => {
       oo.push(v);
     });
-  } else if (o instanceof String) {
+  } else if (isObjectAString(o)) {
     oo = String(o);
-  } else if (typeof o === 'object') {
+  } else if (isObjectAString(o)) {
     oo = {};
 
     for (const property in o) {
@@ -41,6 +53,12 @@ const unfreeze = o => {
 
   return oo;
 };
-const filterObject = (obj, predicate) => Object.keys(obj).filter(key => predicate(obj[key])).reduce((res, key) => (res[key] = obj[key], res), {});
+// 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

@@ -11,8 +11,8 @@ const setMultipleRefs = function () {
   }
 
   const filteredRefs = refs.filter(Boolean);
-  if (!filteredRefs.length) return null;
-  if (filteredRefs.length === 0) return filteredRefs[0];
+  if (!filteredRefs.length) return () => {};
+  if (filteredRefs.length === 0) return () => {};
   return newRef => {
     filteredRefs.forEach(refToBeUpdated => {
       if (typeof refToBeUpdated === 'function') {

package/esm/utils/tree-helpers.js

@@ -23,9 +23,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 => {
@@ -61,13 +61,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);
@@ -78,12 +75,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);
@@ -94,13 +100,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] : '';
@@ -116,11 +116,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;
@@ -136,24 +148,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 => {