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

package/cjs/parts/TreeItem.js

@@ -31,14 +31,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-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 TreeListItem = dsClassnames.aggregatedClasses('li', {
   'data-testid': cssClassesConstants.treeItemBlockName,
-  role: 'treeitem'
+  role: 'treeitem' // temp fix untill we move to styled components
+
 })(cssClassesConstants.treeItemBlockName);
-const TreeListItemAddonsWrapper = dsClassnames.aggregatedClasses('div')(cssClassesConstants.treeItemBlockName, 'addons');
+const TreeListItemAddonsWrapper = dsClassnames.aggregatedClasses('div')(cssClassesConstants.treeItemBlockName, 'addons' // temp fix untill we move to styled components
+);
 const DnDHandle = reactSortableHoc.SortableHandle(_ref => {
   let {
     id
@@ -72,7 +74,7 @@ const TreeItem = props => {
   const {
     nodeItemRef
   } = node.model;
-  const openFolderOnHoverTimeout = React.useRef();
+  const openFolderOnHoverTimeout = React.useRef(null);
   const [isDraggingOverThis, setIsDraggingOverThis] = React.useState(false);
   const onItemKeyDown = keyboardHelpers.useOnItemKeyDown(item);
   const ctx = React.useContext(TreeViewContext["default"]);
@@ -118,8 +120,8 @@ const TreeItem = props => {
     if (isBefore) className += '-drop-before';else if (isAfter) className += '-drop-after';else className += '-drop-in';
     return className;
   }, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);
-  const selectedClassName = React.useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? 'selected' : '', [selectedItem]);
-  const hoverClassName = React.useMemo(() => (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) !== item.id || withDragAndDrop && isDragging ? '' : 'hover', [hoverItem, withDragAndDrop, isDragging]);
+  const selectedClassName = React.useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? 'selected' : '', [item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
+  const hoverClassName = React.useMemo(() => (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) !== item.id || withDragAndDrop && isDragging ? '' : 'hover', [hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, withDragAndDrop, isDragging]);
   const fixedHeightClassname = React.useMemo(() => {
     if (labelOverflow === 'truncate') {
       if (rowSize === 'compact') return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--fixed-height-compact");
@@ -133,21 +135,22 @@ const TreeItem = props => {
     onItemClick(item, e);
     setFocusedItem(item);
     setSelectedItem(item);
+    const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;
     onItemFocus({
-      itemIndex: item.virtualIndex,
+      itemIndex: itemVirtualIndex,
       scrollToItem: function () {
         let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           align: 'start'
         };
-        return scrollToIndex(item.virtualIndex, opts);
+        return scrollToIndex(itemVirtualIndex, opts);
       },
       item
     });
   }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
   return /*#__PURE__*/jsxRuntime.jsxs(TreeListItem, {
-    tabIndex: "0",
+    tabIndex: 0,
     onMouseMove: event => {
-      if (withDragAndDrop) {
+      if (withDragAndDrop && onMouseDragOverItem) {
         onMouseDragOverItem({
           event,
           item,
@@ -174,8 +177,8 @@ const TreeItem = props => {
     ref: setItemRefs,
     style: _objectSpread({}, itemWrapperStyle),
     className: finalClassName,
-    "aria-expanded": item.isExpanded,
-    "aria-selected": selectedCheckboxes[item.id],
+    "aria-expanded": !!item.isExpanded,
+    "aria-selected": !!selectedCheckboxes[item.id],
     "data-id": item.id,
     "data-index": item.virtualIndex,
     onKeyDown: onItemKeyDown,

package/cjs/parts/TreeList.js

@@ -16,8 +16,8 @@ var reactSortableHoc = require('@elliemae/react-sortable-hoc');
 var dsClassnames = require('@elliemae/ds-classnames');
 var dsCircularProgressIndicator = require('@elliemae/ds-circular-progress-indicator');
 var TreeViewContext = require('../TreeViewContext.js');
-var TreeItem = require('./TreeItem.js');
 var cssClassesConstants = require('../config/cssClassesConstants.js');
+var TreeItem = require('./TreeItem.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,13 +25,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-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 treeListNoItemsBn = "".concat(cssClassesConstants.treeListBlockName, "-no-items");
 const TreeListNoItems = dsClassnames.aggregatedClasses('div', {
   'data-testid': treeListNoItemsBn
-})(treeListNoItemsBn);
+})(treeListNoItemsBn); // React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era
+// we omit the LegacyRef typings in favor of hook-era typings
+
 const TreeListWrapper = dsClassnames.aggregatedClasses('ul', {
   'data-testid': cssClassesConstants.treeListBlockName,
   role: 'tree'

package/cjs/plugins/dnd/TreeDndPlugin.js

@@ -34,7 +34,7 @@ const TreeDnD = () => {
     onSortStart: onSortStart,
     onMouseDragOverItem: onMouseDragOverItem,
     onSortEnd: onSortEnd,
-    getContainer: () => virtualListRef.current,
+    getContainer: () => virtualListRef === null || virtualListRef === void 0 ? void 0 : virtualListRef.current,
     keyCodes: dndHelpers.keyCodes
   });
 };

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

@@ -5,49 +5,50 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reactDesc = require('react-desc');
 
 /* eslint-disable max-lines */
-const InstanceActionsPropTypes = reactDesc.PropTypes.shape({
-  toggleExpandAll: reactDesc.PropTypes.func,
-  scrollTo: reactDesc.PropTypes.func
-});
-const TreeViewItemPropType = reactDesc.PropTypes.shape({
-  children: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object),
-  id: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]),
-  isGroup: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.oneOf([undefined, null]), reactDesc.PropTypes.bool]),
-  name: reactDesc.PropTypes.string,
-  node: reactDesc.PropTypes.object
-});
-const TreeViewInstancePropType = reactDesc.PropTypes.shape({
-  current: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.oneOf([null]), reactDesc.PropTypes.shape({
-    actions: InstanceActionsPropTypes.isRequired
-  })])
-});
 const TreeViewPropTypes = {
-  data: reactDesc.PropTypes.arrayOf(TreeViewItemPropType).description('data to populate tree view').isRequired,
+  data: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
+    children: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object),
+    id: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]),
+    isGroup: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.oneOf([undefined, null]), reactDesc.PropTypes.bool]),
+    name: reactDesc.PropTypes.string,
+    node: reactDesc.PropTypes.object
+  })).description('data to populate tree view').isRequired,
   plugins: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('list of enabled plugins').defaultValue([]),
   selection: reactDesc.PropTypes.object.description('pre selected items').defaultValue({}),
