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

package/esm/TreeViewContext.js

@@ -1,15 +1,15 @@
 import { createRef, createContext } from '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__*/createRef(),
-  disableGroups: false,
-  disableLeafs: false,
+  isItemDisabled: () => false,
   disableIcons: false,
   fluid: false,
   isMultiSelect: false,
@@ -19,30 +19,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,
@@ -54,48 +51,48 @@ const defaultRelativeMouseCoord = {
   relativeElementDOMRect: null,
   relativeElementIndex: null
 };
-/** Context for cross component communication */
-
-const TreeViewContext = /*#__PURE__*/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__*/createContext(defaultContext);
 
 export { TreeViewContext as default, defaultProps, defaultRelativeMouseCoord };

package/esm/config/useTreeview.js

@@ -0,0 +1,129 @@
+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 { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { useVirtual } from 'react-virtual';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { v4 } from 'uuid';
+import { TreeViewPropTypes } from '../react-desc-prop-types.js';
+import { defaultProps, defaultRelativeMouseCoord } from '../TreeViewContext.js';
+import { TreeDndPlugin } from '../plugins/dnd/TreeDndPlugin.js';
+import { useTree } from '../utils/useTree.js';
+import { toggleItemExpand, useNotifyExpandedChange } from '../utils/group-expands-helpers.js';
+import { useInstanceRefActions } from '../utils/useInstanceRefActions.js';
+import { useGlobalToggleAllExpandShortcut } from '../utils/keyboard-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 useTreeview = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, TreeViewPropTypes);
+  const defaultActions = {
+    actions: {
+      toggleExpandAll: () => {},
+      scrollTo: () => {},
+      setSelectedItemByVirtualIndex: () => {},
+      setFocusedItemByVirtualIndex: () => {}
+    }
+  };
+  const treeRef = useRef(defaultActions);
+  const {
+    data,
+    plugins,
+    onOrderChange,
+    isMultiSelect,
+    isSingleSelect,
+    instanceRef,
+    selection,
+    onInstanceRefInitialized
+  } = propsWithDefault;
+  const [isDragging, setIsDragging] = useState(false);
+  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
+  const [relativeMouseCord, setRelativeMouseCord] = useState(defaultRelativeMouseCoord);
+  const [uniqueTreeViewUUID] = useState(v4());
+  const [draggedItem, setDraggedItem] = useState(null);
+  const [hoverItem, setHoverItem] = useState(null);
+  const [latestToggledItem, setLatestToggledItem] = useState(null);
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [focusedItem, setFocusedItem] = useState(null);
+  const [selectedCheckboxes, setSelectedCheckboxes] = useState(_objectSpread({}, selection));
+  const [expandedGroups, setExpandedGroups] = useState({});
+  const {
+    visibleItems,
+    tree,
+    treeRoot,
+    triggerTreeRerender,
+    updateUserExpandedState
+  } = useTree(data, propsWithDefault, {
+    setExpandedGroups
+  });
+  const virtualListRef = useRef(); // estimateSize should not be really required given what was stated on
+  // https://github.com/tannerlinsley/react-virtual/issues/23
+
+  const virtualListHelpers = useVirtual({
+    size: visibleItems.length,
+    parentRef: virtualListRef,
+    overscan: 15
+  });
+  const withDragAndDrop = !!(plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin) && onOrderChange);
+  const withRadioChecks = isSingleSelect && !isMultiSelect;
+  const withCheckboxChecks = !isSingleSelect && isMultiSelect;
+  const handleExpandGroup = useCallback(toggleItemExpand, []);
+  const ctx = 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(treeRef.current, ctx);
+  useGlobalToggleAllExpandShortcut(treeRoot, triggerTreeRerender, setLatestToggledItem, updateUserExpandedState);
+  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
+
+  useEffect(() => {
+    setTimeout(() => onInstanceRefInitialized(treeRef), 100); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return useMemo(() => ({
+    ctx
+  }), [ctx]);
+};
+
+export { useTreeview };

package/esm/index.js

@@ -7,11 +7,3 @@ export { TreePluginList } from './plugins/tree/TreeDataPlugin.js';
 export { TreeVirtualizationPlugin } from './plugins/virtualization/TreeVirtualizationPlugin.js';
 export { SearchableTreePlugin } from './plugins/searchable/SearchableTreePlugin.js';
 export { TreeViewSearchBar } from './related-components/TreeViewSearchBar.js';
-import * as index from './deprecated/index.js';
-export { index as DEPRECATED };
-
-/* eslint-disable global-require */
-// Polyfill ResizeObserver for demo
-if (typeof ResizeObserver === 'undefined') {
-  global.ResizeObserver = require('resize-observer-polyfill').default;
-}

package/esm/parts/CheckboxSelectable.js

@@ -12,9 +12,9 @@ import TreeViewContext from '../TreeViewContext.js';
 import { toggleCheckboxItem } from '../utils/selectable-helper.js';
 import { filterObject } from '../utils/object-helpers.js';
 
-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(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(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.span.withConfig({
   componentId: "sc-1tyhs3t-0"
 })(["padding-top:3px;"]);
@@ -30,11 +30,8 @@ function CheckboxSelectable(props) {
   const ctx = useContext(TreeViewContext);
   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
@@ -50,7 +47,7 @@ function CheckboxSelectable(props) {
     triggerTreeRerender();
     const indexAndScrollTo = {
       scrollToItem: () => {
-        scrollToIndex(item.virtualIndex);
+        if (typeof item.virtualIndex === 'number') scrollToIndex(item.virtualIndex);
       },
       itemIndex
     };
@@ -67,9 +64,10 @@ function CheckboxSelectable(props) {
 
     return false;
   }, [selectedCheckboxes, id]);
+  const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
   return /*#__PURE__*/_jsx(StyledCheckboxWrapper, {}, void 0, /*#__PURE__*/_jsx(DSCheckbox, {
     checked: isChecked,
-    disabled: item.isGroup ? disableGroups : disableLeafs,
+    disabled: isDisabled,
     className: "em-ds-tree-item-checkbox",
     "data-testid": "tree-item-checkbox",
     onChange: onCheckboxChange,

package/esm/parts/ExpandCaret.js

@@ -26,6 +26,7 @@ const ExpandCaret = props => {
     },
     handleExpandGroup = defaultHandleExpandGroup,
     triggerTreeRerender,
+    updateUserExpandedState,
     setLatestToggledItem,
     setFocusedItem,
     virtualListHelpers: {
@@ -51,18 +52,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);
       focusItem(item);
     },

package/esm/parts/Icon.js

@@ -18,6 +18,10 @@ const Icon = props => {
   if (!icon) return null;
   return /*#__PURE__*/React.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: cx(icon.props.className, 'tree-item-icon')
   });
 };

package/esm/parts/NestingSpace.js

@@ -1,21 +1,10 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 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.
@@ -31,15 +20,20 @@ const NestingSpace = props => {
   const {
     treeDepth
   } = item;
-  const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
-    spaceForNestingLevel
-  });
-  return /*#__PURE__*/_jsx("div", {
-    "data-testid": "tree-item-nested-space",
-    style: {
-      width: itemNestingLeftPadding
-    }
-  });
+
+  if (treeDepth) {
+    const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
+      spaceForNestingLevel
+    });
+    return /*#__PURE__*/_jsx("div", {
+      "data-testid": "tree-item-nested-space",
+      style: {
+        width: itemNestingLeftPadding
+      }
+    });
+  }
+
+  return null;
 };
 
 export { NestingSpace };

