@elliemae/ds-treeview 2.0.0-next.0 → 2.0.0-next.13

package/esm/deprecated/plugins/tree/TreeDataPlugin.js

@@ -1,10 +1,19 @@
+import 'core-js/modules/esnext.async-iterator.filter.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 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
 import React, { useCallback } from 'react';
-import { cx, isFunction } from '@elliemae/ds-utilities/utils';
-import Button from '@elliemae/ds-basic/Button';
-import ArrowheadDown from '@elliemae/ds-icons/ArrowheadDown';
-import ArrowheadRight from '@elliemae/ds-icons/ArrowheadRight';
+import { cx, isFunction } from '@elliemae/ds-utilities';
+import Button from '@elliemae/ds-button';
+import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
 import { walkTreeStrategy } from './walkTreeStrategy.js';
@@ -17,7 +26,7 @@ var _ArrowheadDown, _ArrowheadRight;
 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 ItemContent = aggregatedClasses('div')(`${treeItemBlockName}-content`);
+const ItemContent = aggregatedClasses('div')("".concat(treeItemBlockName, "-content"));
 const ItemValue = aggregatedClasses('span')(treeItemBlockName, 'value');
 
 const noop = () => null;
@@ -31,7 +40,7 @@ const getItemNestingLeftPadding = (level, opts) => {
   }, opts);
 
   const groupLeftPadding = spaceForNestingLevel * (level - 1);
-  return isChild ? `${groupLeftPadding + spaceForNestingLevel - 0.1}em` : `${groupLeftPadding}em`;
+  return isChild ? "".concat(groupLeftPadding + spaceForNestingLevel - 0.1, "em") : "".concat(groupLeftPadding, "em");
 };
 
 const itemRenderer = (value, itemProps, instance) => {
@@ -52,9 +61,9 @@ const itemRenderer = (value, itemProps, instance) => {
   const amountChildren = Number(getItemChildrenLength(record));
   const renderedLabel = isFunction(labelRenderer) && labelRenderer(value, itemProps) || value;
   return /*#__PURE__*/_jsx(ItemContent, {
-    "data-testid": `${treeItemBlockName}-content`,
+    "data-testid": "".concat(treeItemBlockName, "-content"),
     onClick: handleItemClick
-  }, void 0, /*#__PURE__*/_jsx(ItemValue, {}, void 0, renderedLabel, showChildrenAmount && record.isGroup && ` (${amountChildren})`));
+  }, void 0, /*#__PURE__*/_jsx(ItemValue, {}, void 0, renderedLabel, showChildrenAmount && record.isGroup && " (".concat(amountChildren, ")")));
 };
 
 itemRenderer.order = 100;
@@ -79,9 +88,10 @@ const TreePluginList = createInstancePlugin('tree-data', {
     }));
   },
 
