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

package/cjs/TreeView.js

@@ -3,128 +3,30 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var React = require('react');
-var reactVirtual = require('react-virtual');
-var uuid = require('uuid');
+require('react');
 var reactDesc = require('react-desc');
 var reactDescPropTypes = require('./react-desc-prop-types.js');
 var TreeViewContext = require('./TreeViewContext.js');
 var TreeDndPlugin = require('./plugins/dnd/TreeDndPlugin.js');
-var useTree = require('./utils/useTree.js');
+var useTreeview = require('./config/useTreeview.js');
 var TreeList = require('./parts/TreeList.js');
-var groupExpandsHelpers = require('./utils/group-expands-helpers.js');
-var useInstanceRefActions = require('./utils/useInstanceRefActions.js');
-var keyboardHelpers = require('./utils/keyboard-helpers.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 
 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__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 TreeView(props) {
-  const treeRef = React.useRef({
-    actions: {}
-  });
   const {
-    data,
-    plugins,
-    onOrderChange,
-    isMultiSelect,
-    isSingleSelect,
-    instanceRef,
-    selection
+    plugins
   } = props;
-  const [isDragging, setIsDragging] = React.useState(false);
-  const [isKeyboardDragging, setIsKeyboardDragging] = React.useState(false);
-  const [draggedItem, setDraggedItem] = React.useState(null);
-  const [hoverItem, setHoverItem] = React.useState(null);
-  const [relativeMouseCord, setRelativeMouseCord] = React.useState(TreeViewContext.defaultRelativeMouseCoord);
-  const [uniqueTreeViewUUID] = React.useState(uuid.v4());
-  const [latestToggledItem, setLatestToggledItem] = React.useState(null);
-  const [selectedItem, setSelectedItem] = React.useState(null);
-  const [focusedItem, setFocusedItem] = React.useState(null);
-  const [selectedCheckboxes, setSelectedCheckboxes] = React.useState(_objectSpread({}, selection));
-  const [expandedGroups, setExpandedGroups] = React.useState({});
   const {
-    visibleItems,
-    tree,
-    treeRoot,
-    triggerTreeRerender
-  } = useTree.useTree(data, props, {
-    setExpandedGroups
-  });
-  const virtualListRef = React.useRef(); // estimateSize should not be really required given what was stated on
-  // https://github.com/tannerlinsley/react-virtual/issues/23
-
-  const virtualListHelpers = reactVirtual.useVirtual({
-    size: visibleItems.length,
-    parentRef: virtualListRef,
-    overscan: 15
-  });
-  const withDragAndDrop = (plugins === null || plugins === void 0 ? void 0 : plugins.includes(TreeDndPlugin.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.useInstanceRefActions(treeRef.current, ctx);
-  keyboardHelpers.useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem);
-  groupExpandsHelpers.useNotifyExpandedChange(props, ctx);
-  React.useEffect(() => {
-    setTimeout(() => {
-      ctx.props.onInstanceRefInitialized(treeRef);
-    }, 100);
-  }, []);
+    ctx
+  } = useTreeview.useTreeview(props);
   return /*#__PURE__*/_jsx__default["default"](TreeViewContext["default"].Provider, {
     value: ctx
   }, void 0, plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin.TreeDndPlugin) ? _TreeDnD || (_TreeDnD = /*#__PURE__*/_jsx__default["default"](TreeDndPlugin.TreeDnD, {})) : _TreeList || (_TreeList = /*#__PURE__*/_jsx__default["default"](TreeList.TreeList, {})));
 }
-TreeView.defaultProps = TreeViewContext.defaultProps;
 const TreeViewWithSchema = reactDesc.describe(TreeView);
 TreeViewWithSchema.propTypes = reactDescPropTypes.TreeViewPropTypes;
 