package/esm/parts/RadioSelectable.js

@@ -11,11 +11,8 @@ function RadioSelectable(props) {
   const ctx = useContext(TreeViewContext);
   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
@@ -34,21 +31,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 = useMemo(() => "radios-".concat(uniqueTreeViewUUID), [uniqueTreeViewUUID]);
+  const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
   return /*#__PURE__*/_jsx(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
   });
 }
 

package/esm/parts/TreeItem.js

@@ -22,14 +22,16 @@ import { TreeItemText } from './TreeItemText.js';
 import { treeItemBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
 import { jsxs } from 'react/jsx-runtime';
 
-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(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(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 = aggregatedClasses('li', {
   'data-testid': treeItemBlockName,
-  role: 'treeitem'
+  role: 'treeitem' // temp fix untill we move to styled components
+
 })(treeItemBlockName);
-const TreeListItemAddonsWrapper = aggregatedClasses('div')(treeItemBlockName, 'addons');
+const TreeListItemAddonsWrapper = aggregatedClasses('div')(treeItemBlockName, 'addons' // temp fix untill we move to styled components
+);
 const DnDHandle = SortableHandle(_ref => {
   let {
     id
@@ -63,7 +65,7 @@ const TreeItem = props => {
   const {
     nodeItemRef
   } = node.model;
-  const openFolderOnHoverTimeout = useRef();
+  const openFolderOnHoverTimeout = useRef(null);
   const [isDraggingOverThis, setIsDraggingOverThis] = useState(false);
   const onItemKeyDown = useOnItemKeyDown(item);
   const ctx = useContext(TreeViewContext);
@@ -109,8 +111,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 = useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? 'selected' : '', [selectedItem]);
-  const hoverClassName = useMemo(() => (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) !== item.id || withDragAndDrop && isDragging ? '' : 'hover', [hoverItem, withDragAndDrop, isDragging]);
+  const selectedClassName = 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 = 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 = useMemo(() => {
     if (labelOverflow === 'truncate') {
       if (rowSize === 'compact') return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--fixed-height-compact");
@@ -124,21 +126,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__*/jsxs(TreeListItem, {
-    tabIndex: "0",
+    tabIndex: 0,
     onMouseMove: event => {
-      if (withDragAndDrop) {
+      if (withDragAndDrop && onMouseDragOverItem) {
         onMouseDragOverItem({
           event,
           item,
@@ -165,8 +168,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/esm/parts/TreeList.js

@@ -12,17 +12,19 @@ import { SortableContainer } from '@elliemae/react-sortable-hoc';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';
 import TreeViewContext from '../TreeViewContext.js';
-import { DragAndDropTreeItem, TreeItem } from './TreeItem.js';
 import { treeListBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
+import { DragAndDropTreeItem, TreeItem } from './TreeItem.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-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(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(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(treeListBlockName, "-no-items");
 const TreeListNoItems = 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 = aggregatedClasses('ul', {
   'data-testid': treeListBlockName,
   role: 'tree'

package/esm/plugins/dnd/TreeDndPlugin.js

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