-  instanceRef: TreeViewInstancePropType.description('instance ref'),
-  disableGroups: reactDesc.PropTypes.bool.description('disable grouping funcionality').defaultValue(false),
-  disableLeafs: reactDesc.PropTypes.bool.description('disable leaf items').defaultValue(false),
+  expanded: reactDesc.PropTypes.object.description('control what items are expanded').defaultValue(undefined),
+  instanceRef: reactDesc.PropTypes.shape({
+    current: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.oneOf([null, undefined]), reactDesc.PropTypes.shape({
+      actions: reactDesc.PropTypes.shape({
+        toggleExpandAll: reactDesc.PropTypes.func,
+        scrollTo: reactDesc.PropTypes.func
+      }).description('').isRequired
+    })])
+  }).description('instance ref'),
+  isItemDisabled: reactDesc.PropTypes.func.description('Function that receives an item, and returns whether that item should be disabled').defaultValue('() => false'),
   disableIcons: reactDesc.PropTypes.bool.description('disable icons').defaultValue(false),
   fluid: reactDesc.PropTypes.bool.description('whether is fluid or not').defaultValue(false),
   isMultiSelect: reactDesc.PropTypes.bool.description('whether the tree view is multi select or not').defaultValue(false),
   isSingleSelect: reactDesc.PropTypes.bool.description('wheter the tree view is single select or not').defaultValue(false),
+  isLoading: reactDesc.PropTypes.bool.description('wheter the tree should show the loading state or not').defaultValue(false),
   restrictDragAndDrop: reactDesc.PropTypes.bool.description('whether to restrict DnD functionality or not').defaultValue(false),
   showChildrenAmount: reactDesc.PropTypes.bool.description('whether to show the amount of children or not').defaultValue(false),
   sortable: reactDesc.PropTypes.bool.description('whether the sortable functionality is active or not').defaultValue(false),
-  labelRenderer: reactDesc.PropTypes.func.description('custom renderer for labels'),
-  onItemClick: reactDesc.PropTypes.func.description('function executed when clicking on an item'),
-  onItemFocus: reactDesc.PropTypes.func.description('function executed when focusing on an item'),
-  onVisibleItemsChange: reactDesc.PropTypes.func.description('function executed when the visible items change'),
-  onOrderChange: reactDesc.PropTypes.func.description('function executed when the items order changes'),
-  onSelectionChange: reactDesc.PropTypes.func.description('function executed when the selection changes'),
-  onExpandChange: reactDesc.PropTypes.func.description('function executed when expanding an item'),
+  onItemClick: reactDesc.PropTypes.func.description('function executed when clicking on an item').defaultValue('() => {}'),
+  onItemFocus: reactDesc.PropTypes.func.description('function executed when focusing on an item').defaultValue('() => {}'),
+  onVisibleItemsChange: reactDesc.PropTypes.func.description('function executed when the visible items change').defaultValue('() => {}'),
+  onOrderChange: reactDesc.PropTypes.func.description('function executed when the items order changes').defaultValue('() => {}'),
+  onSelectionChange: reactDesc.PropTypes.func.description('function executed when the selection changes').defaultValue('() => {}'),
+  onExpandChange: reactDesc.PropTypes.func.description('function executed when expanding an item').defaultValue('() => {}'),
+  onInstanceRefInitialized: reactDesc.PropTypes.func.description('function executed when instanceRef has terminated instanciation').defaultValue('() => {}'),
   rowSize: reactDesc.PropTypes.oneOf(['normal', 'compact']).description('size of the row').defaultValue('normal'),
