@elliemae/ds-treeview 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/parts/DnDHandle.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var SortableItemContext = require('../hoc/SortableItemContext.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 DnDHandle = _ref => {
+  let {
+    id,
+    isDragOverlay
+  } = _ref;
+  const {
+    draggableProps
+  } = React.useContext(SortableItemContext.SortableItemContext);
+  const isDragging = draggableProps && draggableProps.isDragging;
+  return /*#__PURE__*/React.createElement(dsIcons.GripperVertical, _objectSpread(_objectSpread({
+    role: "button"
+  }, draggableProps && _objectSpread(_objectSpread({}, draggableProps.listeners), draggableProps.attributes)), {}, {
+    "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'),
+    color: ['brand-primary', '800'],
+    size: "s",
+    tabIndex: 0
+  }));
+};
+
+exports.DnDHandle = DnDHandle;

package/cjs/parts/DropIndicator.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+var SortableItemContext = require('../hoc/SortableItemContext.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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    ");
+};
+
+const getCircleStyles = _ref2 => {
+  let {
+    dropIndicatorPosition
+  } = _ref2;
+  return {
+    position: 'absolute',
+    zIndex: 20,
+    top: dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.After ? 'unset' : '-2px',
+    bottom: dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before ? 'unset' : '-2px',
+    left: '0px',
+    opacity: 1
+  };
+};
+
+const StyledIndicator = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1812zh0-0"
+})(["position:absolute;", " box-sizing:border-box;width:", ";height:", ";background-color:", ";z-index:20;"], getPositionStyles, props => props.vertical ? '2px' : '100%', props => props.vertical ? '100%' : '2px', _ref3 => {
+  let {
+    isDropValid,
+    theme
+  } = _ref3;
+  return isDropValid ? theme.colors.brand[600] : theme.colors.danger[900];
+});
+
+const CircleIndicator = (style, isDropValid) => /*#__PURE__*/_jsx__default["default"]("svg", {
+  height: "6",
+  width: "6",
+  style: style
+}, void 0, /*#__PURE__*/_jsx__default["default"]("circle", {
+  cx: "3",
+  cy: "3",
+  r: "3",
+  strokeWidth: "0",
+  fill: isDropValid ? '#1E79C2' : '#C64252'
+}));
+
+const DropIndicator = _ref4 => {
+  let {
+    dropIndicatorPosition,
+    isLast,
+    isDropValid
+  } = _ref4;
+  if (![SortableItemContext.DropIndicatorPosition.After, SortableItemContext.DropIndicatorPosition.Before].includes(dropIndicatorPosition)) return null;
+  const safeDropIndicatorPosition = isLast ? SortableItemContext.DropIndicatorPosition.Before : dropIndicatorPosition;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [CircleIndicator(getCircleStyles({
+      dropIndicatorPosition: safeDropIndicatorPosition
+    }), isDropValid), /*#__PURE__*/_jsx__default["default"](StyledIndicator, {
+      dropIndicatorPosition: safeDropIndicatorPosition,
+      isDropValid: isDropValid
+    })]
+  });
+};
+
+module.exports = DropIndicator;

package/cjs/parts/ExpandCaret.js

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var Button = require('@elliemae/ds-button');
+var dsIcons = require('@elliemae/ds-icons');
+var groupExpandsHelpers = require('../utils/group-expands-helpers.js');
+var treeHelpers = require('../utils/tree-helpers.js');
+var TreeViewContext = require('../TreeViewContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+
+var _ArrowheadDown, _ArrowheadRight;
+const ExpandCaret = props => {
+  const defaultHandleExpandGroup = React.useCallback(groupExpandsHelpers.toggleItemExpand, []);
+  const {
+    item
+  } = props;
+  const {
+    id,
+    isExpanded,
+    isGroup,
+    children
+  } = item;
+  const isGroupOrHasChildrens = isGroup || Array.isArray(children) && children.length > 0;
+  const ctx = React.useContext(TreeViewContext["default"]);
+  const {
+    props: {
+      onItemFocus
+    },
+    handleExpandGroup = defaultHandleExpandGroup,
+    triggerTreeRerender,
+    updateUserExpandedState,
+    setLatestToggledItem,
+    setFocusedItem,
+    virtualListHelpers: {
+      scrollToIndex
+    }
+  } = ctx;
+  if (isGroupOrHasChildrens) return /*#__PURE__*/_jsx__default["default"](Button__default["default"], {
+    buttonType: "text",
+    className: "expandable-arrow",
+    "data-testid": "tree-item-expand-toggle",
+    icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
+      size: "s",
+      "data-testid": "ic-arrow-head-down"
+    })) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
+      size: "s",
+      "data-testid": "ic-arrow-head-right"
+    })),
+    onMouseDown: e => {
+      // prevent focusing the caret
+      if (e) {
+        e.preventDefault();
+      }
+    },
+    onClick: e => {
+      e.stopPropagation();
+      if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);
+      setLatestToggledItem(item);
+      const itemVitualIndex = item.virtualIndex;
+
+      if (typeof itemVitualIndex === 'number') {
+        onItemFocus({
+          itemIndex: itemVitualIndex,
+          scrollToItem: function () {
+            let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+              align: 'start'
+            };
+            return scrollToIndex(itemVitualIndex, opts);
+          },
+          item
+        });
+      }
+
+      setFocusedItem(item);
+      treeHelpers.focusItem(item);
+    },
+    size: "s",
+    tabIndex: -1
+  }, "".concat(id, "-expand-addon"));
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    style: {
+      width: '24px'
+    }
+  });
+};
+
+exports.ExpandCaret = ExpandCaret;

