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

package/dist/cjs/hoc/WithConditionalDnDContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hoc/WithConditionalDnDContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback, useContext, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { SortableContext } from '@dnd-kit/sortable';\nimport { useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { DSTreeviewT } from '../react-desc-prop-types';\nimport TreeViewContext from '../TreeViewContext';\nimport { TreeItem } from '../parts/TreeItem';\nimport { DnDTreeContext } from './DnDTreeContext';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nconst ensure = <T,>(argument: T | undefined | null, message = 'This should never happen'): T => {\n  if (argument === undefined || argument === null) {\n    throw new TypeError(message);\n  }\n\n  return argument;\n};\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const [lastActiveId, setLastActiveId] = React.useState('');\n\n  const {\n    props: { data, onOrderChange, getIsDropValid },\n    flattenedItems,\n    visibleItems: flattenedVisibleTree,\n    withDragAndDrop,\n  } = useContext(TreeViewContext);\n\n  const flattenedVisibleTreeForDnD = useMemo(\n    () =>\n      flattenedVisibleTree.map((item, index) => ({\n        uid: item.id.toString(),\n        depth: (item.treeDepth ?? 1) - 1,\n        realIndex: index,\n        childrenCount: item.children?.length ?? 0,\n        parentId: item.node.parent?.model?.id?.toString() ?? null,\n        original: item,\n      })),\n    [flattenedVisibleTree],\n  );\n\n  const onReorder = useCallback(\n    (tree: DSTreeviewT.DndItem[], indexes: { targetIndex: number; fromIndex: number }) => {\n      // Pull the row's original data into an object\n      const nodes: Record<DSTreeviewT.StringOrNum, DSTreeviewT.SimpleItem> = {};\n      tree.forEach((item) => {\n        const originalItem = item.original;\n        originalItem.children = [];\n        nodes[item.uid] = item.original;\n      });\n\n      const newUserTree: DSTreeviewT.SimpleItem[] = [];\n      tree.forEach((item) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (item.parentId !== null && item.parentId !== undefined && item.parentId !== '__ds_tree_root') {\n          const parentNode = nodes[item.parentId];\n          parentNode.children?.push(item.original);\n        } else if (item.uid !== '__ds_tree_root') newUserTree.push(item.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);\n    },\n    [onOrderChange, data, flattenedItems],\n  );\n\n  const {\n    dndContextProps,\n    sortableContextProps,\n    activeId,\n    activeIndex,\n    depth,\n    dropIndicatorPosition,\n    visibleItems,\n    isDropValid,\n  } = useTreeDndkitConfig({\n    flattenedItems,\n    visibleItems: flattenedVisibleTreeForDnD,\n    isHorizontalDnD: false,\n    isExpandable: true,\n    onReorder,\n    getIsDropValid,\n    maxDragAndDropLevel: Infinity,\n  });\n\n  if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);\n\n  if (withDragAndDrop)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider\n            value={{\n              activeIndex,\n              depth,\n              visibleItems: visibleItems.map((item) => item.original) as DSTreeviewT.Item[],\n              dropIndicatorPosition,\n              lastActiveId,\n              setLastActiveId,\n              isDropValid,\n            }}\n          >\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        <DragOverlay style={{ width: 'auto' }}>\n          {activeId ? (\n            <TreeItem\n              itemIndex={activeIndex}\n              item={ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId))}\n              isDragOverlay\n            />\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,kBAAwC;AACxC,sBAAgC;AAChC,8BAAoC;AAEpC,6BAA4B;AAC5B,sBAAyB;AACzB,4BAA+B;AAI/B,MAAM,SAAS,CAAK,UAAgC,UAAU,+BAAkC;AAC9F,MAAI,aAAa,UAAa,aAAa,MAAM;AAC/C,UAAM,IAAI,UAAU;AAAA;AAGtB,SAAO;AAAA;AAIF,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM,CAAC,cAAc,mBAAmB,qBAAM,SAAS;AAEvD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,eAAe;AAAA,IAC9B;AAAA,IACA,cAAc;AAAA,IACd;AAAA,MACE,6BAAW;AAEf,QAAM,6BAA6B,0BACjC,MACE,qBAAqB,IAAI,CAAC,MAAM,UAAW;AAAA,IACzC,KAAK,KAAK,GAAG;AAAA,IACb,OAAQ,MAAK,aAAa,KAAK;AAAA,IAC/B,WAAW;AAAA,IACX,eAAe,KAAK,UAAU,UAAU;AAAA,IACxC,UAAU,KAAK,KAAK,QAAQ,OAAO,IAAI,cAAc;AAAA,IACrD,UAAU;AAAA,OAEd,CAAC;AAGH,QAAM,YAAY,8BAChB,CAAC,MAA6B,YAAwD;AAEpF,UAAM,QAAiE;AACvE,SAAK,QAAQ,CAAC,SAAS;AACrB,YAAM,eAAe,KAAK;AAC1B,mBAAa,WAAW;AACxB,YAAM,KAAK,OAAO,KAAK;AAAA;AAGzB,UAAM,cAAwC;AAC9C,SAAK,QAAQ,CAAC,SAAS;AAGrB,UAAI,KAAK,aAAa,QAAQ,KAAK,aAAa,UAAa,KAAK,aAAa,kBAAkB;AAC/F,cAAM,aAAa,MAAM,KAAK;AAC9B,mBAAW,UAAU,KAAK,KAAK;AAAA,iBACtB,KAAK,QAAQ;AAAkB,oBAAY,KAAK,KAAK;AAAA;AAGlE,kBAAc,aAAa,MAAM,eAAe,QAAQ;AAAA,KAE1D,CAAC,eAAe,MAAM;AAGxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,iDAAoB;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA;AAGvB,MAAI,iBAAiB,YAAY;AAAU,oBAAgB;AAE3D,MAAI;AACF,WACE,mDAAC,wBAAD;AAAA,SAAgB;AAAA,OACd,mDAAC,iCAAD;AAAA,SAAqB;AAAA,OACnB,mDAAC,qCAAe,UAAhB;AAAA,MACE,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,cAAc,aAAa,IAAI,CAAC,SAAS,KAAK;AAAA,QAC9C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,OAGF,mDAAC,WAAD;AAAA,SAAe;AAAA,UAGnB,mDAAC,yBAAD;AAAA,MAAa,OAAO,EAAE,OAAO;AAAA,OAC1B,WACC,mDAAC,0BAAD;AAAA,MACE,WAAW;AAAA,MACX,MAAM,OAAO,qBAAqB,KAAK,CAAC,SAAS,KAAK,GAAG,eAAe;AAAA,MACxE,eAAa;AAAA,SAEb;AAIZ,SAAO,mDAAC,WAAD;AAAA,OAAe;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/hoc/WithDnDSortableItemContext.js

@@ -0,0 +1,69 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var WithDnDSortableItemContext_exports = {};
+__export(WithDnDSortableItemContext_exports, {
+  withDnDSortableItemContext: () => withDnDSortableItemContext
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_sortable = require("@dnd-kit/sortable");
+var import_SortableItemContext = require("./SortableItemContext");
+var import_TreeViewContext = __toESM(require("../TreeViewContext"));
+var import_DnDTreeContext = require("./DnDTreeContext");
+const withDnDSortableItemContext = (Component) => (props) => {
+  const { withDragAndDrop } = (0, import_react.useContext)(import_TreeViewContext.default);
+  const { dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid } = (0, import_react.useContext)(import_DnDTreeContext.DnDTreeContext);
+  const id = props.item.id.toString();
+  const draggableOptions = (0, import_react.useMemo)(() => ({
+    id
+  }), [id]);
+  const useSortableHelpers = (0, import_sortable.useSortable)(draggableOptions);
+  const draggableProps = (0, import_react.useMemo)(() => {
+    if (!withDragAndDrop)
+      return false;
+    const { index, overIndex } = useSortableHelpers;
+    return {
+      ...useSortableHelpers,
+      shouldShowDropIndicatorPosition: overIndex === index,
+      dropIndicatorPosition,
+      lastActiveId,
+      setLastActiveId,
+      isDropValid
+    };
+  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid]);
+  const ctx = (0, import_react.useMemo)(() => ({
+    draggableProps
+  }), [draggableProps]);
+  return /* @__PURE__ */ import_react.default.createElement(import_SortableItemContext.SortableItemContext.Provider, {
+    value: ctx
+  }, /* @__PURE__ */ import_react.default.createElement(Component, {
+    ...props
+  }));
+};
+module.exports = __toCommonJS(WithDnDSortableItemContext_exports);
+//# sourceMappingURL=WithDnDSortableItemContext.js.map

package/dist/cjs/hoc/WithDnDSortableItemContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hoc/WithDnDSortableItemContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { SortableItemContext, SortableItemContextType } from './SortableItemContext';\nimport TreeViewContext from '../TreeViewContext';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\ntype FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => (props: T) => JSX.Element;\n\nexport const withDnDSortableItemContext: FunctionalHOC = (Component) => (props: any) => {\n  const { withDragAndDrop } = useContext(TreeViewContext);\n  const { dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid } = useContext(DnDTreeContext);\n\n  const id = (props as { item: DSTreeviewT.Item }).item.id.toString();\n\n  // onMount generate unique options, so everyting is only ran once\n  const draggableOptions = useMemo(\n    () => ({\n      id,\n    }),\n    [id],\n  );\n\n  const useSortableHelpers = useSortable(draggableOptions);\n\n  // calculate all the \"useSortable\" values as per required\n  const draggableProps = useMemo(() => {\n    if (!withDragAndDrop) return false;\n\n    const { index, overIndex } = useSortableHelpers;\n\n    return {\n      ...useSortableHelpers,\n      shouldShowDropIndicatorPosition: overIndex === index,\n      dropIndicatorPosition,\n      lastActiveId,\n      setLastActiveId,\n      isDropValid,\n    };\n  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId, isDropValid]);\n\n  // we use a context so we can easly access information wherever without bubbling down\n  // this context is all Memoized so as long as component is not re-mounted,\n  // the context won't trigger un-required renders per-se...\n  const ctx: SortableItemContextType = useMemo(\n    () => ({\n      draggableProps,\n    }),\n    [draggableProps],\n  );\n  // we always add the context, if draggableProps===false we don't have the DnD enabled.\n  return (\n    <SortableItemContext.Provider value={ctx}>\n      <Component {...props} />\n    </SortableItemContext.Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAA2C;AAC3C,sBAA4B;AAC5B,iCAA6D;AAC7D,6BAA4B;AAC5B,4BAA+B;AAKxB,MAAM,6BAA4C,CAAC,cAAc,CAAC,UAAe;AACtF,QAAM,EAAE,oBAAoB,6BAAW;AACvC,QAAM,EAAE,uBAAuB,cAAc,iBAAiB,gBAAgB,6BAAW;AAEzF,QAAM,KAAM,MAAqC,KAAK,GAAG;AAGzD,QAAM,mBAAmB,0BACvB,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,QAAM,qBAAqB,iCAAY;AAGvC,QAAM,iBAAiB,0BAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,cAAc;AAE7B,WAAO;AAAA,SACF;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,KAED,CAAC,iBAAiB,oBAAoB,uBAAuB,cAAc,iBAAiB;AAK/F,QAAM,MAA+B,0BACnC,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,SACE,mDAAC,+CAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KACnC,mDAAC,WAAD;AAAA,OAAe;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,37 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var src_exports = {};
+__export(src_exports, {
+  TreeViewSearchBar: () => import_TreeViewSearchBar.TreeViewSearchBar
+});
+var React = __toESM(require("react"));
+__reExport(src_exports, require("./TreeView"));
+__reExport(src_exports, require("./plugins"));
+var import_TreeViewSearchBar = require("./related-components/TreeViewSearchBar");
+module.exports = __toCommonJS(src_exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './TreeView';\nexport * from './plugins';\n\nexport { TreeViewSearchBar } from './related-components/TreeViewSearchBar';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,wBAAc;AAEd,+BAAkC;",
+  "names": []
+}

package/dist/cjs/parts/CheckboxSelectable.js

@@ -0,0 +1,97 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var CheckboxSelectable_exports = {};
+__export(CheckboxSelectable_exports, {
+  default: () => CheckboxSelectable_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_form = require("@elliemae/ds-form");
+var import_styled_components = __toESM(require("styled-components"));
+var import_TreeViewContext = __toESM(require("../TreeViewContext"));
+var import_selectable_helper = require("../utils/selectable-helper");
+var import_object_helpers = require("../utils/object-helpers");
+const StyledCheckboxWrapper = import_styled_components.default.span`
+  padding-top: 3px;
+`;
+function CheckboxSelectable(props) {
+  const { item, itemIndex } = props;
+  const { id } = item;
+  const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
+  const {
+    props: { onSelectionChange, isItemDisabled },
+    virtualListHelpers: { scrollToIndex },
+    triggerTreeRerender,
+    selectedCheckboxes,
+    setSelectedCheckboxes
+  } = ctx;
+  const onCheckboxChange = (0, import_react.useCallback)(() => {
+    const newSelections = (0, import_selectable_helper.toggleCheckboxItem)(item);
+    const newSelectionHasmap = (0, import_object_helpers.filterObject)({ ...selectedCheckboxes, ...newSelections }, (value) => value !== false);
+    setSelectedCheckboxes(newSelectionHasmap);
+    triggerTreeRerender();
+    const indexAndScrollTo = {
+      scrollToItem: () => {
+        if (typeof item.virtualIndex === "number")
+          scrollToIndex(item.virtualIndex);
+      },
+      itemIndex
+    };
+    if (onSelectionChange)
+      onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
+  }, [
+    item,
+    triggerTreeRerender,
+    onSelectionChange,
+    itemIndex,
+    scrollToIndex,
+    selectedCheckboxes,
+    setSelectedCheckboxes
+  ]);
+  const isChecked = (0, import_react.useMemo)(() => {
+    if (selectedCheckboxes[id] === "mixed") {
+      return "mixed";
+    }
+    if (selectedCheckboxes[id] === true) {
+      return true;
+    }
+    return false;
+  }, [selectedCheckboxes, id]);
+  const isDisabled = (0, import_react.useMemo)(() => isItemDisabled(item), [item, isItemDisabled]);
+  return /* @__PURE__ */ import_react.default.createElement(StyledCheckboxWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSCheckbox, {
+    checked: isChecked,
+    disabled: isDisabled,
+    className: "em-ds-tree-item-checkbox",
+    "data-testid": "tree-item-checkbox",
+    onChange: onCheckboxChange,
+    tabIndex: "0"
+  }));
+}
+var CheckboxSelectable_default = CheckboxSelectable;
+module.exports = __toCommonJS(CheckboxSelectable_exports);
+//# sourceMappingURL=CheckboxSelectable.js.map

package/dist/cjs/parts/CheckboxSelectable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/CheckboxSelectable.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport styled from 'styled-components';\nimport TreeViewContext from '../TreeViewContext';\nimport { toggleCheckboxItem } from '../utils/selectable-helper';\nimport { filterObject } from '../utils/object-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nconst StyledCheckboxWrapper = styled.span`\n  padding-top: 3px;\n`;\ninterface PropsT {\n  item: DSTreeviewT.Item;\n  itemIndex: number;\n}\nfunction CheckboxSelectable(props: PropsT): JSX.Element | null {\n  const { item, itemIndex } = props;\n  const { id } = item;\n\n  const ctx = useContext(TreeViewContext);\n  const {\n    props: { onSelectionChange, isItemDisabled },\n    virtualListHelpers: { scrollToIndex },\n    triggerTreeRerender,\n    selectedCheckboxes,\n    setSelectedCheckboxes,\n  } = ctx;\n\n  const onCheckboxChange = useCallback(() => {\n    const newSelections = toggleCheckboxItem(item);\n    const newSelectionHasmap = filterObject<DSTreeviewT.SelectionState>(\n      { ...selectedCheckboxes, ...newSelections },\n      (value) => value !== false,\n    );\n    setSelectedCheckboxes(newSelectionHasmap);\n    triggerTreeRerender();\n\n    const indexAndScrollTo = {\n      scrollToItem: () => {\n        if (typeof item.virtualIndex === 'number') scrollToIndex(item.virtualIndex);\n      },\n      itemIndex,\n    };\n    if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n  }, [\n    item,\n    triggerTreeRerender,\n    onSelectionChange,\n    itemIndex,\n    scrollToIndex,\n    selectedCheckboxes,\n    setSelectedCheckboxes,\n  ]);\n  const isChecked = useMemo(() => {\n    if (selectedCheckboxes[id] === 'mixed') {\n      return 'mixed' as const;\n    }\n    if (selectedCheckboxes[id] === true) {\n      return true;\n    }\n    return false;\n  }, [selectedCheckboxes, id]);\n\n  const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n  return (\n    <StyledCheckboxWrapper>\n      <DSCheckbox\n        checked={isChecked}\n        disabled={isDisabled}\n        className=\"em-ds-tree-item-checkbox\"\n        data-testid=\"tree-item-checkbox\"\n        onChange={onCheckboxChange}\n        tabIndex=\"0\"\n      />\n    </StyledCheckboxWrapper>\n  );\n}\n\nexport default CheckboxSelectable;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,qBAA2B;AAC3B,+BAAmB;AACnB,6BAA4B;AAC5B,+BAAmC;AACnC,4BAA6B;AAE7B,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAOrC,4BAA4B,OAAmC;AAC7D,QAAM,EAAE,MAAM,cAAc;AAC5B,QAAM,EAAE,OAAO;AAEf,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB;AAAA,IAC5B,oBAAoB,EAAE;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,mBAAmB,8BAAY,MAAM;AACzC,UAAM,gBAAgB,iDAAmB;AACzC,UAAM,qBAAqB,wCACzB,KAAK,uBAAuB,iBAC5B,CAAC,UAAU,UAAU;AAEvB,0BAAsB;AACtB;AAEA,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,OAAO,KAAK,iBAAiB;AAAU,wBAAc,KAAK;AAAA;AAAA,MAEhE;AAAA;AAEF,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM;AAAA,KAClE;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEF,QAAM,YAAY,0BAAQ,MAAM;AAC9B,QAAI,mBAAmB,QAAQ,SAAS;AACtC,aAAO;AAAA;AAET,QAAI,mBAAmB,QAAQ,MAAM;AACnC,aAAO;AAAA;AAET,WAAO;AAAA,KACN,CAAC,oBAAoB;AAExB,QAAM,aAAa,0BAAQ,MAAM,eAAe,OAAO,CAAC,MAAM;AAE9D,SACE,mDAAC,uBAAD,MACE,mDAAC,2BAAD;AAAA,IACE,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAS;AAAA;AAAA;AAMjB,IAAO,6BAAQ;",
+  "names": []
+}

package/dist/cjs/parts/ChildrenCountDisplayer.js

@@ -0,0 +1,47 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var ChildrenCountDisplayer_exports = {};
+__export(ChildrenCountDisplayer_exports, {
+  ChildrenCountDisplayer: () => ChildrenCountDisplayer
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_cssClassesConstants = require("../config/cssClassesConstants");
+const className = `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}-children-count-displayer`;
+const ChildrenCountDisplayer = (props) => {
+  const { item } = props;
+  const { isGroup, children } = item;
+  if (!isGroup)
+    return null;
+  return /* @__PURE__ */ import_react.default.createElement("span", {
+    "data-testid": "tree-item-children-count-displayer",
+    className
+  }, ` | ${children.length} Items`);
+};
+module.exports = __toCommonJS(ChildrenCountDisplayer_exports);
+//# sourceMappingURL=ChildrenCountDisplayer.js.map

package/dist/cjs/parts/ChildrenCountDisplayer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/ChildrenCountDisplayer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n  item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer = (props: PropsT): JSX.Element | null => {\n  const { item } = props;\n  const { isGroup, children } = item;\n\n  if (!isGroup) return null;\n  // return ` | ${children.length} Items`;\n  return (\n    <span data-testid=\"tree-item-children-count-displayer\" className={className}>{` | ${children.length} Items`}</span>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,iCAAoD;AAGpD,MAAM,YAAY,GAAG,+CAAoB;AAMlC,MAAM,yBAAyB,CAAC,UAAsC;AAC3E,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,SAAS,aAAa;AAE9B,MAAI,CAAC;AAAS,WAAO;AAErB,SACE,mDAAC,QAAD;AAAA,IAAM,eAAY;AAAA,IAAqC;AAAA,KAAuB,MAAM,SAAS;AAAA;",
+  "names": []
+}

package/dist/cjs/parts/DnDHandle.js

@@ -0,0 +1,57 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var DnDHandle_exports = {};
+__export(DnDHandle_exports, {
+  DnDHandle: () => DnDHandle
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_SortableItemContext = require("../hoc/SortableItemContext");
+const DnDHandle = ({ id, isDragOverlay }) => {
+  const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
+  const isDragging = draggableProps && draggableProps.isDragging;
+  return /* @__PURE__ */ import_react.default.createElement(import_ds_icons.GripperVertical, {
+    role: "button",
+    ...draggableProps && {
+      ...draggableProps.listeners,
+      ...draggableProps.attributes
+    },
+    "data-testid": "drag-handle",
+    "data-isactive": draggableProps && !!draggableProps.active,
+    "data-isdragoverlay": isDragOverlay,
+    id: `${id}-drag-handle`,
+    key: `${id}-drag-handle`,
+    className: `drag-handle ${isDragging ? "" : "focuseable"}`,
+    color: ["brand-primary", "800"],
+    size: "s",
+    tabIndex: 0
+  });
+};
+module.exports = __toCommonJS(DnDHandle_exports);
+//# sourceMappingURL=DnDHandle.js.map

package/dist/cjs/parts/DnDHandle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/DnDHandle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { SortableItemContext } from '../hoc/SortableItemContext';\nimport { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const DnDHandle = ({ id, isDragOverlay }: { id: DSTreeviewT.StringOrNum; isDragOverlay: boolean }) => {\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  return (\n    <GripperVertical\n      role=\"button\"\n      {...(draggableProps && {\n        ...draggableProps.listeners,\n        ...draggableProps.attributes,\n      })}\n      data-testid=\"drag-handle\"\n      data-isactive={draggableProps && !!draggableProps.active}\n      data-isdragoverlay={isDragOverlay}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n      className={`drag-handle ${isDragging ? '' : 'focuseable'}`}\n      color={['brand-primary', '800']}\n      size=\"s\"\n      tabIndex={0}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,sBAAgC;AAChC,iCAAoC;AAG7B,MAAM,YAAY,CAAC,EAAE,IAAI,oBAA6E;AAC3G,QAAM,EAAE,mBAAmB,6BAAW;AAEtC,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,mDAAC,iCAAD;AAAA,IACE,MAAK;AAAA,OACA,kBAAkB;AAAA,SAClB,eAAe;AAAA,SACf,eAAe;AAAA;AAAA,IAEpB,eAAY;AAAA,IACZ,iBAAe,kBAAkB,CAAC,CAAC,eAAe;AAAA,IAClD,sBAAoB;AAAA,IACpB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,IACR,WAAW,eAAe,aAAa,KAAK;AAAA,IAC5C,OAAO,CAAC,iBAAiB;AAAA,IACzB,MAAK;AAAA,IACL,UAAU;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/parts/DropIndicator.js

@@ -0,0 +1,80 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var DropIndicator_exports = {};
+__export(DropIndicator_exports, {
+  default: () => DropIndicator_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_SortableItemContext = require("../hoc/SortableItemContext");
+const getPositionStyles = ({ dropIndicatorPosition }) => `
+      top: ${dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.Before ? "0" : "unset"};
+      bottom: ${dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.After ? "0" : "unset"};
+      left: -2px;
+    `;
+const getCircleStyles = ({ dropIndicatorPosition }) => ({
+  position: "absolute",
+  zIndex: 20,
+  top: dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.After ? "unset" : "-2px",
+  bottom: dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.Before ? "unset" : "-2px",
+  left: "0px",
+  opacity: 1
+});
+const StyledIndicator = import_styled_components.default.div`
+  position: absolute;
+  ${getPositionStyles}
+  box-sizing: border-box;
+  width: ${(props) => props.vertical ? "2px" : "100%"};
+  height: ${(props) => props.vertical ? "100%" : "2px"};
+  background-color: ${({ isDropValid, theme }) => isDropValid ? theme.colors.brand[600] : theme.colors.danger[900]};
+  z-index: 20;
+`;
+const CircleIndicator = (style, isDropValid) => /* @__PURE__ */ import_react.default.createElement("svg", {
+  height: "6",
+  width: "6",
+  style
+}, /* @__PURE__ */ import_react.default.createElement("circle", {
+  cx: "3",
+  cy: "3",
+  r: "3",
+  strokeWidth: "0",
+  fill: isDropValid ? "#1E79C2" : "#C64252"
+}));
+const DropIndicator = ({ dropIndicatorPosition, isLast, isDropValid }) => {
+  if (![import_SortableItemContext.DropIndicatorPosition.After, import_SortableItemContext.DropIndicatorPosition.Before].includes(dropIndicatorPosition))
+    return null;
+  const safeDropIndicatorPosition = isLast ? import_SortableItemContext.DropIndicatorPosition.Before : dropIndicatorPosition;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, CircleIndicator(getCircleStyles({ dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid), /* @__PURE__ */ import_react.default.createElement(StyledIndicator, {
+    dropIndicatorPosition: safeDropIndicatorPosition,
+    isDropValid
+  }));
+};
+var DropIndicator_default = DropIndicator;
+module.exports = __toCommonJS(DropIndicator_exports);
+//# sourceMappingURL=DropIndicator.js.map

package/dist/cjs/parts/DropIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/DropIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport { DropIndicatorPosition } from '../hoc/SortableItemContext';\n\ninterface DropIndicatorProps {\n  vertical?: boolean;\n  dropIndicatorPosition: DropIndicatorPosition | false;\n  isLast?: boolean;\n  isDropValid?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n      left: -2px;\n    `;\n\nconst getCircleStyles = ({ dropIndicatorPosition }: DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: 20,\n  top: dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: '0px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n  z-index: 20;\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean | null | undefined) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = ({ dropIndicatorPosition, isLast, isDropValid }) => {\n  if (\n    ![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(\n      dropIndicatorPosition as DropIndicatorPosition,\n    )\n  )\n    return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator dropIndicatorPosition={safeDropIndicatorPosition} isDropValid={isDropValid} />\n    </>\n  );\n};\n\nexport default DropIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AACnB,iCAAsC;AAStC,MAAM,oBAAoB,CAAC,EAAE,4BAAgD;AAAA,aAChE,0BAA0B,iDAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,iDAAsB,QAAQ,MAAM;AAAA;AAAA;AAI9E,MAAM,kBAAkB,CAAC,EAAE,4BAAiD;AAAA,EAC1E,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK,0BAA0B,iDAAsB,QAAQ,UAAU;AAAA,EACvE,QAAQ,0BAA0B,iDAAsB,SAAS,UAAU;AAAA,EAC3E,MAAM;AAAA,EACN,SAAS;AAAA;AAGX,MAAM,kBAAkB,iCAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,YAAa,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM,OAAO,OAAO;AAAA;AAAA;AAI/G,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,mDAAC,OAAD;AAAA,EAAK,QAAO;AAAA,EAAI,OAAM;AAAA,EAAI;AAAA,GACxB,mDAAC,UAAD;AAAA,EAAQ,IAAG;AAAA,EAAI,IAAG;AAAA,EAAI,GAAE;AAAA,EAAI,aAAY;AAAA,EAAI,MAAM,cAAc,YAAY;AAAA;AAIhF,MAAM,gBAAyD,CAAC,EAAE,uBAAuB,QAAQ,kBAAkB;AACjH,MACE,CAAC,CAAC,iDAAsB,OAAO,iDAAsB,QAAQ,SAC3D;AAGF,WAAO;AAET,QAAM,4BAA4B,SAAS,iDAAsB,SAAS;AAE1E,SACE,wFACG,gBAAgB,gBAAgB,EAAE,uBAAuB,8BAA8B,cACxF,mDAAC,iBAAD;AAAA,IAAiB,uBAAuB;AAAA,IAA2B;AAAA;AAAA;AAKzE,IAAO,wBAAQ;",
+  "names": []
+}

package/dist/cjs/parts/ExpandCaret.js

@@ -0,0 +1,96 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var ExpandCaret_exports = {};
+__export(ExpandCaret_exports, {
+  ExpandCaret: () => ExpandCaret
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_button = __toESM(require("@elliemae/ds-button"));
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_group_expands_helpers = require("../utils/group-expands-helpers");
+var import_tree_helpers = require("../utils/tree-helpers");
+var import_TreeViewContext = __toESM(require("../TreeViewContext"));
+const ExpandCaret = (props) => {
+  const defaultHandleExpandGroup = (0, import_react.useCallback)(import_group_expands_helpers.toggleItemExpand, []);
+  const { item } = props;
+  const { id, isExpanded, isGroup, children } = item;
+  const isGroupOrHasChildrens = isGroup || Array.isArray(children) && children.length > 0;
+  const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
+  const {
+    props: { onItemFocus },
+    handleExpandGroup = defaultHandleExpandGroup,
+    triggerTreeRerender,
+    updateUserExpandedState,
+    setLatestToggledItem,
+    setFocusedItem,
+    virtualListHelpers: { scrollToIndex }
+  } = ctx;
+  if (isGroupOrHasChildrens)
+    return /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
+      buttonType: "text",
+      className: "expandable-arrow",
+      "data-testid": "tree-item-expand-toggle",
+      key: `${id}-expand-addon`,
+      icon: isExpanded ? /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadDown, {
+        size: "s",
+        "data-testid": "ic-arrow-head-down"
+      }) : /* @__PURE__ */ import_react.default.createElement(import_ds_icons.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);
+        (0, import_tree_helpers.focusItem)(item);
+      },
+      size: "s",
+      tabIndex: -1
+    });
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    style: { width: "24px" }
+  });
+};
+module.exports = __toCommonJS(ExpandCaret_exports);
+//# sourceMappingURL=ExpandCaret.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/ExpandCaret.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAC/C,uBAAmB;AACnB,sBAA8C;AAC9C,mCAAiC;AACjC,0BAA0B;AAC1B,6BAA4B;AAOrB,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,8BAAY,+CAAkB;AAC/D,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,aAAa;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,aAAa,SAAS,SAAS;AACvF,QAAM,MAAM,6BAAW;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,mDAAC,0BAAD;AAAA,MACE,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,KAAK,GAAG;AAAA,MACR,MACE,aACE,mDAAC,+BAAD;AAAA,QAAe,MAAK;AAAA,QAAI,eAAY;AAAA,WAEpC,mDAAC,gCAAD;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,2CAAU;AAAA;AAAA,MAEZ,MAAK;AAAA,MACL,UAAU;AAAA;AAGhB,SAAO,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA;AAAA;",
+  "names": []
+}