@elliemae/ds-treeview 1.55.0-next.7 → 2.0.0-alpha.10

package/cjs/parts/TreeItem.js

@@ -3,174 +3,150 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var reactSortableHoc = require('@elliemae/react-sortable-hoc');
 var dsClassnames = require('@elliemae/ds-classnames');
 var GripperVertical = require('@elliemae/ds-icons/GripperVertical');
-var propTypes = require('../prop-types.js');
-var parts_RadioSelectable = require('./RadioSelectable.js');
-var parts_CheckboxSelectable = require('./CheckboxSelectable.js');
+var RadioSelectable = require('./RadioSelectable.js');
+var CheckboxSelectable = require('./CheckboxSelectable.js');
 var TreeViewContext = require('../TreeViewContext.js');
-var utils_refsHelpers = require('../utils/refs-helpers.js');
-var utils_keyboardHelpers = require('../utils/keyboard-helpers.js');
-var parts_NestingSpace = require('./NestingSpace.js');
-var parts_Icon = require('./Icon.js');
-var parts_ExpandCaret = require('./ExpandCaret.js');
-var parts_TreeItemText = require('./TreeItemText.js');
-var config_cssClassesConstants = require('../config/cssClassesConstants.js');
-require('prop-types');
-require('@elliemae/ds-basic/form/Radio');
-require('@elliemae/ds-basic/form/Checkbox');
-require('styled-components');
-require('../utils/selectable-helper.js');
-require('../utils/tree-helpers.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('../utils/string-helpers.js');
-require('../utils/object-helpers.js');
-require('@babel/runtime/helpers/typeof');
-require('../utils/group-expands-helpers.js');
-require('@elliemae/ds-utilities/utils');
-require('@elliemae/ds-basic/Button');
-require('@elliemae/ds-icons/ArrowheadDown');
-require('@elliemae/ds-icons/ArrowheadRight');
-require('react-highlight-words');
-require('@elliemae/ds-basic');
-require('./ChildrenCountDisplayer.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 jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var GripperVertical__default = /*#__PURE__*/_interopDefaultLegacy(GripperVertical);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var TreeListItem = dsClassnames.aggregatedClasses('li', {
-  'data-testid': config_cssClassesConstants.treeItemBlockName,
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const TreeListItem = dsClassnames.aggregatedClasses('li', {
+  'data-testid': cssClassesConstants.treeItemBlockName,
   role: 'treeitem'
-})(config_cssClassesConstants.treeItemBlockName);
-var TreeListItemAddonsWrapper = dsClassnames.aggregatedClasses('div')(config_cssClassesConstants.treeItemBlockName, 'addons');
-var DnDHandle = reactSortableHoc.SortableHandle(function (_ref) {
-  var id = _ref.id;
-  return /*#__PURE__*/React__default['default'].createElement(GripperVertical__default['default'], {
-    "data-testid": "drag-handle",
-    key: "".concat(id, "-drag-handle"),
-    className: "drag-handle",
-    size: "s",
-    onMouseDown: function onMouseDown(e) {
-      // prevent focusing the drag-handle to avoid borders
-      if (e) {
-        e.preventDefault();
-      }
+})(cssClassesConstants.treeItemBlockName);
+const TreeListItemAddonsWrapper = dsClassnames.aggregatedClasses('div')(cssClassesConstants.treeItemBlockName, 'addons');
+const DnDHandle = reactSortableHoc.SortableHandle(({
+  id
+}) => /*#__PURE__*/_jsx__default["default"](GripperVertical__default["default"], {
+  "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 TreeItem = props => {
+  const {
+    item,
+    itemIndex,
+    itemWrapperStyle = {},
+    virtualItemRef,
+    spaceForNestingLevel = 1.5,
+    onMouseDragOverItem
+  } = props;
+  const {
+    id,
+    node
+  } = item;
+  const {
+    nodeItemRef
+  } = node.model;
+  const openFolderOnHoverTimeout = React.useRef();
+  const [isDraggingOverThis, setIsDraggingOverThis] = React.useState(false);
+  const onItemKeyDown = keyboardHelpers.useOnItemKeyDown(item);
+  const ctx = React.useContext(TreeViewContext["default"]);
+  const {
+    props: {
+      disableIcons,
+      rightAddons,
+      onItemClick,
+      onItemFocus,
+      rowSize,
+      labelOverflow
     },
-    tabIndex: "0"
-  });
-});
-var TreeItem = function TreeItem(props) {
-  var item = props.item,
-      itemIndex = props.itemIndex,
-      _props$itemWrapperSty = props.itemWrapperStyle,
-      itemWrapperStyle = _props$itemWrapperSty === void 0 ? {} : _props$itemWrapperSty,
-      virtualItemRef = props.virtualItemRef,
-      _props$spaceForNestin = props.spaceForNestingLevel,
-      spaceForNestingLevel = _props$spaceForNestin === void 0 ? 1.5 : _props$spaceForNestin,
-      onMouseDragOverItem = props.onMouseDragOverItem;
-  var id = item.id,
-      node = item.node;
-  var nodeItemRef = node.model.nodeItemRef;
-  var openFolderOnHoverTimeout = React.useRef();
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      isDraggingOverThis = _useState2[0],
-      setIsDraggingOverThis = _useState2[1];
-
-  var onItemKeyDown = utils_keyboardHelpers.useOnItemKeyDown(item);
-  var ctx = React.useContext(TreeViewContext['default']);
-  var _ctx$props = ctx.props,
-      disableIcons = _ctx$props.disableIcons,
-      rightAddons = _ctx$props.rightAddons,
-      onItemClick = _ctx$props.onItemClick,
-      onItemFocus = _ctx$props.onItemFocus,
-      rowSize = _ctx$props.rowSize,
-      labelOverflow = _ctx$props.labelOverflow,
-      relativeMouseCord = ctx.relativeMouseCord,
-      withRadioChecks = ctx.withRadioChecks,
-      withCheckboxChecks = ctx.withCheckboxChecks,
-      withDragAndDrop = ctx.withDragAndDrop,
-      selectedItem = ctx.selectedItem,
-      selectedCheckboxes = ctx.selectedCheckboxes,
-      hoverItem = ctx.hoverItem,
-      isDragging = ctx.isDragging,
-      scrollToIndex = ctx.virtualListHelpers.scrollToIndex,
-      setHoverItem = ctx.setHoverItem,
-      setSelectedItem = ctx.setSelectedItem,
-      setFocusedItem = ctx.setFocusedItem; // Sortable Items needs to update
+    relativeMouseCord,
+    withRadioChecks,
+    withCheckboxChecks,
+    withDragAndDrop,
+    selectedItem,
+    selectedCheckboxes,
+    hoverItem,
+    isDragging,
+    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
 
-  var setItemRefs = function setItemRefs(ref) {
-    utils_refsHelpers.setMultipleRefs(virtualItemRef, nodeItemRef)(ref);
+  const setItemRefs = ref => {
+    refsHelpers.setMultipleRefs(virtualItemRef, nodeItemRef)(ref);
   };
 
-  var dropPreviewClassName = React.useMemo(function () {
+  const dropPreviewClassName = React.useMemo(() => {
     if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis) return '';
-    var isBefore = relativeMouseCord.isBefore,
-        isAfter = relativeMouseCord.isAfter,
-        isValid = relativeMouseCord.isValid;
-    var className = "".concat(config_cssClassesConstants.DSTreeViewPrefix, "-").concat(config_cssClassesConstants.treeItemBlockName).concat(isValid ? '--valid' : '--invalid');
+    const {
+      isBefore,
+      isAfter,
+      isValid
+    } = relativeMouseCord;
+    let className = `${cssClassesConstants.DSTreeViewPrefix}-${cssClassesConstants.treeItemBlockName}${isValid ? '--valid' : '--invalid'}`;
     if (isBefore) className += '-drop-before';else if (isAfter) className += '-drop-after';else className += '-drop-in';
     return className;
   }, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);
-  var selectedClassName = React.useMemo(function () {
-    return (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? 'selected' : '';
-  }, [selectedItem]);
-  var hoverClassName = React.useMemo(function () {
-    return (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) !== item.id || withDragAndDrop && isDragging ? '' : 'hover';
-  }, [hoverItem, withDragAndDrop, isDragging]);
-  var fixedHeightClassname = React.useMemo(function () {
+  const selectedClassName = React.useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? 'selected' : '', [selectedItem]);
+  const hoverClassName = React.useMemo(() => (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) !== item.id || withDragAndDrop && isDragging ? '' : 'hover', [hoverItem, withDragAndDrop, isDragging]);
+  const fixedHeightClassname = React.useMemo(() => {
     if (labelOverflow === 'truncate') {
-      if (rowSize === 'compact') return "".concat(config_cssClassesConstants.DSTreeViewPrefix, "-").concat(config_cssClassesConstants.treeItemBlockName, "--fixed-height-compact");
-      return "".concat(config_cssClassesConstants.DSTreeViewPrefix, "-").concat(config_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]);
-  var finalClassName = React.useMemo(function () {
-    return "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName);
-  }, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
-  var handleItemClick = React.useCallback(function (e) {
+  const finalClassName = React.useMemo(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName}`, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
+  const handleItemClick = React.useCallback(e => {
     onItemClick(item, e);
     setFocusedItem(item);
     setSelectedItem(item);
     onItemFocus({
       itemIndex: item.virtualIndex,
-      scrollToItem: function scrollToItem() {
-        var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-          align: 'start'
-        };
-        return scrollToIndex(item.virtualIndex, opts);
-      },
-      item: item
+      scrollToItem: (opts = {
+        align: 'start'
+      }) => scrollToIndex(item.virtualIndex, opts),
+      item
     });
   }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
-  return /*#__PURE__*/React__default['default'].createElement(TreeListItem, {
+  return /*#__PURE__*/jsxRuntime.jsxs(TreeListItem, {
     tabIndex: "0",
-    onMouseMove: function onMouseMove(event) {
+    onMouseMove: event => {
       if (withDragAndDrop) {
         onMouseDragOverItem({
-          event: event,
-          item: item,
-          itemIndex: itemIndex,
-          setIsDraggingOverThis: setIsDraggingOverThis,
-          openFolderOnHoverTimeout: openFolderOnHoverTimeout
+          event,
+          item,
+          itemIndex,
+          setIsDraggingOverThis,
+          openFolderOnHoverTimeout
         });
       }
     },
-    onMouseLeave: function onMouseLeave() {
+    onMouseLeave: () => {
       if (withDragAndDrop) {
         setIsDraggingOverThis(false);
         if (openFolderOnHoverTimeout !== null && openFolderOnHoverTimeout !== void 0 && openFolderOnHoverTimeout.current) clearTimeout(openFolderOnHoverTimeout.current);
@@ -180,7 +156,7 @@ var TreeItem = function TreeItem(props) {
         setHoverItem(null);
       }
     },
-    onMouseEnter: function onMouseEnter() {
+    onMouseEnter: () => {
       setHoverItem(item);
     },
     onClick: handleItemClick,
@@ -191,31 +167,30 @@ var TreeItem = function TreeItem(props) {
     "aria-selected": selectedCheckboxes[item.id],
     "data-id": item.id,
     "data-index": item.virtualIndex,
-    onKeyDown: onItemKeyDown
-  }, /*#__PURE__*/React__default['default'].createElement(TreeListItemAddonsWrapper, null, withDragAndDrop ? /*#__PURE__*/React__default['default'].createElement(DnDHandle, {
-    id: id
-  }) : null, withRadioChecks ? /*#__PURE__*/React__default['default'].createElement(parts_RadioSelectable, {
-    item: item,
-    itemIndex: itemIndex
-  }) : null, withCheckboxChecks ? /*#__PURE__*/React__default['default'].createElement(parts_CheckboxSelectable, {
-    item: item,
-    itemIndex: itemIndex
-  }) : null, /*#__PURE__*/React__default['default'].createElement(parts_NestingSpace.NestingSpace, {
-    item: item,
-    spaceForNestingLevel: spaceForNestingLevel
-  }), /*#__PURE__*/React__default['default'].createElement(parts_ExpandCaret.ExpandCaret, {
-    item: item
-  }), !disableIcons ? /*#__PURE__*/React__default['default'].createElement(parts_Icon.Icon, {
-    item: item
-  }) : null), /*#__PURE__*/React__default['default'].createElement(parts_TreeItemText.TreeItemText, {
-    item: item
-  }), rightAddons && /*#__PURE__*/React__default['default'].createElement(TreeListItemAddonsWrapper, null, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons));
+    onKeyDown: onItemKeyDown,
+    children: [/*#__PURE__*/_jsx__default["default"](TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx__default["default"](DnDHandle, {
+      id: id
+    }) : null, withRadioChecks ? /*#__PURE__*/_jsx__default["default"](RadioSelectable, {
+      item: item,
+      itemIndex: itemIndex
+    }) : null, withCheckboxChecks ? /*#__PURE__*/_jsx__default["default"](CheckboxSelectable, {
+      item: item,
+      itemIndex: itemIndex
+    }) : null, /*#__PURE__*/_jsx__default["default"](NestingSpace.NestingSpace, {
+      item: item,
+      spaceForNestingLevel: spaceForNestingLevel
+    }), /*#__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)]
+  });
 };
-TreeItem.propTypes = propTypes.TreeItemPropTypes;
-var DragAndDropTreeItem = reactSortableHoc.SortableElement(TreeItem);
+const DragAndDropTreeItem = reactSortableHoc.SortableElement(TreeItem);
 
 exports.DragAndDropTreeItem = DragAndDropTreeItem;
 exports.TreeItem = TreeItem;
 exports.TreeListItem = TreeListItem;
 exports.TreeListItemAddonsWrapper = TreeListItemAddonsWrapper;
-//# sourceMappingURL=TreeItem.js.map

package/cjs/parts/TreeItemText.js

@@ -2,96 +2,104 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var PropTypes = require('prop-types');
 var Highlighter = require('react-highlight-words');
 var dsBasic = require('@elliemae/ds-basic');
 var dsClassnames = require('@elliemae/ds-classnames');
-var parts_ChildrenCountDisplayer = require('./ChildrenCountDisplayer.js');
-var config_cssClassesConstants = require('../config/cssClassesConstants.js');
+var ChildrenCountDisplayer = require('./ChildrenCountDisplayer.js');
+var cssClassesConstants = require('../config/cssClassesConstants.js');
 var TreeViewContext = require('../TreeViewContext.js');
-require('../prop-types.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var Highlighter__default = /*#__PURE__*/_interopDefaultLegacy(Highlighter);
 
-/* eslint-disable max-lines */
-var ItemContent = dsClassnames.aggregatedClasses('div')("".concat(config_cssClassesConstants.treeItemBlockName, "-content"));
-var ItemValue = dsClassnames.aggregatedClasses('span')(config_cssClassesConstants.treeItemBlockName, 'value'); // const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;
+const ItemContent = dsClassnames.aggregatedClasses('div')(`${cssClassesConstants.treeItemBlockName}-content`);
+const ItemValue = dsClassnames.aggregatedClasses('span')(cssClassesConstants.treeItemBlockName, 'value'); // const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;
 
-var classNameModifierWrapAll = "".concat(config_cssClassesConstants.DSTreeViewPrefix, "-").concat(config_cssClassesConstants.treeItemBlockName, "__value--wrap-all");
-var classNameModifierTruncate = "".concat(config_cssClassesConstants.DSTreeViewPrefix, "-").concat(config_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
 
-var CustomHighlight = function CustomHighlight(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React__default['default'].createElement("mark", {
-    className: "tree-text-highlight",
-    "data-testid": "tree-text-highlight"
-  }, children);
-};
+const CustomHighlight = ({
+  children
+}) => /*#__PURE__*/_jsx__default["default"]("mark", {
+  className: "tree-text-highlight",
+  "data-testid": "tree-text-highlight"
+}, void 0, children);
 
 function TreeItemText(props) {
-  var item = props.item;
-  var ctx = React.useContext(TreeViewContext['default']);
-  var _ctx$props = ctx.props,
-      searchQuery = _ctx$props.searchQuery,
-      showChildrenAmount = _ctx$props.showChildrenAmount,
-      labelOverflow = _ctx$props.labelOverflow,
-      nameKey = _ctx$props.nameKey;
-  var Text = React.useMemo(function () {
-    var itemLabelText = item[nameKey];
+  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__*/React__default['default'].createElement(dsBasic.SimpleTruncatedTooltipText, {
-          value: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Highlighter__default['default'], {
-            autoEscape: true,
-            highlightTag: CustomHighlight,
-            searchWords: [searchQuery],
-            textToHighlight: itemLabelText
-          }), showChildrenAmount ? /*#__PURE__*/React__default['default'].createElement(parts_ChildrenCountDisplayer.ChildrenCountDisplayer, {
-            item: item
-          }) : null)
+        return /*#__PURE__*/_jsx__default["default"](dsBasic.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__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Highlighter__default['default'], {
-        autoEscape: true,
-        highlightTag: CustomHighlight,
-        searchWords: [searchQuery],
-        textToHighlight: itemLabelText
-      }), showChildrenAmount ? /*#__PURE__*/React__default['default'].createElement(parts_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__*/React__default['default'].createElement(dsBasic.SimpleTruncatedTooltipText, {
-        value: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, itemLabelText, showChildrenAmount ? /*#__PURE__*/React__default['default'].createElement(parts_ChildrenCountDisplayer.ChildrenCountDisplayer, {
-          item: item
-        }) : null)
+      return /*#__PURE__*/_jsx__default["default"](dsBasic.SimpleTruncatedTooltipText, {
+        value: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay3 || (_ChildrenCountDisplay3 = /*#__PURE__*/_jsx__default["default"](ChildrenCountDisplayer.ChildrenCountDisplayer, {
+            item: item
+          })) : null]
+        })
       });
     }
 
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, itemLabelText, showChildrenAmount ? /*#__PURE__*/React__default['default'].createElement(parts_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]);
-  var className = '';
-  if (labelOverflow === 'wrap-all') className += "".concat(classNameModifierWrapAll, " ");
-  if (labelOverflow === 'truncate') className += "".concat(classNameModifierTruncate, " ");
-  return /*#__PURE__*/React__default['default'].createElement(ItemContent, {
-    "data-testid": "".concat(config_cssClassesConstants.treeItemBlockName, "-content")
-  }, /*#__PURE__*/React__default['default'].createElement(ItemValue, {
+  let className = '';
+  if (labelOverflow === 'wrap-all') className += `${classNameModifierWrapAll} `;
+  if (labelOverflow === 'truncate') className += `${classNameModifierTruncate} `;
+  return /*#__PURE__*/_jsx__default["default"](ItemContent, {
+    "data-testid": `${cssClassesConstants.treeItemBlockName}-content`
+  }, void 0, /*#__PURE__*/_jsx__default["default"](ItemValue, {
     className: className
-  }, Text));
+  }, void 0, Text));
 }
-TreeItemText.propTypes = {
-  item: PropTypes__default['default'].object.isRequired
-};
 
 exports.TreeItemText = TreeItemText;
-//# sourceMappingURL=TreeItemText.js.map