package/cjs/TreeViewContext.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 /* eslint-disable no-unused-vars */
-// import FilePdf from '@elliemae/ds-icons/FilePdf';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function noop() {}
 
 const defaultProps = {
   plugins: [],
   selection: {},
-  // { [id]:[state] } -> e.g. {1:true, 2:'mixed'}
   instanceRef: /*#__PURE__*/React.createRef(),
-  disableGroups: false,
-  disableLeafs: false,
+  isItemDisabled: () => false,
   disableIcons: false,
   fluid: false,
   isMultiSelect: false,
@@ -23,30 +23,27 @@ const defaultProps = {
   sortable: false,
   isLoading: false,
   highlightOnlyQuery: false,
-  onInstanceRefInitialized: istanceRef => {},
-  onItemClick: (item, e) => {},
-  onItemFocus: params => {},
-  // { itemIndex: number, scrollToItem: func }
-  onVisibleItemsChange: newVisibleItems => {},
-  onOrderChange: (newData, oldData, draggedItem) => {},
-  onSelectionChange: (selectionHasmap, item, indexAndScrollTo) => {},
-  // indexAndScrollTo = { scrollToItem: ()=>{}, itemIndex :number }
-  onExpandChange: (expandedHashmap, itemToggled) => {},
-  // expandedHashmap -> {[id]:true, ...[id]:true} itemToggled -> item that caused the change for being toggled
+  onItemClick: noop,
+  onItemFocus: noop,
+  onVisibleItemsChange: noop,
+  onOrderChange: noop,
+  onSelectionChange: noop,
+  onExpandChange: noop,
+  onInstanceRefInitialized: noop,
   rowSize: 'normal',
-  // ['normal', 'compact']
   labelOverflow: 'wrap',
-  // ['wrap', 'wrap-all', 'truncate']
   noItemsPlaceholder: 'No items found',
   nameKey: 'name',
-  // use to retrieve the label text inside ever data item
   width: '100%',
   height: '100%',
   groupIcon: null,
-  // <Folder />,
   itemIcon: null,
-  // <FilePdf />,
-  searchQuery: ''
+  searchQuery: '' // workaround on the typings over the fact that
+  // when we instantiate the context we can't have all the props
+  // we only have a part of them but the final typings will include missing props
+  // this is safe to do because
+  // we will "mergeWithDefaults" + "validatePropTypes" when we do instantiate the context
+
 };
 const defaultRelativeMouseCoord = {
   isBefore: false,
@@ -58,49 +55,49 @@ const defaultRelativeMouseCoord = {
   relativeElementDOMRect: null,
   relativeElementIndex: null
 };
-/** Context for cross component communication */
-
-const TreeViewContext = /*#__PURE__*/React.createContext({
+const defaultContext = {
   props: defaultProps,
   visibleItems: [],
   withRadioChecks: false,
   withCheckboxChecks: false,
   withDragAndDrop: false,
   relativeMouseCord: defaultRelativeMouseCoord,
-  setRelativeMouseCord: () => {},
-  labelRenderer: value => value,
-  triggerTreeRerender: () => {},
-  tree: {},
-  virtualListHelpers: {},
-  virtualListRef: {},
-  treeRoot: {},
+  setRelativeMouseCord: noop,
+  triggerTreeRerender: noop,
+  tree: undefined,
+  treeRoot: undefined,
+  virtualListHelpers: {
+    virtualItems: [],
+    totalSize: 0,
+    scrollToOffset: noop,
+    scrollToIndex: noop
+  },
+  virtualListRef: undefined,
   isDragging: false,
-  setIsDragging: () => {},
+  setIsDragging: noop,
   isKeyboardDragging: false,
-  setIsKeyboardDragging: () => {},
+  setIsKeyboardDragging: noop,
   draggedItem: null,
-  // item
-  setDraggedItem: () => {},
+  setDraggedItem: noop,
   uniqueTreeViewUUID: '',
   selectedItem: null,
-  // item
-  setSelectedItem: () => {},
+  setSelectedItem: noop,
   focusedItem: null,
-  // item
-  setFocusedItem: () => {},
+  setFocusedItem: noop,
   selectedCheckboxes: {},
-  // { [id]:[state] } -> e.g. {1:true, 2:'mixed'}
-  setSelectedCheckboxes: () => {},
+  setSelectedCheckboxes: noop,
   expandedGroups: {},
-  // { [id]:true } -> e.g. {1:true, 2:true} // false are not listed
-  setExpandedGroups: () => {},
+  setExpandedGroups: noop,
   latestToggledItem: null,
-  // item -> if toggle all -> should be undefined
-  setLatestToggledItem: () => {},
+  setLatestToggledItem: noop,
   hoverItem: null,
-  // item
-  setHoverItem: () => {}
-});
+  setHoverItem: noop,
+  handleExpandGroup: noop,
+  updateUserExpandedState: noop
+};
+/** Context for cross component communication */
+
+const TreeViewContext = /*#__PURE__*/React.createContext(defaultContext);
 
 exports["default"] = TreeViewContext;
 exports.defaultProps = defaultProps;

package/cjs/config/useTreeview.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var reactVirtual = require('react-virtual');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var uuid = require('uuid');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+var TreeViewContext = require('../TreeViewContext.js');
+var TreeDndPlugin = require('../plugins/dnd/TreeDndPlugin.js');
+var useTree = require('../utils/useTree.js');
+var groupExpandsHelpers = require('../utils/group-expands-helpers.js');
+var useInstanceRefActions = require('../utils/useInstanceRefActions.js');
+var keyboardHelpers = require('../utils/keyboard-helpers.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__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 useTreeview = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, TreeViewContext.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.TreeViewPropTypes);
+  const defaultActions = {
+    actions: {
+      toggleExpandAll: () => {},
+      scrollTo: () => {},
+      setSelectedItemByVirtualIndex: () => {},
+      setFocusedItemByVirtualIndex: () => {}
+    }
+  };
+  const treeRef = React.useRef(defaultActions);
+  const {
+    data,
+    plugins,
+    onOrderChange,
+    isMultiSelect,
+    isSingleSelect,
+    instanceRef,
+    selection,
+    onInstanceRefInitialized
+  } = propsWithDefault;
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [isKeyboardDragging, setIsKeyboardDragging] = React.useState(false);
+  const [relativeMouseCord, setRelativeMouseCord] = React.useState(TreeViewContext.defaultRelativeMouseCoord);
+  const [uniqueTreeViewUUID] = React.useState(uuid.v4());
+  const [draggedItem, setDraggedItem] = React.useState(null);
+  const [hoverItem, setHoverItem] = React.useState(null);
+  const [latestToggledItem, setLatestToggledItem] = React.useState(null);
+  const [selectedItem, setSelectedItem] = React.useState(null);
+  const [focusedItem, setFocusedItem] = React.useState(null);
+  const [selectedCheckboxes, setSelectedCheckboxes] = React.useState(_objectSpread({}, selection));
+  const [expandedGroups, setExpandedGroups] = React.useState({});
+  const {
+    visibleItems,
+    tree,
+    treeRoot,
+    triggerTreeRerender,
+    updateUserExpandedState
+  } = useTree.useTree(data, propsWithDefault, {
+    setExpandedGroups
+  });
+  const virtualListRef = React.useRef(); // estimateSize should not be really required given what was stated on
+  // https://github.com/tannerlinsley/react-virtual/issues/23
+
+  const virtualListHelpers = reactVirtual.useVirtual({
+    size: visibleItems.length,
+    parentRef: virtualListRef,
+    overscan: 15
+  });
+  const withDragAndDrop = !!(plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin.TreeDndPlugin) && onOrderChange);
+  const withRadioChecks = isSingleSelect && !isMultiSelect;
+  const withCheckboxChecks = !isSingleSelect && isMultiSelect;
+  const handleExpandGroup = React.useCallback(groupExpandsHelpers.toggleItemExpand, []);
+  const ctx = React.useMemo(() => ({
+    props: propsWithDefault,
+    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,
+    handleExpandGroup,
+    updateUserExpandedState
+  }), [draggedItem, expandedGroups, focusedItem, handleExpandGroup, hoverItem, isDragging, isKeyboardDragging, latestToggledItem, propsWithDefault, relativeMouseCord, selectedCheckboxes, selectedItem, tree, treeRoot, triggerTreeRerender, uniqueTreeViewUUID, virtualListHelpers, visibleItems, withCheckboxChecks, withDragAndDrop, withRadioChecks, updateUserExpandedState]); // 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.useInstanceRefActions(treeRef.current, ctx);
+  keyboardHelpers.useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
+  groupExpandsHelpers.useNotifyExpandedChange(propsWithDefault, ctx); // this is an horrible hack.
+  // this is required because there is no "on rendered" react-way to check if every children has finished rendering
+  // this should be working for now, in the future we may want to review this for a better solution
+
+  React.useEffect(() => {
+    setTimeout(() => onInstanceRefInitialized(treeRef), 100); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return React.useMemo(() => ({
+    ctx
+  }), [ctx]);
+};
+
+exports.useTreeview = useTreeview;

package/cjs/index.js

@@ -11,13 +11,8 @@ var TreeDataPlugin = require('./plugins/tree/TreeDataPlugin.js');
 var TreeVirtualizationPlugin = require('./plugins/virtualization/TreeVirtualizationPlugin.js');
 var SearchableTreePlugin = require('./plugins/searchable/SearchableTreePlugin.js');
 var TreeViewSearchBar = require('./related-components/TreeViewSearchBar.js');
-var index = require('./deprecated/index.js');
 
-/* eslint-disable global-require */
-// Polyfill ResizeObserver for demo
-if (typeof ResizeObserver === 'undefined') {
-  global.ResizeObserver = require('resize-observer-polyfill').default;
-}
+
 
 exports.TreeView = TreeView.TreeView;
 exports.TreeViewWithSchema = TreeView.TreeViewWithSchema;
@@ -30,4 +25,3 @@ exports.TreePluginList = TreeDataPlugin.TreePluginList;
 exports.TreeVirtualizationPlugin = TreeVirtualizationPlugin.TreeVirtualizationPlugin;
 exports.SearchableTreePlugin = SearchableTreePlugin.SearchableTreePlugin;
 exports.TreeViewSearchBar = TreeViewSearchBar.TreeViewSearchBar;
-exports.DEPRECATED = index;

package/cjs/parts/CheckboxSelectable.js

@@ -20,9 +20,9 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-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 StyledCheckboxWrapper = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1tyhs3t-0"
 })(["padding-top:3px;"]);
@@ -38,11 +38,8 @@ function CheckboxSelectable(props) {
   const ctx = React.useContext(TreeViewContext["default"]);
   const {
     props: {
-      disableGroups,
-      // radio allows disabling this, checkbox doesnt? check specs
-      disableLeafs,
-      // radio allows disabling this, checkbox doesnt? check specs
-      onSelectionChange
+      onSelectionChange,
+      isItemDisabled
     },
     virtualListHelpers: {
       scrollToIndex
@@ -58,7 +55,7 @@ function CheckboxSelectable(props) {
     triggerTreeRerender();
     const indexAndScrollTo = {
       scrollToItem: () => {
-        scrollToIndex(item.virtualIndex);
+        if (typeof item.virtualIndex === 'number') scrollToIndex(item.virtualIndex);
       },
       itemIndex
     };
@@ -75,9 +72,10 @@ function CheckboxSelectable(props) {
 
     return false;
   }, [selectedCheckboxes, id]);
+  const isDisabled = React.useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
   return /*#__PURE__*/_jsx__default["default"](StyledCheckboxWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
     checked: isChecked,
-    disabled: item.isGroup ? disableGroups : disableLeafs,
+    disabled: isDisabled,
     className: "em-ds-tree-item-checkbox",
     "data-testid": "tree-item-checkbox",
     onChange: onCheckboxChange,

package/cjs/parts/ExpandCaret.js

@@ -35,6 +35,7 @@ const ExpandCaret = props => {
     },
     handleExpandGroup = defaultHandleExpandGroup,
     triggerTreeRerender,
+    updateUserExpandedState,
     setLatestToggledItem,
     setFocusedItem,
     virtualListHelpers: {
@@ -60,18 +61,23 @@ const ExpandCaret = props => {
     },
     onClick: e => {
       e.stopPropagation();
-      handleExpandGroup(item, triggerTreeRerender, scrollToIndex, e);
+      if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);
       setLatestToggledItem(item);
-      onItemFocus({
-        itemIndex: item.virtualIndex,
-        scrollToItem: function () {
-          let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-            align: 'start'
-          };
-          return scrollToIndex(item.virtualIndex, opts);
-        },
-        item
-      });
+      const itemVitualIndex = item.virtualIndex;
+
+      if (typeof itemVitualIndex === 'number') {
+        onItemFocus({
+          itemIndex: itemVitualIndex,
+          scrollToItem: function () {
+            let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+              align: 'start'
+            };
+            return scrollToIndex(itemVitualIndex, opts);
+          },
+          item
+        });
+      }
+
       setFocusedItem(item);
       treeHelpers.focusItem(item);
     },

package/cjs/parts/Icon.js

@@ -26,6 +26,10 @@ const Icon = props => {
   if (!icon) return null;
   return /*#__PURE__*/React__default["default"].cloneElement(icon, {
     'data-testid': isGroupOrHasChildrens ? 'tree-item-group-icon' : 'tree-item-icon',
+    // legacy class-name way of handling things,
+    // this will eventually be deprecated in favor of styled components
+    // untill then, just eslint-ignore and move on
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
     className: dsUtilities.cx(icon.props.className, 'tree-item-icon')
   });
 };

package/cjs/parts/NestingSpace.js

@@ -2,29 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-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 _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; }
 
 const getItemNestingLeftPadding = (level, opts) => {
   const {
     spaceForNestingLevel = 1.5
-  } = _objectSpread({}, opts);
-
+  } = opts;
   const groupLeftPadding = spaceForNestingLevel * (level - 1);
   const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1; // root level left-padding would be negative and would not be applied
   // if "root-level" nesting, then defaults to 0 left-padding.
@@ -40,15 +28,20 @@ const NestingSpace = props => {
   const {
     treeDepth
   } = item;
-  const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
-    spaceForNestingLevel
-  });
-  return /*#__PURE__*/_jsx__default["default"]("div", {
-    "data-testid": "tree-item-nested-space",
-    style: {
-      width: itemNestingLeftPadding
-    }
-  });
+
+  if (treeDepth) {
+    const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
+      spaceForNestingLevel
+    });
+    return /*#__PURE__*/_jsx__default["default"]("div", {
+      "data-testid": "tree-item-nested-space",
+      style: {
+        width: itemNestingLeftPadding
+      }
+    });
+  }
+
+  return null;
 };
 
 exports.NestingSpace = NestingSpace;