+  labelOverflow: reactDesc.PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('label truncation preference').defaultValue('wrap'),
   width: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('components width').defaultValue('100%'),
   height: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('components height').defaultValue('100%'),
   groupIcon: reactDesc.PropTypes.node.description('icon for groups'),
   itemIcon: reactDesc.PropTypes.node.description('icon for items'),
   searchQuery: reactDesc.PropTypes.string.description('search query value'),
+  noItemsPlaceholder: reactDesc.PropTypes.string.description('message to be shown when there are no items in the treeview to be displayed').defaultValue('No items found'),
+  name: reactDesc.PropTypes.string.description('property key to identifier for items labels').defaultValue('name'),
   highlightOnlyQuery: reactDesc.PropTypes.bool.description('whether to highlight results or not').defaultValue(false)
 };
 

package/cjs/related-components/TreeViewSearchBar.js

@@ -35,6 +35,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,
+// };
 
 exports.TreeViewSearchBar = TreeViewSearchBar;

package/cjs/utils/dnd-helpers.js

@@ -115,11 +115,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/cjs/utils/group-expands-helpers.js

@@ -5,8 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('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: {
@@ -19,8 +33,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'
       });
     });
@@ -33,46 +48,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 = React.useCallback(expandedGroupHashmap => propsWithDefaults.onExpandChange(expandedGroupHashmap, latestToggledItem), [propsWithDefaults, latestToggledItem]);
+  const notifyExpandedChange = React.useCallback(expandedGroupHashmap => propsWithDefaults === null || propsWithDefaults === void 0 ? void 0 : propsWithDefaults.onExpandChange(expandedGroupHashmap || {}, latestToggledItem), [propsWithDefaults, latestToggledItem]);
   React.useEffect(() => {
-    notifyExpandedChange(expandedGroups);
-  }, [expandedGroups]);
+    if (!propsWithDefaults.expanded) notifyExpandedChange(expandedGroups);
+  }, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);
 };
 
 exports.collapseAll = collapseAll;
@@ -82,4 +107,5 @@ exports.expandItemModel = expandItemModel;
 exports.getToggleExpandShouldExpand = getToggleExpandShouldExpand;
 exports.toggleExpandAllHelper = toggleExpandAllHelper;
 exports.toggleItemExpand = toggleItemExpand;
+exports.updateExpandedState = updateExpandedState;
 exports.useNotifyExpandedChange = useNotifyExpandedChange;

package/cjs/utils/keyboard-helpers.js

@@ -7,7 +7,8 @@ var TreeViewContext = require('../TreeViewContext.js');
 var treeHelpers = require('./tree-helpers.js');
 var groupExpandsHelpers = require('./group-expands-helpers.js');
 
-/* eslint-disable max-lines */
+/* eslint-disable max-params */
+// 9 tab
 // 13 enter
 // 32 space
 // 37 left arrow
@@ -18,7 +19,6 @@ var groupExpandsHelpers = require('./group-expands-helpers.js');
 // 36 home
 // 56 number 8
 // 106 (NumPad) *
