@elliemae/ds-treeview 2.3.0-next.0 → 3.0.0-alpha.0

package/dist/esm/parts/ExpandCaret.js

@@ -0,0 +1,67 @@
+import * as React from "react";
+import React2, { useContext, useCallback } from "react";
+import Button from "@elliemae/ds-button";
+import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
+import { toggleItemExpand } from "../utils/group-expands-helpers";
+import { focusItem } from "../utils/tree-helpers";
+import TreeViewContext from "../TreeViewContext";
+const ExpandCaret = (props) => {
+  const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);
+  const { item } = props;
+  const { id, isExpanded, isGroup, children } = item;
+  const isGroupOrHasChildrens = isGroup || Array.isArray(children) && children.length > 0;
+  const ctx = useContext(TreeViewContext);
+  const {
+    props: { onItemFocus },
+    handleExpandGroup = defaultHandleExpandGroup,
+    triggerTreeRerender,
+    updateUserExpandedState,
+    setLatestToggledItem,
+    setFocusedItem,
+    virtualListHelpers: { scrollToIndex }
+  } = ctx;
+  if (isGroupOrHasChildrens)
+    return /* @__PURE__ */ React2.createElement(Button, {
+      buttonType: "text",
+      className: "expandable-arrow",
+      "data-testid": "tree-item-expand-toggle",
+      key: `${id}-expand-addon`,
+      icon: isExpanded ? /* @__PURE__ */ React2.createElement(ArrowheadDown, {
+        size: "s",
+        "data-testid": "ic-arrow-head-down"
+      }) : /* @__PURE__ */ React2.createElement(ArrowheadRight, {
+        size: "s",
+        "data-testid": "ic-arrow-head-right"
+      }),
+      onMouseDown: (e) => {
+        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: (opts = { align: "start" }) => scrollToIndex(itemVitualIndex, opts),
+            item
+          });
+        }
+        setFocusedItem(item);
+        focusItem(item);
+      },
+      size: "s",
+      tabIndex: -1
+    });
+  return /* @__PURE__ */ React2.createElement("div", {
+    style: { width: "24px" }
+  });
+};
+export {
+  ExpandCaret
+};
+//# sourceMappingURL=ExpandCaret.js.map