package/cjs/parts/Icon.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var TreeViewContext = require('../TreeViewContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Icon = props => {
+  const {
+    item
+  } = props;
+  const isGroupOrHasChildrens = item.isGroup || Array.isArray(item.children) && item.children.length > 0;
+  const ctx = React.useContext(TreeViewContext["default"]);
+  const {
+    props: {
+      groupIcon,
+      itemIcon
+    }
+  } = ctx;
+  const icon = isGroupOrHasChildrens ? groupIcon : itemIcon;
+  if (!icon) return null;
+  return /*#__PURE__*/React__default["default"].cloneElement(icon, {
+    'data-testid': isGroupOrHasChildrens ? 'tree-item-group-icon' : 'tree-item-icon',
+    // legacy class-name way of handling things,
+    // this will eventually be deprecated in favor of styled components
+    // untill then, just eslint-ignore and move on
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
+    className: dsUtilities.cx(icon.props.className, 'tree-item-icon')
+  });
+};
+
+exports.Icon = Icon;

package/cjs/parts/NestingSpace.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const getItemNestingLeftPadding = (level, opts) => {
+  const {
+    spaceForNestingLevel = 1.5
+  } = 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.
+
+  return finalLeftPadding > 0 ? "".concat(finalLeftPadding, "em") : '0';
+};
+
+const NestingSpace = props => {
+  const {
+    item,
+    spaceForNestingLevel
+  } = props;
+  const {
+    treeDepth
+  } = item;
+
+  if (treeDepth) {
+    const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
+      spaceForNestingLevel
+    });
+    return /*#__PURE__*/_jsx__default["default"]("div", {
+      "data-testid": "tree-item-nested-space",
+      style: {
+        width: itemNestingLeftPadding
+      }
+    });
+  }
+
+  return null;
+};
+
+exports.NestingSpace = NestingSpace;

package/cjs/parts/RadioSelectable.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsForm = require('@elliemae/ds-form');
+var TreeViewContext = require('../TreeViewContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+function RadioSelectable(props) {
+  const {
+    item,
+    itemIndex
+  } = props;
+  const ctx = React.useContext(TreeViewContext["default"]);
+  const {
+    props: {
+      onSelectionChange,
+      isItemDisabled
+    },
+    virtualListHelpers: {
+      scrollToIndex
+    },
+    uniqueTreeViewUUID,
+    selectedCheckboxes,
+    setSelectedCheckboxes
+  } = ctx;
+  const {
+    id
+  } = item;
+  const onRadioChange = React.useCallback(() => {
+    const newSelectionHasmap = {
+      [id]: true
+    };
+    setSelectedCheckboxes(newSelectionHasmap);
+    const indexAndScrollTo = {
+      scrollToItem: () => {
+        if (item.virtualIndex) scrollToIndex(item.virtualIndex);
+      },
+      itemIndex
+    };
+    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
+  }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);
+  const radioName = React.useMemo(() => "radios-".concat(uniqueTreeViewUUID), [uniqueTreeViewUUID]);
+  const isDisabled = React.useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
+  return /*#__PURE__*/_jsx__default["default"](dsForm.DSRadio, {
+    checked: selectedCheckboxes[id] === true,
+    name: radioName,
+    disabled: isDisabled,
+    className: "em-ds-tree-item-radio",
+    "data-testid": "tree-item-radio",
+    onChange: onRadioChange,
+    tabIndex: 0
+  });
+}
+
+module.exports = RadioSelectable;