-  getItemProps(props, instance, {
-    record
-  }) {
+  getItemProps(props, instance, _ref) {
+    let {
+      record
+    } = _ref;
     const {
       nestingLevel
     } = record;
@@ -120,7 +130,7 @@ const TreePluginList = createInstancePlugin('tree-data', {
       size: "s",
       tabIndex: -1 // eslint-disable-next-line max-lines
 
-    }, `${record.id}-expand-addon`);
+    }, "".concat(record.id, "-expand-addon"));
 
     const iconAddon = icon && /*#__PURE__*/React.cloneElement(icon, {
       'data-testid': record.isGroup ? 'tree-item-group-icon' : 'tree-item-icon',
@@ -132,7 +142,7 @@ const TreePluginList = createInstancePlugin('tree-data', {
       style: {
         width: itemNestingLeftPadding
       }
-    }, `${record.id}-space-addon`);
+    }, "".concat(record.id, "-space-addon"));
 
     return _objectSpread(_objectSpread({}, props), {}, {
       'data-id': record.id,
@@ -158,9 +168,10 @@ const TreePluginList = createInstancePlugin('tree-data', {
   },
 
   hotKeys(instance) {
-    function handleExpand({
-      index
-    }) {
+    function handleExpand(_ref2) {
+      let {
+        index
+      } = _ref2;
       const {
         records,
         actions: {
@@ -171,9 +182,10 @@ const TreePluginList = createInstancePlugin('tree-data', {
       if (record && record.data.children.length > 0) _toggleExpand(record.data);
     }
 
-    function handleCollapse({
-      index
-    }) {
+    function handleCollapse(_ref3) {
+      let {
+        index
+      } = _ref3;
       const {
         records,
         actions: {
@@ -225,9 +237,10 @@ const TreePluginList = createInstancePlugin('tree-data', {
       handler: handleCollapse
     }, {
       key: 'enter',
-      handler: ({
-        index
-      }) => {
+      handler: _ref4 => {
+        let {
+          index
+        } = _ref4;
         const {
           records,
           actions: {

package/esm/deprecated/plugins/tree/useExpandTreeState.js

@@ -1,7 +1,12 @@
+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, useEffect } from 'react';
-import useExpandState from '@elliemae/ds-utilities/hooks/useExpandState';
-import { isFunction } from '@elliemae/ds-utilities/utils';
+import { useExpandState, isFunction } from '@elliemae/ds-utilities';
 import { walkTreeStrategy } from './walkTreeStrategy.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; }

package/esm/deprecated/plugins/tree/utils.js

@@ -1,12 +1,25 @@
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
 import get from 'lodash/get';
 
 const getParentId = record => get(record, ['parentNode', 'id']);
-const findItemOnDocument = id => document.querySelector(`[data-id="${id}"]`);
-const getListFromDocument = () => document.querySelector(`[data-testid="tree-list"]`);
-const getParentChildren = (record, childrenKey = 'children') => get(record, ['parentNode', 'data', childrenKey]);
-const getItemLabel = (record, nameKey = 'name') => get(record, ['data', nameKey]);
-const getItemChildren = (record, childrenKey = 'children') => get(record, ['data', childrenKey]);
-const getItemChildrenLength = (record, childrenKey = 'children') => {
+const findItemOnDocument = id => document.querySelector("[data-id=\"".concat(id, "\"]"));
+const getListFromDocument = () => document.querySelector("[data-testid=\"tree-list\"]");
+const getParentChildren = function (record) {
+  let childrenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
+  return get(record, ['parentNode', 'data', childrenKey]);
+};
+const getItemLabel = function (record) {
+  let nameKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'name';
+  return get(record, ['data', nameKey]);
+};
+const getItemChildren = function (record) {
+  let childrenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
+  return get(record, ['data', childrenKey]);
+};
+const getItemChildrenLength = function (record) {
+  let childrenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
   const children = get(record, ['data', childrenKey]);
   return children && children.length;
 };

package/esm/deprecated/plugins/tree/walkTreeStrategy.js

@@ -1,17 +1,21 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+
 function getPath(parentNode, index, childrenKey) {
   if (!parentNode) return [index];
   return [...parentNode.path, childrenKey, index];
 }
 
-function walkTreeStrategy({
-  data,
-  childrenKey = 'children',
-  level = 0,
-  getId = item => item.id,
-  parentNode,
-  shouldWalkChildren = () => true,
-  cb
-}) {
+function walkTreeStrategy(_ref) {
+  let {
+    data,
+    childrenKey = 'children',
+    level = 0,
+    getId = item => item.id,
+    parentNode,
+    shouldWalkChildren = () => true,
+    cb
+  } = _ref;
+
   // eslint-disable-next-line no-plusplus
   for (let i = 0; i < data.length; i++) {
     const currLevel = level + 1;

package/esm/deprecated/plugins/virtualization/TreeVirtualizationPlugin.js

@@ -1,3 +1,8 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
@@ -49,11 +54,12 @@ function areEqualRecords(prevProps, nextProps) {
 // https://react-window.now.sh/#/examples/list/memoized-list-items
 
 
-const VirtualizedTreeItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
-  index,
-  style,
-  data
-}, ref) => {
+const VirtualizedTreeItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    index,
+    style,
+    data
+  } = _ref;
   const {
     instance,
     records,
@@ -84,13 +90,13 @@ const VirtualizedTreeItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardR
   }));
 }), areEqualRecords); // eslint-disable-next-line react/display-name
 
-const VirtualizedTree = (renderers, instance) => _ref => {
+const VirtualizedTree = (renderers, instance) => _ref2 => {
   let {
     records,
     itemRenderer,
     innerRef
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const {
@@ -152,17 +158,25 @@ const TreeVirtualizationPlugin = createInstancePlugin('tree-virtualization', {
         listRef
       },
       actions: {
-        scrollTo: (...args) => {
+        scrollTo: function () {
           var _listRef$current;
 
           if (listRef !== null && listRef !== void 0 && (_listRef$current = listRef.current) !== null && _listRef$current !== void 0 && _listRef$current.scrollTo) {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+
             listRef.current.scrollTo(args);
           }
         },
-        scrollToItem: (...args) => {
+        scrollToItem: function () {
           var _listRef$current2;
 
           if (listRef !== null && listRef !== void 0 && (_listRef$current2 = listRef.current) !== null && _listRef$current2 !== void 0 && _listRef$current2.scrollToItem) {
+            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+              args[_key2] = arguments[_key2];
+            }
+
             listRef.current.scrollToItem(args);
           }
         }

package/esm/deprecated/renderers.js

@@ -1,3 +1,8 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -12,7 +17,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 treeListBlockName = 'tree-list';
 const treeItemBlockName = 'tree-item';
-const treeListNoItemsBn = `${treeListBlockName}-no-items`;
+const treeListNoItemsBn = "".concat(treeListBlockName, "-no-items");
 const TreeListItem = aggregatedClasses('li', {
   'data-testid': treeItemBlockName,
   role: 'treeitem'
@@ -21,22 +26,25 @@ const TreeListItemAddonsWrapper = aggregatedClasses('div')(treeItemBlockName, 'a
 const TreeList = aggregatedClasses('ul', {
   'data-testid': treeListBlockName,
   role: 'tree'
-})(treeListBlockName, null, ({
-  rowSize
-}) => ({
-  [`rowsize-${rowSize}`]: rowSize
-}));
+})(treeListBlockName, null, _ref => {
+  let {
+    rowSize
+  } = _ref;
+  return {
+    ["rowsize-".concat(rowSize)]: rowSize
+  };
+});
 const TreeListNoItems = aggregatedClasses('div', {
   'data-testid': treeListNoItemsBn
 })(treeListNoItemsBn);
 
-function TreeItem(_ref) {
+function TreeItem(_ref2) {
   let {
     leftAddons,
     rightAddons,
     children
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/jsxs(TreeListItem, _objectSpread(_objectSpread({}, rest), {}, {
     children: [leftAddons && /*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, leftAddons), children, rightAddons && /*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, rightAddons)]

package/esm/parts/CheckboxSelectable.js

@@ -1,7 +1,12 @@
+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 { useContext, useCallback, useMemo } from 'react';
-import Checkbox from '@elliemae/ds-basic/form/Checkbox';
+import { DSCheckbox } from '@elliemae/ds-form';
 import styled from 'styled-components';
 import TreeViewContext from '../TreeViewContext.js';
 import { toggleCheckboxItem } from '../utils/selectable-helper.js';
@@ -62,7 +67,7 @@ function CheckboxSelectable(props) {
 
     return false;
   }, [selectedCheckboxes, id]);
-  return /*#__PURE__*/_jsx(StyledCheckboxWrapper, {}, void 0, /*#__PURE__*/_jsx(Checkbox, {
+  return /*#__PURE__*/_jsx(StyledCheckboxWrapper, {}, void 0, /*#__PURE__*/_jsx(DSCheckbox, {
     checked: isChecked,
     disabled: item.isGroup ? disableGroups : disableLeafs,
     className: "em-ds-tree-item-checkbox",

package/esm/parts/ChildrenCountDisplayer.js

@@ -2,7 +2,7 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants.js';
 
-const className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;
+const className = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "-children-count-displayer");
 const ChildrenCountDisplayer = props => {
   const {
     item
@@ -16,7 +16,7 @@ const ChildrenCountDisplayer = props => {
   return /*#__PURE__*/_jsx("span", {
     "data-testid": "tree-item-children-count-displayer",
     className: className
-  }, void 0, ` | ${children.length} Items`);
+  }, void 0, " | ".concat(children.length, " Items"));
 };
 
 export { ChildrenCountDisplayer };

package/esm/parts/ExpandCaret.js

@@ -1,8 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useCallback, useContext } from 'react';
-import Button from '@elliemae/ds-basic/Button';
-import ArrowheadDown from '@elliemae/ds-icons/ArrowheadDown';
-import ArrowheadRight from '@elliemae/ds-icons/ArrowheadRight';
+import Button from '@elliemae/ds-button';
+import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
 import { toggleItemExpand } from '../utils/group-expands-helpers.js';
 import { focusItem } from '../utils/tree-helpers.js';
 import TreeViewContext from '../TreeViewContext.js';
@@ -56,9 +55,12 @@ const ExpandCaret = props => {
       setLatestToggledItem(item);
       onItemFocus({
         itemIndex: item.virtualIndex,
-        scrollToItem: (opts = {
-          align: 'start'
-        }) => scrollToIndex(item.virtualIndex, opts),
+        scrollToItem: function () {
+          let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+            align: 'start'
+          };
+          return scrollToIndex(item.virtualIndex, opts);
+        },
         item
       });
       setFocusedItem(item);
@@ -66,7 +68,7 @@ const ExpandCaret = props => {
     },
     size: "s",
     tabIndex: -1
-  }, `${id}-expand-addon`);
+  }, "".concat(id, "-expand-addon"));
   return /*#__PURE__*/_jsx("div", {
     style: {
       width: '24px'

package/esm/parts/Icon.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { cx } from '@elliemae/ds-utilities/utils';
+import { cx } from '@elliemae/ds-utilities';
 import TreeViewContext from '../TreeViewContext.js';
 
 const Icon = props => {

package/esm/parts/NestingSpace.js

@@ -1,3 +1,8 @@
+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';
@@ -15,7 +20,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 ? `${finalLeftPadding}em` : '0';
+  return finalLeftPadding > 0 ? "".concat(finalLeftPadding, "em") : '0';
 };
 
 const NestingSpace = props => {

package/esm/parts/RadioSelectable.js

@@ -1,6 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useCallback, useMemo } from 'react';
-import Radio from '@elliemae/ds-basic/form/Radio';
+import { DSRadio } from '@elliemae/ds-form';
 import TreeViewContext from '../TreeViewContext.js';
 
 function RadioSelectable(props) {
@@ -40,8 +40,8 @@ function RadioSelectable(props) {
     };
     if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
   }, [item, id, onSelectionChange, scrollToIndex]);
-  const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
-  return /*#__PURE__*/_jsx(Radio, {
+  const radioName = useMemo(() => "radios-".concat(uniqueTreeViewUUID), [uniqueTreeViewUUID]);
+  return /*#__PURE__*/_jsx(DSRadio, {
     checked: selectedCheckboxes[id] === true,
     name: radioName,
     disabled: item.isGroup ? disableGroups : disableLeafs,

package/esm/parts/TreeItem.js

@@ -1,9 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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 { useRef, useState, useContext, useMemo, useCallback } from 'react';
 import { SortableHandle, SortableElement } from '@elliemae/react-sortable-hoc';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
-import GripperVertical from '@elliemae/ds-icons/GripperVertical';
+import { GripperVertical } from '@elliemae/ds-icons';
 import RadioSelectable from './RadioSelectable.js';
 import CheckboxSelectable from './CheckboxSelectable.js';
 import TreeViewContext from '../TreeViewContext.js';
@@ -24,20 +30,23 @@ const TreeListItem = aggregatedClasses('li', {
   role: 'treeitem'
 })(treeItemBlockName);
 const TreeListItemAddonsWrapper = aggregatedClasses('div')(treeItemBlockName, 'addons');
-const DnDHandle = SortableHandle(({
-  id
-}) => /*#__PURE__*/_jsx(GripperVertical, {
-  "data-testid": "drag-handle",
-  className: "drag-handle",
-  size: "s",
-  onMouseDown: e => {
-    // prevent focusing the drag-handle to avoid borders
-    if (e) {
-      e.preventDefault();
-    }
-  },
-  tabIndex: "0"
-}, `${id}-drag-handle`));
+const DnDHandle = SortableHandle(_ref => {
+  let {
+    id
+  } = _ref;
+  return /*#__PURE__*/_jsx(GripperVertical, {
+    "data-testid": "drag-handle",
+    className: "drag-handle",
+    size: "s",
+    onMouseDown: e => {
+      // prevent focusing the drag-handle to avoid borders
+      if (e) {
+        e.preventDefault();
+      }
+    },
+    tabIndex: "0"
+  }, "".concat(id, "-drag-handle"));
+});
 const TreeItem = props => {
   const {
     item,
@@ -96,7 +105,7 @@ const TreeItem = props => {
       isAfter,
       isValid
     } = relativeMouseCord;
-    let className = `${DSTreeViewPrefix}-${treeItemBlockName}${isValid ? '--valid' : '--invalid'}`;
+    let className = "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName).concat(isValid ? '--valid' : '--invalid');
     if (isBefore) className += '-drop-before';else if (isAfter) className += '-drop-after';else className += '-drop-in';
     return className;
   }, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);
@@ -104,22 +113,25 @@ const TreeItem = props => {
   const hoverClassName = useMemo(() => (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) !== item.id || withDragAndDrop && isDragging ? '' : 'hover', [hoverItem, withDragAndDrop, isDragging]);
   const fixedHeightClassname = useMemo(() => {
     if (labelOverflow === 'truncate') {
-      if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;
-      return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;
+      if (rowSize === 'compact') return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--fixed-height-compact");
+      return "".concat(DSTreeViewPrefix, "-").concat(treeItemBlockName, "--fixed-height");
     }
 
     return '';
   }, [labelOverflow, rowSize]);
-  const finalClassName = useMemo(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName}`, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
+  const finalClassName = useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
   const handleItemClick = useCallback(e => {
     onItemClick(item, e);
     setFocusedItem(item);
     setSelectedItem(item);
     onItemFocus({
       itemIndex: item.virtualIndex,
-      scrollToItem: (opts = {
-        align: 'start'
-      }) => scrollToIndex(item.virtualIndex, opts),
+      scrollToItem: function () {
+        let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+          align: 'start'
+        };
+        return scrollToIndex(item.virtualIndex, opts);
+      },
       item
     });
   }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);

package/esm/parts/TreeItemText.js

@@ -1,25 +1,28 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo } from 'react';
 import Highlighter from 'react-highlight-words';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-basic';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { ChildrenCountDisplayer } from './ChildrenCountDisplayer.js';
 import { treeItemBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
 import TreeViewContext from '../TreeViewContext.js';
 import { jsxs, Fragment } from 'react/jsx-runtime';
 
-const ItemContent = aggregatedClasses('div')(`${treeItemBlockName}-content`);
+const ItemContent = aggregatedClasses('div')("".concat(treeItemBlockName, "-content"));
 const ItemValue = aggregatedClasses('span')(treeItemBlockName, 'value'); // const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;
 
-const classNameModifierWrapAll = `${DSTreeViewPrefix}-${treeItemBlockName}__value--wrap-all`;
-const classNameModifierTruncate = `${DSTreeViewPrefix}-${treeItemBlockName}__value--truncate`; // eslint-disable-next-line react/prop-types
+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 CustomHighlight = ({
-  children
-}) => /*#__PURE__*/_jsx("mark", {
-  className: "tree-text-highlight",
-  "data-testid": "tree-text-highlight"
-}, void 0, children);
+const CustomHighlight = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("mark", {
+    className: "tree-text-highlight",
+    "data-testid": "tree-text-highlight"
+  }, void 0, children);
+};
 
 function TreeItemText(props) {
   var _ChildrenCountDisplay, _ChildrenCountDisplay2, _ChildrenCountDisplay3, _ChildrenCountDisplay4;
@@ -84,10 +87,10 @@ function TreeItemText(props) {
     });
   }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);
   let className = '';
-  if (labelOverflow === 'wrap-all') className += `${classNameModifierWrapAll} `;
-  if (labelOverflow === 'truncate') className += `${classNameModifierTruncate} `;
+  if (labelOverflow === 'wrap-all') className += "".concat(classNameModifierWrapAll, " ");
+  if (labelOverflow === 'truncate') className += "".concat(classNameModifierTruncate, " ");
   return /*#__PURE__*/_jsx(ItemContent, {
-    "data-testid": `${treeItemBlockName}-content`
+    "data-testid": "".concat(treeItemBlockName, "-content")
   }, void 0, /*#__PURE__*/_jsx(ItemValue, {
     className: className
   }, void 0, Text));