package/dist/esm/parts/ExpandCaret.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ExpandCaret.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport Button from '@elliemae/ds-button';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\nimport { focusItem } from '../utils/tree-helpers';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\n\nexport const ExpandCaret = (props: PropsT): JSX.Element | null => {\n  const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);\n  const { item } = props;\n  const { id, isExpanded, isGroup, children } = item;\n  const isGroupOrHasChildrens = isGroup || (Array.isArray(children) && children.length > 0);\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { onItemFocus },\n    handleExpandGroup = defaultHandleExpandGroup,\n    triggerTreeRerender,\n    updateUserExpandedState,\n    setLatestToggledItem,\n    setFocusedItem,\n    virtualListHelpers: { scrollToIndex },\n  } = ctx;\n\n  if (isGroupOrHasChildrens)\n    return (\n      <Button\n        buttonType=\"text\"\n        className=\"expandable-arrow\"\n        data-testid=\"tree-item-expand-toggle\"\n        key={`${id}-expand-addon`}\n        icon={\n          isExpanded ? (\n            <ArrowheadDown size=\"s\" data-testid=\"ic-arrow-head-down\" />\n          ) : (\n            <ArrowheadRight size=\"s\" data-testid=\"ic-arrow-head-right\" />\n          )\n        }\n        onMouseDown={(e: React.MouseEvent) => {\n          // prevent focusing the caret\n          if (e) {\n            e.preventDefault();\n          }\n        }}\n        onClick={(e) => {\n          e.stopPropagation();\n          if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);\n          setLatestToggledItem(item);\n          const itemVitualIndex = item.virtualIndex;\n          if (typeof itemVitualIndex === 'number') {\n            onItemFocus({\n              itemIndex: itemVitualIndex,\n              scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVitualIndex, opts),\n              item,\n            });\n          }\n          setFocusedItem(item);\n          focusItem(item);\n        }}\n        size=\"s\"\n        tabIndex={-1}\n      />\n    );\n  return <div style={{ width: '24px' }} />;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAOO,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,YAAY,kBAAkB;AAC/D,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,aAAa;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,aAAa,SAAS,SAAS;AACvF,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE;AAAA,MACpB;AAEJ,MAAI;AACF,WACE,qCAAC,QAAD;AAAA,MACE,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,KAAK,GAAG;AAAA,MACR,MACE,aACE,qCAAC,eAAD;AAAA,QAAe,MAAK;AAAA,QAAI,eAAY;AAAA,WAEpC,qCAAC,gBAAD;AAAA,QAAgB,MAAK;AAAA,QAAI,eAAY;AAAA;AAAA,MAGzC,aAAa,CAAC,MAAwB;AAEpC,YAAI,GAAG;AACL,YAAE;AAAA;AAAA;AAAA,MAGN,SAAS,CAAC,MAAM;AACd,UAAE;AACF,YAAI;AAAG,4BAAkB,MAAM,qBAAqB,yBAAyB,eAAe;AAC5F,6BAAqB;AACrB,cAAM,kBAAkB,KAAK;AAC7B,YAAI,OAAO,oBAAoB,UAAU;AACvC,sBAAY;AAAA,YACV,WAAW;AAAA,YACX,cAAc,CAAC,OAAO,EAAE,OAAO,cAAc,cAAc,iBAAiB;AAAA,YAC5E;AAAA;AAAA;AAGJ,uBAAe;AACf,kBAAU;AAAA;AAAA,MAEZ,MAAK;AAAA,MACL,UAAU;AAAA;AAGhB,SAAO,qCAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/parts/Icon.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import React2, { useContext } from "react";
+import { cx } from "@elliemae/ds-utilities";
+import TreeViewContext from "../TreeViewContext";
+const Icon = (props) => {
+  const { item } = props;
+  const isGroupOrHasChildrens = item.isGroup || Array.isArray(item.children) && item.children.length > 0;
+  const ctx = useContext(TreeViewContext);
+  const {
+    props: { groupIcon, itemIcon }
+  } = ctx;
+  const icon = isGroupOrHasChildrens ? groupIcon : itemIcon;
+  if (!icon)
+    return null;
+  return React2.cloneElement(icon, {
+    "data-testid": isGroupOrHasChildrens ? "tree-item-group-icon" : "tree-item-icon",
+    className: cx(icon.props.className, "tree-item-icon")
+  });
+};
+export {
+  Icon
+};
+//# sourceMappingURL=Icon.js.map

package/dist/esm/parts/Icon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Icon.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { cx } from '@elliemae/ds-utilities';\n\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\nexport const Icon = (props: PropsT): JSX.Element | null => {\n  const { item } = props;\n  const isGroupOrHasChildrens = item.isGroup || (Array.isArray(item.children) && item.children.length > 0);\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { groupIcon, itemIcon },\n  } = ctx;\n  const icon = isGroupOrHasChildrens ? groupIcon : itemIcon;\n  if (!icon) return null;\n\n  return React.cloneElement(icon, {\n    'data-testid': isGroupOrHasChildrens ? 'tree-item-group-icon' : 'tree-item-icon',\n    // legacy class-name way of handling things,\n    // this will eventually be deprecated in favor of styled components\n    // untill then, just eslint-ignore and move on\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n    className: cx(icon.props.className, 'tree-item-icon'),\n  });\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA;AAKO,MAAM,OAAO,CAAC,UAAsC;AACzD,QAAM,EAAE,SAAS;AACjB,QAAM,wBAAwB,KAAK,WAAY,MAAM,QAAQ,KAAK,aAAa,KAAK,SAAS,SAAS;AACtG,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW;AAAA,MAClB;AACJ,QAAM,OAAO,wBAAwB,YAAY;AACjD,MAAI,CAAC;AAAM,WAAO;AAElB,SAAO,OAAM,aAAa,MAAM;AAAA,IAC9B,eAAe,wBAAwB,yBAAyB;AAAA,IAKhE,WAAW,GAAG,KAAK,MAAM,WAAW;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/parts/NestingSpace.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import React2 from "react";
+const getItemNestingLeftPadding = (level, opts) => {
+  const { spaceForNestingLevel = 1.5 } = opts;
+  const groupLeftPadding = spaceForNestingLevel * (level - 1);
+  const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;
+  return finalLeftPadding > 0 ? `${finalLeftPadding}em` : "0";
+};
+const NestingSpace = (props) => {
+  const { item, spaceForNestingLevel } = props;
+  const { treeDepth } = item;
+  if (treeDepth) {
+    const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
+      spaceForNestingLevel
+    });
+    return /* @__PURE__ */ React2.createElement("div", {
+      "data-testid": "tree-item-nested-space",
+      style: { width: itemNestingLeftPadding }
+    });
+  }
+  return null;
+};
+export {
+  NestingSpace
+};
+//# sourceMappingURL=NestingSpace.js.map

package/dist/esm/parts/NestingSpace.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/NestingSpace.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst getItemNestingLeftPadding = (level: number, opts: { spaceForNestingLevel: number }) => {\n  const { spaceForNestingLevel = 1.5 } = opts;\n  const groupLeftPadding = spaceForNestingLevel * (level - 1);\n  const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;\n  // root level left-padding would be negative and would not be applied\n  // if \"root-level\" nesting, then defaults to 0 left-padding.\n  return finalLeftPadding > 0 ? `${finalLeftPadding}em` : '0';\n};\n\ntype NestingSpacePropsType = {\n  item: DSTreeviewT.Item;\n  spaceForNestingLevel: number;\n};\n\nexport const NestingSpace = (props: NestingSpacePropsType): JSX.Element | null => {\n  const { item, spaceForNestingLevel } = props;\n  const { treeDepth } = item;\n  if (treeDepth) {\n    const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {\n      spaceForNestingLevel,\n    });\n\n    return <div data-testid=\"tree-item-nested-space\" style={{ width: itemNestingLeftPadding }} />;\n  }\n  return null;\n};\n"],
+  "mappings": "AAAA;ACAA;AAGA,MAAM,4BAA4B,CAAC,OAAe,SAA2C;AAC3F,QAAM,EAAE,uBAAuB,QAAQ;AACvC,QAAM,mBAAmB,uBAAwB,SAAQ;AACzD,QAAM,mBAAmB,mBAAmB,uBAAuB;AAGnE,SAAO,mBAAmB,IAAI,GAAG,uBAAuB;AAAA;AAQnD,MAAM,eAAe,CAAC,UAAqD;AAChF,QAAM,EAAE,MAAM,yBAAyB;AACvC,QAAM,EAAE,cAAc;AACtB,MAAI,WAAW;AACb,UAAM,yBAAyB,0BAA0B,YAAY,GAAG;AAAA,MACtE;AAAA;AAGF,WAAO,qCAAC,OAAD;AAAA,MAAK,eAAY;AAAA,MAAyB,OAAO,EAAE,OAAO;AAAA;AAAA;AAEnE,SAAO;AAAA;",
+  "names": []
+}

package/dist/esm/parts/RadioSelectable.js

@@ -0,0 +1,45 @@
+import * as React from "react";
+import React2, { useContext, useCallback, useMemo } from "react";
+import { DSRadio } from "@elliemae/ds-form";
+import TreeViewContext from "../TreeViewContext";
+function RadioSelectable(props) {
+  const { item, itemIndex } = props;
+  const ctx = useContext(TreeViewContext);
+  const {
+    props: { onSelectionChange, isItemDisabled },
+    virtualListHelpers: { scrollToIndex },
+    uniqueTreeViewUUID,
+    selectedCheckboxes,
+    setSelectedCheckboxes
+  } = ctx;
+  const { id } = item;
+  const onRadioChange = 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 = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
+  const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
+  return /* @__PURE__ */ React2.createElement(DSRadio, {
+    checked: selectedCheckboxes[id] === true,
+    name: radioName,
+    disabled: isDisabled,
+    className: "em-ds-tree-item-radio",
+    "data-testid": "tree-item-radio",
+    onChange: onRadioChange,
+    tabIndex: 0
+  });
+}
+var RadioSelectable_default = RadioSelectable;
+export {
+  RadioSelectable_default as default
+};
+//# sourceMappingURL=RadioSelectable.js.map

package/dist/esm/parts/RadioSelectable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/RadioSelectable.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSRadio } from '@elliemae/ds-form';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n}\nfunction RadioSelectable(props: PropsT) {\n  const { item, itemIndex } = props;\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { onSelectionChange, isItemDisabled },\n    virtualListHelpers: { scrollToIndex },\n    uniqueTreeViewUUID,\n    selectedCheckboxes,\n    setSelectedCheckboxes,\n  } = ctx;\n\n  const { id } = item;\n\n  const onRadioChange = useCallback(() => {\n    const newSelectionHasmap = { [id]: true };\n    setSelectedCheckboxes(newSelectionHasmap);\n    const indexAndScrollTo = {\n      scrollToItem: () => {\n        if (item.virtualIndex) scrollToIndex(item.virtualIndex);\n      },\n      itemIndex,\n    };\n    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n  }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);\n\n  const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);\n\n  const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n  return (\n    <DSRadio\n      checked={selectedCheckboxes[id] === true}\n      name={radioName}\n      disabled={isDisabled}\n      className=\"em-ds-tree-item-radio\"\n      data-testid=\"tree-item-radio\"\n      onChange={onRadioChange}\n      tabIndex={0}\n    />\n  );\n}\n\nexport default RadioSelectable;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAMA,yBAAyB,OAAe;AACtC,QAAM,EAAE,MAAM,cAAc;AAE5B,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB;AAAA,IAC5B,oBAAoB,EAAE;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,EAAE,OAAO;AAEf,QAAM,gBAAgB,YAAY,MAAM;AACtC,UAAM,qBAAqB,GAAG,KAAK;AACnC,0BAAsB;AACtB,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,KAAK;AAAc,wBAAc,KAAK;AAAA;AAAA,MAE5C;AAAA;AAEF,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM;AAAA,KAClE,CAAC,IAAI,uBAAuB,WAAW,mBAAmB,MAAM;AAEnE,QAAM,YAAY,QAAQ,MAAM,UAAU,sBAAsB,CAAC;AAEjE,QAAM,aAAa,QAAQ,MAAM,eAAe,OAAO,CAAC,MAAM;AAE9D,SACE,qCAAC,SAAD;AAAA,IACE,SAAS,mBAAmB,QAAQ;AAAA,IACpC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA;AAAA;AAKhB,IAAO,0BAAQ;",
+  "names": []
+}