-
 const useOnItemKeyDown = item => {
   const ctx = React.useContext(TreeViewContext["default"]);
   const {
@@ -31,6 +31,7 @@ const useOnItemKeyDown = item => {
     setFocusedItem,
     setSelectedItem,
     setLatestToggledItem,
+    updateUserExpandedState,
     virtualListHelpers: {
       scrollToIndex
     }
@@ -48,7 +49,7 @@ const useOnItemKeyDown = item => {
       return scrollToIndex(newFocusItem.virtualIndex, opts);
     },
     item: newFocusItem
-  }), [onItemFocus]);
+  }), [onItemFocus, scrollToIndex]);
   const onItemKeyDown = React.useCallback(e => {
     const {
       keyCode
@@ -61,14 +62,14 @@ const useOnItemKeyDown = item => {
 
       if (keyCode === 37) {
         if (isGroup && isExpanded) {
-          groupExpandsHelpers.toggleItemExpand(item, triggerTreeRerender, scrollToIndex);
+          groupExpandsHelpers.toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
           setLatestToggledItem(item);
         }
       }
 
       if (keyCode === 39) {
         if (isGroup && !isExpanded) {
-          groupExpandsHelpers.toggleItemExpand(item, triggerTreeRerender, scrollToIndex);
+          groupExpandsHelpers.toggleItemExpand(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex);
           setLatestToggledItem(item);
         }
       }
@@ -76,73 +77,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 (isLoopedFocus) {
-          // when looping the list from start to end we need to wait a bit before focusing
-          setTimeout(() => {
+      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(() => {
+              setFocusedItem(newFocusItem);
+              treeHelpers.focusItem(newFocusItem);
+              onItemFocusCurry(newFocusItem);
+            }, 300);
+          } else {
             setFocusedItem(newFocusItem);
-            treeHelpers.focusItem(newFocusItem);
             onItemFocusCurry(newFocusItem);
-          }, 300);
-        } else {
-          setFocusedItem(newFocusItem);
-          onItemFocusCurry(newFocusItem);
-          treeHelpers.focusItem(newFocusItem);
+            treeHelpers.focusItem(newFocusItem);
+          }
         }
-      }
-
-      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 (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(() => {
+              setFocusedItem(newFocusItem);
+              onItemFocusCurry(newFocusItem);
+              treeHelpers.focusItem(newFocusItem);
+            }, 300);
+          } else {
             setFocusedItem(newFocusItem);
             onItemFocusCurry(newFocusItem);
             treeHelpers.focusItem(newFocusItem);
-          }, 300);
-        } else {
-          setFocusedItem(newFocusItem);
-          onItemFocusCurry(newFocusItem);
-          treeHelpers.focusItem(newFocusItem);
+          }
         }
-      }
 
-      if (keyCode === 35) {
-        if (virtualIndex !== lastItemIndex) {
-          const newFocusItem = visibleItems[lastItemIndex];
-          scrollToIndex(lastItemIndex);
-          setTimeout(() => {
-            setFocusedItem(newFocusItem);
-            onItemFocusCurry(newFocusItem);
-            treeHelpers.focusItem(newFocusItem);
-          }, 300);
+        if (keyCode === 35) {
+          if (virtualIndex !== lastItemIndex) {
+            const newFocusItem = visibleItems[lastItemIndex];
+            scrollToIndex(lastItemIndex);
+            setTimeout(() => {
+              setFocusedItem(newFocusItem);
+              onItemFocusCurry(newFocusItem);
+              treeHelpers.focusItem(newFocusItem);
+            }, 300);
+          }
         }
-      }
 
-      if (keyCode === 36) {
-        if (virtualIndex !== 0) {
-          const newFocusItem = visibleItems[0];
-          scrollToIndex(0);
-          setTimeout(() => {
-            setFocusedItem(newFocusItem);
-            onItemFocusCurry(newFocusItem);
-            treeHelpers.focusItem(newFocusItem);
-          }, 300);
+        if (keyCode === 36) {
+          if (virtualIndex !== 0) {
+            const newFocusItem = visibleItems[0];
+            scrollToIndex(0);
+            setTimeout(() => {
+              setFocusedItem(newFocusItem);
+              onItemFocusCurry(newFocusItem);
+              treeHelpers.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 => {
@@ -151,7 +155,7 @@ const useGlobalKeyboardListener = func => {
     return () => document.removeEventListener('keydown', func);
   }, [func]);
 };
-const useGlobalToggleAllExpandShortcut = (treeRoot, triggerTreeRerender, setLatestToggledItem) => {
+const useGlobalToggleAllExpandShortcut = (treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState) => {
   const memoizedToggleAllKeyboardShortcut = React.useCallback(e => {
     const {
       shiftKey,
@@ -159,9 +163,9 @@ const useGlobalToggleAllExpandShortcut = (treeRoot, triggerTreeRerender, setLate
     } = e;
 
     if (shiftKey && keyCode === 56) {
-      groupExpandsHelpers.toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem);
+      groupExpandsHelpers.toggleExpandAllHelper('toggle', treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
     }
-  }, [treeRoot, triggerTreeRerender]);
+  }, [setLatestToggledItem, treeRoot, triggerTreeRerender, updateUserExpandedState]);
   return useGlobalKeyboardListener(memoizedToggleAllKeyboardShortcut);
 };
 

package/cjs/utils/object-helpers.js

@@ -7,8 +7,6 @@ require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.reduce.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.filter.js');
 
 /* eslint-disable no-sequences */
 
@@ -17,6 +15,20 @@ require('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;
 
@@ -24,16 +36,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) {
@@ -45,7 +57,13 @@ 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;
+  }, {});
+}
 
 exports.filterObject = filterObject;
 exports.unfreeze = unfreeze;

package/cjs/utils/refs-helpers.js

@@ -15,8 +15,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/cjs/utils/selectable-helper.js

@@ -14,9 +14,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 
-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 getGroupCheckState = node => {
   let childAllChecked = true;
   let anyChildChecked = false;