package/cjs/parts/TreeItem.js

@@ -0,0 +1,185 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+var RadioSelectable = require('./RadioSelectable.js');
+var CheckboxSelectable = require('./CheckboxSelectable.js');
+var TreeViewContext = require('../TreeViewContext.js');
+var refsHelpers = require('../utils/refs-helpers.js');
+var keyboardHelpers = require('../utils/keyboard-helpers.js');
+var NestingSpace = require('./NestingSpace.js');
+var Icon = require('./Icon.js');
+var ExpandCaret = require('./ExpandCaret.js');
+var TreeItemText = require('./TreeItemText.js');
+var cssClassesConstants = require('../config/cssClassesConstants.js');
+var DnDHandle = require('./DnDHandle.js');
+var WithDnDSortableItemContext = require('../hoc/WithDnDSortableItemContext.js');
+var SortableItemContext = require('../hoc/SortableItemContext.js');
+var DropIndicator = require('./DropIndicator.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 TreeListItem = dsClassnames.aggregatedClasses('li', {
+  'data-testid': cssClassesConstants.treeItemBlockName,
+  role: 'treeitem' // temp fix untill we move to styled components
+
+})(cssClassesConstants.treeItemBlockName);
+const TreeListItemAddonsWrapper = dsClassnames.aggregatedClasses('div')(cssClassesConstants.treeItemBlockName, 'addons' // temp fix untill we move to styled components
+);
+const TreeItem = props => {
+  const {
+    item,
+    itemIndex,
+    itemWrapperStyle = {},
+    virtualItemRef,
+    spaceForNestingLevel = 1.5,
+    isDragOverlay = false
+  } = props;
+  const {
+    id,
+    node
+  } = item;
+  const {
+    nodeItemRef
+  } = node.model;
+  const {
+    draggableProps
+  } = React.useContext(SortableItemContext.SortableItemContext);
+  const onItemKeyDown = keyboardHelpers.useOnItemKeyDown(item, draggableProps);
+  const ctx = React.useContext(TreeViewContext["default"]);
+  const {
+    props: {
+      disableIcons,
+      rightAddons,
+      onItemClick,
+      onItemFocus,
+      rowSize,
+      labelOverflow
+    },
+    withRadioChecks,
+    withCheckboxChecks,
+    withDragAndDrop,
+    selectedItem,
+    selectedCheckboxes,
+    hoverItem,
+    virtualListHelpers: {
+      scrollToIndex
+    },
+    setHoverItem,
+    setSelectedItem,
+    setFocusedItem
+  } = ctx; // Sortable Items needs to update
+  //   - the virtual list ref (for react-virtual requirement)
+  //   - nodeItemRef which is a prop avaiable in the TreeModel nodes
+  //   - the drag and drop node reference
+
+  const setItemRefs = ref => {
+    refsHelpers.setMultipleRefs(virtualItemRef, !isDragOverlay && nodeItemRef, !isDragOverlay && draggableProps && draggableProps.setNodeRef)(ref);
+  };
+
+  const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
+  const isDropIndicatorPositionInside = dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Inside;
+  const isDragging = draggableProps && draggableProps.isDragging;
+  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");
+      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 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");
+    }
+
+    return '';
+  }, [labelOverflow, rowSize]);
+  const finalClassName = React.useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName, " ").concat(dragOverlayClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
+  const handleItemClick = React.useCallback(e => {
+    onItemClick(item, e);
+    setFocusedItem(item);
+    setSelectedItem(item);
+    const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;
+    onItemFocus({
+      itemIndex: itemVirtualIndex,
+      scrollToItem: function () {
+        let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+          align: 'start'
+        };
+        return scrollToIndex(itemVirtualIndex, opts);
+      },
+      item
+    });
+  }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
+  return /*#__PURE__*/jsxRuntime.jsxs(TreeListItem, {
+    tabIndex: 0,
+    onMouseLeave: () => {
+      if ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id) {
+        setHoverItem(null);
+      }
+    },
+    onMouseEnter: () => {
+      setHoverItem(item);
+    },
+    onClick: handleItemClick,
+    onBlur: () => setFocusedItem(null),
+    ref: setItemRefs,
+    style: _objectSpread({}, itemWrapperStyle),
+    className: finalClassName,
+    "aria-expanded": !!item.isExpanded,
+    "aria-selected": !!selectedCheckboxes[item.id],
+    "data-id": item.id,
+    "data-index": item.virtualIndex,
+    onKeyDown: onItemKeyDown,
+    children: [/*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx__default["default"](DnDHandle.DnDHandle, {
+      id: id,
+      isDragOverlay: isDragOverlay
+    }) : null, withRadioChecks && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](RadioSelectable, {
+      item: item,
+      itemIndex: itemIndex
+    }) : null, withCheckboxChecks && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](CheckboxSelectable, {
+      item: item,
+      itemIndex: itemIndex
+    }) : null, !isDragOverlay && /*#__PURE__*/_jsx__default["default"](NestingSpace.NestingSpace, {
+      item: item,
+      spaceForNestingLevel: spaceForNestingLevel
+    }), !isDragOverlay && /*#__PURE__*/_jsx__default["default"](ExpandCaret.ExpandCaret, {
+      item: item
+    }), !disableIcons ? /*#__PURE__*/_jsx__default["default"](Icon.Icon, {
+      item: item
+    }) : null), /*#__PURE__*/_jsx__default["default"](TreeItemText.TreeItemText, {
+      item: item
+    }), rightAddons && /*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons), /*#__PURE__*/_jsx__default["default"](DropIndicator, {
+      dropIndicatorPosition: dropIndicatorPosition,
+      isDropValid: isDropValid
+    })]
+  });
+};
+var TreeItem$1 = WithDnDSortableItemContext.withDnDSortableItemContext(TreeItem);
+
+exports.TreeItem = TreeItem;
+exports.TreeListItem = TreeListItem;
+exports.TreeListItemAddonsWrapper = TreeListItemAddonsWrapper;
+exports["default"] = TreeItem$1;

