@elliemae/ds-treeview 2.2.1 → 2.3.0-alpha.4

package/esm/parts/TreeItem.js

@@ -1,163 +1,93 @@
-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';
-import RadioSelectable from './RadioSelectable.js';
-import CheckboxSelectable from './CheckboxSelectable.js';
-import TreeViewContext from '../TreeViewContext.js';
-import { setMultipleRefs } from '../utils/refs-helpers.js';
-import { useOnItemKeyDown } from '../utils/keyboard-helpers.js';
-import { NestingSpace } from './NestingSpace.js';
-import { Icon } from './Icon.js';
-import { ExpandCaret } from './ExpandCaret.js';
-import { TreeItemText } from './TreeItemText.js';
-import { treeItemBlockName, DSTreeViewPrefix } from '../config/cssClassesConstants.js';
-import { jsxs } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 TreeListItem = aggregatedClasses('li', {
-  'data-testid': treeItemBlockName,
-  role: 'treeitem' // temp fix untill we move to styled components
-
+import * as React from "react";
+import React2, { useContext, useMemo, useCallback } from "react";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import RadioSelectable from "./RadioSelectable";
+import CheckboxSelectable from "./CheckboxSelectable";
+import TreeViewContext from "../TreeViewContext";
+import { setMultipleRefs } from "../utils/refs-helpers";
+import { useOnItemKeyDown } from "../utils/keyboard-helpers";
+import { NestingSpace } from "./NestingSpace";
+import { Icon } from "./Icon";
+import { ExpandCaret } from "./ExpandCaret";
+import { TreeItemText } from "./TreeItemText";
+import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
+import { DnDHandle } from "./DnDHandle";
+import { withDnDSortableItemContext } from "../hoc/WithDnDSortableItemContext";
+import { DropIndicatorPosition, SortableItemContext } from "../hoc/SortableItemContext";
+import DropIndicator from "./DropIndicator";
+const TreeListItem = aggregatedClasses("li", {
+  "data-testid": treeItemBlockName,
+  role: "treeitem"
 })(treeItemBlockName);
-const TreeListItemAddonsWrapper = aggregatedClasses('div')(treeItemBlockName, 'addons' // temp fix untill we move to styled components
-);
-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 TreeListItemAddonsWrapper = aggregatedClasses("div")(treeItemBlockName, "addons");
+const TreeItem = (props) => {
   const {
     item,
     itemIndex,
     itemWrapperStyle = {},
     virtualItemRef,
     spaceForNestingLevel = 1.5,
-    onMouseDragOverItem
+    isDragOverlay = false
   } = props;
-  const {
-    id,
-    node
-  } = item;
-  const {
-    nodeItemRef
-  } = node.model;
-  const openFolderOnHoverTimeout = useRef(null);
-  const [isDraggingOverThis, setIsDraggingOverThis] = useState(false);
-  const onItemKeyDown = useOnItemKeyDown(item);
+  const { id, node } = item;
+  const { nodeItemRef } = node.model;
+  const { draggableProps } = useContext(SortableItemContext);
+  const onItemKeyDown = useOnItemKeyDown(item, draggableProps);
   const ctx = useContext(TreeViewContext);
   const {
-    props: {
-      disableIcons,
-      rightAddons,
-      onItemClick,
-      onItemFocus,
-      rowSize,
-      labelOverflow
-    },
-    relativeMouseCord,
+    props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },
     withRadioChecks,
     withCheckboxChecks,
     withDragAndDrop,
     selectedItem,
     selectedCheckboxes,
     hoverItem,
-    isDragging,
-    virtualListHelpers: {
-      scrollToIndex
-    },
+    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
-
-  const setItemRefs = ref => {
-    setMultipleRefs(virtualItemRef, nodeItemRef)(ref);
+  } = ctx;
+  const setItemRefs = (ref) => {
+    setMultipleRefs(virtualItemRef, !isDragOverlay && nodeItemRef, !isDragOverlay && draggableProps && draggableProps.setNodeRef)(ref);
   };
-
+  const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
+  const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;
+  const isDragging = draggableProps && draggableProps.isDragging;
+  const isDropValid = draggableProps && draggableProps.isDropValid;
   const dropPreviewClassName = useMemo(() => {
-    if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis) return '';
-    const {
-      isBefore,
-      isAfter,
-      isValid
-    } = relativeMouseCord;
-    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]);
-  const selectedClassName = useMemo(() => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? 'selected' : '', [item.id, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
-  const hoverClassName = useMemo(() => (hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) !== item.id || withDragAndDrop && isDragging ? '' : 'hover', [hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id, item.id, withDragAndDrop, isDragging]);
+    if (isDropIndicatorPositionInside) {
+      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?.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 (labelOverflow === "truncate") {
+      if (rowSize === "compact")
+        return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;
+      return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;
     }
-
-    return '';
+    return "";
   }, [labelOverflow, rowSize]);
-  const finalClassName = useMemo(() => "".concat(dropPreviewClassName, " ").concat(fixedHeightClassname, " ").concat(selectedClassName, " ").concat(hoverClassName), [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
-  const handleItemClick = useCallback(e => {
+  const finalClassName = useMemo(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName}`, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName]);
+  const handleItemClick = useCallback((e) => {
     onItemClick(item, e);
     setFocusedItem(item);
     setSelectedItem(item);
-    const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;
+    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);
-      },
+      scrollToItem: (opts = { align: "start" }) => scrollToIndex(itemVirtualIndex, opts),
       item
     });
   }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
-  return /*#__PURE__*/jsxs(TreeListItem, {
+  return /* @__PURE__ */ React2.createElement(TreeListItem, {
     tabIndex: 0,
-    onMouseMove: event => {
-      if (withDragAndDrop && onMouseDragOverItem) {
-        onMouseDragOverItem({
-          event,
-          item,
-          itemIndex,
-          setIsDraggingOverThis,
-          openFolderOnHoverTimeout
-        });
-      }
-    },
     onMouseLeave: () => {
-      if (withDragAndDrop) {
-        setIsDraggingOverThis(false);
-        if (openFolderOnHoverTimeout !== null && openFolderOnHoverTimeout !== void 0 && openFolderOnHoverTimeout.current) clearTimeout(openFolderOnHoverTimeout.current);
-      }
-
-      if ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id) {
+      if (hoverItem?.id === item.id) {
         setHoverItem(null);
       }
     },
@@ -165,34 +95,43 @@ const TreeItem = props => {
       setHoverItem(item);
     },
     onClick: handleItemClick,
+    onBlur: () => setFocusedItem(null),
     ref: setItemRefs,
-    style: _objectSpread({}, itemWrapperStyle),
+    style: { ...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(TreeListItemAddonsWrapper, {}, void 0, withDragAndDrop ? /*#__PURE__*/_jsx(DnDHandle, {
-      id: id
-    }) : null, withRadioChecks ? /*#__PURE__*/_jsx(RadioSelectable, {
-      item: item,
-      itemIndex: itemIndex
-    }) : null, withCheckboxChecks ? /*#__PURE__*/_jsx(CheckboxSelectable, {
-      item: item,
-      itemIndex: itemIndex
-    }) : null, /*#__PURE__*/_jsx(NestingSpace, {
-      item: item,
-      spaceForNestingLevel: spaceForNestingLevel
-    }), /*#__PURE__*/_jsx(ExpandCaret, {
-      item: item
-    }), !disableIcons ? /*#__PURE__*/_jsx(Icon, {
-      item: item
-    }) : null), /*#__PURE__*/_jsx(TreeItemText, {
-      item: item
-    }), rightAddons && /*#__PURE__*/_jsx(TreeListItemAddonsWrapper, {}, void 0, typeof rightAddons === 'function' ? rightAddons(item) : rightAddons)]
-  });
+    onKeyDown: onItemKeyDown
+  }, /* @__PURE__ */ React2.createElement(TreeListItemAddonsWrapper, null, withDragAndDrop ? /* @__PURE__ */ React2.createElement(DnDHandle, {
+    id,
+    isDragOverlay
+  }) : null, withRadioChecks && !isDragOverlay ? /* @__PURE__ */ React2.createElement(RadioSelectable, {
+    item,
+    itemIndex
+  }) : null, withCheckboxChecks && !isDragOverlay ? /* @__PURE__ */ React2.createElement(CheckboxSelectable, {
+    item,
+    itemIndex
+  }) : null, !isDragOverlay && /* @__PURE__ */ React2.createElement(NestingSpace, {
+    item,
+    spaceForNestingLevel
+  }), !isDragOverlay && /* @__PURE__ */ React2.createElement(ExpandCaret, {
+    item
+  }), !disableIcons ? /* @__PURE__ */ React2.createElement(Icon, {
+    item
+  }) : null), /* @__PURE__ */ React2.createElement(TreeItemText, {
+    item
+  }), rightAddons && /* @__PURE__ */ React2.createElement(TreeListItemAddonsWrapper, null, typeof rightAddons === "function" ? rightAddons(item) : rightAddons), /* @__PURE__ */ React2.createElement(DropIndicator, {
+    dropIndicatorPosition,
+    isDropValid
+  }));
+};
+var TreeItem_default = withDnDSortableItemContext(TreeItem);
+export {
+  TreeItem,
+  TreeListItem,
+  TreeListItemAddonsWrapper,
+  TreeItem_default as default
 };
-const DragAndDropTreeItem = SortableElement(TreeItem);
-
-export { DragAndDropTreeItem, TreeItem, TreeListItem, TreeListItemAddonsWrapper };
+//# sourceMappingURL=TreeItem.js.map

package/esm/parts/TreeItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { DnDHandle } from './DnDHandle';\nimport { withDnDSortableItemContext } from '../hoc/WithDnDSortableItemContext';\nimport { DropIndicatorPosition, SortableItemContext } from '../hoc/SortableItemContext';\nimport DropIndicator from './DropIndicator';\n\nexport const TreeListItem = aggregatedClasses('li', {\n  'data-testid': treeItemBlockName,\n  role: 'treeitem',\n  // temp fix untill we move to styled components\n})(treeItemBlockName) as unknown as React.ComponentType<React.ComponentProps<'li'>>;\n\nexport const TreeListItemAddonsWrapper = aggregatedClasses('div')(\n  treeItemBlockName,\n  'addons',\n  // temp fix untill we move to styled components\n) as unknown as React.ComponentType;\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n  isDragOverlay?: boolean;\n  virtualItemRef?: React.RefObject<HTMLLIElement>;\n  itemWrapperStyle?: { [key: string]: unknown };\n  spaceForNestingLevel?: number;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n  const {\n    item,\n    itemIndex,\n    itemWrapperStyle = {},\n    virtualItemRef,\n    spaceForNestingLevel = 1.5,\n    isDragOverlay = false,\n  } = props;\n  const { id, node } = item;\n  const { nodeItemRef } = node.model;\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const onItemKeyDown = useOnItemKeyDown(item, draggableProps);\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },\n    withRadioChecks,\n    withCheckboxChecks,\n    withDragAndDrop,\n    selectedItem,\n    selectedCheckboxes,\n    hoverItem,\n    virtualListHelpers: { scrollToIndex },\n    setHoverItem,\n    setSelectedItem,\n    setFocusedItem,\n  } = ctx;\n\n  // Sortable Items needs to update\n  //   - the virtual list ref (for react-virtual requirement)\n  //   - nodeItemRef which is a prop avaiable in the TreeModel nodes\n  //   - the drag and drop node reference\n  const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n    setMultipleRefs(\n      virtualItemRef,\n      !isDragOverlay && nodeItemRef,\n      !isDragOverlay && draggableProps && draggableProps.setNodeRef,\n    )(ref);\n  };\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const isDropIndicatorPositionInside = dropIndicatorPosition === DropIndicatorPosition.Inside;\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const isDropValid = draggableProps && draggableProps.isDropValid;\n\n  const dropPreviewClassName = useMemo(() => {\n    if (isDropIndicatorPositionInside) {\n      const className = `${DSTreeViewPrefix}-${treeItemBlockName}${isDropValid ? '--valid' : '--invalid'}-drop-in`;\n      return className;\n    }\n    return '';\n  }, [isDropIndicatorPositionInside, isDropValid]);\n\n  const dragOverlayClassName = useMemo(() => (isDragOverlay ? 'drag-overlay' : ''), [isDragOverlay]);\n\n  const selectedClassName = useMemo(\n    () => (selectedItem?.id === item.id && !isDragOverlay ? 'selected' : ''),\n    [isDragOverlay, item.id, selectedItem?.id],\n  );\n  const hoverClassName = useMemo(\n    () => (!isDragOverlay && (hoverItem?.id === item.id || isDragging) ? 'hover' : ''),\n    [isDragOverlay, hoverItem?.id, item.id, isDragging],\n  );\n  const fixedHeightClassname = useMemo(() => {\n    if (labelOverflow === 'truncate') {\n      if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;\n      return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;\n    }\n    return '';\n  }, [labelOverflow, rowSize]);\n\n  const finalClassName = useMemo(\n    () =>\n      `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName} ${dragOverlayClassName}`,\n    [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname, dragOverlayClassName],\n  );\n\n  const handleItemClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onItemClick(item, e);\n      setFocusedItem(item);\n      setSelectedItem(item);\n      const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n      onItemFocus({\n        itemIndex: itemVirtualIndex,\n        scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n        item,\n      });\n    },\n    [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n  );\n\n  return (\n    <TreeListItem\n      tabIndex={0}\n      onMouseLeave={() => {\n        if (hoverItem?.id === item.id) {\n          setHoverItem(null);\n        }\n      }}\n      onMouseEnter={() => {\n        setHoverItem(item);\n      }}\n      onClick={handleItemClick}\n      onBlur={() => setFocusedItem(null)}\n      ref={setItemRefs}\n      style={{ ...itemWrapperStyle }}\n      className={finalClassName}\n      aria-expanded={!!item.isExpanded}\n      aria-selected={!!selectedCheckboxes[item.id]}\n      data-id={item.id}\n      data-index={item.virtualIndex}\n      onKeyDown={onItemKeyDown}\n    >\n      <TreeListItemAddonsWrapper>\n        {withDragAndDrop ? <DnDHandle id={id} isDragOverlay={isDragOverlay} /> : null}\n        {withRadioChecks && !isDragOverlay ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n        {withCheckboxChecks && !isDragOverlay ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n        {!isDragOverlay && <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />}\n        {!isDragOverlay && <ExpandCaret item={item} />}\n        {!disableIcons ? <Icon item={item} /> : null}\n      </TreeListItemAddonsWrapper>\n      <TreeItemText item={item} />\n      {rightAddons && (\n        <TreeListItemAddonsWrapper>\n          {typeof rightAddons === 'function' ? rightAddons(item) : rightAddons}\n        </TreeListItemAddonsWrapper>\n      )}\n      <DropIndicator dropIndicatorPosition={dropIndicatorPosition} isDropValid={isDropValid} />\n    </TreeListItem>\n  );\n};\n\nexport default withDnDSortableItemContext(TreeItem);\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/parts/TreeItemText.js

@@ -1,99 +1,72 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext, useMemo } from 'react';
-import Highlighter from 'react-highlight-words';
-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')("".concat(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 CustomHighlight = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx("mark", {
-    className: "tree-text-highlight",
-    "data-testid": "tree-text-highlight"
-  }, void 0, children);
-};
-
+import * as React from "react";
+import React2, { useMemo, useContext } from "react";
+import Highlighter from "react-highlight-words";
+import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { ChildrenCountDisplayer } from "./ChildrenCountDisplayer";
+import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
+import TreeViewContext from "../TreeViewContext";
+const ItemContent = aggregatedClasses("div")(`${treeItemBlockName}-content`);
+const ItemValue = aggregatedClasses("span")(treeItemBlockName, "value");
+const classNameModifierWrapAll = `${DSTreeViewPrefix}-${treeItemBlockName}__value--wrap-all`;
+const classNameModifierTruncate = `${DSTreeViewPrefix}-${treeItemBlockName}__value--truncate`;
+const CustomHighlight = ({ children }) => /* @__PURE__ */ React2.createElement("mark", {
+  className: "tree-text-highlight",
+  "data-testid": "tree-text-highlight"
+}, children);
 function TreeItemText(props) {
-  var _ChildrenCountDisplay, _ChildrenCountDisplay2, _ChildrenCountDisplay3, _ChildrenCountDisplay4;
-
-  const {
-    item
-  } = props;
+  const { item } = props;
   const ctx = useContext(TreeViewContext);
   const {
-    props: {
-      searchQuery,
-      showChildrenAmount,
-      labelOverflow,
-      nameKey
-    }
+    props: { searchQuery, showChildrenAmount, labelOverflow, nameKey }
   } = ctx;
   const Text = useMemo(() => {
     const itemLabelText = item[nameKey];
-
     if (searchQuery) {
-      if (labelOverflow === 'truncate') {
-        return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-          value: /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/_jsx(Highlighter, {
-              autoEscape: true,
-              highlightTag: CustomHighlight,
-              searchWords: [searchQuery],
-              textToHighlight: itemLabelText
-            }), showChildrenAmount ? _ChildrenCountDisplay || (_ChildrenCountDisplay = /*#__PURE__*/_jsx(ChildrenCountDisplayer, {
-              item: item
-            })) : null]
-          })
+      if (labelOverflow === "truncate") {
+        return /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+          value: /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Highlighter, {
+            autoEscape: true,
+            highlightTag: CustomHighlight,
+            searchWords: [searchQuery],
+            textToHighlight: itemLabelText
+          }), showChildrenAmount ? /* @__PURE__ */ React2.createElement(ChildrenCountDisplayer, {
+            item
+          }) : null)
         });
       }
-
-      return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/_jsx(Highlighter, {
-          autoEscape: true,
-          highlightTag: CustomHighlight,
-          searchWords: [searchQuery],
-          textToHighlight: itemLabelText
-        }), showChildrenAmount ? _ChildrenCountDisplay2 || (_ChildrenCountDisplay2 = /*#__PURE__*/_jsx(ChildrenCountDisplayer, {
-          item: item
-        })) : null]
-      });
+      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Highlighter, {
+        autoEscape: true,
+        highlightTag: CustomHighlight,
+        searchWords: [searchQuery],
+        textToHighlight: itemLabelText
+      }), showChildrenAmount ? /* @__PURE__ */ React2.createElement(ChildrenCountDisplayer, {
+        item
+      }) : null);
     }
-
-    if (labelOverflow === 'truncate') {
-      return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-        value: /*#__PURE__*/jsxs(Fragment, {
-          children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay3 || (_ChildrenCountDisplay3 = /*#__PURE__*/_jsx(ChildrenCountDisplayer, {
-            item: item
-          })) : null]
-        })
+    if (labelOverflow === "truncate") {
+      return /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+        value: /* @__PURE__ */ React2.createElement(React2.Fragment, null, itemLabelText, showChildrenAmount ? /* @__PURE__ */ React2.createElement(ChildrenCountDisplayer, {
+          item
+        }) : null)
       });
     }
-
-    return /*#__PURE__*/jsxs(Fragment, {
-      children: [itemLabelText, showChildrenAmount ? _ChildrenCountDisplay4 || (_ChildrenCountDisplay4 = /*#__PURE__*/_jsx(ChildrenCountDisplayer, {
-        item: item
-      })) : null]
-    });
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, itemLabelText, showChildrenAmount ? /* @__PURE__ */ React2.createElement(ChildrenCountDisplayer, {
+      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(ItemContent, {
-    "data-testid": "".concat(treeItemBlockName, "-content")
-  }, void 0, /*#__PURE__*/_jsx(ItemValue, {
-    className: className
-  }, void 0, Text));
+  let className = "";
+  if (labelOverflow === "wrap-all")
+    className += `${classNameModifierWrapAll} `;
+  if (labelOverflow === "truncate")
+    className += `${classNameModifierTruncate} `;
+  return /* @__PURE__ */ React2.createElement(ItemContent, {
+    "data-testid": `${treeItemBlockName}-content`
+  }, /* @__PURE__ */ React2.createElement(ItemValue, {
+    className
+  }, Text));
 }
-
-export { TreeItemText };
+export {
+  TreeItemText
+};
+//# sourceMappingURL=TreeItemText.js.map

package/esm/parts/TreeItemText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeItemText.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useContext } from 'react';\nimport Highlighter from 'react-highlight-words';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nimport { ChildrenCountDisplayer } from './ChildrenCountDisplayer';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\n\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst ItemContent = aggregatedClasses('div')(`${treeItemBlockName}-content`) as unknown as React.ComponentType<\n  React.ComponentProps<'div'>\n>;\nconst ItemValue = aggregatedClasses('span')(treeItemBlockName, 'value') as unknown as React.ComponentType<\n  React.ComponentProps<'span'>\n>;\n\n// const wrapperClassName = `${DSTreeViewPrefix}-${treeItemBlockName}-content`;\nconst classNameModifierWrapAll = `${DSTreeViewPrefix}-${treeItemBlockName}__value--wrap-all`;\nconst classNameModifierTruncate = `${DSTreeViewPrefix}-${treeItemBlockName}__value--truncate`;\n\n// eslint-disable-next-line react/prop-types\nconst CustomHighlight = ({ children }: { children: React.ReactNode }) => (\n  <mark className=\"tree-text-highlight\" data-testid=\"tree-text-highlight\">\n    {children}\n  </mark>\n);\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\nexport function TreeItemText(props: PropsT): JSX.Element {\n  const { item } = props;\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { searchQuery, showChildrenAmount, labelOverflow, nameKey },\n  } = ctx;\n\n  const Text = useMemo(() => {\n    const itemLabelText = item[nameKey] as DSTreeviewT.Item['name'];\n    if (searchQuery) {\n      if (labelOverflow === 'truncate') {\n        return (\n          <SimpleTruncatedTooltipText\n            value={\n              <>\n                <Highlighter\n                  autoEscape\n                  highlightTag={CustomHighlight}\n                  searchWords={[searchQuery]}\n                  textToHighlight={itemLabelText}\n                />\n                {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n              </>\n            }\n          />\n        );\n      }\n      return (\n        <>\n          <Highlighter\n            autoEscape\n            highlightTag={CustomHighlight}\n            searchWords={[searchQuery]}\n            textToHighlight={itemLabelText}\n          />\n          {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n        </>\n      );\n    }\n    if (labelOverflow === 'truncate') {\n      return (\n        <SimpleTruncatedTooltipText\n          value={\n            <>\n              {itemLabelText}\n              {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n            </>\n          }\n        />\n      );\n    }\n    return (\n      <>\n        {itemLabelText}\n        {showChildrenAmount ? <ChildrenCountDisplayer item={item} /> : null}\n      </>\n    );\n  }, [item, searchQuery, nameKey, showChildrenAmount, labelOverflow]);\n\n  let className = '';\n  if (labelOverflow === 'wrap-all') className += `${classNameModifierWrapAll} `;\n  if (labelOverflow === 'truncate') className += `${classNameModifierTruncate} `;\n\n  return (\n    <ItemContent data-testid={`${treeItemBlockName}-content`}>\n      <ItemValue className={className}>{Text}</ItemValue>\n    </ItemContent>\n  );\n}\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAGA,MAAM,cAAc,kBAAkB,OAAO,GAAG;AAGhD,MAAM,YAAY,kBAAkB,QAAQ,mBAAmB;AAK/D,MAAM,2BAA2B,GAAG,oBAAoB;AACxD,MAAM,4BAA4B,GAAG,oBAAoB;AAGzD,MAAM,kBAAkB,CAAC,EAAE,eACzB,qCAAC,QAAD;AAAA,EAAM,WAAU;AAAA,EAAsB,eAAY;AAAA,GAC/C;AAME,sBAAsB,OAA4B;AACvD,QAAM,EAAE,SAAS;AACjB,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,aAAa,oBAAoB,eAAe;AAAA,MACvD;AAEJ,QAAM,OAAO,QAAQ,MAAM;AACzB,UAAM,gBAAgB,KAAK;AAC3B,QAAI,aAAa;AACf,UAAI,kBAAkB,YAAY;AAChC,eACE,qCAAC,4BAAD;AAAA,UACE,OACE,4DACE,qCAAC,aAAD;AAAA,YACE,YAAU;AAAA,YACV,cAAc;AAAA,YACd,aAAa,CAAC;AAAA,YACd,iBAAiB;AAAA,cAElB,qBAAqB,qCAAC,wBAAD;AAAA,YAAwB;AAAA,eAAiB;AAAA;AAAA;AAMzE,aACE,4DACE,qCAAC,aAAD;AAAA,QACE,YAAU;AAAA,QACV,cAAc;AAAA,QACd,aAAa,CAAC;AAAA,QACd,iBAAiB;AAAA,UAElB,qBAAqB,qCAAC,wBAAD;AAAA,QAAwB;AAAA,WAAiB;AAAA;AAIrE,QAAI,kBAAkB,YAAY;AAChC,aACE,qCAAC,4BAAD;AAAA,QACE,OACE,4DACG,eACA,qBAAqB,qCAAC,wBAAD;AAAA,UAAwB;AAAA,aAAiB;AAAA;AAAA;AAMzE,WACE,4DACG,eACA,qBAAqB,qCAAC,wBAAD;AAAA,MAAwB;AAAA,SAAiB;AAAA,KAGlE,CAAC,MAAM,aAAa,SAAS,oBAAoB;AAEpD,MAAI,YAAY;AAChB,MAAI,kBAAkB;AAAY,iBAAa,GAAG;AAClD,MAAI,kBAAkB;AAAY,iBAAa,GAAG;AAElD,SACE,qCAAC,aAAD;AAAA,IAAa,eAAa,GAAG;AAAA,KAC3B,qCAAC,WAAD;AAAA,IAAW;AAAA,KAAuB;AAAA;",
+  "names": []
+}