@elliemae/ds-treeview 3.0.0-next.1 → 3.0.0-next.13

package/dist/cjs/hoc/WithConditionalDnDContext.js

@@ -0,0 +1,150 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+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 WithConditionalDnDContext_exports = {};
+__export(WithConditionalDnDContext_exports, {
+  withConditionalDnDRowContext: () => withConditionalDnDRowContext
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
+var import_TreeViewContext = __toESM(require("../TreeViewContext"));
+var import_TreeItem = require("../parts/TreeItem");
+var import_DnDTreeContext = require("./DnDTreeContext");
+var import_SortableItemContext = require("./SortableItemContext");
+var import_group_expands_helpers = require("../utils/group-expands-helpers");
+const ensure = (argument, message = "This should never happen") => {
+  if (argument === void 0 || argument === null) {
+    throw new TypeError(message);
+  }
+  return argument;
+};
+const withConditionalDnDRowContext = (Component) => (props) => {
+  const {
+    props: { data, onOrderChange, getIsDropValid },
+    flattenedItems,
+    updateUserExpandedState,
+    triggerTreeRerender,
+    visibleItems: flattenedVisibleTree,
+    withDragAndDrop
+  } = (0, import_react.useContext)(import_TreeViewContext.default);
+  const flattenedVisibleTreeForDnD = (0, import_react.useMemo)(() => flattenedVisibleTree.map((item, index) => ({
+    uid: item.id.toString(),
+    depth: (item.treeDepth ?? 1) - 1,
+    realIndex: index,
+    childrenCount: item.children?.length ?? 0,
+    parentId: item.node.parent?.model?.id?.toString() ?? null,
+    original: item
+  })), [flattenedVisibleTree]);
+  const onReorder = (0, import_react.useCallback)((tree, indexes) => {
+    const nodes = {};
+    tree.forEach((item) => {
+      const originalItem = item.original;
+      originalItem.children = [];
+      nodes[item.uid] = item.original;
+    });
+    const newUserTree = [];
+    tree.forEach((item) => {
+      if (item.parentId !== null && item.parentId !== void 0 && item.parentId !== "__ds_tree_root") {
+        const parentNode = nodes[item.parentId];
+        parentNode.children?.push(item.original);
+      } else if (item.uid !== "__ds_tree_root")
+        newUserTree.push(item.original);
+    });
+    onOrderChange(newUserTree, data, flattenedItems[indexes.fromIndex]);
+  }, [onOrderChange, data, flattenedItems]);
+  const {
+    dndContextProps,
+    sortableContextProps,
+    activeId,
+    activeIndex,
+    depth,
+    dropIndicatorPosition,
+    visibleItems,
+    isDropValid,
+    overId
+  } = (0, import_ds_drag_and_drop.useTreeDndkitConfig)({
+    flattenedItems,
+    visibleItems: flattenedVisibleTreeForDnD,
+    isHorizontalDnD: false,
+    isExpandable: true,
+    onReorder,
+    getIsDropValid,
+    maxDragAndDropLevel: Infinity
+  });
+  const timeoutRef = (0, import_react.useRef)();
+  (0, import_react.useEffect)(() => {
+    if (timeoutRef.current)
+      clearTimeout(timeoutRef.current);
+    if (dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.Inside && overId) {
+      timeoutRef.current = setTimeout(() => {
+        const overItem = visibleItems.find((item) => item.uid === overId);
+        if (overItem) {
+          const realOverItem = overItem.original;
+          if (realOverItem.isGroup && !realOverItem.isExpanded) {
+            (0, import_group_expands_helpers.toggleItemExpand)(realOverItem, triggerTreeRerender, updateUserExpandedState);
+          }
+        }
+      }, 1e3);
+    }
+  }, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);
+  if (withDragAndDrop)
+    return /* @__PURE__ */ import_react.default.createElement(import_core.DndContext, __spreadValues({}, dndContextProps), /* @__PURE__ */ import_react.default.createElement(import_sortable.SortableContext, __spreadValues({}, sortableContextProps), /* @__PURE__ */ import_react.default.createElement(import_DnDTreeContext.DnDTreeContext.Provider, {
+      value: {
+        activeIndex,
+        depth,
+        visibleItems: visibleItems.map((item) => item.original),
+        dropIndicatorPosition,
+        isDropValid
+      }
+    }, /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({}, props)))), /* @__PURE__ */ import_react.default.createElement(import_core.DragOverlay, {
+      style: { width: "auto" }
+    }, activeId ? /* @__PURE__ */ import_react.default.createElement(import_TreeItem.TreeItem, {
+      itemIndex: activeIndex,
+      item: ensure(flattenedVisibleTree.find((item) => item.id.toString() === activeId)),
+      isDragOverlay: true
+    }) : null));
+  return /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({}, props));
+};
+module.exports = __toCommonJS(WithConditionalDnDContext_exports);
+//# sourceMappingURL=WithConditionalDnDContext.js.map

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, useEffect, useMemo, useRef } 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';\nimport { DropIndicatorPosition } from './SortableItemContext';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\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 {\n    props: { data, onOrderChange, getIsDropValid },\n    flattenedItems,\n    updateUserExpandedState,\n    triggerTreeRerender,\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    overId,\n  } = useTreeDndkitConfig({\n    flattenedItems,\n    visibleItems: flattenedVisibleTreeForDnD,\n    isHorizontalDnD: false,\n    isExpandable: true,\n    onReorder,\n    getIsDropValid,\n    maxDragAndDropLevel: Infinity,\n  });\n\n  const timeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    if (dropIndicatorPosition === DropIndicatorPosition.Inside && overId) {\n      timeoutRef.current = setTimeout(() => {\n        const overItem = visibleItems.find((item) => item.uid === overId);\n        if (overItem) {\n          const realOverItem = overItem.original as DSTreeviewT.Item;\n          if (realOverItem.isGroup && !realOverItem.isExpanded) {\n            toggleItemExpand(realOverItem, triggerTreeRerender, updateUserExpandedState);\n          }\n        }\n      }, 1000);\n    }\n  }, [overId, dropIndicatorPosition, triggerTreeRerender, visibleItems, updateUserExpandedState]);\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              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": "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",
+  "names": []
+}

