@elliemae/ds-treeview 2.4.2-rc.9 → 2.4.3-rc.10

package/cjs/config/cssClassesConstants.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const DSTreeViewPrefix = 'em-ds';
 const treeItemBlockName = 'tree-item';
 const treeListBlockName = 'tree-list';
-const treeListNoItemsBn = "".concat(treeListBlockName, "-no-items");
+const treeListNoItemsBn = `${treeListBlockName}-no-items`;
 
 exports.DSTreeViewPrefix = DSTreeViewPrefix;
 exports.treeItemBlockName = treeItemBlockName;

package/cjs/config/useTreeview.js

@@ -2,13 +2,12 @@
 
 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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var reactVirtual = require('react-virtual');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
@@ -75,7 +74,7 @@ const useTreeview = props => {
     parentRef: virtualListRef,
     overscan: 15
   });
-  const withDragAndDrop = !!(plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin.TreeDndPlugin) && onOrderChange);
+  const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin.TreeDndPlugin) && onOrderChange);
   const withRadioChecks = isSingleSelect && !isMultiSelect;
   const withCheckboxChecks = !isSingleSelect && isMultiSelect;
   const handleExpandGroup = React.useCallback(groupExpandsHelpers.toggleItemExpand, []);

package/cjs/hoc/WithConditionalDnDContext.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/es.error.cause.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
@@ -57,36 +58,32 @@ const withConditionalDnDRowContext = Component => props => {
     visibleItems: flattenedVisibleTree,
     withDragAndDrop
   } = React.useContext(TreeViewContext["default"]);
-  const flattenedVisibleTreeForDnD = React.useMemo(() => flattenedVisibleTree.map((item, index) => {
-    var _item$treeDepth, _item$children$length, _item$children, _item$node$parent$mod, _item$node$parent, _item$node$parent$mod2, _item$node$parent$mod3;
-
-    return {
-      uid: item.id.toString(),
-      depth: ((_item$treeDepth = item.treeDepth) !== null && _item$treeDepth !== void 0 ? _item$treeDepth : 1) - 1,
-      realIndex: index,
-      childrenCount: (_item$children$length = (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) !== null && _item$children$length !== void 0 ? _item$children$length : 0,
-      parentId: (_item$node$parent$mod = (_item$node$parent = item.node.parent) === null || _item$node$parent === void 0 ? void 0 : (_item$node$parent$mod2 = _item$node$parent.model) === null || _item$node$parent$mod2 === void 0 ? void 0 : (_item$node$parent$mod3 = _item$node$parent$mod2.id) === null || _item$node$parent$mod3 === void 0 ? void 0 : _item$node$parent$mod3.toString()) !== null && _item$node$parent$mod !== void 0 ? _item$node$parent$mod : null,
-      original: item
-    };
-  }), [flattenedVisibleTree]);
+  const flattenedVisibleTreeForDnD = React.useMemo(() => flattenedVisibleTree.map((item, index) => ({
+    uid: item.id.toString(),
+    depth: (item.treeDepth ?? 1) - 1,
+    realIndex: index,
+    childrenCount: item.children?.length ?? 0,
+    parentId: item.node.parent?.model?.id?.toString() ?? null,
+    original: item
+  })), [flattenedVisibleTree]);
   const onReorder = React.useCallback((tree, indexes) => {
     // Pull the row's original data into an object
     const nodes = {};
     tree.forEach(item => {
-      const originalItem = item.original;
+      const originalItem = item.original.model;
       originalItem.children = [];
-      nodes[item.uid] = item.original;
+      nodes[item.uid] = originalItem;
     });
     const newUserTree = [];
     tree.forEach(item => {
       // If row has parent, insert it to it's subrows
       // otherwise append it to the new user data
       if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {
-        var _parentNode$children;
-
         const parentNode = nodes[item.parentId];
-        (_parentNode$children = parentNode.children) === null || _parentNode$children === void 0 ? void 0 : _parentNode$children.push(item.original);
-      } else if (item.uid !== '__ds_tree_root') newUserTree.push(item.original);
+        parentNode.children?.push(item.original.model);
+      } else if (item.uid !== '__ds_tree_root') {
+        newUserTree.push(item.original.model);
+      }
     }); // Tell the user that the order has change, he can chose to commit it or not
 
     onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);

package/cjs/parts/ChildrenCountDisplayer.js

@@ -16,7 +16,7 @@ var _Separator;
 const Separator = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-13smqda-0"
 })(["width:1px;height:12px;margin:0 8px;border-left:1px solid ", ";font-size:12px;"], props => props.theme.colors.neutral['600']);
-const className = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "-children-count-displayer");
+const className = `${cssClassesConstants.DSTreeViewPrefix}-${cssClassesConstants.treeItemBlockName}-children-count-displayer`;
 const ChildrenCountDisplayer = props => {
   const {
     item
@@ -29,7 +29,7 @@ const ChildrenCountDisplayer = props => {
   return /*#__PURE__*/_jsx__default["default"]("span", {
     "data-testid": "tree-item-children-count-displayer",
     className: className
-  }, void 0, _Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](Separator, {})), "".concat(children.length, " Items"));
+  }, void 0, _Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](Separator, {})), `${children.length} Items`);
 };
 
 exports.ChildrenCountDisplayer = ChildrenCountDisplayer;

package/cjs/parts/DnDHandle.js