package/cjs/parts/TreeItemText.js

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var Highlighter = require('react-highlight-words');
+var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var dsClassnames = require('@elliemae/ds-classnames');
+var ChildrenCountDisplayer = require('./ChildrenCountDisplayer.js');
+var cssClassesConstants = require('../config/cssClassesConstants.js');
+var TreeViewContext = require('../TreeViewContext.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Highlighter__default = /*#__PURE__*/_interopDefaultLegacy(Highlighter);
+
+const ItemContent = dsClassnames.aggregatedClasses('div')("".concat(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 CustomHighlight = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("mark", {
+    className: "tree-text-highlight",
+    "data-testid": "tree-text-highlight"
+  }, void 0, children);
+};
+
+function TreeItemText(props) {
+  var _ChildrenCountDisplay, _ChildrenCountDisplay2, _ChildrenCountDisplay3, _ChildrenCountDisplay4;
+
+  const {
+    item
+  } = props;
+  const ctx = React.useContext(TreeViewContext["default"]);
+  const {
+    props: {
+      searchQuery,
+      showChildrenAmount,
+      labelOverflow,
+      nameKey
+    }
+  } = ctx;
+  const Text = React.useMemo(() => {
+    const itemLabelText = item[nameKey];
+
+    if (searchQuery) {
+      if (labelOverflow === 'truncate') {
+        return /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+          value: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/_jsx__default["default"](Highlighter__default["default"], {
+              autoEscape: true,
+              highlightTag: CustomHighlight,
+              searchWords: [searchQuery],
+              textToHighlight: itemLabelText
+            }), showChildrenAmount ? _ChildrenCountDisplay || (_ChildrenCountDisplay = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
+              item: item
+            })) : null]
+          })
+        });
+      }
+
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/_jsx__default["default"](Highlighter__default["default"], {
+          autoEscape: true,
+          highlightTag: CustomHighlight,
+          searchWords: [searchQuery],
+          textToHighlight: itemLabelText
+        }), showChildrenAmount ? _ChildrenCountDisplay2 || (_ChildrenCountDisplay2 = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
+          item: item
+        })) : null]
+      });
+    }
+
+    if (labelOverflow === 'truncate') {
+      return /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+        value: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay3 || (_ChildrenCountDisplay3 = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
+            item: item
+          })) : null]
+        })
+      });
+    }
+
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay4 || (_ChildrenCountDisplay4 = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
+        item: item
+      })) : null]
+    });
+  }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);
+  let className = '';
+  if (labelOverflow === 'wrap-all') className += "".concat(classNameModifierWrapAll, " ");
+  if (labelOverflow === 'truncate') className += "".concat(classNameModifierTruncate, " ");
+  return /*#__PURE__*/_jsx__default["default"](ItemContent, {
+    "data-testid": "".concat(cssClassesConstants.treeItemBlockName, "-content")
+  }, void 0, /*#__PURE__*/_jsx__default["default"](ItemValue, {
+    className: className
+  }, void 0, Text));
+}
+
+exports.TreeItemText = TreeItemText;