package/cjs/parts/RadioSelectable.js

@@ -17,11 +17,8 @@ function RadioSelectable(props) {
   const ctx = React.useContext(TreeViewContext["default"]);
   const {
     props: {
-      disableGroups,
-      // radio allows disabling this, checkbox doesnt? check specs
-      disableLeafs,
-      // radio allows disabling this, checkbox doesnt? check specs
-      onSelectionChange
+      onSelectionChange,
+      isItemDisabled
     },
     virtualListHelpers: {
       scrollToIndex
@@ -40,21 +37,22 @@ function RadioSelectable(props) {
     setSelectedCheckboxes(newSelectionHasmap);
     const indexAndScrollTo = {
       scrollToItem: () => {
-        scrollToIndex(item.virtualIndex);
+        if (item.virtualIndex) scrollToIndex(item.virtualIndex);
       },
       itemIndex
     };
     if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
-  }, [item, id, onSelectionChange, scrollToIndex]);
+  }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);
   const radioName = React.useMemo(() => "radios-".concat(uniqueTreeViewUUID), [uniqueTreeViewUUID]);
+  const isDisabled = React.useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
   return /*#__PURE__*/_jsx__default["default"](dsForm.DSRadio, {
     checked: selectedCheckboxes[id] === true,
     name: radioName,
-    disabled: item.isGroup ? disableGroups : disableLeafs,
+    disabled: isDisabled,
     className: "em-ds-tree-item-radio",
     "data-testid": "tree-item-radio",
     onChange: onRadioChange,
-    tabIndex: "0"
+    tabIndex: 0
   });
 }