@@ -34,9 +34,9 @@ const DnDHandle = _ref => {
     "data-testid": "drag-handle",
     "data-isactive": draggableProps && !!draggableProps.active,
     "data-isdragoverlay": isDragOverlay,
-    id: "".concat(id, "-drag-handle"),
-    key: "".concat(id, "-drag-handle"),
-    className: "drag-handle ".concat(isDragging ? '' : 'focuseable'),
+    id: `${id}-drag-handle`,
+    key: `${id}-drag-handle`,
+    className: `drag-handle ${isDragging ? '' : 'focuseable'}`,
     color: isDragging ? ['neutral', '080'] : ['brand-primary', '800'],
     size: "s",
     tabIndex: 0

package/cjs/parts/DropIndicator.js

@@ -15,7 +15,11 @@ const getPositionStyles = _ref => {
   let {
     dropIndicatorPosition
   } = _ref;
-  return "\n      top: ".concat(dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before ? '0' : 'unset', ";\n      bottom: ").concat(dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.After ? '0' : 'unset', ";\n      left: -2px;\n    ");
+  return `
+      top: ${dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before ? '0' : 'unset'};
+      bottom: ${dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.After ? '0' : 'unset'};
+      left: -2px;
+    `;
 };
 
 const getCircleStyles = _ref2 => {

package/cjs/parts/ExpandCaret.js

@@ -84,7 +84,7 @@ const ExpandCaret = props => {
     },
     size: "s",
     tabIndex: -1
-  }, "".concat(id, "-expand-addon"));
+  }, `${id}-expand-addon`);
   return /*#__PURE__*/_jsx__default["default"]("div", {
     style: {
       width: '24px'

package/cjs/parts/NestingSpace.js

@@ -17,7 +17,7 @@ const getItemNestingLeftPadding = (level, opts) => {
   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.
 
-  return finalLeftPadding > 0 ? "".concat(finalLeftPadding, "em") : '0';
+  return finalLeftPadding > 0 ? `${finalLeftPadding}em` : '0';
 };
 
 const NestingSpace = props => {

package/cjs/parts/RadioSelectable.js

@@ -43,7 +43,7 @@ function RadioSelectable(props) {
     };
     if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
   }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);
-  const radioName = React.useMemo(() => "radios-".concat(uniqueTreeViewUUID), [uniqueTreeViewUUID]);
+  const radioName = React.useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
   const isDisabled = React.useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
   return /*#__PURE__*/_jsx__default["default"](dsForm.DSRadio, {
     checked: selectedCheckboxes[id] === true,

package/cjs/parts/TreeItem.js

@@ -99,28 +99,28 @@ const TreeItem = props => {
   const isDropValid = draggableProps && draggableProps.isDropValid;
   const dropPreviewClassName = React.useMemo(() => {
     if (isDropIndicatorPositionInside) {
-      const className = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName).concat(isDropValid ? '--valid' : '--invalid', "-drop-in");
+      const className = `${cssClassesConstants.DSTreeViewPrefix}-${cssClassesConstants.treeItemBlockName}${isDropValid ? '--valid' : '--invalid'}-drop-in`;
       return className;
     }
 
     return '';
   }, [isDropIndicatorPositionInside, isDropValid]);
   const dragOverlayClassName = React.useMemo(() => isDragOverlay ? 'drag-overlay' : '', [isDragOverlay]);
-  const selectedClassName = React.useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id && !isDragOverlay ? 'selected' : '', [isDragOverlay, item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
-  const hoverClassName = React.useMemo(() => !isDragOverlay && (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id && !isDragging ? 'hover' : '', [isDragOverlay, hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, isDragging]);
+  const selectedClassName = React.useMemo(() => selectedItem?.id === item.id && !isDragOverlay ? 'selected' : '', [isDragOverlay, item.id, selectedItem?.id]);
+  const hoverClassName = React.useMemo(() => !isDragOverlay && hoverItem?.id === item.id && !isDragging ? 'hover' : '', [isDragOverlay, hoverItem?.id, item.id, isDragging]);
   const fixedHeightClassname = React.useMemo(() => {
     if (labelOverflow === 'truncate') {
-      if (rowSize === 'compact') return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--fixed-height-compact");
-      return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--fixed-height");
+      if (rowSize === 'compact') return `${cssClassesConstants.DSTreeViewPrefix}-${cssClassesConstants.treeItemBlockName}--fixed-height-compact`;
+      return `${cssClassesConstants.DSTreeViewPrefix}-${cssClassesConstants.treeItemBlockName}--fixed-height`;
     }
 
     return '';
   }, [labelOverflow, rowSize]);
   const isDraggingClassname = React.useMemo(() => {
-    if (isDragging) return "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "--dragging");
+    if (isDragging) return `${cssClassesConstants.DSTreeViewPrefix}-${cssClassesConstants.treeItemBlockName}--dragging`;
     return '';
   }, [isDragging]);
-  const finalClassName = React.useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName, " ").concat(isDraggingClassname), [dropPreviewClassName, fixedHeightClassname, selectedClassName, hoverClassName, dragOverlayClassName, isDraggingClassname]);
+  const finalClassName = React.useMemo(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName} ${isDraggingClassname}`, [dropPreviewClassName, fixedHeightClassname, selectedClassName, hoverClassName, dragOverlayClassName, isDraggingClassname]);
   const handleItemClick = React.useCallback(e => {
     onItemClick(item, e);
     setFocusedItem(item);
@@ -140,7 +140,7 @@ const TreeItem = props => {
   return /*#__PURE__*/jsxRuntime.jsxs(TreeListItem, {
     tabIndex: 0,
     onMouseLeave: () => {
-      if ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id) {
+      if (hoverItem?.id === item.id) {
         setHoverItem(null);
       }
     },

package/cjs/parts/TreeItemText.js

@@ -17,11 +17,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var Highlighter__default = /*#__PURE__*/_interopDefaultLegacy(Highlighter);
 
-const ItemContent = dsClassnames.aggregatedClasses('div')("".concat(cssClassesConstants.treeItemBlockName, "-content"));
+const ItemContent = dsClassnames.aggregatedClasses('div')(`${cssClassesConstants.treeItemBlockName}-content`);
 const ItemValue = dsClassnames.aggregatedClasses('span')(cssClassesConstants.treeItemBlockName, 'value'); // const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;
 
-const classNameModifierWrapAll = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "__value--wrap-all");
-const classNameModifierTruncate = "".concat(cssClassesConstants.DSTreeViewPrefix, "-").concat(cssClassesConstants.treeItemBlockName, "__value--truncate"); // eslint-disable-next-line react/prop-types
+const classNameModifierWrapAll = `${cssClassesConstants.DSTreeViewPrefix}-${cssClassesConstants.treeItemBlockName}__value--wrap-all`;
+const classNameModifierTruncate = `${cssClassesConstants.DSTreeViewPrefix}-${cssClassesConstants.treeItemBlockName}__value--truncate`; // eslint-disable-next-line react/prop-types
 
 const CustomHighlight = _ref => {
   let {
@@ -96,10 +96,10 @@ function TreeItemText(props) {
     });
   }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);
   let className = '';
-  if (labelOverflow === 'wrap-all') className += "".concat(classNameModifierWrapAll, " ");
-  if (labelOverflow === 'truncate') className += "".concat(classNameModifierTruncate, " ");
+  if (labelOverflow === 'wrap-all') className += `${classNameModifierWrapAll} `;
+  if (labelOverflow === 'truncate') className += `${classNameModifierTruncate} `;
   return /*#__PURE__*/_jsx__default["default"](ItemContent, {
-    "data-testid": "".concat(cssClassesConstants.treeItemBlockName, "-content")
+    "data-testid": `${cssClassesConstants.treeItemBlockName}-content`
   }, void 0, /*#__PURE__*/_jsx__default["default"](ItemValue, {
     className: className
   }, void 0, Text));

package/cjs/parts/TreeList.js

@@ -29,7 +29,7 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 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 treeListNoItemsBn = "".concat(cssClassesConstants.treeListBlockName, "-no-items");
+const treeListNoItemsBn = `${cssClassesConstants.treeListBlockName}-no-items`;
 const TreeListNoItems = dsClassnames.aggregatedClasses('div', {
   'data-testid': treeListNoItemsBn
 })(treeListNoItemsBn); // React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era
@@ -43,11 +43,11 @@ const TreeListWrapper = dsClassnames.aggregatedClasses('ul', {
     rowSize
   } = _ref;
   return {
-    ["rowsize-".concat(rowSize)]: rowSize
+    [`rowsize-${rowSize}`]: rowSize
   };
 });
-const compactRowClass = "".concat(cssClassesConstants.DSTreeViewPrefix, "-tv-row-size-compact");
-const normaRowClass = "".concat(cssClassesConstants.DSTreeViewPrefix, "-tv-row-size-normal");
+const compactRowClass = `${cssClassesConstants.DSTreeViewPrefix}-tv-row-size-compact`;
+const normaRowClass = `${cssClassesConstants.DSTreeViewPrefix}-tv-row-size-normal`;
 
 const TreeListComp = () => {
   const ctx = React.useContext(TreeViewContext["default"]);
@@ -67,7 +67,7 @@ const TreeListComp = () => {
     totalSize,
     virtualItems
   } = virtualListHelpers;
-  const className = "".concat(rowSize === 'compact' ? "".concat(compactRowClass) : "".concat(normaRowClass));
+  const className = `${rowSize === 'compact' ? `${compactRowClass}` : `${normaRowClass}`}`;
   const {
     visibleItems
   } = React.useContext(DnDTreeContext.DnDTreeContext);
@@ -75,8 +75,8 @@ const TreeListComp = () => {
     ref: virtualListRef,
     className: className,
     style: {
-      height: "".concat(typeof height === 'number' ? "".concat(height, "px") : height),
-      width: "".concat(typeof width === 'number' ? "".concat(width, "px") : width),
+      height: `${typeof height === 'number' ? `${height}px` : height}`,
+      width: `${typeof width === 'number' ? `${width}px` : width}`,
       overflow: 'auto'
     },
     children: [isLoading ? /*#__PURE__*/_jsx__default["default"]("div", {
@@ -95,7 +95,7 @@ const TreeListComp = () => {
       showTooltip: false
     })) : null, !isLoading && virtualItems.length === 0 ? /*#__PURE__*/_jsx__default["default"](TreeListNoItems, {}, void 0, noItemsPlaceholder) : null, !isLoading && virtualItems.length !== 0 ? /*#__PURE__*/_jsx__default["default"]("div", {
       style: {
-        height: "".concat(totalSize, "px"),
+        height: `${totalSize}px`,
         width: '100%',
         position: 'relative'
       }
@@ -113,12 +113,12 @@ const TreeListComp = () => {
       } = item;
       const style = {
         position: 'absolute',
-        top: "".concat(start, "px"),
+        top: `${start}px`,
         left: 0,
         width: '100%'
       };
       const listItemProps = {
-        key: "DS-TreeView-List-Item-".concat(id),
+        key: `DS-TreeView-List-Item-${id}`,
         virtualItemRef: measureRef,
         index,
         // this is consumed by the DnD HOC

package/cjs/utils/array-helpers.js

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
-
 // https://github.com/sindresorhus/array-move/blob/master/index.js
 const arrayMoveMutate = (array, from, to) => {
   const startIndex = from < 0 ? array.length + from : from;

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

@@ -94,7 +94,7 @@ const useNotifyExpandedChange = (propsWithDefaults, _ref) => {
     latestToggledItem,
     expandedGroups
   } = _ref;
-  const notifyExpandedChange = React.useCallback(expandedGroupHashmap => propsWithDefaults === null || propsWithDefaults === void 0 ? void 0 : propsWithDefaults.onExpandChange(expandedGroupHashmap || {}, latestToggledItem), [propsWithDefaults, latestToggledItem]);
+  const notifyExpandedChange = React.useCallback(expandedGroupHashmap => propsWithDefaults?.onExpandChange(expandedGroupHashmap || {}, latestToggledItem), [propsWithDefaults, latestToggledItem]);
   React.useEffect(() => {
     if (!propsWithDefaults.expanded) notifyExpandedChange(expandedGroups);
   }, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);

package/cjs/utils/object-helpers.js

@@ -16,9 +16,7 @@ require('core-js/modules/esnext.iterator.reduce.js');
 
 /* 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';
+  return o?.constructor?.name === 'Date';
 }
 
 function isObjectAnArray(o) {

package/cjs/utils/tree-helpers.js

@@ -2,17 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
-require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/es.error.cause.js');
 require('core-js/modules/esnext.async-iterator.find.js');
 require('core-js/modules/esnext.iterator.find.js');
 require('core-js/modules/esnext.async-iterator.every.js');
 require('core-js/modules/esnext.iterator.every.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
 var stringHelpers = require('./string-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 walkVisibles = function (node, callback) {
   let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   let highlightOnlyQuery = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -132,8 +142,6 @@ const getChildrenMatchesSearchQuery = function (parentNode) {
  */
 
 const enrichNodeModelInPlace = function (node) {
-  var _node$model$children$, _node$model, _node$model$children;
-
   let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let selection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   let expanded = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
@@ -148,7 +156,7 @@ const enrichNodeModelInPlace = function (node) {
   // this is useful to avoid having to always check both the flag and the children.length...
 
 
-  if (typeof node.model.isGroup !== 'boolean' && ((_node$model$children$ = (_node$model = node.model) === null || _node$model === void 0 ? void 0 : (_node$model$children = _node$model.children) === null || _node$model$children === void 0 ? void 0 : _node$model$children.length) !== null && _node$model$children$ !== void 0 ? _node$model$children$ : 0) > 0) {
+  if (typeof node.model.isGroup !== 'boolean' && (node.model?.children?.length ?? 0) > 0) {
     node.model.isGroup = true;
   }
 
@@ -176,9 +184,7 @@ const enrichNodeModelInPlace = function (node) {
   }
 };
 const focusItem = item => {
-  var _item$nodeItemRef, _item$nodeItemRef$cur;
-
-  item === null || item === void 0 ? void 0 : (_item$nodeItemRef = item.nodeItemRef) === null || _item$nodeItemRef === void 0 ? void 0 : (_item$nodeItemRef$cur = _item$nodeItemRef.current) === null || _item$nodeItemRef$cur === void 0 ? void 0 : _item$nodeItemRef$cur.focus();
+  item?.nodeItemRef?.current?.focus();
 };
 const flattenTreeForDnD = function (data) {
   let shouldDescend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => true;
@@ -186,23 +192,21 @@ const flattenTreeForDnD = function (data) {
   let index = 0;
 
   const doit = function (node) {
-    var _node$children$length, _node$children, _node$children2;
-
     let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     flattenedTree.push({
-      uid: node.id.toString(),
+      uid: node.model.id.toString(),
       depth,
       realIndex: index,
-      childrenCount: (_node$children$length = (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.length) !== null && _node$children$length !== void 0 ? _node$children$length : 0,
+      childrenCount: node.children?.length ?? 0,
       parentId: parentId !== null ? parentId.toString() : null,
-      original: node
+      original: _objectSpread(_objectSpread({}, node), node.model)
     });
     index += 1;
-    if (shouldDescend(node)) (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.forEach(child => doit(child, depth + 1, node.id.toString()));
+    if (shouldDescend(node)) node.children?.forEach(child => doit(child, depth + 1, node.model.id.toString()));
   };
 
-  data.forEach(datum => doit(datum));
+  data.children.forEach(node => doit(node));
   return flattenedTree;
 };
 

package/cjs/utils/useInstanceRefActions.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var treeHelpers = require('./tree-helpers.js');
 var groupExpandsHelpers = require('./group-expands-helpers.js');

package/cjs/utils/useTree.js

@@ -2,13 +2,12 @@
 
 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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var TreeModel = require('tree-model');
 var lodash = require('lodash');
@@ -93,7 +92,7 @@ const useTree = (data, props, states) => {
     setExpandedGroups(newExpandedHashMap); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [treeRoot, rerenderItems, searchQuery, highlightOnlyQuery, selection, expanded, setExpandedGroups // onVisibleItemsChange // evaluate potential performance hit?
   ]);
-  const flattenedItems = React.useMemo(() => treeHelpers.flattenTreeForDnD(data), [data]);
+  const flattenedItems = React.useMemo(() => treeHelpers.flattenTreeForDnD(treeRoot), [treeRoot]);
   return {
     visibleItems,
     flattenedItems,

package/esm/config/cssClassesConstants.js

@@ -1,6 +1,6 @@
 const DSTreeViewPrefix = 'em-ds';
 const treeItemBlockName = 'tree-item';
 const treeListBlockName = 'tree-list';
-const treeListNoItemsBn = "".concat(treeListBlockName, "-no-items");
+const treeListNoItemsBn = `${treeListBlockName}-no-items`;
 
 export { DSTreeViewPrefix, treeItemBlockName, treeListBlockName, treeListNoItemsBn };

package/esm/config/useTreeview.js

@@ -4,7 +4,6 @@ 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';
@@ -67,7 +66,7 @@ const useTreeview = props => {
     parentRef: virtualListRef,
     overscan: 15
   });
-  const withDragAndDrop = !!(plugins !== null && plugins !== void 0 && plugins.includes(TreeDndPlugin) && onOrderChange);
+  const withDragAndDrop = !!(plugins?.includes(TreeDndPlugin) && onOrderChange);
   const withRadioChecks = isSingleSelect && !isMultiSelect;
   const withCheckboxChecks = !isSingleSelect && isMultiSelect;
   const handleExpandGroup = useCallback(toggleItemExpand, []);

package/esm/hoc/WithConditionalDnDContext.js

@@ -1,5 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/es.error.cause.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
@@ -48,36 +49,32 @@ const withConditionalDnDRowContext = Component => props => {
     visibleItems: flattenedVisibleTree,
     withDragAndDrop
   } = useContext(TreeViewContext);
-  const flattenedVisibleTreeForDnD = useMemo(() => flattenedVisibleTree.map((item, index) => {
-    var _item$treeDepth, _item$children$length, _item$children, _item$node$parent$mod, _item$node$parent, _item$node$parent$mod2, _item$node$parent$mod3;
-
-    return {
-      uid: item.id.toString(),
-      depth: ((_item$treeDepth = item.treeDepth) !== null && _item$treeDepth !== void 0 ? _item$treeDepth : 1) - 1,
-      realIndex: index,
-      childrenCount: (_item$children$length = (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) !== null && _item$children$length !== void 0 ? _item$children$length : 0,
-      parentId: (_item$node$parent$mod = (_item$node$parent = item.node.parent) === null || _item$node$parent === void 0 ? void 0 : (_item$node$parent$mod2 = _item$node$parent.model) === null || _item$node$parent$mod2 === void 0 ? void 0 : (_item$node$parent$mod3 = _item$node$parent$mod2.id) === null || _item$node$parent$mod3 === void 0 ? void 0 : _item$node$parent$mod3.toString()) !== null && _item$node$parent$mod !== void 0 ? _item$node$parent$mod : null,
-      original: item
-    };
-  }), [flattenedVisibleTree]);
+  const flattenedVisibleTreeForDnD = useMemo(() => flattenedVisibleTree.map((item, index) => ({
+    uid: item.id.toString(),
+    depth: (item.treeDepth ?? 1) - 1,
+    realIndex: index,
+    childrenCount: item.children?.length ?? 0,
+    parentId: item.node.parent?.model?.id?.toString() ?? null,
+    original: item
+  })), [flattenedVisibleTree]);
   const onReorder = useCallback((tree, indexes) => {
     // Pull the row's original data into an object
     const nodes = {};
     tree.forEach(item => {
-      const originalItem = item.original;
+      const originalItem = item.original.model;
       originalItem.children = [];
-      nodes[item.uid] = item.original;
+      nodes[item.uid] = originalItem;
     });
     const newUserTree = [];
     tree.forEach(item => {
       // If row has parent, insert it to it's subrows
       // otherwise append it to the new user data
       if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {
-        var _parentNode$children;
-
         const parentNode = nodes[item.parentId];
-        (_parentNode$children = parentNode.children) === null || _parentNode$children === void 0 ? void 0 : _parentNode$children.push(item.original);
-      } else if (item.uid !== '__ds_tree_root') newUserTree.push(item.original);
+        parentNode.children?.push(item.original.model);
+      } else if (item.uid !== '__ds_tree_root') {
+        newUserTree.push(item.original.model);
+      }
     }); // Tell the user that the order has change, he can chose to commit it or not
 
     onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);

package/esm/parts/ChildrenCountDisplayer.js

@@ -7,7 +7,7 @@ var _Separator;
 const Separator = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-13smqda-0"
 })(["width:1px;height:12px;margin:0 8px;border-left:1px solid ", ";font-size:12px;"], props => props.theme.colors.neutral['600']);
-const className = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "-children-count-displayer");
+const className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;
 const ChildrenCountDisplayer = props => {
   const {
     item
@@ -20,7 +20,7 @@ const ChildrenCountDisplayer = props => {
   return /*#__PURE__*/_jsx("span", {
     "data-testid": "tree-item-children-count-displayer",
     className: className
-  }, void 0, _Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {})), "".concat(children.length, " Items"));
+  }, void 0, _Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {})), `${children.length} Items`);
 };
 
 export { ChildrenCountDisplayer };

package/esm/parts/DnDHandle.js

@@ -26,9 +26,9 @@ const DnDHandle = _ref => {
     "data-testid": "drag-handle",
     "data-isactive": draggableProps && !!draggableProps.active,
     "data-isdragoverlay": isDragOverlay,
-    id: "".concat(id, "-drag-handle"),
-    key: "".concat(id, "-drag-handle"),
-    className: "drag-handle ".concat(isDragging ? '' : 'focuseable'),
+    id: `${id}-drag-handle`,
+    key: `${id}-drag-handle`,
+    className: `drag-handle ${isDragging ? '' : 'focuseable'}`,
     color: isDragging ? ['neutral', '080'] : ['brand-primary', '800'],
     size: "s",
     tabIndex: 0

package/esm/parts/DropIndicator.js

@@ -8,7 +8,11 @@ const getPositionStyles = _ref => {
   let {
     dropIndicatorPosition
   } = _ref;
-  return "\n      top: ".concat(dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset', ";\n      bottom: ").concat(dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset', ";\n      left: -2px;\n    ");
+  return `
+      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};
+      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};
+      left: -2px;
+    `;
 };
 
 const getCircleStyles = _ref2 => {

package/esm/parts/ExpandCaret.js

@@ -75,7 +75,7 @@ const ExpandCaret = props => {
     },
     size: "s",
     tabIndex: -1
-  }, "".concat(id, "-expand-addon"));
+  }, `${id}-expand-addon`);
   return /*#__PURE__*/_jsx("div", {
     style: {
       width: '24px'

package/esm/parts/NestingSpace.js

@@ -9,7 +9,7 @@ const getItemNestingLeftPadding = (level, opts) => {
   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.
 
-  return finalLeftPadding > 0 ? "".concat(finalLeftPadding, "em") : '0';
+  return finalLeftPadding > 0 ? `${finalLeftPadding}em` : '0';
 };
 
 const NestingSpace = props => {

package/esm/parts/RadioSelectable.js

@@ -37,7 +37,7 @@ function RadioSelectable(props) {
     };
     if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
   }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);
-  const radioName = useMemo(() => "radios-".concat(uniqueTreeViewUUID), [uniqueTreeViewUUID]);
+  const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
   const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
   return /*#__PURE__*/_jsx(DSRadio, {
     checked: selectedCheckboxes[id] === true,

package/esm/parts/TreeItem.js

@@ -90,28 +90,28 @@ const TreeItem = props => {
   const isDropValid = draggableProps && draggableProps.isDropValid;
   const dropPreviewClassName = useMemo(() => {
     if (isDropIndicatorPositionInside) {
-      const className = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName).concat(isDropValid ? '--valid' : '--invalid', "-drop-in");
+      const className = `${DSTreeViewPrefix}-${treeItemBlockName}${isDropValid ? '--valid' : '--invalid'}-drop-in`;
       return className;
     }
 
     return '';
   }, [isDropIndicatorPositionInside, isDropValid]);
   const dragOverlayClassName = useMemo(() => isDragOverlay ? 'drag-overlay' : '', [isDragOverlay]);
-  const selectedClassName = useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id && !isDragOverlay ? 'selected' : '', [isDragOverlay, item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
-  const hoverClassName = useMemo(() => !isDragOverlay && (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id && !isDragging ? 'hover' : '', [isDragOverlay, hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, isDragging]);
+  const selectedClassName = useMemo(() => selectedItem?.id === item.id && !isDragOverlay ? 'selected' : '', [isDragOverlay, item.id, selectedItem?.id]);
+  const hoverClassName = useMemo(() => !isDragOverlay && hoverItem?.id === item.id && !isDragging ? 'hover' : '', [isDragOverlay, hoverItem?.id, item.id, isDragging]);
   const fixedHeightClassname = useMemo(() => {
     if (labelOverflow === 'truncate') {
-      if (rowSize === 'compact') return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--fixed-height-compact");
-      return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--fixed-height");
+      if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;
+      return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;
     }
 
     return '';
   }, [labelOverflow, rowSize]);
   const isDraggingClassname = useMemo(() => {
-    if (isDragging) return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--dragging");
+    if (isDragging) return `${DSTreeViewPrefix}-${treeItemBlockName}--dragging`;
     return '';
   }, [isDragging]);
-  const finalClassName = useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName, " ").concat(isDraggingClassname), [dropPreviewClassName, fixedHeightClassname, selectedClassName, hoverClassName, dragOverlayClassName, isDraggingClassname]);
+  const finalClassName = useMemo(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName} ${isDraggingClassname}`, [dropPreviewClassName, fixedHeightClassname, selectedClassName, hoverClassName, dragOverlayClassName, isDraggingClassname]);
   const handleItemClick = useCallback(e => {
     onItemClick(item, e);
     setFocusedItem(item);
@@ -131,7 +131,7 @@ const TreeItem = props => {
   return /*#__PURE__*/jsxs(TreeListItem, {
     tabIndex: 0,
     onMouseLeave: () => {
-      if ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id) {
+      if (hoverItem?.id === item.id) {
         setHoverItem(null);
       }
     },

package/esm/parts/TreeItemText.js

@@ -8,11 +8,11 @@ import { treeItemBlockName, DSTreeViewPrefix } from '../config/cssClassesConstan
 import TreeViewContext from '../TreeViewContext.js';
 import { jsxs, Fragment } from 'react/jsx-runtime';
 
-const ItemContent = aggregatedClasses('div')("".concat(treeItemBlockName, "-content"));
+const ItemContent = aggregatedClasses('div')(`${treeItemBlockName}-content`);
 const ItemValue = aggregatedClasses('span')(treeItemBlockName, 'value'); // const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;
 
-const classNameModifierWrapAll = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "__value--wrap-all");
-const classNameModifierTruncate = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "__value--truncate"); // eslint-disable-next-line react/prop-types
+const classNameModifierWrapAll = `${DSTreeViewPrefix}-${treeItemBlockName}__value--wrap-all`;
+const classNameModifierTruncate = `${DSTreeViewPrefix}-${treeItemBlockName}__value--truncate`; // eslint-disable-next-line react/prop-types
 
 const CustomHighlight = _ref => {
   let {
@@ -87,10 +87,10 @@ function TreeItemText(props) {
     });
   }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);
   let className = '';
-  if (labelOverflow === 'wrap-all') className += "".concat(classNameModifierWrapAll, " ");
-  if (labelOverflow === 'truncate') className += "".concat(classNameModifierTruncate, " ");
+  if (labelOverflow === 'wrap-all') className += `${classNameModifierWrapAll} `;
+  if (labelOverflow === 'truncate') className += `${classNameModifierTruncate} `;
   return /*#__PURE__*/_jsx(ItemContent, {
-    "data-testid": "".concat(treeItemBlockName, "-content")
+    "data-testid": `${treeItemBlockName}-content`
   }, void 0, /*#__PURE__*/_jsx(ItemValue, {
     className: className
   }, void 0, Text));

package/esm/parts/TreeList.js

@@ -20,7 +20,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 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 treeListNoItemsBn = "".concat(treeListBlockName, "-no-items");
+const treeListNoItemsBn = `${treeListBlockName}-no-items`;
 const TreeListNoItems = aggregatedClasses('div', {
   'data-testid': treeListNoItemsBn
 })(treeListNoItemsBn); // React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era
@@ -34,11 +34,11 @@ const TreeListWrapper = aggregatedClasses('ul', {
     rowSize
   } = _ref;
   return {
-    ["rowsize-".concat(rowSize)]: rowSize
+    [`rowsize-${rowSize}`]: rowSize
   };
 });
-const compactRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-compact");
-const normaRowClass = "".concat(DSTreeViewPrefix, "-tv-row-size-normal");
+const compactRowClass = `${DSTreeViewPrefix}-tv-row-size-compact`;
+const normaRowClass = `${DSTreeViewPrefix}-tv-row-size-normal`;
 
 const TreeListComp = () => {
   const ctx = useContext(TreeViewContext);
@@ -58,7 +58,7 @@ const TreeListComp = () => {
     totalSize,
     virtualItems
   } = virtualListHelpers;
-  const className = "".concat(rowSize === 'compact' ? "".concat(compactRowClass) : "".concat(normaRowClass));
+  const className = `${rowSize === 'compact' ? `${compactRowClass}` : `${normaRowClass}`}`;
   const {
     visibleItems
   } = useContext(DnDTreeContext);
@@ -66,8 +66,8 @@ const TreeListComp = () => {
     ref: virtualListRef,
     className: className,
     style: {
-      height: "".concat(typeof height === 'number' ? "".concat(height, "px") : height),
-      width: "".concat(typeof width === 'number' ? "".concat(width, "px") : width),
+      height: `${typeof height === 'number' ? `${height}px` : height}`,
+      width: `${typeof width === 'number' ? `${width}px` : width}`,
       overflow: 'auto'
     },
     children: [isLoading ? /*#__PURE__*/_jsx("div", {
@@ -86,7 +86,7 @@ const TreeListComp = () => {
       showTooltip: false
     })) : null, !isLoading && virtualItems.length === 0 ? /*#__PURE__*/_jsx(TreeListNoItems, {}, void 0, noItemsPlaceholder) : null, !isLoading && virtualItems.length !== 0 ? /*#__PURE__*/_jsx("div", {
       style: {
-        height: "".concat(totalSize, "px"),
+        height: `${totalSize}px`,
         width: '100%',
         position: 'relative'
       }
@@ -104,12 +104,12 @@ const TreeListComp = () => {
       } = item;
       const style = {
         position: 'absolute',
-        top: "".concat(start, "px"),
+        top: `${start}px`,
         left: 0,
         width: '100%'
       };
       const listItemProps = {
-        key: "DS-TreeView-List-Item-".concat(id),
+        key: `DS-TreeView-List-Item-${id}`,
         virtualItemRef: measureRef,
         index,
         // this is consumed by the DnD HOC

package/esm/utils/array-helpers.js

@@ -1,5 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-
 // https://github.com/sindresorhus/array-move/blob/master/index.js
 const arrayMoveMutate = (array, from, to) => {
   const startIndex = from < 0 ? array.length + from : from;

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

@@ -90,7 +90,7 @@ const useNotifyExpandedChange = (propsWithDefaults, _ref) => {
     latestToggledItem,
     expandedGroups
   } = _ref;
-  const notifyExpandedChange = useCallback(expandedGroupHashmap => propsWithDefaults === null || propsWithDefaults === void 0 ? void 0 : propsWithDefaults.onExpandChange(expandedGroupHashmap || {}, latestToggledItem), [propsWithDefaults, latestToggledItem]);
+  const notifyExpandedChange = useCallback(expandedGroupHashmap => propsWithDefaults?.onExpandChange(expandedGroupHashmap || {}, latestToggledItem), [propsWithDefaults, latestToggledItem]);
   useEffect(() => {
     if (!propsWithDefaults.expanded) notifyExpandedChange(expandedGroups);
   }, [expandedGroups, notifyExpandedChange, propsWithDefaults.expanded]);

package/esm/utils/object-helpers.js

@@ -12,9 +12,7 @@ import 'core-js/modules/esnext.iterator.reduce.js';
 
 /* 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';
+  return o?.constructor?.name === 'Date';
 }
 
 function isObjectAnArray(o) {

package/esm/utils/tree-helpers.js

@@ -1,14 +1,20 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.error.cause.js';
 import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.find.js';
 import 'core-js/modules/esnext.async-iterator.every.js';
 import 'core-js/modules/esnext.iterator.every.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import { createRef } from 'react';
 import { standardizeSearchQueryString } from './string-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 walkVisibles = function (node, callback) {
   let skipRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   let highlightOnlyQuery = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -128,8 +134,6 @@ const getChildrenMatchesSearchQuery = function (parentNode) {
  */
 
 const enrichNodeModelInPlace = function (node) {
-  var _node$model$children$, _node$model, _node$model$children;
-
   let searchQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let selection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   let expanded = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
@@ -144,7 +148,7 @@ const enrichNodeModelInPlace = function (node) {
   // this is useful to avoid having to always check both the flag and the children.length...
 
 
-  if (typeof node.model.isGroup !== 'boolean' && ((_node$model$children$ = (_node$model = node.model) === null || _node$model === void 0 ? void 0 : (_node$model$children = _node$model.children) === null || _node$model$children === void 0 ? void 0 : _node$model$children.length) !== null && _node$model$children$ !== void 0 ? _node$model$children$ : 0) > 0) {
+  if (typeof node.model.isGroup !== 'boolean' && (node.model?.children?.length ?? 0) > 0) {
     node.model.isGroup = true;
   }
 
@@ -172,9 +176,7 @@ const enrichNodeModelInPlace = function (node) {
   }
 };
 const focusItem = item => {
-  var _item$nodeItemRef, _item$nodeItemRef$cur;
-
-  item === null || item === void 0 ? void 0 : (_item$nodeItemRef = item.nodeItemRef) === null || _item$nodeItemRef === void 0 ? void 0 : (_item$nodeItemRef$cur = _item$nodeItemRef.current) === null || _item$nodeItemRef$cur === void 0 ? void 0 : _item$nodeItemRef$cur.focus();
+  item?.nodeItemRef?.current?.focus();
 };
 const flattenTreeForDnD = function (data) {
   let shouldDescend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => true;
@@ -182,23 +184,21 @@ const flattenTreeForDnD = function (data) {
   let index = 0;
 
   const doit = function (node) {
-    var _node$children$length, _node$children, _node$children2;
-
     let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     flattenedTree.push({
-      uid: node.id.toString(),
+      uid: node.model.id.toString(),
       depth,
       realIndex: index,
-      childrenCount: (_node$children$length = (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.length) !== null && _node$children$length !== void 0 ? _node$children$length : 0,
+      childrenCount: node.children?.length ?? 0,
       parentId: parentId !== null ? parentId.toString() : null,
-      original: node
+      original: _objectSpread(_objectSpread({}, node), node.model)
     });
     index += 1;
-    if (shouldDescend(node)) (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.forEach(child => doit(child, depth + 1, node.id.toString()));
+    if (shouldDescend(node)) node.children?.forEach(child => doit(child, depth + 1, node.model.id.toString()));
   };
 
-  data.forEach(datum => doit(datum));
+  data.children.forEach(node => doit(node));
   return flattenedTree;
 };
 

package/esm/utils/useInstanceRefActions.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import { focusItem } from './tree-helpers.js';
 import { toggleExpandAllHelper } from './group-expands-helpers.js';

package/esm/utils/useTree.js

@@ -4,7 +4,6 @@ import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import TreeModel from 'tree-model';
 import { cloneDeep } from 'lodash';
@@ -84,7 +83,7 @@ const useTree = (data, props, states) => {
     setExpandedGroups(newExpandedHashMap); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [treeRoot, rerenderItems, searchQuery, highlightOnlyQuery, selection, expanded, setExpandedGroups // onVisibleItemsChange // evaluate potential performance hit?
   ]);
-  const flattenedItems = useMemo(() => flattenTreeForDnD(data), [data]);
+  const flattenedItems = useMemo(() => flattenTreeForDnD(treeRoot), [treeRoot]);
   return {
     visibleItems,
     flattenedItems,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-treeview",
-  "version": "2.4.2-rc.9",
+  "version": "2.4.3-rc.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tree View",
   "module": "./esm/index.js",
@@ -229,15 +229,15 @@
   "dependencies": {
     "@dnd-kit/core": "~4.0.1",
     "@dnd-kit/sortable": "~5.0.0",
-    "@elliemae/ds-button": "2.4.2-rc.9",
-    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.9",
-    "@elliemae/ds-classnames": "2.4.2-rc.9",
-    "@elliemae/ds-drag-and-drop": "2.4.2-rc.9",
-    "@elliemae/ds-form": "2.4.2-rc.9",
-    "@elliemae/ds-icons": "2.4.2-rc.9",
-    "@elliemae/ds-props-helpers": "2.4.2-rc.9",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.9",
-    "@elliemae/ds-utilities": "2.4.2-rc.9",
+    "@elliemae/ds-button": "2.4.3-rc.10",
+    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.10",
+    "@elliemae/ds-classnames": "2.4.3-rc.10",
+    "@elliemae/ds-drag-and-drop": "2.4.3-rc.10",
+    "@elliemae/ds-form": "2.4.3-rc.10",
+    "@elliemae/ds-icons": "2.4.3-rc.10",
+    "@elliemae/ds-props-helpers": "2.4.3-rc.10",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.10",
+    "@elliemae/ds-utilities": "2.4.3-rc.10",
     "react-desc": "~4.1.3",
     "react-highlight-words": "~0.17.0",
     "react-virtual": "~2.8.2",

package/types/react-desc-prop-types.d.ts

@@ -38,7 +38,7 @@ export declare namespace DSTreeviewT {
         realIndex: number;
         childrenCount: number;
         parentId: string | null;
-        original: SimpleItem;
+        original: DSTreeviewT.Item;
     }
     interface Actions {
         toggleExpandAll: (isExpand: boolean) => Promise<DSTreeviewT.Item[]>;

package/types/utils/tree-helpers.d.ts

@@ -24,5 +24,5 @@ export declare const getChildrenMatchesSearchQuery: (parentNode: DSTreeviewT.Ite
  */
 export declare const enrichNodeModelInPlace: (node: TreeModel.Node<DSTreeviewT.SimpleItem>, searchQuery?: string, selection?: DSTreeviewT.SelectionItems | null, expanded?: DSTreeviewT.ExpandedItems | null) => void;
 export declare const focusItem: (item: DSTreeviewT.Item | null) => void;
-export declare const flattenTreeForDnD: (data: DSTreeviewT.SimpleItem[], shouldDescend?: (datum: DSTreeviewT.SimpleItem) => boolean) => DSTreeviewT.DndItem[];
+export declare const flattenTreeForDnD: (data: TreeModel.Node<DSTreeviewT.Item>, shouldDescend?: (datum: TreeModel.Node<DSTreeviewT.Item>) => boolean) => DSTreeviewT.DndItem[];
 export {};