package/dist/cjs/hoc/WithDnDSortableItemContext.js

@@ -0,0 +1,81 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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, 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 __spreadProps(__spreadValues({}, useSortableHelpers), {
+      shouldShowDropIndicatorPosition: overIndex === index,
+      dropIndicatorPosition,
+      isDropValid
+    });
+  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, 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, __spreadValues({}, 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, 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      isDropValid,\n    };\n  }, [withDragAndDrop, useSortableHelpers, dropIndicatorPosition, 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,gBAAgB,6BAAW;AAE1D,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,iCACF,qBADE;AAAA,MAEL,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA;AAAA,KAED,CAAC,iBAAiB,oBAAoB,uBAAuB;AAKhE,QAAM,MAA+B,0BACnC,MAAO;AAAA,IACL;AAAA,MAEF,CAAC;AAGH,SACE,mDAAC,+CAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KACnC,mDAAC,WAAD,mBAAe;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,111 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+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)(__spreadValues(__spreadValues({}, 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,kCAAK,qBAAuB,gBAC5B,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,71 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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, __spreadProps(__spreadValues({
+    role: "button"
+  }, draggableProps && __spreadValues(__spreadValues({}, 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: isDragging ? ["neutral", "080"] : ["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\ninterface DnDHandleProps {\n  id: DSTreeviewT.StringOrNum;\n  isDragOverlay: boolean;\n}\n\nexport const DnDHandle = ({ id, isDragOverlay }: DnDHandleProps) => {\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={isDragging ? ['neutral', '080'] : ['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;AAQ7B,MAAM,YAAY,CAAC,EAAE,IAAI,oBAAoC;AAClE,QAAM,EAAE,mBAAmB,6BAAW;AAEtC,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,mDAAC,iCAAD;AAAA,IACE,MAAK;AAAA,KACA,kBAAkB,kCAClB,eAAe,YACf,eAAe,cAJtB;AAAA,IAME,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,aAAa,CAAC,WAAW,SAAS,CAAC,iBAAiB;AAAA,IAC3D,MAAK;AAAA,IACL,UAAU;AAAA;AAAA;",
+  "names": []
+}