package/dist/esm/parts/TreeItem.js

@@ -0,0 +1,137 @@
+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");
+const TreeItem = (props) => {
+  const {
+    item,
+    itemIndex,
+    itemWrapperStyle = {},
+    virtualItemRef,
+    spaceForNestingLevel = 1.5,
+    isDragOverlay = false
+  } = props;
+  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 },
+    withRadioChecks,
+    withCheckboxChecks,
+    withDragAndDrop,
+    selectedItem,
+    selectedCheckboxes,
+    hoverItem,
+    virtualListHelpers: { scrollToIndex },
+    setHoverItem,
+    setSelectedItem,
+    setFocusedItem
+  } = 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 (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 `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;
+      return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;
+    }
+    return "";
+  }, [labelOverflow, rowSize]);
+  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;
+    onItemFocus({
+      itemIndex: itemVirtualIndex,
+      scrollToItem: (opts = { align: "start" }) => scrollToIndex(itemVirtualIndex, opts),
+      item
+    });
+  }, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
+  return /* @__PURE__ */ React2.createElement(TreeListItem, {
+    tabIndex: 0,
+    onMouseLeave: () => {
+      if (hoverItem?.id === item.id) {
+        setHoverItem(null);
+      }
+    },
+    onMouseEnter: () => {
+      setHoverItem(item);
+    },
+    onClick: handleItemClick,
+    onBlur: () => setFocusedItem(null),
+    ref: setItemRefs,
+    style: { ...itemWrapperStyle },
+    className: finalClassName,
+    "aria-expanded": !!item.isExpanded,
+    "aria-selected": !!selectedCheckboxes[item.id],
+    "data-id": item.id,
+    "data-index": item.virtualIndex,
+    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
+};
+//# sourceMappingURL=TreeItem.js.map

package/dist/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/dist/esm/parts/TreeItemText.js

@@ -0,0 +1,72 @@
+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) {
+  const { item } = props;
+  const ctx = useContext(TreeViewContext);
+  const {
+    props: { searchQuery, showChildrenAmount, labelOverflow, nameKey }
+  } = ctx;
+  const Text = useMemo(() => {
+    const itemLabelText = item[nameKey];
+    if (searchQuery) {
+      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__ */ 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__ */ React2.createElement(SimpleTruncatedTooltipText, {
+        value: /* @__PURE__ */ React2.createElement(React2.Fragment, null, itemLabelText, showChildrenAmount ? /* @__PURE__ */ React2.createElement(ChildrenCountDisplayer, {
+          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 += `${classNameModifierWrapAll} `;
+  if (labelOverflow === "truncate")
+    className += `${classNameModifierTruncate} `;
+  return /* @__PURE__ */ React2.createElement(ItemContent, {
+    "data-testid": `${treeItemBlockName}-content`
+  }, /* @__PURE__ */ React2.createElement(ItemValue, {
+    className
+  }, Text));
+}
+export {
+  TreeItemText
+};
+//# sourceMappingURL=TreeItemText.js.map

package/dist/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": []
+}

package/dist/esm/parts/TreeList.js

@@ -0,0 +1,94 @@
+import * as React from "react";
+import React2, { useContext } from "react";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indicator";
+import TreeViewContext from "../TreeViewContext";
+import { DSTreeViewPrefix, treeListBlockName } from "../config/cssClassesConstants";
+import TreeItem from "./TreeItem";
+import { withConditionalDnDRowContext } from "../hoc/WithConditionalDnDContext";
+import { DnDTreeContext } from "../hoc/DnDTreeContext";
+const treeListNoItemsBn = `${treeListBlockName}-no-items`;
+const TreeListNoItems = aggregatedClasses("div", {
+  "data-testid": treeListNoItemsBn
+})(treeListNoItemsBn);
+const TreeListWrapper = aggregatedClasses("ul", {
+  "data-testid": treeListBlockName,
+  role: "tree"
+})(treeListBlockName, null, ({ rowSize }) => ({
+  [`rowsize-${rowSize}`]: rowSize
+}));
+const compactRowClass = `${DSTreeViewPrefix}-tv-row-size-compact`;
+const normaRowClass = `${DSTreeViewPrefix}-tv-row-size-normal`;
+const TreeListComp = () => {
+  const ctx = useContext(TreeViewContext);
+  const {
+    virtualListRef,
+    virtualListHelpers,
+    visibleItems: flattenedVisibleItems,
+    props: { width, height, rowSize, noItemsPlaceholder, isLoading }
+  } = ctx;
+  const { totalSize, virtualItems } = virtualListHelpers;
+  const className = `${rowSize === "compact" ? `${compactRowClass}` : `${normaRowClass}`}`;
+  const { visibleItems } = useContext(DnDTreeContext);
+  return /* @__PURE__ */ React2.createElement(TreeListWrapper, {
+    ref: virtualListRef,
+    className,
+    style: {
+      height: `${typeof height === "number" ? `${height}px` : height}`,
+      width: `${typeof width === "number" ? `${width}px` : width}`,
+      overflow: "auto"
+    }
+  }, isLoading ? /* @__PURE__ */ React2.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /* @__PURE__ */ React2.createElement(DSCircularProgressIndicator, {
+    size: "xl",
+    loading: isLoading,
+    showLabel: true,
+    waiting: false,
+    showTooltip: false
+  })) : null, !isLoading && virtualItems.length === 0 ? /* @__PURE__ */ React2.createElement(TreeListNoItems, null, noItemsPlaceholder) : null, !isLoading && virtualItems.length !== 0 ? /* @__PURE__ */ React2.createElement("div", {
+    style: {
+      height: `${totalSize}px`,
+      width: "100%",
+      position: "relative"
+    }
+  }, virtualItems.map((virtualItem) => {
+    const { index, measureRef, start } = virtualItem;
+    const item = (visibleItems || flattenedVisibleItems)[index];
+    if (!item)
+      return null;
+    item.virtualIndex = index;
+    const { id } = item;
+    const style = {
+      position: "absolute",
+      top: `${start}px`,
+      left: 0,
+      width: "100%"
+    };
+    const listItemProps = {
+      key: `DS-TreeView-List-Item-${id}`,
+      virtualItemRef: measureRef,
+      index,
+      itemIndex: index,
+      item,
+      itemWrapperStyle: style
+    };
+    return /* @__PURE__ */ React2.createElement(TreeItem, {
+      ...listItemProps
+    });
+  })) : null);
+};
+const TreeList = withConditionalDnDRowContext(TreeListComp);
+export {
+  TreeList,
+  TreeListNoItems,
+  TreeListWrapper,
+  treeListNoItemsBn
+};
+//# sourceMappingURL=TreeList.js.map

package/dist/esm/parts/TreeList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeList.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nimport TreeViewContext from '../TreeViewContext';\nimport { DSTreeViewPrefix, treeListBlockName } from '../config/cssClassesConstants';\nimport TreeItem from './TreeItem';\n\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nimport { withConditionalDnDRowContext } from '../hoc/WithConditionalDnDContext';\nimport { DnDTreeContext } from '../hoc/DnDTreeContext';\n\nexport const treeListNoItemsBn = `${treeListBlockName}-no-items`;\nexport const TreeListNoItems = aggregatedClasses('div', {\n  'data-testid': treeListNoItemsBn,\n})(treeListNoItemsBn) as unknown as React.ComponentType<React.ComponentProps<'div'>>;\n\n// React.ComponentProps<'ul'> uses LegacyRef typings that existed pre-hook era\n// we omit the LegacyRef typings in favor of hook-era typings\ninterface UlProps extends Omit<React.ComponentProps<'ul'>, 'ref'> {\n  ref: React.MutableRefObject<HTMLUListElement | undefined> | undefined;\n}\nexport const TreeListWrapper = aggregatedClasses('ul', {\n  'data-testid': treeListBlockName,\n  role: 'tree',\n})(treeListBlockName, null, ({ rowSize }: { rowSize: 'normal' | 'compact' }) => ({\n  [`rowsize-${rowSize}`]: rowSize,\n})) as unknown as React.ComponentType<UlProps>;\n\nconst compactRowClass = `${DSTreeViewPrefix}-tv-row-size-compact`;\nconst normaRowClass = `${DSTreeViewPrefix}-tv-row-size-normal`;\n\ninterface PropsT {\n  onMouseDragOverItem?: (opts: {\n    event: React.MouseEvent<HTMLLIElement>;\n    item: DSTreeviewT.Item;\n    itemIndex: number;\n    setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;\n    openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n  }) => void;\n}\n\nconst TreeListComp: React.ComponentType<PropsT> = () => {\n  const ctx = useContext(TreeViewContext);\n  const {\n    virtualListRef,\n    virtualListHelpers,\n    visibleItems: flattenedVisibleItems,\n    props: { width, height, rowSize, noItemsPlaceholder, isLoading },\n  } = ctx;\n  const { totalSize, virtualItems } = virtualListHelpers;\n  const className = `${rowSize === 'compact' ? `${compactRowClass}` : `${normaRowClass}`}`;\n\n  const { visibleItems } = useContext(DnDTreeContext);\n\n  return (\n    <TreeListWrapper\n      ref={virtualListRef}\n      className={className}\n      style={{\n        height: `${typeof height === 'number' ? `${height}px` : height}`,\n        width: `${typeof width === 'number' ? `${width}px` : width}`,\n        overflow: 'auto',\n      }}\n    >\n      {isLoading ? (\n        <div\n          style={{\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          <DSCircularProgressIndicator size=\"xl\" loading={isLoading} showLabel waiting={false} showTooltip={false} />\n        </div>\n      ) : null}\n      {!isLoading && virtualItems.length === 0 ? <TreeListNoItems>{noItemsPlaceholder}</TreeListNoItems> : null}\n      {!isLoading && virtualItems.length !== 0 ? (\n        <div\n          style={{\n            height: `${totalSize}px`,\n            width: '100%',\n            position: 'relative',\n          }}\n        >\n          {virtualItems.map((virtualItem) => {\n            const { index, measureRef, start } = virtualItem;\n            const item = (visibleItems || flattenedVisibleItems)[index];\n            if (!item) return null;\n            item.virtualIndex = index;\n            const { id } = item;\n\n            const style = {\n              position: 'absolute',\n              top: `${start}px`,\n              left: 0,\n              width: '100%',\n            };\n\n            const listItemProps = {\n              key: `DS-TreeView-List-Item-${id}`,\n              virtualItemRef: measureRef,\n              index, // this is consumed by the DnD HOC\n              itemIndex: index,\n              item,\n              itemWrapperStyle: style,\n            };\n\n            return <TreeItem {...listItemProps} />;\n          })}\n        </div>\n      ) : null}\n    </TreeListWrapper>\n  );\n};\n\nexport const TreeList = withConditionalDnDRowContext(TreeListComp);\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAEA;AACA;AACA;AAGA;AACA;AAEO,MAAM,oBAAoB,GAAG;AAC7B,MAAM,kBAAkB,kBAAkB,OAAO;AAAA,EACtD,eAAe;AAAA,GACd;AAOI,MAAM,kBAAkB,kBAAkB,MAAM;AAAA,EACrD,eAAe;AAAA,EACf,MAAM;AAAA,GACL,mBAAmB,MAAM,CAAC,EAAE,cAAkD;AAAA,GAC9E,WAAW,YAAY;AAAA;AAG1B,MAAM,kBAAkB,GAAG;AAC3B,MAAM,gBAAgB,GAAG;AAYzB,MAAM,eAA4C,MAAM;AACtD,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,OAAO,EAAE,OAAO,QAAQ,SAAS,oBAAoB;AAAA,MACnD;AACJ,QAAM,EAAE,WAAW,iBAAiB;AACpC,QAAM,YAAY,GAAG,YAAY,YAAY,GAAG,oBAAoB,GAAG;AAEvE,QAAM,EAAE,iBAAiB,WAAW;AAEpC,SACE,qCAAC,iBAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAQ,GAAG,OAAO,WAAW,WAAW,GAAG,aAAa;AAAA,MACxD,OAAO,GAAG,OAAO,UAAU,WAAW,GAAG,YAAY;AAAA,MACrD,UAAU;AAAA;AAAA,KAGX,YACC,qCAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA;AAAA,KAGlB,qCAAC,6BAAD;AAAA,IAA6B,MAAK;AAAA,IAAK,SAAS;AAAA,IAAW,WAAS;AAAA,IAAC,SAAS;AAAA,IAAO,aAAa;AAAA,QAElG,MACH,CAAC,aAAa,aAAa,WAAW,IAAI,qCAAC,iBAAD,MAAkB,sBAAwC,MACpG,CAAC,aAAa,aAAa,WAAW,IACrC,qCAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,QAAQ,GAAG;AAAA,MACX,OAAO;AAAA,MACP,UAAU;AAAA;AAAA,KAGX,aAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,UAAU;AACrC,UAAM,OAAQ,iBAAgB,uBAAuB;AACrD,QAAI,CAAC;AAAM,aAAO;AAClB,SAAK,eAAe;AACpB,UAAM,EAAE,OAAO;AAEf,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,GAAG;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,KAAK,yBAAyB;AAAA,MAC9B,gBAAgB;AAAA,MAChB;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,kBAAkB;AAAA;AAGpB,WAAO,qCAAC,UAAD;AAAA,SAAc;AAAA;AAAA,QAGvB;AAAA;AAKH,MAAM,WAAW,6BAA6B;",
+  "names": []
+}

package/dist/esm/plugins/dnd/TreeDndPlugin.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+const TreeDndPlugin = "tree-dnd";
+export {
+  TreeDndPlugin
+};
+//# sourceMappingURL=TreeDndPlugin.js.map

package/dist/esm/plugins/dnd/TreeDndPlugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/dnd/TreeDndPlugin.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const TreeDndPlugin = 'tree-dnd';\n"],
+  "mappings": "AAAA;ACAO,MAAM,gBAAgB;",
+  "names": []
+}

package/dist/esm/plugins/dnd/index.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+export * from "./TreeDndPlugin";
+//# sourceMappingURL=index.js.map

package/dist/esm/plugins/dnd/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/dnd/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TreeDndPlugin';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/dist/esm/plugins/index.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+export * from "./dnd";
+export * from "./roving";
+export * from "./selectable";
+export * from "./toolbar";
+export * from "./tree";
+export * from "./virtualization";
+export * from "./searchable";
+//# sourceMappingURL=index.js.map

package/dist/esm/plugins/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/plugins/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './dnd';\nexport * from './roving';\nexport * from './selectable';\nexport * from './toolbar';\nexport * from './tree';\nexport * from './virtualization';\nexport * from './searchable';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;",
+  "names": []
+}